Add passcode auth route flow

README.md

@@ -8,7 +8,8 @@ A mobile app for storing and rotating pin codes. Bootstrapped with [Create React
 
 #### To-Dos:
 
-* Security code prompt on open
+* ~~Security code prompt on open~~
+* Increase code coverage to a not-so dismal level
 * Initiated code rotation (app will generate randomly)
 * Scheduled code rotation (app will generate randomly)
 

src/components/PasscodeAuth.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Button, FormValidationMessage } from 'react-native-elements';
+
+import FormRow from './FormRow';
+
+class PasscodeAuth extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      passcode: '',
+    };
+
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleFormSubmit = this.handleFormSubmit.bind(this);
+  }
+
+  handleFormSubmit() {
+    this.props.handlePasscodeSubmit(this.state.passcode);
+  }
+
+  handleInputChange(stateKey, data) {
+    this.setState({
+      [stateKey]: data,
+    });
+  }
+
+  render() {
+    const { error } = this.props;
+    const { passcode } = this.state;
+    return (
+      <View>
+        <FormRow
+          label="Passcode"
+          name="passcode"
+          value={passcode}
+          onInputChange={this.handleInputChange}
+        />
+        {error ? <FormValidationMessage>{error}</FormValidationMessage> : null}
+        <Button
+          title="Set Passcode"
+          icon={{ name: 'add' }}
+          onPress={this.handleFormSubmit}
+          buttonStyle={styles.buttonStyle}
+          disabled={!passcode}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  buttonStyle: {
+    top: 40,
+    backgroundColor: '#669AE0',
+  },
+});
+
+export default PasscodeAuth;

src/components/PasscodeForm.js

@@ -19,7 +19,6 @@ class PasscodeForm extends React.Component {
 
   handleFormSubmit() {
     const { passcode, repeatPasscode } = this.state;
-
     if (passcode !== repeatPasscode) {
       this.setState({
         error: "Passcodes doesn't match",

src/config/router.js

@@ -1,31 +1,36 @@
 import React from 'react';
-import { StackNavigator } from 'react-navigation';
+import { StackNavigator, SwitchNavigator } from 'react-navigation';
 
 import Home from '../screens/Home';
 import Details from '../screens/Details';
 import Entry from '../screens/Entry';
 import Menu from '../screens/Menu';
 import SetPasscode from '../screens/SetPasscode';
+import Auth from '../screens/Auth';
 
-export default StackNavigator(
+const AppStack = StackNavigator({
+  Home,
+  Details,
+  Entry,
+  Menu,
+  SetPasscode,
+});
+
+const AuthStack = StackNavigator(
+  {
+    Auth,
+  },
+  {
+    initialRouteName: 'Auth',
+  }
+);
+
+export default SwitchNavigator(
   {
-    Home: {
-      screen: Home,
-    },
-    Details: {
-      screen: Details,
-    },
-    Entry: {
-      screen: Entry,
-    },
-    Menu: {
-      screen: Menu,
-    },
-    SetPasscode: {
-      screen: SetPasscode,
-    },
+    Auth: AuthStack,
+    App: AppStack,
   },
   {
-    initialRouteName: 'Home',
+    initialRouteName: 'Auth',
   }
 );

src/screens/Auth.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { NavigationActions } from 'react-navigation';
+
+import PasscodeAuth from '../components/PasscodeAuth';
+import {
+  getPasscodeRequirement,
+  getCurrentPasscode,
+} from '../redux/modules/settings';
+import { hashString } from '../utils/crypto';
+
+class Auth extends React.Component {
+  static navigationOptions = {
+    title: 'Passcode Auth',
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+    };
+    this._isPasscodeValid = this._isPasscodeValid.bind(this);
+  }
+
+  componentDidMount() {
+    if (!this.props.requirePasscode) {
+      this.props.navigation.navigate('Home');
+    }
+  }
+
+  _isPasscodeValid(passcode) {
+    const { currentPasscode } = this.props;
+    if (hashString(passcode) !== currentPasscode) {
+      this.setState({
+        error: 'Passcode Invalid!',
+      });
+      return;
+    }
+
+    this.props.navigation.navigate('Home');
+    this.props.navigation.dispatch(
+      NavigationActions.reset({
+        index: 0,
+        actions: [NavigationActions.navigate({ routeName: 'Home' })],
+      })
+    );
+  }
+
+  render() {
+    const { error } = this.state;
+    return (
+      <PasscodeAuth
+        handlePasscodeSubmit={this._isPasscodeValid}
+        error={error}
+      />
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  requirePasscode: getPasscodeRequirement(state),
+  currentPasscode: getCurrentPasscode(state),
+});
+
+export default connect(mapStateToProps)(Auth);