From 92dfafdd36062f6b14c20ce9e64cbea4113d07f7 Mon Sep 17 00:00:00 2001 From: Mo Bitar Date: Tue, 3 Oct 2017 13:18:08 -0500 Subject: [PATCH] Native modal wip --- src/app.js | 104 +++++++----------------------------- src/screens/Abstract.js | 32 ++++++++++- src/screens/Account.js | 8 +-- src/screens/Authenticate.js | 5 +- src/screens/Notes.js | 9 ++-- 5 files changed, 62 insertions(+), 96 deletions(-) diff --git a/src/app.js b/src/app.js index 3912f676..3a3b1766 100644 --- a/src/app.js +++ b/src/app.js @@ -2,6 +2,7 @@ * Standard Notes React Native App */ +import React, { Component } from 'react'; import {AppState, Platform, StatusBar, BackHandler, DeviceEventEmitter, NativeModules} from 'react-native'; import {Navigation, ScreenVisibilityListener} from 'react-native-navigation'; @@ -68,33 +69,6 @@ export default class App { } }) - // Screen visibility listener - this.listener = new ScreenVisibilityListener({ - willAppear: ({screen, startTime, endTime, commandType}) => { - // This handles authentication for the initial app launch. We wait for the Notes component to be ready - // (meaning the app UI is ready), then present the authentication modal - if(screen == "sn.Notes" && this.authenticationQueued) { - this.authenticationQueued = false; - this.handleAuthentication(this.queuedAuthenticationLaunchState); - this.queuedAuthenticationLaunchState = null; - } - }, - - didAppear: ({screen, startTime, endTime, commandType}) => { - if(screen == "sn.Authenticate") { - this.modalVisible = true; - } - }, - - didDisappear: ({screen, startTime, endTime, commandType}) => { - if(screen == "sn.Authenticate") { - this.modalVisible = false; - } - }, - }); - - this.listener.register(); - // Listen to sign out event this.signoutObserver = Auth.getInstance().addEventObserver([Auth.DidSignOutEvent, Auth.WillSignInEvent], function(event){ if(event == Auth.DidSignOutEvent) { @@ -131,7 +105,7 @@ export default class App { "IS STARTING APP:", this.isStartingApp, "IS ENTERING BACKGROUND", isEnteringBackground, "IS ENTERING FOREGROUND", isEnteringForeground, - "WILL AUTHENTICATE", isEnteringForeground && !this.authenticationInProgress && !this.modalVisible + "WILL AUTHENTICATE", isEnteringForeground && !this.authenticationInProgress ); // Hide screen content as we go to the background @@ -141,13 +115,6 @@ export default class App { } } - // Handle authentication as we come back from the background - if (isEnteringForeground && !this.authenticationInProgress && !this.modalVisible) { - setTimeout(() => { - this.handleAuthentication(WARM_LAUNCH_STATE); - }, 500); - } - this.previousAppState = nextAppState; } @@ -270,10 +237,6 @@ export default class App { this.loading = false; var run = () => { this.startApp(); - var handled = this.handleAuthentication(COLD_LAUNCH_STATE, true); - if(!handled) { - this.onAuthenticationSuccess(); - } } if(KeysManager.get().isFirstRun()) { KeysManager.get().handleFirstRun().then(run); @@ -300,61 +263,30 @@ export default class App { this.applicationIsReady(); } - handleAuthentication(fromState, queue = false) { + setAuthenticationComponentProps(title, passcode, fingerprint, onAuthenticate) { + this.authProps = { + title: title, + passcode: passcode, + fingerprint: fingerprint, + onAuthenticate: onAuthenticate + } + } + + getAuthenticationProps() { var hasPasscode = KeysManager.get().hasOfflinePasscode(); var hasFingerprint = KeysManager.get().hasFingerprint(); - var showPasscode, showFingerprint; - - if(fromState == COLD_LAUNCH_STATE) { - showPasscode = hasPasscode; - showFingerprint = hasFingerprint; - } else if(fromState == WARM_LAUNCH_STATE) { - showPasscode = hasPasscode && KeysManager.get().passcodeTiming == "immediately"; - showFingerprint = hasFingerprint && KeysManager.get().fingerprintTiming == "immediately"; - } - - if(!showPasscode && !showFingerprint) { - return false; - } - this.isAuthenticated = false; - - if(queue) { - this.authenticationQueued = true; - this.queuedAuthenticationLaunchState = fromState; - return true; - } - - if(this.modalVisible) { - console.log("MODAL IS VISIBLE. NOT SUPPOSED TO BE."); - } - this.authenticationInProgress = true; - this.showAuthenticate(showPasscode, showFingerprint, this.onAuthenticationSuccess.bind(this)); + var title = hasPasscode && hasFingerprint ? "Authentication Required" : (hasPasscode ? "Passcode Required" : "Fingerprint Required"); - return true; - } - - showAuthenticate(passcode, fingerprint, onAuthenticate) { - var title = passcode && fingerprint ? "Authentication Required" : (passcode ? "Passcode Required" : "Fingerprint Required"); - - Navigation.showModal({ - screen: 'sn.Authenticate', + return { title: title, - backButtonHidden: true, - overrideBackPress: true, - passProps: { - mode: "authenticate", - onAuthenticateSuccess: onAuthenticate, - requirePasscode: passcode, - requireFingerprint: fingerprint - }, - animationType: 'slide-up', - tabsStyle: _.clone(this.tabStyles), // for iOS - appStyle: _.clone(this.tabStyles) // for Android - }) + passcode: hasPasscode, + fingerprint: hasFingerprint, + onAuthenticate: this.onAuthenticationSuccess.bind(this) + } } startApp() { diff --git a/src/screens/Abstract.js b/src/screens/Abstract.js index 8d28df13..490a8324 100644 --- a/src/screens/Abstract.js +++ b/src/screens/Abstract.js @@ -1,8 +1,9 @@ import React, { Component } from 'react'; -import {DeviceEventEmitter} from 'react-native'; +import {DeviceEventEmitter, Modal} from 'react-native'; var _ = require('lodash') import GlobalStyles from "../Styles" import App from "../app" +import Authenticate from "./Authenticate" export default class Abstract extends Component { @@ -129,4 +130,33 @@ export default class Abstract extends Component { } } + // render() { + // if(!this.rendersLockscreen) { + // return (); + // } + // + // var props = App.get().getAuthenticationProps(); + // + // return ( + // {alert("Modal has been closed.")}}> + // + // + // + // + // ) + // } + } diff --git a/src/screens/Account.js b/src/screens/Account.js index 703b8241..eeb55183 100644 --- a/src/screens/Account.js +++ b/src/screens/Account.js @@ -37,6 +37,8 @@ export default class Account extends Abstract { this.state = {ready: false, params: {}}; + this.rendersLockscreen = true; + this.readyObserver = App.get().addApplicationReadyObserver(() => { this.applicationIsReady = true; @@ -365,10 +367,10 @@ export default class Account extends Abstract { } render() { - if(this.state.lockContent) { - return (); + if(!this.state.ready || this.state.lockContent) { + return super.render(); } - + let signedIn = !Auth.getInstance().offline(); var themes = GlobalStyles.get().themes(); diff --git a/src/screens/Authenticate.js b/src/screens/Authenticate.js index d41e864a..7e9570b8 100644 --- a/src/screens/Authenticate.js +++ b/src/screens/Authenticate.js @@ -34,10 +34,13 @@ export default class Authenticate extends Abstract { constructor(props) { super(props); + console.log("Constructing Authentication Component"); } dismiss() { - this.dismissModal(); + if(!this.props.pseudoModal) { + this.dismissModal(); + } } onNavigatorEvent(event) { diff --git a/src/screens/Notes.js b/src/screens/Notes.js index d9cc2377..4e2523bb 100644 --- a/src/screens/Notes.js +++ b/src/screens/Notes.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { StyleSheet, View, Platform, Text, AppState, StatusBar } from 'react-native'; +import { StyleSheet, View, Platform, Text, AppState, StatusBar, Modal } from 'react-native'; import ModelManager from '../lib/modelManager' import Storage from '../lib/storage' import Sync from '../lib/sync' @@ -11,7 +11,6 @@ import Keychain from "../lib/keychain" import Icons from '../Icons'; import NoteList from "../containers/NoteList" import Abstract from "./Abstract" -import Authenticate from "./Authenticate" import OptionsState from "../OptionsState" import App from "../app" var _ = require('lodash') @@ -21,6 +20,8 @@ export default class Notes extends Abstract { constructor(props) { super(props); + this.rendersLockscreen = true; + this.state = {ready: false}; this.readyObserver = App.get().addApplicationReadyObserver(() => { @@ -340,9 +341,7 @@ export default class Notes extends Abstract { render() { if(!this.state.ready || this.state.lockContent) { - return ( - - ); + return super.render(); } var result = ModelManager.getInstance().getNotes(this.options);