Modal dismiss working

website/src/Auth/Login.js

@@ -7,6 +7,7 @@ import { Image, Link, Text, Row, Column, BoundInput, BoundCheckbox, BoundButton
 import headerLogo from 'images/deighton.png'
 import { versionInfo } from '../version'
 import { FormBinder } from 'react-form-binder'
+import { reactAutoBind } from 'auto-bind2'
 
 export class Login extends React.Component {
   static propTypes = {
@@ -34,8 +35,7 @@ export class Login extends React.Component {
 
   constructor(props) {
     super(props)
-    this.handleSubmit = this.handleSubmit.bind(this)
-    this.handleMessageModalDismiss = this.handleMessageModalDismiss.bind(this)
+    reactAutoBind(this)
     this.state = {
       waitModal: false,
       messageModal: null,
@@ -88,6 +88,8 @@ export class Login extends React.Component {
   }
 
   render() {
+    const { messageModal, waitModal } = this.state
+
     return (
       <Row minHeight='100%'>
         <Row.Item grow>&nbsp;</Row.Item>
@@ -143,11 +145,11 @@ export class Login extends React.Component {
         </Row.Item>
         <Row.Item grow>&nbsp;</Row.Item>
 
-        <WaitModal active={this.state.waitModal} message='Logging In' />
+        <WaitModal active={waitModal} message='Logging In' />
 
-        <MessageModal error open={!!this.state.messageModal}
-          title={this.state.messageModal ? this.state.messageModal.title : ''}
-          message={this.state.messageModal ? this.state.messageModal.message : ''}
+        <MessageModal error open={!!messageModal}
+          title={messageModal ? messageModal.title : ''}
+          message={messageModal ? messageModal.message : ''}
           onDismiss={this.handleMessageModalDismiss} />
       </Row>
     )

website/src/Modal/MessageModal.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Modal, Button, Icon, Column, Text } from 'ui'
+import { Modal, Button, Column, Text } from 'ui'
 
 export class MessageModal extends React.Component {
   static propTypes = {
@@ -11,8 +11,10 @@ export class MessageModal extends React.Component {
   }
 
   render() {
+    const { onDismiss, open } = this.props
+
     return (
-      <Modal open={this.props.open} onClose={this.props.onDismiss} closeOnDimmerClick={false}>
+      <Modal open={open} onCancel={onDismiss}>
         <Column>
           <Column.Item>
             <Text>{this.props.title}</Text>
@@ -21,9 +23,7 @@ export class MessageModal extends React.Component {
             <Text>{this.props.message}</Text>
           </Column.Item>
           <Column.Item>
-            <Button onClick={this.props.onDismiss}>
-              <Icon name='checkmark' /> OK
-            </Button>
+            <Button onClick={onDismiss}>OK</Button>
           </Column.Item>
         </Column>
       </Modal>

website/src/ui/Button.js

@@ -10,15 +10,16 @@ class Button extends Component {
     width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
     visible: PropTypes.bool,
     disabled: PropTypes.bool,
-    name: PropTypes.name,
+    name: PropTypes.string,
+    onClick: PropTypes.func,
   }
 
   render() {
-    const { name, children, submit, width, visible, disabled } = this.props
+    const { name, children, submit, width, visible, disabled, onClick } = this.props
 
     return (
       <button name={name} type={!visible ? 'hidden' : submit ? 'submit' : 'button'} disabled={disabled}
-        style={[style.base, { width }]}>
+        style={[style.base, { width }]} onClick={onClick}>
         {children}
       </button>
     )

website/src/ui/Checkbox.js

@@ -11,7 +11,7 @@ class Checkbox extends Component {
     label: PropTypes.string,
     visible: PropTypes.bool,
     // disabled: PropTypes.bool,
-    name: PropTypes.name,
+    name: PropTypes.string,
   }
 
   constructor(props) {

website/src/ui/Modal.js

@@ -7,9 +7,12 @@ import { Dimmer } from 'ui'
 class Modal extends Component {
   static propTypes = {
     children: PropTypes.node,
-    open: PropTypes.bool
+    open: PropTypes.bool,
+    // TODO: onCancel: PropTypes.func,
   }
 
+  // TODO: Capture ESC key https://stackoverflow.com/questions/3369593/how-to-detect-escape-key-press-with-pure-js-or-jquery
+
   render() {
     return (
       <Dimmer active={this.props.open}>