Refactor locking feature (#693)

6 files changed, 153 insertions, 138 deletions

diff --git a/src/app.js b/src/app.js
index 0e24420c3..aab1729d7 100644
--- a/src/app.js
+++ b/src/app.js
@@ -5,7 +5,7 @@ import { render } from 'react-dom';
 import { Provider } from 'mobx-react';
 import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
 import {
-  Router, Route, hashHistory, IndexRedirect,
+  hashHistory,
 } from 'react-router';
 
 import '@babel/polyfill';
@@ -20,33 +20,7 @@ import MenuFactory from './lib/Menu';
 import TouchBarFactory from './lib/TouchBar';
 
 import I18N from './I18n';
-import AppLayoutContainer from './containers/layout/AppLayoutContainer';
-import SettingsWindow from './containers/settings/SettingsWindow';
-import RecipesScreen from './containers/settings/RecipesScreen';
-import ServicesScreen from './containers/settings/ServicesScreen';
-import EditServiceScreen from './containers/settings/EditServiceScreen';
-import AccountScreen from './containers/settings/AccountScreen';
-import TeamScreen from './containers/settings/TeamScreen';
-import EditUserScreen from './containers/settings/EditUserScreen';
-import EditSettingsScreen from './containers/settings/EditSettingsScreen';
-import InviteSettingsScreen from './containers/settings/InviteScreen';
-import SupportFerdiScreen from './containers/settings/SupportScreen';
-import WelcomeScreen from './containers/auth/WelcomeScreen';
-import LoginScreen from './containers/auth/LoginScreen';
-import LockedScreen from './containers/auth/LockedScreen';
-import PasswordScreen from './containers/auth/PasswordScreen';
-import ChangeServerScreen from './containers/auth/ChangeServerScreen';
-import SignupScreen from './containers/auth/SignupScreen';
-import ImportScreen from './containers/auth/ImportScreen';
-import PricingScreen from './containers/auth/PricingScreen';
-import InviteScreen from './containers/auth/InviteScreen';
-import AuthLayoutContainer from './containers/auth/AuthLayoutContainer';
-import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopupScreen';
-import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen';
-import EditWorkspaceScreen from './features/workspaces/containers/EditWorkspaceScreen';
-import { WORKSPACES_ROUTES } from './features/workspaces';
-import AnnouncementScreen from './features/announcements/components/AnnouncementScreen';
-import { ANNOUNCEMENTS_ROUTES } from './features/announcements';
+import Routes from './routes';
 
 // Add Polyfills
 smoothScroll.polyfill();
@@ -74,44 +48,7 @@ window.addEventListener('load', () => {
       const preparedApp = (
         <Provider stores={stores} actions={actions}>
           <I18N>
-            <Router history={history}>
-              <Route path="/" component={AppLayoutContainer}>
-                <Route path={ANNOUNCEMENTS_ROUTES.TARGET} component={AnnouncementScreen} />
-                <Route path="/settings" component={SettingsWindow}>
-                  <IndexRedirect to="/settings/recipes" />
-                  <Route path="/settings/recipes" component={RecipesScreen} />
-                  <Route path="/settings/recipes/:filter" component={RecipesScreen} />
-                  <Route path="/settings/services" component={ServicesScreen} />
-                  <Route path="/settings/services/:action/:id" component={EditServiceScreen} />
-                  <Route path={WORKSPACES_ROUTES.ROOT} component={WorkspacesScreen} />
-                  <Route path={WORKSPACES_ROUTES.EDIT} component={EditWorkspaceScreen} />
-                  <Route path="/settings/user" component={AccountScreen} />
-                  <Route path="/settings/user/edit" component={EditUserScreen} />
-                  <Route path="/settings/team" component={TeamScreen} />
-                  <Route path="/settings/app" component={EditSettingsScreen} />
-                  <Route path="/settings/invite" component={InviteSettingsScreen} />
-                  <Route path="/settings/support" component={SupportFerdiScreen} />
-                </Route>
-              </Route>
-              <Route path="/auth" component={AuthLayoutContainer}>
-                <IndexRedirect to="/auth/welcome" />
-                <Route path="/auth/welcome" component={WelcomeScreen} />
-                <Route path="/auth/login" component={LoginScreen} />
-                <Route path="/auth/locked" component={LockedScreen} />
-                <Route path="/auth/server" component={ChangeServerScreen} />
-                <Route path="/auth/signup">
-                  <IndexRedirect to="/auth/signup/form" />
-                  <Route path="/auth/signup/form" component={SignupScreen} />
-                  <Route path="/auth/signup/pricing" component={PricingScreen} />
-                  <Route path="/auth/signup/import" component={ImportScreen} />
-                  <Route path="/auth/signup/invite" component={InviteScreen} />
-                </Route>
-                <Route path="/auth/password" component={PasswordScreen} />
-                <Route path="/auth/logout" component={LoginScreen} />
-              </Route>
-              <Route path="/payment/:url" component={SubscriptionPopupScreen} />
-              <Route path="*" component={AppLayoutContainer} />
-            </Router>
+            <Routes history={history} />
           </I18N>
         </Provider>
       );
diff --git a/src/containers/auth/LockedScreen.js b/src/containers/auth/LockedScreen.js
index aced64a98..8f6ce85c3 100644
--- a/src/containers/auth/LockedScreen.js
+++ b/src/containers/auth/LockedScreen.js
@@ -4,13 +4,7 @@ import { inject, observer } from 'mobx-react';
 import Locked from '../../components/auth/Locked';
 import SettingsStore from '../../stores/SettingsStore';
 
-import { globalError as globalErrorPropType } from '../../prop-types';
-
 export default @inject('stores', 'actions') @observer class LockedScreen extends Component {
-  static propTypes = {
-    error: globalErrorPropType.isRequired,
-  };
-
   state = {
     error: false,
   }
@@ -56,17 +50,23 @@ export default @inject('stores', 'actions') @observer class LockedScreen extends
   }
 
   render() {
-    const { stores, error } = this.props;
+    const { stores } = this.props;
     const { useTouchIdToUnlock } = this.props.stores.settings.all.app;
 
     return (
-      <Locked
-        onSubmit={this.onSubmit}
-        unlock={this.unlock}
-        useTouchIdToUnlock={useTouchIdToUnlock}
-        isSubmitting={stores.user.loginRequest.isExecuting}
-        error={this.state.error || error}
-      />
+      <div className="auth">
+        <div className="auth__layout">
+          <div className="auth__container">
+            <Locked
+              onSubmit={this.onSubmit}
+              unlock={this.unlock}
+              useTouchIdToUnlock={useTouchIdToUnlock}
+              isSubmitting={stores.user.loginRequest.isExecuting}
+              error={this.state.error || {}}
+            />
+          </div>
+        </div>
+      </div>
     );
   }
 }
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index c80574aa8..5e3fe5810 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1074,117 +1074,117 @@
         "defaultMessage": "!!!Settings",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 21
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.settings",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Add new service",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 25
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.addNewService",
         "start": {
           "column": 17,
-          "line": 19
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!Disable notifications & audio",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 29
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.muteApp",
         "start": {
           "column": 8,
-          "line": 23
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!Enable notifications & audio",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 33
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.unmuteApp",
         "start": {
           "column": 10,
-          "line": 27
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Open workspace drawer",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 37
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.openWorkspaceDrawer",
         "start": {
           "column": 23,
-          "line": 31
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Close workspace drawer",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 41
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.closeWorkspaceDrawer",
         "start": {
           "column": 24,
-          "line": 35
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Open Franz Todos",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 45
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.openTodosDrawer",
         "start": {
           "column": 19,
-          "line": 39
+          "line": 42
         }
       },
       {
         "defaultMessage": "!!!Close Franz Todos",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 49
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.closeTodosDrawer",
         "start": {
           "column": 20,
-          "line": 43
+          "line": 46
         }
       },
       {
         "defaultMessage": "!!!Lock Ferdi",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 53
         },
         "file": "src/components/layout/Sidebar.js",
         "id": "sidebar.lockFerdi",
         "start": {
           "column": 13,
-          "line": 47
+          "line": 50
         }
       }
     ],
diff --git a/src/i18n/messages/src/components/layout/Sidebar.json b/src/i18n/messages/src/components/layout/Sidebar.json
index ddd9cd094..0495aa970 100644
--- a/src/i18n/messages/src/components/layout/Sidebar.json
+++ b/src/i18n/messages/src/components/layout/Sidebar.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 15,
+      "line": 18,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 21,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Add new service",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 19,
+      "line": 22,
       "column": 17
     },
     "end": {
-      "line": 22,
+      "line": 25,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Disable notifications & audio",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 23,
+      "line": 26,
       "column": 8
     },
     "end": {
-      "line": 26,
+      "line": 29,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Enable notifications & audio",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 27,
+      "line": 30,
       "column": 10
     },
     "end": {
-      "line": 30,
+      "line": 33,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Open workspace drawer",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 31,
+      "line": 34,
       "column": 23
     },
     "end": {
-      "line": 34,
+      "line": 37,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Close workspace drawer",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 35,
+      "line": 38,
       "column": 24
     },
     "end": {
-      "line": 38,
+      "line": 41,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Open Franz Todos",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 39,
+      "line": 42,
       "column": 19
     },
     "end": {
-      "line": 42,
+      "line": 45,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Close Franz Todos",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 43,
+      "line": 46,
       "column": 20
     },
     "end": {
-      "line": 46,
+      "line": 49,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Lock Ferdi",
     "file": "src/components/layout/Sidebar.js",
     "start": {
-      "line": 47,
+      "line": 50,
       "column": 13
     },
     "end": {
-      "line": 50,
+      "line": 53,
       "column": 3
     }
   }
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 000000000..9986cdde5
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import {
+  Router, Route, IndexRedirect,
+} from 'react-router';
+
+import AppLayoutContainer from './containers/layout/AppLayoutContainer';
+import SettingsWindow from './containers/settings/SettingsWindow';
+import RecipesScreen from './containers/settings/RecipesScreen';
+import ServicesScreen from './containers/settings/ServicesScreen';
+import EditServiceScreen from './containers/settings/EditServiceScreen';
+import AccountScreen from './containers/settings/AccountScreen';
+import TeamScreen from './containers/settings/TeamScreen';
+import EditUserScreen from './containers/settings/EditUserScreen';
+import EditSettingsScreen from './containers/settings/EditSettingsScreen';
+import InviteSettingsScreen from './containers/settings/InviteScreen';
+import SupportFerdiScreen from './containers/settings/SupportScreen';
+import WelcomeScreen from './containers/auth/WelcomeScreen';
+import LoginScreen from './containers/auth/LoginScreen';
+import LockedScreen from './containers/auth/LockedScreen';
+import PasswordScreen from './containers/auth/PasswordScreen';
+import ChangeServerScreen from './containers/auth/ChangeServerScreen';
+import SignupScreen from './containers/auth/SignupScreen';
+import ImportScreen from './containers/auth/ImportScreen';
+import PricingScreen from './containers/auth/PricingScreen';
+import InviteScreen from './containers/auth/InviteScreen';
+import AuthLayoutContainer from './containers/auth/AuthLayoutContainer';
+import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopupScreen';
+import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen';
+import EditWorkspaceScreen from './features/workspaces/containers/EditWorkspaceScreen';
+import { WORKSPACES_ROUTES } from './features/workspaces';
+import AnnouncementScreen from './features/announcements/components/AnnouncementScreen';
+import { ANNOUNCEMENTS_ROUTES } from './features/announcements';
+
+import SettingsStore from './stores/SettingsStore';
+
+export default @inject('stores', 'actions') @observer class Routes extends Component {
+  render() {
+    const {
+      locked,
+      lockingFeatureEnabled,
+    } = this.props.stores.settings.app;
+
+    const { history } = this.props;
+
+    if (lockingFeatureEnabled && locked) {
+      return (
+        <LockedScreen />
+      );
+    }
+
+    return (
+      <Router history={history}>
+        <Route path="/" component={AppLayoutContainer}>
+          <Route path={ANNOUNCEMENTS_ROUTES.TARGET} component={AnnouncementScreen} />
+          <Route path="/settings" component={SettingsWindow}>
+            <IndexRedirect to="/settings/recipes" />
+            <Route path="/settings/recipes" component={RecipesScreen} />
+            <Route path="/settings/recipes/:filter" component={RecipesScreen} />
+            <Route path="/settings/services" component={ServicesScreen} />
+            <Route path="/settings/services/:action/:id" component={EditServiceScreen} />
+            <Route path={WORKSPACES_ROUTES.ROOT} component={WorkspacesScreen} />
+            <Route path={WORKSPACES_ROUTES.EDIT} component={EditWorkspaceScreen} />
+            <Route path="/settings/user" component={AccountScreen} />
+            <Route path="/settings/user/edit" component={EditUserScreen} />
+            <Route path="/settings/team" component={TeamScreen} />
+            <Route path="/settings/app" component={EditSettingsScreen} />
+            <Route path="/settings/invite" component={InviteSettingsScreen} />
+            <Route path="/settings/support" component={SupportFerdiScreen} />
+          </Route>
+        </Route>
+        <Route path="/auth" component={AuthLayoutContainer}>
+          <IndexRedirect to="/auth/welcome" />
+          <Route path="/auth/welcome" component={WelcomeScreen} />
+          <Route path="/auth/login" component={LoginScreen} />
+          <Route path="/auth/server" component={ChangeServerScreen} />
+          <Route path="/auth/signup">
+            <IndexRedirect to="/auth/signup/form" />
+            <Route path="/auth/signup/form" component={SignupScreen} />
+            <Route path="/auth/signup/pricing" component={PricingScreen} />
+            <Route path="/auth/signup/import" component={ImportScreen} />
+            <Route path="/auth/signup/invite" component={InviteScreen} />
+          </Route>
+          <Route path="/auth/password" component={PasswordScreen} />
+          <Route path="/auth/logout" component={LoginScreen} />
+        </Route>
+        <Route path="/payment/:url" component={SubscriptionPopupScreen} />
+        <Route path="*" component={AppLayoutContainer} />
+      </Router>
+    );
+  }
+}
+
+Routes.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    settings: PropTypes.instanceOf(SettingsStore).isRequired,
+  }).isRequired,
+  history: PropTypes.any.isRequired,
+};
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index 227eb2145..dcf3c3b9d 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -56,21 +56,6 @@ export default class SettingsStore extends Store {
       },
     );
 
-    reaction(
-      () => this.all.app.locked,
-      () => {
-        const { router } = window.ferdi.stores;
-        if (this.all.app.locked && this.all.app.lockingFeatureEnabled) {
-          // App just got locked, redirect to unlock screen
-          router.push('/auth/locked');
-        } else if (router.location.pathname.includes('/auth/locked')) {
-          // App is unlocked but user is still on locked screen
-          // Redirect to homepage
-          router.push('/');
-        }
-      },
-    );
-
     // Inactivity lock timer
     let inactivityTimer;
     remote.getCurrentWindow().on('blur', () => {
@@ -96,15 +81,8 @@ export default class SettingsStore extends Store {
       if (this.startup && resp.type === 'app' && resp.data.lockingFeatureEnabled) {
         this.startup = false;
         process.nextTick(() => {
-          // If the app was previously closed unlocked
-          // we can update the `locked` setting and rely on the reaction to lock at startup
           if (!this.all.app.locked) {
             this.all.app.locked = true;
-          } else {
-            // Otherwise the app previously closed in a locked state
-            // We can't rely on updating the locked setting for the reaction to be triggered
-            // So we lock manually
-            window.ferdi.stores.router.push('/auth/locked');
           }
         });
       }