Add SIS credential error handling (#174)

* Add error handling for a user not having credentials entered for SIS view

Add a button that redirects them to settings, with an error message.

* add function to check if login is good

* rebuild SISView around login checks

* also actually set `loaded` so the loading screen goes away

Author: elijahverdoorn

lib/financials.js

@@ -94,4 +94,3 @@ export default async function getWeeklyMealsRemaining() {
   let loginResult = await api.post('/apps/olecard/checkbalance/authenticate.cfm', {body: form})
   return loginResult
 }
-

lib/login.js

@@ -27,6 +27,10 @@ export function clearLoginCredentials(): Promise<any> {
     .catch(() => {})
 }
 
+export async function isLoggedIn(): Promise<boolean> {
+  let result = await AsyncStorage.getItem('credentials:valid')
+  return JSON.parse(result)
+}
 
 export function checkLogin(username: string, password: string): Promise<boolean> {
   return sisLogin(username, password).then(res => res.result)

views/sis/index.js

@@ -5,20 +5,88 @@
  */
 
 import React from 'react'
-import {StyleSheet} from 'react-native'
+import {
+  StyleSheet,
+  Text,
+  View,
+  Navigator,
+} from 'react-native'
 
 import TabbedView from '../components/tabbed-view'
+import Button from 'react-native-button'
 import tabs from './tabs'
-
+import LoadingView from '../components/loading'
+import {isLoggedIn} from '../../lib/login'
+import * as c from '../components/colors'
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  error: {
+    marginTop: 50,
+    marginLeft: 20,
+    marginRight: 20,
+  },
+  errorButton: {
+    backgroundColor: c.denim,
+    width: 200,
+    color: c.white,
+    alignSelf: 'center',
+    height: 30,
+    paddingTop: 3,
+    marginBottom: 10,
+    marginTop: 10,
+    borderRadius: 6,
+    overflow: 'hidden',
+  },
 })
 
-export default function SISView() {
-  return <TabbedView style={styles.container} tabs={tabs} />
-}
+export default class SISView extends React.Component {
+  static propTypes = {
+    navigator: React.PropTypes.instanceOf(Navigator).isRequired,
+    route: React.PropTypes.object.isRequired,
+  }
+
+  state = {
+    loggedIn: false,
+    loaded: false,
+  };
+
+  componentWillMount() {
+    this.load()
+  }
+
+  load = async () => {
+    let loggedIn = await isLoggedIn()
+    this.setState({loggedIn, loaded: true})
+  }
+
+  render() {
+    let {navigator, route} = this.props
+
+    if (!this.state.loaded) {
+      return <LoadingView />
+    }
+
+    // Check if the user has a valid username and password
+    if (this.state.loggedIn) {
+      return <TabbedView style={styles.container} tabs={tabs} />
+    }
 
-SISView.propTypes = {
+    return (
+      <View style={styles.error}>
+        <Text>Sorry, we couldn't find your login credentials. Did you set them up in the settings?</Text>
+        <Button
+          onPress={() =>
+            navigator.push({
+              id: 'SettingsView',
+              index: route.index + 1,
+              title: 'Settings',
+            })
+          }
+          style={styles.errorButton}
+        >Open Settings</Button>
+      </View>
+    )
+  }
 }