Working login on mobile

mobile/src/API.js

@@ -0,0 +1,300 @@
+import EventEmitter from 'eventemitter3'
+import io from 'socket.io-client'
+import { AsyncStorage } from 'react-native'
+
+const authTokenName = 'AuthToken'
+const apiURL = 'http://localhost:3000'
+
+class NetworkError extends Error {
+  constructor(message) {
+    super(message)
+    this.name = this.constructor.name
+    if (typeof Error.captureStackTrace === 'function') {
+      Error.captureStackTrace(this, this.constructor)
+    } else {
+      this.stack = (new Error(message)).stack
+    }
+  }
+}
+
+class APIError extends Error {
+  constructor(status, message) {
+    super(message || '')
+    this.status = status || 500
+    this.name = this.constructor.name
+    if (typeof Error.captureStackTrace === 'function') {
+      Error.captureStackTrace(this, this.constructor)
+    } else {
+      this.stack = (new Error(message)).stack
+    }
+  }
+}
+
+class API extends EventEmitter {
+  constructor() {
+    super()
+    this.user = null
+
+    AsyncStorage.getItem(authTokenName).then((token) => {
+      if (!token) {
+        return Promise.reject()
+      }
+
+      this.token = token
+      this.user = { pending: true }
+      return this.who()
+    }).then((user) => {
+      this.user = user
+      this.connectSocket()
+      this.emit('login')
+    }).catch(() => {
+      AsyncStorage.removeItem(authTokenName)
+      this.token = null
+      this.user = null
+      this.socket = null
+      this.emit('logout')
+    })
+  }
+
+  connectSocket() {
+    this.socket = io(apiURL, {
+      path: '/api/socketio',
+      query: {
+        auth_token: this.token
+      }
+    })
+    this.socket.on('disconnect', (reason) => {
+      // Could happen if the auth_token is bad
+      this.socket = null
+    })
+    this.socket.on('notify', (message) => {
+      const { eventName, eventData } = message
+
+      // Filter the few massages that affect our cached user data to avoid a server round trip
+      switch (eventName) {
+        case 'newThumbnailImage':
+          this.user.thumbnailImageId = eventData.imageId
+          break
+        case 'newProfileImage':
+          this.user.imageId = eventData.imageId
+          break
+        default:
+          // Nothing to see here...
+          break
+      }
+
+      this.emit(message.eventName, message.eventData)
+    })
+  }
+
+  disconnectSocket() {
+    if (this.socket) {
+      this.socket.disconnect()
+      this.socket = null
+    }
+  }
+
+  get loggedInUser() {
+    return this.user
+  }
+
+  makeImageUrl(id, size) {
+    if (id) {
+      return '/api/assets/' + id + '?access_token=' + this.token
+    } else if (size && size.width && size.height) {
+      return `/api/placeholders/${size.width}x${size.height}?access_token=${this.token}`
+    } else {
+      return null
+    }
+  }
+
+  makeAssetUrl(id) {
+    return id ? '/api/assets/' + id + '?access_token=' + this.token : null
+  }
+
+  static makeParams(params) {
+    return params ? '?' + Object.keys(params).map((key) => (
+      [key, params[key]].map(encodeURIComponent).join('=')
+    )).join('&') : ''
+  }
+
+  request(method, path, requestBody, requestOptions) {
+    requestOptions = requestOptions || {}
+    var promise = new Promise((resolve, reject) => {
+      let fetchOptions = {
+        method: method,
+        mode: 'cors',
+        cache: 'no-store'
+      }
+      let headers = new Headers()
+      if (this.token) {
+        headers.set('Authorization', 'Bearer ' + this.token)
+      }
+      if (method === 'POST' || method === 'PUT') {
+        if (requestOptions.binary) {
+          headers.set('Content-Type', 'application/octet-stream')
+          headers.set('Content-Length', requestOptions.binary.length)
+          headers.set('Range', 'byte ' + requestOptions.binary.offset)
+          fetchOptions.body = requestBody
+        } else {
+          headers.set('Content-Type', 'application/json')
+          fetchOptions.body = JSON.stringify(requestBody)
+        }
+      }
+      fetchOptions.headers = headers
+      fetch(apiURL + '/api' + path, fetchOptions).then((res) => {
+        return Promise.all([ Promise.resolve(res), (requestOptions.binary && method === 'GET') ? res.blob() : res.json() ])
+      }).then((arr) => {
+        let [ res, responseBody ] = arr
+        if (res.ok) {
+          if (requestOptions.wantHeaders) {
+            resolve({ body: responseBody, headers: res.headers })
+          } else {
+            resolve(responseBody)
+          }
+        } else {
+          reject(new APIError(res.status, responseBody.message))
+        }
+      }).catch((error) => {
+        reject(new NetworkError(error.message))
+      })
+    })
+    return promise
+  }
+
+  post(path, requestBody, options) {
+    return this.request('POST', path, requestBody, options)
+  }
+  put(path, requestBody, options) {
+    return this.request('PUT', path, requestBody, options)
+  }
+  get(path, options) {
+    return this.request('GET', path, options)
+  }
+  delete(path, options) {
+    return this.request('DELETE', path, options)
+  }
+
+  login(email, password, remember) {
+    return new Promise((resolve, reject) => {
+      this.post('/auth/login', { email, password }, { wantHeaders: true }).then((response) => {
+        // Save bearer token for later use
+        const authValue = response.headers.get('Authorization')
+        const [ scheme, token ] = authValue.split(' ')
+
+        if (scheme !== 'Bearer' || !token) {
+          reject(new APIError('Unexpected Authorization scheme or token'))
+        }
+
+        if (remember) {
+          AsyncStorage.setItem(authTokenName, token)
+        }
+        this.token = token
+        this.user = response.body
+        this.connectSocket()
+        this.emit('login')
+        resolve(response.body)
+      }).catch((err) => {
+        reject(err)
+      })
+    })
+  }
+  logout() {
+    let cb = () => {
+      // Regardless of response, always logout in the client
+      AsyncStorage.removeItem(authTokenName)
+      this.token = null
+      this.user = null
+      this.disconnectSocket()
+      this.emit('logout')
+    }
+    return this.delete('/auth/login').then(cb, cb)
+  }
+  who() {
+    return this.get('/auth/who')
+  }
+
+  getUser(_id) {
+    return this.get('/users/' + _id)
+  }
+  listUsers() {
+    return this.get('/users')
+  }
+  createUser(user) {
+    return this.post('/users', user)
+  }
+  updateUser(user) {
+    return new Promise((resolve, reject) => {
+      this.put('/users', user).then((user) => {
+        // If we just updated ourselves, update the internal cached copy
+        if (user._id === this.user._id) {
+          this.user = user
+          this.emit('login')
+        }
+        resolve(user)
+      }).catch((reason) => {
+        reject(reason)
+      })
+    })
+  }
+  deleteUser(_id) {
+    return this.delete('/users/' + _id)
+  }
+  setUserImage(details) {
+    return this.put('/users/set-image', details)
+  }
+  enterRoom(roomName) {
+    return this.put('/users/enter-room/' + (roomName || ''))
+  }
+  leaveRoom() {
+    return this.put('/users/leave-room')
+  }
+
+  upload(file, progressCallback) {
+    return new Promise((resolve, reject) => {
+      const chunkSize = 32 * 1024
+      let reader = new FileReader()
+      const fileSize = file.size
+      const numberOfChunks = Math.ceil(fileSize / chunkSize)
+      let chunk = 0
+      let uploadId = null
+
+      reader.onload = (e) => {
+        const buffer = e.target.result
+        const bytesRead = buffer.byteLength
+
+        this.post('/assets/upload/' + uploadId, buffer, {
+          binary: { offset: chunk * chunkSize, length: bytesRead }
+        }).then((uploadData) => {
+          chunk++
+          if (!progressCallback(uploadData)) {
+            return Promise.reject(new Error('Upload was canceled'))
+          }
+          if (chunk < numberOfChunks) {
+            let start = chunk * chunkSize
+            let end = Math.min(fileSize, start + chunkSize)
+            reader.readAsArrayBuffer(file.slice(start, end))
+          } else {
+            resolve(uploadData)
+          }
+        }).catch((err) => {
+          reject(err)
+        })
+      }
+
+      this.post('/assets/upload', {
+        fileName: file.name,
+        fileSize,
+        contentType: file.type,
+        numberOfChunks
+      }).then((uploadData) => {
+        uploadId = uploadData.uploadId
+        reader.readAsArrayBuffer(file.slice(0, chunkSize))
+      }).catch((err) => {
+        reject(err)
+      })
+    })
+  }
+}
+
+export let api = new API()

mobile/src/screens/Error.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, Text, Image, Button } from 'react-native';
+import { reactAutoBind } from 'auto-bind2'
+
+export class Error extends React.Component {
+  static navigatorStyle = {
+    navBarHidden: true,
+  }
+
+  static styles = StyleSheet.create({
+    page: {
+      minHeight: '50%',
+      flex: 1,
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  })
+
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+  }
+
+  render() {
+    return (
+      <View style={Login.styles.page}>
+      </View>
+    )
+  }
+}

mobile/src/screens/Home.js

@@ -1,44 +1,63 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { api } from '../API'
 
 export class Home extends React.Component {
+  static navigatorButtons = {
+    rightButtons: [
+      {
+        icon: require('./images/ar-glases.png'),
+        id: 'arview',
+      }
+    ],
+    leftButtons: [
+      {
+        icon: require('./images/logout.png'),
+        id: 'logout',
+      }
+    ]
+  }
+
+  static styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  })
+
   constructor(props) {
     super(props);
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this))
   }
 
   onNavigatorEvent(event) {
-    switch(event.id) {
+    switch (event.id) {
+      case 'logout':
+        api.logout().then(() => {
+          this.props.navigator.showModal({ screen: 'app.Login' })
+        })
       case 'willAppear':
-       break;
+        break
       case 'didAppear':
-        this.props.navigator.showModal({ screen: 'app.Login' })
+        if (!api.loggedInUser) {
+          this.props.navigator.showModal({ screen: 'app.Login' })
+        }
         break;
       case 'willDisappear':
-        break;
+        break
       case 'didDisappear':
-        break;
+        break
       case 'willCommitPreview':
-        break;
+        break
     }
   }
 
   render() {
     return (
-      <View style={styles.container}>
-        <Text>Hello John</Text>
-        <Text>Changes you make will automatically reload.</Text>
-        <Text>Shake your phone to open the developer menu.</Text>
+      <View style={Home.styles.container}>
       </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

mobile/src/screens/Login.js

@@ -1,36 +1,108 @@
 import React from 'react';
-import { StyleSheet, Text, Image, Switch, TextInput, View, Button } from 'react-native';
+import { StyleSheet, Text, Image, Switch, TextInput, KeyboardAvoidingView, ScrollView, View, Button, Alert, InteractionManager } from 'react-native';
 import logoImage from './images/deighton.png'
+import { FormBinder } from 'react-form-binder'
+import { api } from '../API'
+import { BoundSwitch, BoundInput, BoundButton } from '../ui'
+import { reactAutoBind } from 'auto-bind2'
 
 export class Login extends React.Component {
+  static navigatorStyle = {
+    navBarHidden: true,
+  }
+
+  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)
+    reactAutoBind(this)
+    this.state = {
+      binder: new FormBinder({}, Login.bindings)
+    }
   }
 
   handleLogin() {
-    this.props.navigator.dismissModal()
+    let obj = this.state.binder.getModifiedFieldValues()
+    let { navigator } = this.props
+
+    if (obj) {
+      api.login(obj.email, obj.password, obj.rememberMe).then((user) => {
+        this.props.navigator.dismissAllModals()
+      }).catch((error) => {
+        this.props.navigator.dismissModal()
+      })
+    }
   }
 
   render() {
     return (
-      <View style={styles.container}>
-        <Image source={logoImage} />
-        <Text>Email:</Text>
-        <TextInput />
-        <Text>Password:</Text>
-        <TextInput />
-        <Switch /><Text>Remember Me</Text>
-        <Button title='Login' onPress={this.handleLogin.bind(this)} />
-      </View>
-    );
+      <KeyboardAvoidingView style={Login.styles.page} behavior='padding'>
+        <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='40%' onPress={this.handleLogin} binder={this.state.binder} />
+        </View>
+      </KeyboardAvoidingView>
+    )
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#00ff00',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

mobile/src/screens/index.js

@@ -1,8 +1,10 @@
 import { Home } from './Home'
 import { Login } from './Login'
+import { Error } from './Error'
 import { Navigation } from 'react-native-navigation'
 
 export function registerScreens() {
   Navigation.registerComponent('app.Home', () => Home)
   Navigation.registerComponent('app.Login', () => Login)
+  Navigation.registerComponent('app.Error', () => Error)
 }

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>
+      )
+    }
+  }
+}

mobile/src/ui/BoundInput.js

@@ -0,0 +1,59 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { TextInput, Text, View } from 'react-native'
+import { reactAutoBind } from 'auto-bind2'
+
+export class BoundInput extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    message: PropTypes.string,
+    label: PropTypes.string,
+    binder: PropTypes.object.isRequired,
+    password: PropTypes.bool,
+    placeholder: PropTypes.string
+  }
+
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+    this.state = props.binder.getFieldState(props.name)
+  }
+
+  handleChangeText(newText) {
+    const { binder, name } = this.props
+    const state = binder.getFieldState(name)
+
+    if (!state.readOnly && !state.disabled) {
+      this.setState(binder.updateFieldValue(name, newText))
+    }
+  }
+
+  render() {
+    const { label, password, name, placeholder, message } = this.props
+    const { visible, disabled, value, valid } = this.state
+
+    if (!visible) {
+      return null
+    }
+
+    // TODO: Disabled
+
+    return (
+      <View style={{ width: '100%' }}>
+        <Text style={{ color: 'black', fontSize: 14, marginBottom: 5 }}>{label}</Text>
+        <TextInput style={{ width: '100%', paddingLeft: 5, paddingRight: 5, height: 40, borderColor: 'gray', borderWidth: 1, fontSize: 16 }}
+          autoCapitalize='none'
+          underlineColorAndroid='white'
+          value={value}
+          secureTextEntry={password}
+          onChangeText={this.handleChangeText}
+          placeholder={placeholder} />
+        <Text style={{
+          fontSize: 12,
+          display: valid ? 'none' : 'flex',
+          color: 'red',
+        }}>{message}</Text>
+      </View>
+    )
+  }
+}

mobile/src/ui/BoundSwitch.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, Switch, Text } from 'react-native'
+import { reactAutoBind } from 'auto-bind2'
+
+export class BoundSwitch extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    binder: PropTypes.object.isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+    this.state = props.binder.getFieldState(props.name)
+  }
+
+  handleValueChange() {
+    const { binder, name } = this.props
+    const state = binder.getFieldState(name)
+
+    if (!state.readOnly && !state.disabled) {
+      this.setState(binder.updateFieldValue(name, !state.value))
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.binder !== this.props.binder) {
+      this.setState(nextProps.binder.getFieldState(nextProps.name))
+    }
+  }
+
+  render() {
+    const { name, label } = this.props
+    const { visible, disabled, value } = this.state
+
+    return (
+      <View style={{
+          display: visible ? 'flex' : 'none',
+          flexDirection: 'row',
+        }}>
+        <Switch disabled={disabled} value={value} onValueChange={this.handleValueChange} />
+        <Text style={{
+            color: disabled ? 'gray' : 'black',
+            fontSize: 16,
+            paddingLeft: 8,
+            alignSelf: 'center'
+          }}>
+          {label}
+        </Text>
+      </View>
+    )
+  }
+}

mobile/src/ui/index.js

@@ -0,0 +1,3 @@
+export { BoundSwitch } from './BoundSwitch'
+export { BoundInput } from './BoundInput'
+export { BoundButton } from './BoundButton'