Login component working

website/src/API.js

@@ -1,7 +1,7 @@
 import EventEmitter from 'eventemitter3'
 import io from 'socket.io-client'
 
-const authToken = 'deightonAuthToken'
+const authTokenName = 'AuthToken'
 
 class NetworkError extends Error {
   constructor(message) {
@@ -15,7 +15,7 @@ class NetworkError extends Error {
   }
 }
 
-class ApiError extends Error {
+class APIError extends Error {
   constructor(status, message) {
     super(message || '')
     this.status = status || 500
@@ -28,12 +28,12 @@ class ApiError extends Error {
   }
 }
 
-class Api extends EventEmitter {
+class API extends EventEmitter {
   constructor() {
     super()
     this.user = null
 
-    let token = localStorage.getItem(authToken) || sessionStorage.getItem(authToken)
+    let token = localStorage.getItem(authTokenName) || sessionStorage.getItem(authTokenName)
 
     if (token) {
       this.token = token
@@ -46,8 +46,8 @@ class Api extends EventEmitter {
         this.emit('login')
       })
       .catch(() => {
-        localStorage.removeItem(authToken)
-        sessionStorage.removeItem(authToken)
+        localStorage.removeItem(authTokenName)
+        sessionStorage.removeItem(authTokenName)
         this.token = null
         this.user = null
         this.socket = null
@@ -153,7 +153,7 @@ class Api extends EventEmitter {
             resolve(responseBody)
           }
         } else {
-          reject(new ApiError(res.status, responseBody.message))
+          reject(new APIError(res.status, responseBody.message))
         }
       }).catch((error) => {
         reject(new NetworkError(error.message))
@@ -183,13 +183,13 @@ class Api extends EventEmitter {
         const [ scheme, token ] = authValue.split(' ')
 
         if (scheme !== 'Bearer' || !token) {
-          reject(new ApiError('Unexpected Authorization scheme or token'))
+          reject(new APIError('Unexpected Authorization scheme or token'))
         }
 
         if (remember) {
-          localStorage.setItem(authToken, token)
+          localStorage.setItem(authTokenName, token)
         } else {
-          sessionStorage.setItem(authToken, token)
+          sessionStorage.setItem(authTokenName, token)
         }
         this.token = token
         this.user = response.body
@@ -204,8 +204,8 @@ class Api extends EventEmitter {
   logout() {
     let cb = () => {
       // Regardless of response, always logout in the client
-      localStorage.removeItem(authToken)
-      sessionStorage.removeItem(authToken)
+      localStorage.removeItem(authTokenName)
+      sessionStorage.removeItem(authTokenName)
       this.token = null
       this.user = null
       this.disconnectSocket()
@@ -271,111 +271,6 @@ class Api extends EventEmitter {
     return this.put('/users/leave-room')
   }
 
-  getItemsForPathname(pathname) {
-    return this.get('/fingerprint' + pathname)
-  }
-
-  getCorporation(_id, params) {
-    return this.get('/corporations/' + _id + Api.makeParams(params))
-  }
-  listCorporations(params) {
-    return this.get('/corporations' + Api.makeParams(params))
-  }
-  createCorporation(corporation) {
-    return this.post('/corporations', corporation)
-  }
-  updateCorporation(corporation) {
-    return this.put('/corporations', corporation)
-  }
-  deleteCorporation(_id) {
-    return this.delete('/corporations/' + _id)
-  }
-  setCorporationImage(details) {
-    // _id: corporation id
-    // imageId: image asset id
-    // size: desired size of image { width, height }
-    return this.put('/corporations/set-image', details)
-  }
-
-  getBranch(_id, params) {
-    return this.get('/branches/' + _id + Api.makeParams(params))
-  }
-  listBranches(params) {
-    return this.get('/branches' + Api.makeParams(params))
-  }
-  createBranch(branch) {
-    return this.post('/branches', branch)
-  }
-  updateBranch(branch) {
-    return this.put('/branches', branch)
-  }
-  deleteBranch(_id) {
-    return this.delete('/branches/' + _id)
-  }
-
-  getProject(projectId, params) {
-    return this.get('/projects/' + projectId)
-  }
-  getPopulatedProject(projectId, params) {
-    return this.get('/projects/' + projectId + '/populated')
-  }
-  getProjectBrokerClientData(projectId, brokerId) {
-    return this.get('/projects/' + projectId + '/broker/' + brokerId)
-  }
-  signOffProjectBrokerClientData(projectId, brokerId) {
-    return this.post('/projects/' + projectId + '/broker/' + brokerId + '/sign-off', {})
-  }
-  createProjectPackages(projectId) {
-    return this.post('/projects/' + projectId + '/create-packages', {})
-  }
-  resetProjectPackages(projectId) {
-    return this.post('/projects/' + projectId + '/reset-packages', {})
-  }
-  buildProjectPDFs(projectId) {
-    return this.post('/projects/' + projectId + '/build-pdfs', {})
-  }
-  listProjects(params) {
-    return this.get('/projects' + Api.makeParams(params))
-  }
-  listDashboardProjects() {
-    return this.get('/projects/dashboard')
-  }
-  listBrokerProjects(brokerId) {
-    return this.get('/projects/broker/' + brokerId)
-  }
-  createProject(project) {
-    return this.post('/projects', project)
-  }
-  importProjectClientData(importData) {
-    return this.post('/projects/import-client-data', importData)
-  }
-  updateProject(project) {
-    return this.put('/projects', project)
-  }
-  deleteProject(_id) {
-    return this.delete('/projects/' + _id)
-  }
-
-  getPackage(_id, params) {
-    return this.get('/packages/' + _id + Api.makeParams(params))
-  }
-  listPackages(params) { // Example: listPackages({ projectId: '59c2faa32d27b9d10bd764b3' })
-    return this.get('/packages' + Api.makeParams(params))
-  }
-
-  getFormSet(formSetId) {
-    return this.get('/formsets/' + formSetId)
-  }
-  getForm(formSetId, formId) {
-    return this.get('/formsets/' + formSetId + '/form/' + formId)
-  }
-  listFormSets(params) {
-    return this.get('/formsets' + Api.makeParams(params))
-  }
-  setFormPDF(formSetId, formId, pdfAssetId) {
-    return this.post('/formsets/' + formSetId + '/form/' + formId, { pdfAssetId })
-  }
-
   upload(file, progressCallback) {
     return new Promise((resolve, reject) => {
       const chunkSize = 32 * 1024
@@ -423,4 +318,4 @@ class Api extends EventEmitter {
   }
 }
 
-export let api = new Api()
+export let api = new API()

website/src/App.js

@@ -8,6 +8,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import logoImage from 'images/logo.png'
 import { versionInfo } from './version'
 import { sizeInfo } from 'ui/style'
+import { api } from 'src/API'
 
 export class App extends React.Component {
   render() {
@@ -25,8 +26,8 @@ export class App extends React.Component {
               </Row.Item>
               <Row.Item grow>&nbsp;</Row.Item>
               <Row.Item>
-                <HeaderButton icon='profile' size={height} />
-                <HeaderButton icon='logout' size={height} />
+                { api.loggedInUser && <HeaderButton icon='profile' size={height} /> }
+                { api.loggedInUser && <HeaderButton icon='logout' size={height} /> }
               </Row.Item>
             </Row>
           </Box>

website/src/Auth/ConfirmEmail.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { api } from '../helpers'
+import { api } from 'src/API'
 import PropTypes from 'prop-types'
 import { MessageModal, WaitModal } from '../Modal'
 

website/src/Auth/ForgotPassword.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { regExpPattern } from 'regexp-pattern'
 import { Text, Column, BoundInput, BoundButton } from 'ui'
 import { MessageModal, WaitModal } from '../Modal'
-import { api } from '../helpers'
+import { api } from 'src/API'
 import { FormBinder } from 'react-form-binder'
 
 export class ForgotPassword extends React.Component {

website/src/Auth/Login.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { regExpPattern } from 'regexp-pattern'
-import { api } from '../helpers'
+import { api } from 'src/API'
 import { WaitModal, MessageModal } from '../Modal'
 import { Image, Link, Text, Row, Column, BoundInput, BoundCheckbox, BoundButton } from 'ui'
 import headerLogo from 'images/deighton.png'
@@ -54,7 +54,7 @@ export class Login extends React.Component {
       return
     }
 
-    let obj = this.state.binder.getValues()
+    let obj = this.state.binder.getModifiedFieldValues()
 
     if (obj) {
       this.setState({ waitModal: true })
@@ -75,7 +75,7 @@ export class Login extends React.Component {
           elems[0].focus()
         }
         this.setState({
-          binder: new FormBinder({ email: this.state.binder.getField('email').value }, Login.bindings),
+          binder: new FormBinder({ email: this.state.binder.getFieldValue('email').value }, Login.bindings),
           waitModal: false,
           messageModal: { title: 'Login Error...', message: `Unable to login. ${error.message}` }
         })
@@ -119,23 +119,22 @@ export class Login extends React.Component {
                   </Row.Item>
                   <Row.Item grow />
                   <Row.Item>
-                    <BoundCheckbox label='Remember Me'
-                      name='rememberMe' onChange={this.handleChange} binder={this.state.binder} />
+                    <BoundCheckbox label='Remember Me' name='rememberMe' binder={this.state.binder} />
                   </Row.Item>
                 </Row>
               </Column.Item>
-              <Column.Item>
+              <Column.Item height={20} />
+              <Column.Item height={40}>
                 <Row>
                   <Row.Item grow />
                   <Row.Item>
-                    <br />
-                    <BoundButton name='submit' content='Login' height={60} submit binder={this.state.binder} />
+                    <BoundButton name='submit' width={100} content='Login' submit binder={this.state.binder} />
                   </Row.Item>
                 </Row>
               </Column.Item>
+              <Column.Item height={20} />
               <Column.Item>
                 <Text>
-                  <br />
                   Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials.
                 </Text>
               </Column.Item>

website/src/Auth/Logout.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { api } from '../helpers'
+import { api } from 'src/API'
 
 export class Logout extends React.Component {
   static propTypes = {

website/src/Auth/ProtectedRoute.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Route, Redirect } from 'react-router-dom'
 import { PropTypes } from 'prop-types'
-import { api } from '../helpers'
+import { api } from 'src/API'
 
 export class ProtectedRoute extends React.Component {
   static propTypes = {

website/src/Auth/ResetPassword.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Text, Column, BoundInput, BoundButton } from 'ui'
 import { MessageModal, WaitModal } from '../Modal'
-import { api } from '../helpers'
+import { api } from 'src/API'
 import { FormBinder } from 'react-form-binder'
 
 export class ResetPassword extends React.Component {

website/src/Profile/Profile.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ProfileForm } from './ProfileForm'
-import { Constants, api } from '../helpers'
+import { api } from 'src/API'
 import { WaitModal, MessageModal, ChangePasswordModal, ChangeEmailModal } from '../Modal'
 import { autoBind } from 'auto-bind2'
 
@@ -17,8 +17,7 @@ export class Profile extends React.Component {
       changeEmailModal: null,
       progressModal: null,
       uploadPercent: 0,
-      user,
-      userImageUrl: api.makeImageUrl(user.imageId, Constants.bigUserImageSize)
+      user
     }
   }
 
@@ -30,10 +29,6 @@ export class Profile extends React.Component {
     api.removeListener('newProfileImage', this.handleNewProfileImage)
   }
 
-  handleNewProfileImage(data) {
-    this.setState({ userImageUrl: api.makeImageUrl(data.imageId, Constants.bigUserImageSize) })
-  }
-
   handleSaved(user) {
     this.setState({ waitModal: { message: 'Updating Profile' } })
     api.updateUser(user).then((updatedUser) => {
@@ -57,25 +52,6 @@ export class Profile extends React.Component {
     this.setState({ changePasswordModal: true })
   }
 
-  handleSelectImage(file) {
-    this.setState({ progressModal: { message: `Uploading image '${file.name}'...`, file }, uploadPercent: 0 })
-    api.upload(file, this.handleProgress).then((uploadData) => {
-      this.setState({ progressModal: null })
-      return api.setUserImage({
-        _id: api.loggedInUser._id,
-        imageId: uploadData.assetId,
-        bigSize: Profile.bigUserImageSize,
-        smallSize: Constants.smallUserImageSize
-      })
-    }).catch((error) => {
-      // TODO: if the upload succeeds but the setUserImage fails, delete the uploaded image
-      this.setState({
-        progressModal: null,
-        messageModal: { title: 'Upload Error...', message: `Unable to upload the file. ${error.message}` }
-      })
-    })
-  }
-
   handleProgress(uploadData) {
     if (this.state.progressModal) {
       this.setState({ uploadPercent: Math.round(uploadData.uploadedChunks / uploadData.numberOfChunks * 100) })

website/src/Users/UserForm.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { reactAutoBind } from 'auto-bind2'
 import { regExpPattern } from 'regexp-pattern'
-import { Constants, api } from '../helpers'
+import { api } from 'src/API'
 import { Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon } from 'ui'
 import { FormBinder } from 'react-form-binder'
 
@@ -103,9 +103,7 @@ export class UserForm extends React.Component {
       <form onSubmit={this.handleSubmit}>
         <Column>
           <Column.Item>
-            <BoundCheckbox label={'Deighton Access & Security Level'} width={6} selection
-              options={Constants.accessLevels} name='role' message='The user role and security level'
-              placeholder='' binder={this.state.binder} />
+            <BoundCheckbox label={'Administrator'} name='administrator' binder={this.state.binder} />
           </Column.Item>
           <Column.Item>
             <BoundInput label='First Name' name='firstName'

website/src/Users/UserList.js

@@ -1,9 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Dropdown, List, Icon, Button, Image } from 'ui'
-import { Constants, api } from '../helpers'
-
-const selectionOptions = Constants.accessLevels.concat([{ value: 'all', text: 'All Levels' }])
+import { List, Icon, Button } from 'ui'
 
 export class UserList extends React.Component {
   static propTypes = {
@@ -42,15 +39,13 @@ export class UserList extends React.Component {
   render() {
     return (
       <div>
-        <Dropdown placeholder='All Registered Users' selection fluid
-          options={selectionOptions} onChange={this.filterUsers} />
-        <List className='user-list' size='big' selection verticalAlign='middle'>
+        <List className='user-list' selection>
           {
           this.state.users
           ? this.state.users.map((user, index) =>
             (<List.Item className='user-list-item' key={user._id || '0'} onClick={this.props.onUserListClick}
               active={user === this.props.selectedUser} data-index={index}>
-              <Image avatar src={api.makeImageUrl(user.thumbnailImageId, Constants.smallUserImageSize)} />
+              <Icon name='profile' size={20} />
               <List.Content>
                 { user._id ? user.firstName + ' ' + user.lastName : '[New User]' }
                 { user === this.props.selectedUser && this.props.selectionModified ? <Icon className='user-update'

website/src/Users/Users.js

@@ -3,7 +3,7 @@ import { autoBind } from 'auto-bind2'
 import { UserList } from './UserList'
 import { UserForm } from './UserForm'
 import { UserFormPlaceholder } from './UserFormPlaceholder'
-import { api } from '../helpers'
+import { api } from 'src/API'
 import { Row } from 'ui'
 import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '../Modal'
 

website/src/helpers/Constants.js

@@ -1,75 +0,0 @@
-export class Constants {
-  static stateOptions = [
-    { value: '', text: '' },
-    { value: 'AL', text: 'Alabama' },
-    { value: 'AK', text: 'Alaska' },
-    { value: 'AS', text: 'American Samoa' },
-    { value: 'AZ', text: 'Arizona' },
-    { value: 'AR', text: 'Arkansas' },
-    { value: 'CA', text: 'California' },
-    { value: 'CO', text: 'Colorado' },
-    { value: 'CT', text: 'Connecticut' },
-    { value: 'DE', text: 'Delaware' },
-    { value: 'DC', text: 'District of Columbia' },
-    { value: 'FM', text: 'Federated States of Micronesia' },
-    { value: 'FL', text: 'Florida' },
-    { value: 'GA', text: 'Georgia' },
-    { value: 'GU', text: 'Guam' },
-    { value: 'HI', text: 'Hawaii' },
-    { value: 'ID', text: 'Idaho' },
-    { value: 'IL', text: 'Illinois' },
-    { value: 'IN', text: 'Indiana' },
-    { value: 'IA', text: 'Iowa' },
-    { value: 'KS', text: 'Kansas' },
-    { value: 'KY', text: 'Kentucky' },
-    { value: 'LA', text: 'Louisiana' },
-    { value: 'ME', text: 'Maine' },
-    { value: 'MH', text: 'Marshall Islands' },
-    { value: 'MD', text: 'Maryland' },
-    { value: 'MA', text: 'Massachusetts' },
-    { value: 'MI', text: 'Michigan' },
-    { value: 'MN', text: 'Minnesota' },
-    { value: 'MS', text: 'Missippi' },
-    { value: 'MO', text: 'Missouri' },
-    { value: 'MT', text: 'Montana' },
-    { value: 'NE', text: 'Nebraska' },
-    { value: 'NV', text: 'Nevada' },
-    { value: 'NH', text: 'New Hampshire' },
-    { value: 'NJ', text: 'New Jersey' },
-    { value: 'NM', text: 'New Mexico' },
-    { value: 'NY', text: 'New York' },
-    { value: 'NC', text: 'North Carolina' },
-    { value: 'ND', text: 'North Dakota' },
-    { value: 'MP', text: 'Northern Mariana Islands' },
-    { value: 'OH', text: 'Ohio' },
-    { value: 'OK', text: 'Oklahoma' },
-    { value: 'OR', text: 'Oregon' },
-    { value: 'PW', text: 'Palau' },
-    { value: 'PA', text: 'Pennsylvania' },
-    { value: 'PR', text: 'Puerto Rico' },
-    { value: 'RI', text: 'Rhode Island' },
-    { value: 'SC', text: 'South Carolina' },
-    { value: 'SD', text: 'South Dakota' },
-    { value: 'TN', text: 'Tennessee' },
-    { value: 'TX', text: 'Texas' },
-    { value: 'UT', text: 'Utah' },
-    { value: 'VT', text: 'Vermont' },
-    { value: 'VI', text: 'Virgin Islands' },
-    { value: 'VA', text: 'Virginia' },
-    { value: 'WA', text: 'Washington' },
-    { value: 'WV', text: 'West Virginia' },
-    { value: 'WI', text: 'Wisconsin' },
-    { value: 'WY', text: 'Wyoming' }
-  ]
-
-  static accessLevels = [
-    { value: 'broker', text: 'Broker' },
-    { value: 'employee', text: 'Employee' },
-    { value: 'administrator', text: 'Administrator' },
-    { value: 'executive', text: 'Executive' }
-  ]
-
-  static logoImageSize = { width: 200, height: 50 }
-  static bigUserImageSize = { width: 300, height: 300 }
-  static smallUserImageSize = { width: 25, height: 25 }
-}

website/src/helpers/index.js

@@ -1,2 +0,0 @@
-export { api, NetworkError, ApiError } from './Api'
-export { Constants } from './Constants'

website/src/ui/BoundButton.js

@@ -6,13 +6,10 @@ import { reactAutoBind } from 'auto-bind2'
 export default class BoundButton extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
-    label: PropTypes.string,
     width: PropTypes.number,
-    size: PropTypes.string,
     content: PropTypes.string,
     binder: PropTypes.object.isRequired,
     submit: PropTypes.bool,
-    color: PropTypes.string,
     onClick: PropTypes.func
   }
 
@@ -26,8 +23,8 @@ export default class BoundButton extends React.Component {
     this.state = binder.getFieldState(name)
   }
 
-  updateValue(name) {
-    this.setState(this.props.binder.getFieldState(name))
+  updateValue(e) {
+    this.setState(e.state)
   }
 
   componentWillUnmount() {
@@ -43,21 +40,14 @@ export default class BoundButton extends React.Component {
   }
 
   render() {
-    if (this.state.visible) {
-      return (
-        <div width={this.props.width} disabled={this.state.disabled}>
-          <label>{this.props.label}</label>
-          <Button
-            color={this.props.color}
-            submit={this.props.submit}
-            onClick={this.props.onClick}
-            size={this.props.size} name={this.props.name}>
-            {this.props.content}
-          </Button>
-        </div>
-      )
-    } else {
-      return null
-    }
+    const { name, width, content, submit, onClick } = this.props
+    const { visible, disabled } = this.state
+
+    return (
+      <Button disabled={disabled} submit={submit}
+        onClick={onClick} width={width} name={name} visible={visible}>
+        {content}
+      </Button>
+    )
   }
 }

website/src/ui/BoundCheckbox.js

@@ -32,8 +32,11 @@ export default class BoundCheckbox extends React.Component {
   }
 
   render() {
+    const { name, label } = this.props
+    const { visible, disabled, value } = this.state
+
     return (
-      <Checkbox value={!!this.state.value} name={this.props.name} label={this.props.label} />
+      <Checkbox visible={visible} disabled={disabled} value={!!value} name={name} label={label} />
     )
   }
 }

website/src/ui/BoundInput.js

@@ -19,12 +19,12 @@ export default class BoundInput extends React.Component {
     this.state = props.binder.getFieldState(props.name)
   }
 
-  handleChange(e, data) {
+  handleChange(e) {
     const { binder, name } = this.props
     const state = binder.getFieldState(name)
 
     if (!state.readOnly && !state.disabled) {
-      this.setState(binder.updateFieldValue(name, data.value))
+      this.setState(binder.updateFieldValue(name, e.target.value))
     }
   }
 
@@ -35,17 +35,22 @@ export default class BoundInput extends React.Component {
   }
 
   render() {
+    const { label, password, name, placeholder, message } = this.props
+    const { visible, disabled, value, valid } = this.state
+
     return (
-      <div style={{ width: '100%' }} disabled={this.state.disabled}>
-        <Text>{this.props.label}</Text>
+      <div style={{ width: '100%' }}>
+        <Text>{label}</Text>
         <br />
-        <Input value={this.state.value}
-          password={this.props.password}
-          name={this.props.name}
+        <Input value={value}
+          visible={visible}
+          disabled={disabled}
+          password={password}
+          name={name}
           onChange={this.handleChange}
-          placeholder={this.props.placeholder} />
+          placeholder={placeholder} />
         <br />
-        <Text size='small' tone='alert'>{this.props.message}</Text>
+        <Text size='small' tone='alert'>{valid ? ' ' : message}</Text>
       </div>
     )
   }

website/src/ui/Button.js

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

website/src/ui/Button.style.js

@@ -2,17 +2,20 @@ import { colorInfo, fontInfo } from './style'
 
 export default {
   base: {
+    height: '100%',
     borderRadius: '10px',
     fontFamily: fontInfo.family,
     color: '#FFFFFF',
-    fontSize: fontInfo.size['large'],
+    fontSize: fontInfo.size.large,
     background: colorInfo.buttonBackgroundHover,
     verticalAlign: 'middle',
-    padding: '8px 15px 8px 15px',
+    padding: '0 15px 0 15px',
     outline: 'none',
-
     ':hover': {
       background: colorInfo.buttonBackground,
+    },
+    ':disabled': {
+      background: colorInfo.disabledButtonBackground,
     }
   }
 }

website/src/ui/Checkbox.js

@@ -9,6 +9,9 @@ class Checkbox extends Component {
   static propTypes = {
     value: PropTypes.bool,
     label: PropTypes.string,
+    visible: PropTypes.bool,
+    // disabled: PropTypes.bool,
+    name: PropTypes.name,
   }
 
   constructor(props) {
@@ -24,18 +27,27 @@ class Checkbox extends Component {
   }
 
   render() {
+    const { visible, name, label } = this.props
+
     return (
-      <div>
+      <div style={[!visible && { display: 'none' }]}>
         <div style={[style.checkbox, !this.state.checked && style.checkboxUnchecked]} onClick={this.onClick}>
           <div style={[style.checkmark, !this.state.checked && style.checkmarkUnchecked]} />
         </div>
-        <span style={{
-          verticalAlign: 'top',
-          fontSize: fontInfo.size.medium,
-          fontFamily: fontInfo.family,
-          color: fontInfo.color.normal,
-          marginLeft: 10
-        }}>{this.props.label}</span>
+        { /* TODO: Move this into .style.js */ }
+        { /* TODO: Implement disabled */ }
+        { /* TODO: Add checkbox input element back in */ }
+        { /* TODO: Use an actual label element with a for (shortid) */ }
+        <span name={name}
+          style={{
+            verticalAlign: 'top',
+            fontSize: fontInfo.size.medium,
+            fontFamily: fontInfo.family,
+            color: fontInfo.color.normal,
+            marginLeft: 10
+          }}>
+          {label}
+        </span>
       </div>
     )
   }

website/src/ui/Dropdown.js

@@ -1,19 +0,0 @@
-import Radium from 'radium'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import style from './Input.style'
-
-class Dropdown extends Component {
-  static propTypes = {
-    password: PropTypes.bool,
-    children: PropTypes.node
-  }
-
-  render() {
-    return (
-      <input type={this.props.password ? 'password' : 'text'} style={style.base}>{this.props.children}</input>
-    )
-  }
-}
-
-export default Radium(Dropdown)

website/src/ui/Dropdown.style.js

@@ -1,2 +0,0 @@
-export default {
-}

website/src/ui/Input.js

@@ -6,17 +6,22 @@ import style from './Input.style'
 class Input extends Component {
   static propTypes = {
     password: PropTypes.bool,
-    children: PropTypes.node,
-    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
+    placeholder: PropTypes.string,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    onChange: PropTypes.func,
+    visible: PropTypes.bool,
+    disabled: PropTypes.bool,
+    name: PropTypes.string,
   }
 
   render() {
-    let { children, width } = this.props
+    let { name, width, password, placeholder, onChange, visible, disabled } = this.props
 
     width = width || '100%'
 
     return (
-      <input type={this.props.password ? 'password' : 'text'} style={[ { width }, style.base ]}>{children}</input>
+      <input name={name} type={!visible ? 'hidden' : password ? 'password' : 'text'} disabled={disabled}
+        style={[ { width }, style.base ]} placeholder={placeholder} onChange={onChange} />
     )
   }
 }

website/src/ui/index.js

@@ -8,7 +8,6 @@ export { default as Text } from './Text'
 export { default as Link } from './Link'
 export { default as Icon } from './Icon'
 export { default as List } from './List'
-export { default as Dropdown } from './Dropdown'
 export { default as Modal } from './Modal'
 export { default as Dimmer } from './Dimmer'
 export { default as Loader } from './Loader'

website/src/ui/style.js

@@ -6,6 +6,7 @@ export const colorInfo = {
   buttonBackgroundHover: '#3CB0FD',
   headerButtonBackground: '#FAFAFA',
   headerButtonBackgroundHover: '#DADADA',
+  disabledButtonBackground: '#A0A0A0',
 }
 
 export const sizeInfo = {