Refactored authentication logic. +AuthenticationSourcesand -AuthModal

src/app.js

@@ -19,6 +19,7 @@ import MainSideMenu from "@SideMenu/MainSideMenu"
 import NoteSideMenu from "@SideMenu/NoteSideMenu"
 import Settings from "@Screens/Settings"
 import InputModal from "@Screens/InputModal"
+import Authenticate from "@Screens/Authentication/Authenticate"
 
 import SideMenuManager from "@SideMenu/SideMenuManager"
 
@@ -70,10 +71,15 @@ const InputModalStack = createStackNavigator({
   Screen1: InputModal
 })
 
+const AuthenticateModalStack = createStackNavigator({
+  Screen1: Authenticate
+})
+
 const AppDrawer = createStackNavigator({
   Home: AppDrawerStack,
   Settings: SettingsStack,
-  InputModal: InputModalStack
+  InputModal: InputModalStack,
+  Authenticate: AuthenticateModalStack
 }, {
   mode: "modal",
   headerMode: 'none',

src/components/SectionHeader.js

@@ -9,11 +9,16 @@ export default class SectionHeader extends ThemedComponent {
     var title = this.props.title;
     if(Platform.OS == "ios") { title = title.toUpperCase(); }
     return (
-      <View style={[this.styles.sectionHeaderContainer, {backgroundColor: this.props.backgroundColor, color: this.props.foregroundColor}]}>
-        <Text style={this.styles.sectionHeader}>{title}</Text>
+      <View style={[this.styles.container, {backgroundColor: this.props.backgroundColor, color: this.props.foregroundColor}]}>
+        <View>
+          <Text style={[this.styles.title, this.props.tinted ? {color: StyleKit.variables.stylekitInfoColor} : null]}>{title}</Text>
+          {this.props.subtitle &&
+            <Text style={this.styles.subtitle}>{this.props.subtitle}</Text>
+          }
+        </View>
         {this.props.buttonText &&
           <TouchableOpacity onPress={this.props.buttonAction}>
-            <Text style={this.styles.sectionHeaderButton}>{this.props.buttonText}</Text>
+            <Text style={this.styles.button}>{this.props.buttonText}</Text>
           </TouchableOpacity>
         }
       </View>
@@ -22,7 +27,7 @@ export default class SectionHeader extends ThemedComponent {
 
   loadStyles() {
     this.styles = {
-      sectionHeaderContainer: {
+      container: {
         flex: 1,
         flexGrow: 0,
         justifyContent: "space-between",
@@ -33,19 +38,27 @@ export default class SectionHeader extends ThemedComponent {
         backgroundColor: StyleKit.variables.stylekitBackgroundColor
       },
 
-      sectionHeader: {
+      title: {
         backgroundColor: StyleKit.variables.stylekitBackgroundColor,
         fontSize: StyleKit.constants.mainTextFontSize - 4,
         paddingLeft: StyleKit.constants.paddingLeft,
         color: StyleKit.variables.stylekitNeutralColor,
         fontWeight: Platform.OS == "android" ? "bold" : "normal"
       },
 
-      sectionHeaderButton: {
+      subtitle: {
+        backgroundColor: StyleKit.variables.stylekitBackgroundColor,
+        fontSize: StyleKit.constants.mainTextFontSize - 5,
+        marginTop: 4,
+        paddingLeft: StyleKit.constants.paddingLeft,
+        color: StyleKit.variables.stylekitNeutralColor,
+      },
+
+      button: {
         color: StyleKit.variables.stylekitInfoColor
       },
 
-      sectionHeaderAndroid: {
+      titleAndroid: {
         fontSize: StyleKit.constants.mainTextFontSize - 2,
         color: StyleKit.variables.stylekitInfoColor
       },

src/containers/LockedView.js

@@ -11,7 +11,7 @@ export default class LockedView extends Component {
 
   render() {
     let color = StyleKit.variable("stylekitInfoColor");
-    var styles = [StyleKit.styles.centeredContainer];
+    var styles = [StyleKit.styles.centeredContainer, {backgroundColor: StyleKit.variables.stylekitBackgroundColor}];
     if(this.props.style) {
       styles.push(this.props.style);
     }

src/lib/ApplicationState.js

@@ -1,6 +1,8 @@
 import {AppState, Platform} from 'react-native'
 import KeysManager from "@Lib/keysManager"
 import OptionsState from "@Lib/OptionsState"
+import AuthenticationSourceLocalPasscode from "@Screens/Authentication/Sources/AuthenticationSourceLocalPasscode";
+import AuthenticationSourceFingerprint from "@Screens/Authentication/Sources/AuthenticationSourceFingerprint";
 var pjson = require('../package.json')
 
 export default class ApplicationState {
@@ -87,7 +89,7 @@ export default class ApplicationState {
   // Sent from App.js
   receiveApplicationStartEvent() {
     var authProps = this.getAuthenticationPropsForAppState(ApplicationState.Launching);
-    if(!authProps.passcode && !authProps.fingerprint) {
+    if(authProps.sources.length == 0) {
       this.unlockApplication();
     }
   }
@@ -98,12 +100,13 @@ export default class ApplicationState {
       return;
     }
 
-    var isResuming = nextAppState === "active";
+    // if the most recent state is not 'background' ('inactive'), then we're going
+    // from inactive to active, which doesn't really happen unless you, say, swipe
+    // notification center in iOS down then back up. We don't want to lock on this state change.
+    var isResuming = nextAppState === "active" && this.mostRecentState == "background";
     var isEnteringBackground = nextAppState == 'background';
     var isLosingFocus = nextAppState == 'inactive';
 
-    // console.log("APP STATE CHANGE FROM", this.mostRecentState, "TO STATE", this.applicationStateForNativeState(nextAppState));
-
     if(isEnteringBackground) {
       this.didEnterBackground();
     }
@@ -117,20 +120,6 @@ export default class ApplicationState {
     }
   }
 
-  applicationStateForNativeState(nativeState) {
-    if(nativeState == 'active') {
-      return ApplicationState.Resuming;
-    }
-
-    if(nativeState == 'background') {
-      return ApplicationState.Backgrounding;
-    }
-
-    if(nativeState == 'inactive') {
-      return ApplicationState.LosingFocus;
-    }
-  }
-
   // An app cycle change are natural events like active, inactive, background,
   // while non-app cycle events are custom events like locking and unlocking
 
@@ -263,7 +252,7 @@ export default class ApplicationState {
 
   getAuthenticationPropsForAppState(state) {
     if(state == ApplicationState.Unlocking || state == ApplicationState.Locking) {
-      return {};
+      return {sources: []};
     }
 
     var hasPasscode = KeysManager.get().hasOfflinePasscode();
@@ -278,10 +267,13 @@ export default class ApplicationState {
 
     var title = showPasscode && showFingerprint ? "Authentication Required" : (showPasscode ? "Passcode Required" : "Fingerprint Required");
 
+    let sources = [];
+    if(showPasscode) { sources.push(new AuthenticationSourceLocalPasscode()); }
+    if(showFingerprint) { sources.push(new AuthenticationSourceFingerprint()); }
+
     return {
       title: title,
-      passcode: showPasscode || false,
-      fingerprint: showFingerprint || false,
+      sources: sources,
       onAuthenticate: this.unlockApplication.bind(this)
     }
   }

src/screens/Abstract.js

@@ -131,8 +131,6 @@ export default class Abstract extends ThemedComponent {
   }
 
   componentWillFocus() {
-    this.willUnmount = false;
-    this.mounted = false;
     if(ApplicationState.get().isUnlocked() && this.state.lockContent) {
       this.unlockContent();
     }