p5.js-web-editor/client/modules/IDE/components/ErrorModal.jsx

72 lines
1.9 KiB
React
Raw Normal View History

import React, { PropTypes } from 'react';
import InlineSVG from 'react-inlinesvg';
import { Link } from 'react-router';
const exitUrl = require('../../../images/exit.svg');
class ErrorModal extends React.Component {
componentDidMount() {
this.errorModal.focus();
}
forceAuthentication() {
return (
<p>
In order to save sketches, you must be logged in. Please&nbsp;
<Link to="/login" onClick={this.props.closeModal}>Login</Link>
&nbsp;or&nbsp;
<Link to="/signup" onClick={this.props.closeModal}>Sign Up</Link>.
</p>
);
}
staleSession() {
return (
<p>
It looks like you&apos;ve been logged out. Please&nbsp;
<Link to="/login" onClick={this.props.closeModal}>log in</Link>.
</p>
);
}
staleProject() {
return (
<p>
The project you have attempted to save is out of date. Please refresh the page.
</p>
);
}
render() {
return (
<section className="error-modal" ref={(element) => { this.errorModal = element; }} tabIndex="0">
<header className="error-modal__header">
<h2 className="error-modal__title">Error</h2>
<button className="error-modal__exit-button" onClick={this.props.closeModal}>
<InlineSVG src={exitUrl} alt="Close Error Modal" />
</button>
</header>
<div className="error-modal__content">
{(() => { // eslint-disable-line
if (this.props.type === 'forceAuthentication') {
return this.forceAuthentication();
} else if (this.props.type === 'staleSession') {
return this.staleSession();
} else if (this.props.type === 'staleProject') {
return this.staleProject();
}
})()}
</div>
</section>
);
}
}
ErrorModal.propTypes = {
type: PropTypes.string.isRequired,
closeModal: PropTypes.func.isRequired
};
export default ErrorModal;