Add a Splash screen that checks keychain login (#923)

native/app/components/LoginPanel.js

@@ -2,43 +2,40 @@ import fxaUtils from '../vendor/fxa-utils';
 import kintoClient from '../vendor/kinto-client';
 import PropTypes from 'prop-types';
 import React from 'react';
+import store from '../store';
 import sync from '../sync';
+import { authenticate } from '../actions';
 import { Button } from 'react-native-paper';
 import { COLOR_NOTES_BLUE } from '../utils/constants';
 import { connect } from 'react-redux';
+import { NavigationActions } from 'react-navigation';
 import { trackEvent } from '../utils/metrics';
 import { View, Text, ToastAndroid, Image } from 'react-native';
 
-const FXA_OAUTH_SERVER = 'https://oauth-featurebox.dev.lcip.org/v1';
-const OAUTH_CLIENT_ID = 'b7d74070a481bc11';
-const OAUTH_REDIRECT = 'https://mozilla-lockbox.github.io/fxa/ios-redirect.html';
-const OAUTH_SCOPES = ['profile', 'https://identity.mozilla.com/apps/notes'];
-
-const refreshConfig = {
-  serviceConfiguration: {
-    authorizationEndpoint: `${FXA_OAUTH_SERVER}/authorization`,
-    tokenEndpoint: `${FXA_OAUTH_SERVER}/token`
-  },
-  clientId: OAUTH_CLIENT_ID,
-  redirectUrl: OAUTH_REDIRECT,
-  scopes: OAUTH_SCOPES
-};
 
 class LoginPanel extends React.Component {
-  onAuth (options={}) {
+  onAuth () {
     this.props.navigation.navigate('LoadingPanel');
 
     return Promise.resolve().then(() => {
       return fxaUtils.launchOAuthKeyFlow();
     }).then((loginDetails) => {
       trackEvent('login-success');
+      store.dispatch(authenticate(loginDetails.profile.email));
 
       ToastAndroid.show('Logged in as ' + loginDetails.profile.email, ToastAndroid.SHORT);
       return sync.loadFromKinto(kintoClient, loginDetails);
     }).then(() => {
-      this.props.navigation.navigate('ListPanel');
+      // Reset back button nav. See https://reactnavigation.org/docs/navigation-actions.html#reset
+      this.props.navigation.dispatch(NavigationActions.reset({
+        index: 0,
+        actions: [NavigationActions.navigate({ routeName: 'ListPanel' })],
+      }));
     }).catch((err) => {
-      this.props.navigation.navigate('LoginPanel');
+      this.props.navigation.dispatch(NavigationActions.reset({
+        index: 0,
+        actions: [NavigationActions.navigate({ routeName: 'LoginPanel' })],
+      }));
       console.log('onAuth', err);
       ToastAndroid.show('Something went wrong: ' + err, ToastAndroid.SHORT);
       trackEvent('login-failed');

native/app/components/SplashPanel.js

@@ -0,0 +1,48 @@
+import fxaUtils from '../vendor/fxa-utils';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { NavigationActions } from 'react-navigation';
+import { View, Text, ToastAndroid, Image } from 'react-native';
+
+class SplashPanel extends React.Component {
+  componentDidMount() {
+    fxaUtils.fxaGetCredential().then((loginDetails) => {
+      if (loginDetails && loginDetails.profile) {
+        this.props.navigation.dispatch(NavigationActions.reset({
+          index: 0,
+          actions: [NavigationActions.navigate({ routeName: 'ListPanel' })],
+        }));
+      } else {
+        this.props.navigation.dispatch(NavigationActions.reset({
+          index: 0,
+          actions: [NavigationActions.navigate({ routeName: 'LoginPanel' })],
+        }));
+      }
+    });
+  }
+
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Image
+          style={{width: 150, height: 150 }}
+          source={require('../assets/notes-1024.png')}
+        />
+      </View>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    state
+  };
+}
+
+SplashPanel.propTypes = {
+  state: PropTypes.object.isRequired,
+  dispatch: PropTypes.func.isRequired
+};
+
+export default connect(mapStateToProps)(SplashPanel)

native/index.js

@@ -25,6 +25,7 @@ import ListPanel from './app/components/ListPanel';
 import LoadingPanel from './app/components/LoadingPanel';
 import LoginPanel from './app/components/LoginPanel';
 import MoreMenu from './app/components/MoreMenu';
+import SplashPanel from './app/components/SplashPanel';
 
 const appMainNavOptions = ({ navigation }) => {
   const { params = {} } = navigation.state;
@@ -66,8 +67,34 @@ const editorPanelOptions = ({ navigation }) => {
   };
 };
 
+const fade = (props) => {
+  const {position, scene} = props
+
+  const index = scene.index
+
+  const translateX = 0
+  const translateY = 0
+
+  const opacity = position.interpolate({
+    inputRange: [index - 0.7, index, index + 0.7],
+    outputRange: [0.3, 1, 0.3]
+  })
+
+  return {
+    opacity,
+    transform: [{translateX}, {translateY}]
+  }
+}
+
 const AppNavigator = StackNavigator(
   {
+    SplashPanel: {
+      screen: SplashPanel,
+      navigationOptions: {
+        header: null,
+        drawerLockMode: 'locked-closed',
+      }
+    },
     LoginPanel: {
       screen: LoginPanel,
       navigationOptions: {
@@ -91,8 +118,13 @@ const AppNavigator = StackNavigator(
     },
   },
   {
-    initialRouteName: 'ListPanel',
-    navigationOptions: appMainNavOptions
+    initialRouteName: 'SplashPanel',
+    navigationOptions: appMainNavOptions,
+    transitionConfig: () => ({
+      screenInterpolator: (props) => {
+        return fade(props)
+      }
+    })
   }
 );