Login component working

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 = {