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

2018-04-02 13:22:33 -07:00
parent aa622012cd
commit 410d2fde4f
56 changed files with 556 additions and 461 deletions
--- a/mobile/src/Auth/Login.js
+++ b/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>
+    )
+  }
+}