Added Header, Icon and MessageModal. Refactor screens into directories.

mobile/src/Auth/DefaultRoute.js

@@ -0,0 +1,42 @@
+import React, { Fragment, Component } from 'react'
+import { api } from '../API'
+import { Route, Redirect } from 'react-router-native'
+import { View } from 'react-native'
+import autobind from 'autobind-decorator'
+
+export class DefaultRoute extends Component {
+  @autobind
+  updateComponent() {
+    this.forceUpdate()
+  }
+
+  componentDidMount() {
+    api.addListener('login', this.updateComponent)
+  }
+
+  componentWillUnmount() {
+    api.removeListener('login', this.updateComponent)
+  }
+
+  render() {
+    const user = api.loggedInUser
+    let path = null
+
+    if (user) {
+      if (!user.pending) {
+        path = '/home'
+      }
+    } else {
+      path = '/login'
+    }
+
+    const { location } = this.props
+
+    // Render a redirect or nothing until we finished logging on
+    return (
+      <Route path='/' render={() => (
+        path ? <Redirect to={path} /> : null
+      )} />
+    )
+  }
+}

mobile/src/Auth/Login.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { Platform, StyleSheet, Text, Image, Switch, TextInput,
+  KeyboardAvoidingView, View, Button } from 'react-native'
+import { MessageModal } from '../Modal'
+import logoImage from './images/deighton.png'
+import { FormBinder } from 'react-form-binder'
+import { api } from '../API'
+import { BoundSwitch, BoundInput, BoundButton } from '../ui'
+import autobind from 'autobind-decorator'
+
+export class Login extends React.Component {
+  static bindings = {
+    email: {
+      alwaysGet: true,
+      isValid: (r, v) => (v !== '')
+    },
+    password: {
+      alwaysGet: true,
+      isValid: (r, v) => (v !== '')
+    },
+    rememberMe: {
+      alwaysGet: true,
+      initValue: true,
+      isValid: true
+    },
+    login: {
+      noValue: true,
+      isDisabled: (r) => (!(r.anyModified && r.allValid))
+    }
+  }
+
+  static styles = StyleSheet.create({
+    page: {
+      minHeight: '50%',
+      flex: 1,
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    logo: {
+      width: '50%'
+    },
+    inputRow: {
+      paddingTop: 10,
+      width: '60%',
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+      alignItems: 'flex-start',
+    },
+    switchRow: {
+      paddingTop: 10,
+      width: '60%',
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    },
+    buttonRow: {
+      paddingTop: 10,
+      width: '60%',
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    }
+  })
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      binder: new FormBinder({email: 'john@lyon-smith.org'}, Login.bindings),
+      messageModal: null,
+    }
+  }
+
+  @autobind
+  handleLogin() {
+    let obj = this.state.binder.getModifiedFieldValues()
+    let { history } = this.props
+
+    if (obj) {
+      api.login(obj.email, obj.password, obj.rememberMe).then((user) => {
+        history.replace('/home')
+      }).catch((error) => {
+        this.setState({ messageModal: {
+          icon: 'hand',
+          message: 'Unable to login',
+          detail: error.message,
+        }})
+      })
+    }
+  }
+
+  @autobind
+  handleMessageDismiss() {
+    this.setState({ messageModal: null })
+  }
+
+  render() {
+    const { messageModal } = this.state
+
+    return (
+      <KeyboardAvoidingView style={Login.styles.page} behavior='padding'
+        keyboardVerticalOffset={Platform.select({ios: 0, android: -220})}>
+        <Image style={Login.styles.logo} source={logoImage} resizeMode='contain' />
+        <View style={Login.styles.inputRow}>
+          <BoundInput name='email' label='Email:' placeholder='name@xyz.com' message='Must enter a valid email' binder={this.state.binder} />
+        </View>
+        <View style={Login.styles.inputRow}>
+          <BoundInput name='password' password label='Password:' message='Must supply a password' binder={this.state.binder} />
+        </View>
+        <View style={Login.styles.switchRow}>
+          <BoundSwitch name='rememberMe' binder={this.state.binder} label='Remember Me'/>
+        </View>
+        <View style={Login.styles.buttonRow}>
+          <BoundButton title='Login' name='login' width='100%' onPress={this.handleLogin} binder={this.state.binder} />
+        </View>
+        <MessageModal
+          open={!!messageModal}
+          icon={messageModal ? messageModal.icon : ''}
+          message={messageModal ? messageModal.message : ''}
+          detail={messageModal ? messageModal.detail : ''}
+          onDismiss={messageModal && this.handleMessageDismiss} />
+      </KeyboardAvoidingView>
+    )
+  }
+}

mobile/src/Auth/Logout.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { api } from '../API'
+
+export class Logout extends Component {
+  static propTypes = {
+    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  }
+
+  componentDidMount(event) {
+    const cb = () => {
+      this.props.history.replace('/login')
+    }
+
+    api.logout().then(cb, cb)
+  }
+
+  render() {
+    return null
+  }
+}

mobile/src/Auth/ProtectedRoute.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Route, Redirect } from 'react-router-native'
+import { PropTypes } from 'prop-types'
+import { api } from '../API'
+import autobind from 'autobind-decorator'
+
+export class ProtectedRoute extends React.Component {
+  static propTypes = {
+    location: PropTypes.shape({ pathname: PropTypes.string, search: PropTypes.string }),
+    admin: PropTypes.bool,
+  }
+
+  @autobind
+  updateComponent() {
+    this.forceUpdate()
+  }
+
+  componentDidMount() {
+    api.addListener('login', this.updateComponent)
+  }
+
+  componentWillUnmount() {
+    api.removeListener('login', this.updateComponent)
+  }
+
+  render(props) {
+    const user = api.loggedInUser
+
+    if (user) {
+      if (user.pending) {
+        // The API might be in the middle of fetching the user information
+        return null
+      } else if (!this.props.admin || (this.props.admin && user.administrator)) {
+        return <Route {...this.props} />
+      }
+    }
+
+    // TODO: Can add redirect back in here - see website
+    return <Redirect to='/login' />
+  }
+}

mobile/src/Auth/index.js

@@ -0,0 +1,4 @@
+export { Login } from './Login'
+export { Logout } from './Logout'
+export { ProtectedRoute } from './ProtectedRoute'
+export { DefaultRoute } from './DefaultRoute'