Integrating new form binder

website/package-lock.json

@@ -10214,9 +10214,9 @@
       }
     },
     "react-form-binder": {
-      "version": "1.1.0",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/react-form-binder/-/react-form-binder-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-form-binder/-/react-form-binder-1.2.0.tgz",
-      "integrity": "sha512-48bPtvfHTsgi8CBbKx3FHNI2H6xwCbVHkZn+wjmTUcqfdug/M7qev6+ssvwU16USSr+IHu8bUJVD3Q0xYT8o1Q==",
+      "integrity": "sha512-VFeiB5nCe01WU5aVJILMw7GLgOPsYJvdJEL9WRz7qecKDZx30sKA5bLDOWHsWQDZhediIr3KLpFkPxj0u89tDg==",
       "requires": {
         "eventemitter3": "2.0.3",
         "prop-types": "15.6.0",

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"

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>

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)
     }
   }

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)
     }
   }

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)
     }
   }

website/src/Modal/ChangeEmailModal.js

@@ -17,7 +17,7 @@ export class ChangeEmailModal extends React.Component {
     },
     submit: {
       isDisabled: (r) => (!r.allValid),
-      nonValue: true
+      noValue: true
     }
   }
 

website/src/Modal/ChangePasswordModal.js

@@ -25,7 +25,7 @@ export class ChangePasswordModal extends React.Component {
     },
     submit: {
       isDisabled: (r) => (!r.allValid),
-      nonValue: true
+      noValue: true
     }
   }
 

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)
     }
   }

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,
+      noValue: true,
-      isDisabled: (r) => (!r.anyModified)
+      isDisabled: (r) => {
+        return !r.anyModified
+      }
     },
     submit: {
-      nonValue: true,
+      noValue: true,
       isDisabled: (r) => (!r.anyModified || !r.allValid),
     },
   }

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}

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>
     )
   }
 }

website/src/ui/Box.js

@@ -17,15 +17,36 @@ class Box extends Component {
   }
 
   render() {
-    const { children, background, borderTop, borderBottom, borderLeft,
+    let {
-      borderRight, border, radius } = this.props
+      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>

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,32 +68,32 @@ class Checkbox extends Component {
     }
   }
 
-  onClick() {
+  componentWillReceiveProps(nextProps) {
-    this.setState({ checked: !this.state.checked })
+    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} />
+        <input id={id} 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>
     )
   }
 }

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
         },