From 4ce0638655579596ebfc7efcf2f3c7d0e6db2f2c Mon Sep 17 00:00:00 2001
From: John Lyon-Smith <john@lyon-smith.org>
Date: Tue, 27 Feb 2018 15:06:20 -0800
Subject: [PATCH] Modal dismiss working

---
 website/src/Auth/Login.js         | 14 ++++++++------
 website/src/Modal/MessageModal.js | 10 +++++-----
 website/src/ui/Button.js          |  7 ++++---
 website/src/ui/Checkbox.js        |  2 +-
 website/src/ui/Modal.js           |  5 ++++-
 5 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/website/src/Auth/Login.js b/website/src/Auth/Login.js
index 8ed6456..54aec8b 100644
--- a/website/src/Auth/Login.js
+++ b/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>
     )
diff --git a/website/src/Modal/MessageModal.js b/website/src/Modal/MessageModal.js
index 5b144e4..0f1a1e2 100644
--- a/website/src/Modal/MessageModal.js
+++ b/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>
diff --git a/website/src/ui/Button.js b/website/src/ui/Button.js
index 87d1f97..46887b4 100644
--- a/website/src/ui/Button.js
+++ b/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>
     )
diff --git a/website/src/ui/Checkbox.js b/website/src/ui/Checkbox.js
index 347f400..923a68e 100644
--- a/website/src/ui/Checkbox.js
+++ b/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) {
diff --git a/website/src/ui/Modal.js b/website/src/ui/Modal.js
index edfef94..409192d 100644
--- a/website/src/ui/Modal.js
+++ b/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}>