Get modal with embedded form working

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 (
       <Row minHeight='100%'>
-        <Row.Item grow>&nbsp;</Row.Item>
+        <Row.Item grow />
         <Row.Item width='450px'>
-          <form onSubmit={this.handleSubmit}>
+          <form onSubmit={this.handleSubmit} id='loginForm'>
             <Column minHeight='100%'>
               <Column.Item>
                 <Row>
@@ -131,7 +135,7 @@ export class Login extends React.Component {
                 <Row>
                   <Row.Item grow />
                   <Row.Item>
-                    <BoundButton name='submit' content='Login' submit binder={this.state.binder} />
+                    <BoundButton name='submit' content='Login' submit='loginForm' binder={this.state.binder} />
                   </Row.Item>
                 </Row>
               </Column.Item>
@@ -144,7 +148,7 @@ export class Login extends React.Component {
             </Column>
           </form>
         </Row.Item>
-        <Row.Item grow>&nbsp;</Row.Item>
+        <Row.Item grow />
 
         <WaitModal active={waitModal} message='Logging In' />
 

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 (
-      <Modal open={open} width={400} onCancel={onDismiss}>
-        <Row>
-          <Row.Item>
-            <Icon name={icon} size={150} />
-          </Row.Item>
-          <Row.Item grow>
-            <Column height='100%'>
-              <Column.Item height={15} />
-              <Column.Item grow>
-                <Text width='100%' align='center'>{message}</Text>
-              </Column.Item>
-              <Column.Item>
-                <Text width='100%' align='center' color='dimmed' size='small'>{detail}</Text>
-              </Column.Item>
-              <Column.Item height={15} />
-              <Column.Item height={sizeInfo.buttonHeight}>
-                <Row>
-                  <Row.Item grow />
-                  <Row.Item>
-                    <Button onClick={onDismiss}>OK</Button>
-                  </Row.Item>
-                  <Row.Item grow />
-                </Row>
-              </Column.Item>
-              <Column.Item height={15} />
-            </Column>
-          </Row.Item>
-          <Row.Item width={10} />
-        </Row>
+      <Modal open={open} width={400}>
+        <form onSubmit={this.onSubmit} id='messageModal'>
+          <Row>
+            <Row.Item>
+              <Icon name={icon} size={150} />
+            </Row.Item>
+            <Row.Item grow>
+              <Column height='100%'>
+                <Column.Item height={15} />
+                <Column.Item grow>
+                  <Text width='100%' align='center'>{message}</Text>
+                </Column.Item>
+                <Column.Item>
+                  <Text width='100%' align='center' color='dimmed' size='small'>{detail}</Text>
+                </Column.Item>
+                <Column.Item height={15} />
+                <Column.Item height={sizeInfo.buttonHeight}>
+                  <Row>
+                    <Row.Item grow />
+                    <Row.Item>
+                      <Button submit='messageModal' onClick={this.onSubmit}>OK</Button>
+                    </Row.Item>
+                    <Row.Item grow />
+                  </Row>
+                </Column.Item>
+                <Column.Item height={15} />
+              </Column>
+            </Row.Item>
+            <Row.Item width={10} />
+          </Row>
+        </form>
       </Modal>
     )
   }

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
   }
 

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 (
-      <button name={name} type={!visible ? 'hidden' : submit ? 'submit' : 'button'} disabled={disabled}
+      <button name={name} type={!visible ? 'hidden' : submit ? 'submit' : 'button'}
+        disabled={disabled} form={submit}
         style={[style.base, { minWidth: sizeInfo.minButtonWidth }]} onClick={onClick}>
         {children}
       </button>

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 (
-      <input name={name} type={!visible ? 'hidden' : password ? 'password' : 'text'} disabled={disabled}
+      <input name={name} value={value} type={!visible ? 'hidden' : password ? 'password' : 'text'} disabled={disabled}
         style={[ { width }, style.base ]} placeholder={placeholder} onChange={onChange} />
     )
   }

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