diff --git a/website/src/Auth/Login.js b/website/src/Auth/Login.js index 0ccee89..e037f05 100644 --- a/website/src/Auth/Login.js +++ b/website/src/Auth/Login.js @@ -71,12 +71,7 @@ export class Login extends React.Component { } } }).catch((error) => { - const elems = document.getElementsByName('email') - if (elems) { - elems[0].focus() - } this.setState({ - binder: new FormBinder({ email: this.state.binder.getFieldValue('email').value }, Login.bindings), waitModal: false, messageModal: { icon: 'hold', message: `Unable to login`, detail: error.message } }) @@ -85,7 +80,16 @@ export class Login extends React.Component { } handleMessageModalDismiss() { - this.setState({ messageModal: null }) + this.setState({ + messageModal: null, + binder: new FormBinder({ email: this.state.binder.getFieldValue('email') }, Login.bindings) + }) + + const elems = document.getElementsByName('password') + + if (elems) { + elems[0].focus() + } } render() { @@ -93,9 +97,9 @@ export class Login extends React.Component { return ( -   + -
+ @@ -131,7 +135,7 @@ export class Login extends React.Component { - + @@ -144,7 +148,7 @@ export class Login extends React.Component {
-   + diff --git a/website/src/Modal/MessageModal.js b/website/src/Modal/MessageModal.js index dc184e0..f9f185d 100644 --- a/website/src/Modal/MessageModal.js +++ b/website/src/Modal/MessageModal.js @@ -2,6 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Modal, Button, Column, Row, Text, Icon } from 'ui' import { sizeInfo } from 'ui/style' +import { reactAutoBind } from 'auto-bind2' export class MessageModal extends React.Component { static propTypes = { @@ -12,39 +13,57 @@ export class MessageModal extends React.Component { onDismiss: PropTypes.func } + constructor(props) { + super(props) + reactAutoBind(this) + } + + onSubmit(e) { + e.preventDefault() + e.stopPropagation() + + const { onDismiss } = this.props + + if (onDismiss) { + onDismiss() + } + } + render() { - const { onDismiss, open, icon, message, detail } = this.props + const { open, icon, message, detail } = this.props return ( - - - - - - - - - - {message} - - - {detail} - - - - - - - - - - - - - - - - + +
+ + + + + + + + + {message} + + + {detail} + + + + + + + + + + + + + + + + +
) } diff --git a/website/src/ui/BoundButton.js b/website/src/ui/BoundButton.js index 8fcfd69..8d9c593 100644 --- a/website/src/ui/BoundButton.js +++ b/website/src/ui/BoundButton.js @@ -8,7 +8,7 @@ export default class BoundButton extends React.Component { name: PropTypes.string.isRequired, content: PropTypes.string, binder: PropTypes.object.isRequired, - submit: PropTypes.bool, + submit: PropTypes.string, onClick: PropTypes.func } diff --git a/website/src/ui/Button.js b/website/src/ui/Button.js index 0b0edae..b6998e3 100644 --- a/website/src/ui/Button.js +++ b/website/src/ui/Button.js @@ -6,19 +6,25 @@ import { sizeInfo } from './style' class Button extends Component { static propTypes = { - submit: PropTypes.bool, children: PropTypes.node, visible: PropTypes.bool, disabled: PropTypes.bool, name: PropTypes.string, onClick: PropTypes.func, + submit: PropTypes.string, + } + + static defaultProps = { + visible: true, + disabled: false, } render() { const { name, children, submit, visible, disabled, onClick } = this.props return ( - diff --git a/website/src/ui/Input.js b/website/src/ui/Input.js index ca662f6..b00b097 100644 --- a/website/src/ui/Input.js +++ b/website/src/ui/Input.js @@ -12,15 +12,16 @@ class Input extends Component { visible: PropTypes.bool, disabled: PropTypes.bool, name: PropTypes.string, + value: PropTypes.string, } render() { - let { name, width, password, placeholder, onChange, visible, disabled } = this.props + let { name, width, password, placeholder, onChange, visible, disabled, value } = this.props width = width || '100%' return ( - ) } diff --git a/website/src/ui/Modal.js b/website/src/ui/Modal.js index 111cd9b..06b05c5 100644 --- a/website/src/ui/Modal.js +++ b/website/src/ui/Modal.js @@ -9,15 +9,12 @@ class Modal extends Component { children: PropTypes.node, open: PropTypes.bool, width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), - // TODO: onCancel: PropTypes.func <- for handling ESC & enter key } static defaultProps = { width: '60%', } - // TODO: Capture ESC key https://stackoverflow.com/questions/3369593/how-to-detect-escape-key-press-with-pure-js-or-jquery - render() { const { open, children, width } = this.props