Working login on mobile

mobile/src/ui/BoundButton.js

@@ -0,0 +1,67 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, Text, TouchableHighlight } from 'react-native'
+import { reactAutoBind } from 'auto-bind2'
+
+export class BoundButton extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    binder: PropTypes.object.isRequired,
+    submit: PropTypes.string,
+    onPress: PropTypes.func,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+  }
+
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+
+    let { name, binder } = this.props
+
+    binder.addListener(name, this.updateValue)
+    this.state = binder.getFieldState(name)
+  }
+
+  updateValue(e) {
+    this.setState(e.state)
+  }
+
+  componentWillUnmount() {
+    this.props.binder.removeListener(this.props.name, this.updateValue)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.binder !== this.props.binder) {
+      this.props.binder.removeListener(this.props.name, this.updateValue)
+      nextProps.binder.addListener(nextProps.name, this.updateValue)
+      this.setState(nextProps.binder.getFieldState(nextProps.name))
+    }
+  }
+
+  render() {
+    const { name, title, submit, width, onPress } = this.props
+    const { visible, disabled } = this.state
+
+    if (!visible) {
+      return null
+    }
+
+    if (disabled) {
+      return (
+        <View style={{ flexDirection: 'column', justifyContent: 'center', paddingHorizontal: 10, height: 40, width , backgroundColor: '#E0E0E0' }}>
+          <Text style={{ alignSelf: 'center', color: '#AAAAAA' }}>{title}</Text>
+        </View>
+      )
+    } else {
+      return (
+        <TouchableHighlight
+          onPress={onPress}
+          style={{ justifyContent: 'center', paddingHorizontal: 10, height: 40, width, backgroundColor: '#3BB0FD' }}
+          underlayColor='#1A72AC'>
+          <Text style={{ alignSelf: 'center', color: 'black' }}>{title}</Text>
+        </TouchableHighlight>
+      )
+    }
+  }
+}