From c1bf470aa0633f977b64f60aecb3e3c1dd78c192 Mon Sep 17 00:00:00 2001
From: John Lyon-Smith <john@lyon-smith.org>
Date: Tue, 6 Mar 2018 07:43:21 -0800
Subject: [PATCH] Integrating new form binder

---
 website/package-lock.json                |  6 +--
 website/package.json                     |  2 +-
 website/src/App.js                       |  9 ++++-
 website/src/Auth/ForgotPassword.js       |  2 +-
 website/src/Auth/Login.js                |  2 +-
 website/src/Auth/ResetPassword.js        |  2 +-
 website/src/Modal/ChangeEmailModal.js    |  2 +-
 website/src/Modal/ChangePasswordModal.js |  2 +-
 website/src/Profile/ProfileForm.js       |  2 +-
 website/src/Users/UserForm.js            | 16 +++++---
 website/src/Users/Users.js               |  2 +-
 website/src/ui/BoundCheckbox.js          | 16 +++++++-
 website/src/ui/Box.js                    | 29 ++++++++++++--
 website/src/ui/Checkbox.js               | 49 +++++++++++-------------
 website/src/ui/List.js                   |  6 +--
 15 files changed, 93 insertions(+), 54 deletions(-)

diff --git a/website/package-lock.json b/website/package-lock.json
index 0fcbd7b..e57ceb6 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -10214,9 +10214,9 @@
       }
     },
     "react-form-binder": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/react-form-binder/-/react-form-binder-1.1.0.tgz",
-      "integrity": "sha512-48bPtvfHTsgi8CBbKx3FHNI2H6xwCbVHkZn+wjmTUcqfdug/M7qev6+ssvwU16USSr+IHu8bUJVD3Q0xYT8o1Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-form-binder/-/react-form-binder-1.2.0.tgz",
+      "integrity": "sha512-VFeiB5nCe01WU5aVJILMw7GLgOPsYJvdJEL9WRz7qecKDZx30sKA5bLDOWHsWQDZhediIr3KLpFkPxj0u89tDg==",
       "requires": {
         "eventemitter3": "2.0.3",
         "prop-types": "15.6.0",
diff --git a/website/package.json b/website/package.json
index 6276cac..d9f1a6f 100644
--- a/website/package.json
+++ b/website/package.json
@@ -10,7 +10,7 @@
     "radium": "^0.22.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-form-binder": "^1.1.0",
+    "react-form-binder": "^1.2.0",
     "react-router-dom": "^4.1.1",
     "regexp-pattern": "^1.0.4",
     "socket.io-client": "^2.0.3"
diff --git a/website/src/App.js b/website/src/App.js
index 55d5a61..735c8cb 100644
--- a/website/src/App.js
+++ b/website/src/App.js
@@ -48,6 +48,10 @@ export class App extends Component {
     window.location.replace('/')
   }
 
+  handleProfile() {
+    window.location.replace('/profile')
+  }
+
   handleChangeTitle(title) {
     this.setState({ title })
   }
@@ -66,6 +70,7 @@ export class App extends Component {
       )
       headerButtonsRight = (
         <Fragment>
+          <HeaderButton icon='profile' onClick={this.handleProfile} />
           <HeaderButton icon='logout' onClick={this.handleLogout} />
         </Fragment>
       )
@@ -75,7 +80,7 @@ export class App extends Component {
       <Router basename='/'>
         <Column minHeight='100vh'>
           <Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
-            <Box color={colorInfo.headerButtonBackground} borderBottom={`${sizeInfo.headerBorderWidth}px solid ${colorInfo.headerBorder}`}>
+            <Box background={colorInfo.headerButtonBackground} borderBottom={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}>
               <Row minWidth='100vw'>
                 <Row.Item>{headerButtonsLeft}</Row.Item>
                 <Row.Item grow />
@@ -96,7 +101,7 @@ export class App extends Component {
             <ProtectedRoute path='/' component={Home} />
           </Switch>
           <Column.Item>
-            <Box color={colorInfo.headerButtonBackground} borderTop={`${sizeInfo.headerBorderWidth}px solid ${colorInfo.headerBorder}`}>
+            <Box background={colorInfo.headerButtonBackground} borderTop={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}>
               <Text color='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
             </Box>
           </Column.Item>
diff --git a/website/src/Auth/ForgotPassword.js b/website/src/Auth/ForgotPassword.js
index a471719..a62ade9 100644
--- a/website/src/Auth/ForgotPassword.js
+++ b/website/src/Auth/ForgotPassword.js
@@ -17,7 +17,7 @@ export class ForgotPassword extends React.Component {
       isValid: (r, v) => (regExpPattern.email.test(v))
     },
     submit: {
-      nonValue: true,
+      noValue: true,
       isDisabled: (r) => (!r.anyModified || !r.allValid)
     }
   }
diff --git a/website/src/Auth/Login.js b/website/src/Auth/Login.js
index f895cd0..0dc4051 100644
--- a/website/src/Auth/Login.js
+++ b/website/src/Auth/Login.js
@@ -29,7 +29,7 @@ export class Login extends Component {
       initValue: true
     },
     submit: {
-      nonValue: true,
+      noValue: true,
       isDisabled: (r) => (!r.anyModified || !r.allValid)
     }
   }
diff --git a/website/src/Auth/ResetPassword.js b/website/src/Auth/ResetPassword.js
index 4032d53..f21b87a 100644
--- a/website/src/Auth/ResetPassword.js
+++ b/website/src/Auth/ResetPassword.js
@@ -19,7 +19,7 @@ export class ResetPassword extends React.Component {
       isValid: (r, v) => (v !== '' && v === r.getField('newPassword').value)
     },
     submit: {
-      nonValue: true,
+      noValue: true,
       isDisabled: (r) => (!r.anyModified && !r.allValid)
     }
   }
diff --git a/website/src/Modal/ChangeEmailModal.js b/website/src/Modal/ChangeEmailModal.js
index 6388a40..4924255 100644
--- a/website/src/Modal/ChangeEmailModal.js
+++ b/website/src/Modal/ChangeEmailModal.js
@@ -17,7 +17,7 @@ export class ChangeEmailModal extends React.Component {
     },
     submit: {
       isDisabled: (r) => (!r.allValid),
-      nonValue: true
+      noValue: true
     }
   }
 
diff --git a/website/src/Modal/ChangePasswordModal.js b/website/src/Modal/ChangePasswordModal.js
index c3b9690..bc682f7 100644
--- a/website/src/Modal/ChangePasswordModal.js
+++ b/website/src/Modal/ChangePasswordModal.js
@@ -25,7 +25,7 @@ export class ChangePasswordModal extends React.Component {
     },
     submit: {
       isDisabled: (r) => (!r.allValid),
-      nonValue: true
+      noValue: true
     }
   }
 
diff --git a/website/src/Profile/ProfileForm.js b/website/src/Profile/ProfileForm.js
index 4dda2a7..738c665 100644
--- a/website/src/Profile/ProfileForm.js
+++ b/website/src/Profile/ProfileForm.js
@@ -55,7 +55,7 @@ export class ProfileForm extends React.Component {
       isValid: (r, v) => (v === '' || regExpPattern.ssn.test(v))
     },
     save: {
-      nonValue: true,
+      noValue: true,
       isDisabled: (r) => (!r.anyModified || !r.allValid)
     }
   }
diff --git a/website/src/Users/UserForm.js b/website/src/Users/UserForm.js
index 1eee1cf..ffff685 100644
--- a/website/src/Users/UserForm.js
+++ b/website/src/Users/UserForm.js
@@ -23,14 +23,15 @@ export class UserForm extends React.Component {
       isDisabled: (r) => (r._id)
     },
     emailValidated: {
+      initValue: false,
       isDisabled: (r) => (!r._id)
     },
     changeEmail: {
-      nonValue: true,
+      noValue: true,
       isDisabled: (r) => (!r._id)
     },
     resendEmail: {
-      nonValue: true,
+      noValue: true,
       isDisabled: (r) => (!r._id || !!r.getFieldValue('emailValidated'))
     },
     firstName: {
@@ -41,20 +42,23 @@ export class UserForm extends React.Component {
     },
     administrator: {
       isValid: (r, v) => true,
+      initValue: false,
       isDisabled: (r) => (api.loggedInUser._id === r._id), // Adding a new user
       alwaysGet: true,
     },
     remove: {
-      nonValue: true,
+      noValue: true,
       isVisible: (r) => (r._id),
       isDisabled: (r) => (api.loggedInUser._id === r._id)
     },
     reset: {
-      nonValue: true,
-      isDisabled: (r) => (!r.anyModified)
+      noValue: true,
+      isDisabled: (r) => {
+        return !r.anyModified
+      }
     },
     submit: {
-      nonValue: true,
+      noValue: true,
       isDisabled: (r) => (!r.anyModified || !r.allValid),
     },
   }
diff --git a/website/src/Users/Users.js b/website/src/Users/Users.js
index c21e188..2173252 100644
--- a/website/src/Users/Users.js
+++ b/website/src/Users/Users.js
@@ -258,7 +258,7 @@ export class Users extends Component {
             </Row.Item>
             <Row.Item width={20} />
             <Row.Item grow>
-              <Box border={`${sizeInfo.headerBorderWidth}px solid ${colorInfo.headerBorder}`} radius={sizeInfo.formBoxRadius}>
+              <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
                 {
                   this.state.selectedUser
                   ? <UserForm user={this.state.selectedUser} onSave={this.handleSave}
diff --git a/website/src/ui/BoundCheckbox.js b/website/src/ui/BoundCheckbox.js
index c947251..40da197 100644
--- a/website/src/ui/BoundCheckbox.js
+++ b/website/src/ui/BoundCheckbox.js
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Checkbox } from 'ui'
 import { reactAutoBind } from 'auto-bind2'
+import { fontInfo } from 'ui/style'
 
 export default class BoundCheckbox extends React.Component {
   static propTypes = {
@@ -36,7 +37,20 @@ export default class BoundCheckbox extends React.Component {
     const { visible, disabled, value } = this.state
 
     return (
-      <Checkbox visible={visible} disabled={disabled} value={!!value} name={name} label={label} />
+      <div style={visible ? {} : { display: 'none' }}>
+        <Checkbox id={name} disabled={disabled} value={value} onChange={this.handleChange} />
+        <label
+          htmlFor={name}
+          style={{
+            marginLeft: 10,
+            verticalAlign: 'top',
+            fontSize: fontInfo.size.medium,
+            fontFamily: fontInfo.family,
+            color: disabled ? fontInfo.color.dimmed : fontInfo.color.normal,
+          }}>
+          {label}
+        </label>
+      </div>
     )
   }
 }
diff --git a/website/src/ui/Box.js b/website/src/ui/Box.js
index fc8f54e..dd4b644 100644
--- a/website/src/ui/Box.js
+++ b/website/src/ui/Box.js
@@ -17,15 +17,36 @@ class Box extends Component {
   }
 
   render() {
-    const { children, background, borderTop, borderBottom, borderLeft,
-      borderRight, border, radius } = this.props
+    let {
+      children, background,
+      borderTop, borderBottom, borderLeft, borderRight,
+      border, radius } = this.props
+    const flatten = (border) => {
+      if (!border) {
+        return null
+      }
+
+      border.style = border.style || 'solid'
+      border.width = border.width || 1
+      border.color = border.color || 'black'
+
+      return (border.width.toString() + 'px ' + border.style + ' ' + border.color)
+    }
+
+    if (border) {
+      borderTop = borderBottom = borderLeft = borderRight = flatten(border)
+    } else {
+      borderTop = flatten(borderTop)
+      borderBottom = flatten(borderBottom)
+      borderLeft = flatten(borderLeft)
+      borderRight = flatten(borderRight)
+    }
 
     return (
       <div style={[
-        { height: '100%', width: '100%' },
+        { height: '100%', width: '100%', borderTop, borderBottom, borderLeft, borderRight },
         background && { backgroundColor: background },
         radius && { borderRadius: radius },
-        border ? { border } : { borderTop, borderBottom, borderLeft, borderRight },
       ]}>
         {children}
       </div>
diff --git a/website/src/ui/Checkbox.js b/website/src/ui/Checkbox.js
index 5a6987f..4c74f5c 100644
--- a/website/src/ui/Checkbox.js
+++ b/website/src/ui/Checkbox.js
@@ -2,15 +2,14 @@ import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { reactAutoBind } from 'auto-bind2'
-import { fontInfo, colorInfo, sizeInfo } from './style'
+import { colorInfo, sizeInfo } from './style'
 
 class Checkbox extends Component {
   static propTypes = {
     value: PropTypes.bool,
-    label: PropTypes.string,
-    visible: PropTypes.bool,
     disabled: PropTypes.bool,
-    name: PropTypes.string,
+    id: PropTypes.string,
+    onChange: PropTypes.func,
   }
 
   static style = {
@@ -59,10 +58,6 @@ class Checkbox extends Component {
     checkmarkUnchecked: {
       display: 'none'
     },
-
-    label: {
-      marginLeft: 10,
-    }
   }
 
   constructor(props) {
@@ -73,31 +68,31 @@ class Checkbox extends Component {
     }
   }
 
-  onClick() {
-    this.setState({ checked: !this.state.checked })
+  componentWillReceiveProps(nextProps) {
+    if (nextProps !== this.props) {
+      this.setState({ checked: nextProps.value })
+    }
+  }
+
+  onClick(e) {
+    const checked = !this.state.checked
+
+    this.setState({ checked })
+
+    if (this.props.onChange) {
+      this.props.onChange(e, { checked })
+    }
   }
 
   render() {
-    const { visible, name, label, disabled } = this.props
+    const { id, disabled } = this.props
     const { checked } = this.state
 
     return (
-      <div style={[!visible && { display: 'none' }]}>
-        <div style={[Checkbox.style.checkbox, disabled ? Checkbox.style.checkboxDisabled : !checked ? Checkbox.style.checkboxUnchecked : null]}
-          onClick={disabled ? null : this.onClick}>
-          <input id={name} type='checkbox' style={Checkbox.style.input} disabled={disabled} />
-          <div style={[Checkbox.style.checkmark, !checked && Checkbox.style.checkmarkUnchecked]} />
-        </div>
-        <label
-          htmlFor={name}
-          style={[Checkbox.style.label, {
-            verticalAlign: 'top',
-            fontSize: fontInfo.size.medium,
-            fontFamily: fontInfo.family,
-            color: disabled ? fontInfo.color.dimmed : fontInfo.color.normal,
-          }]}>
-          {label}
-        </label>
+      <div style={[Checkbox.style.checkbox, disabled ? Checkbox.style.checkboxDisabled : !checked ? Checkbox.style.checkboxUnchecked : null]}
+        onClick={disabled ? null : this.onClick}>
+        <input id={id} type='checkbox' style={Checkbox.style.input} disabled={disabled} />
+        <div style={[Checkbox.style.checkmark, !checked && Checkbox.style.checkmarkUnchecked]} />
       </div>
     )
   }
diff --git a/website/src/ui/List.js b/website/src/ui/List.js
index c45f189..8fba5c6 100644
--- a/website/src/ui/List.js
+++ b/website/src/ui/List.js
@@ -21,12 +21,12 @@ class List extends Component {
         fontFamily: fontInfo.family,
       }}>
         <Box
-          border={`${sizeInfo.listBorderWidth}px solid ${colorInfo.listBorder}`}
+          border={{ width: sizeInfo.listBorderWidth, color: colorInfo.listBorder }}
           radius={sizeInfo.formBoxRadius}>
           <div style={{
             height: '100%',
             width: '100%',
-            overflow: 'scroll'
+            overflowY: 'scroll',
           }}>
             {children}
           </div>
@@ -49,7 +49,7 @@ List.Item = Radium(class ListItem extends Component {
     return (
       <div style={{
         display: 'table-row',
-        background: active ? colorInfo.listBackgroundActive : colorInfo.listBackground,
+        background: active ? colorInfo.listBackgroundActive : 'transparent',
         ':hover': {
           background: colorInfo.listBackgroundHover
         },