From 7e332dc4b7a5fe0c275a8d802752d7ba5dc3d4ec Mon Sep 17 00:00:00 2001
From: vantezzen <hello@vantezzen.io>
Date: Sun, 20 Oct 2019 20:08:57 +0200
Subject: Improve switch between accounts and servers

---
 .../settings/navigation/SettingsNavigation.js      | 50 ++++++++++++++++++++--
 src/components/ui/AppLoader/index.js               |  9 +++-
 src/containers/auth/AuthLayoutContainer.js         | 13 +++++-
 src/i18n/locales/defaultMessages.json              | 32 +++++++-------
 .../settings/navigation/SettingsNavigation.json    | 32 +++++++-------
 src/stores/UserStore.js                            |  2 +
 6 files changed, 99 insertions(+), 39 deletions(-)

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 2711bc107..49e73e569 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -3,10 +3,13 @@ import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 import { inject, observer } from 'mobx-react';
 import { ProBadge } from '@meetfranz/ui';
+import { RouterStore } from 'mobx-react-router';
 
+import { LOCAL_SERVER, LIVE_API } from '../../../config';
 import Link from '../../ui/Link';
 import { workspaceStore } from '../../../features/workspaces';
 import UIStore from '../../../stores/UIStore';
+import SettingsStore from '../../../stores/SettingsStore';
 import UserStore from '../../../stores/UserStore';
 import { serviceLimitStore } from '../../../features/serviceLimit';
 
@@ -45,11 +48,18 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('stores') @observer class SettingsNavigation extends Component {
+export default @inject('stores', 'actions') @observer class SettingsNavigation extends Component {
   static propTypes = {
     stores: PropTypes.shape({
       ui: PropTypes.instanceOf(UIStore).isRequired,
       user: PropTypes.instanceOf(UserStore).isRequired,
+      settings: PropTypes.instanceOf(SettingsStore).isRequired,
+      router: PropTypes.instanceOf(RouterStore).isRequired,
+    }).isRequired,
+    actions: PropTypes.shape({
+      settings: PropTypes.shape({
+        update: PropTypes.func.isRequired,
+      }).isRequired,
     }).isRequired,
     serviceCount: PropTypes.number.isRequired,
     workspaceCount: PropTypes.number.isRequired,
@@ -59,12 +69,42 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
     intl: intlShape,
   };
 
+  handleLoginLogout() {
+    const isLoggedIn = Boolean(localStorage.getItem('authToken'));
+    const isUsingWithoutAccount = this.props.stores.settings.app.server === LOCAL_SERVER;
+
+    if (isLoggedIn) {
+      // Remove current auth token
+      localStorage.removeItem('authToken');
+
+      if (isUsingWithoutAccount) {
+        // Reset server back to Ferdi API
+        this.props.actions.settings.update({
+          type: 'app',
+          data: {
+            server: LIVE_API,
+          },
+        });
+      }
+    }
+
+    this.props.stores.user.isLoggingOut = true;
+    this.props.stores.router.push(isLoggedIn ? '/auth/logout' : '/auth/welcome');
+
+    if (isLoggedIn) {
+      // Reload Ferdi, otherwise many settings won't sync correctly with the server
+      // after logging into another account
+      window.location.reload();
+    }
+  }
+
   render() {
     const { serviceCount, workspaceCount, stores } = this.props;
     const { isDarkThemeActive } = stores.ui;
     const { router, user } = stores;
     const { intl } = this.context;
     const isLoggedIn = Boolean(localStorage.getItem('authToken'));
+    const isUsingWithoutAccount = stores.settings.app.server === LOCAL_SERVER;
 
     return (
       <div className="settings-navigation">
@@ -136,12 +176,14 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {intl.formatMessage(messages.supportFerdi)}
         </Link>
         <span className="settings-navigation__expander" />
-        <Link
+        <button
+          type="button"
           to={isLoggedIn ? '/auth/logout' : '/auth/welcome'}
           className="settings-navigation__link"
+          onClick={this.handleLoginLogout.bind(this)}
         >
-          { isLoggedIn ? intl.formatMessage(messages.logout) : 'Login'}
-        </Link>
+          { isLoggedIn && !isUsingWithoutAccount ? intl.formatMessage(messages.logout) : 'Login'}
+        </button>
       </div>
     );
   }
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index 1fd247d17..a7f6f4545 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -22,8 +22,13 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
   static propTypes = {
     classes: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired,
+    texts: PropTypes.array,
   };
 
+  static defaultProps = {
+    texts: textList,
+  }
+
   state = {
     step: 0,
   };
@@ -43,7 +48,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
   }
 
   render() {
-    const { classes, theme } = this.props;
+    const { classes, theme, texts } = this.props;
     const { step } = this.state;
 
     return (
@@ -52,7 +57,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
         className={classes.component}
         spinnerColor={theme.colorAppLoaderSpinner}
       >
-        {textList.map((text, i) => (
+        {texts.map((text, i) => (
           <span
             key={text}
             className={classnames({
diff --git a/src/containers/auth/AuthLayoutContainer.js b/src/containers/auth/AuthLayoutContainer.js
index 427054d3d..883a6ea60 100644
--- a/src/containers/auth/AuthLayoutContainer.js
+++ b/src/containers/auth/AuthLayoutContainer.js
@@ -5,6 +5,7 @@ import { ThemeProvider } from 'react-jss';
 
 import AuthLayout from '../../components/auth/AuthLayout';
 import AppStore from '../../stores/AppStore';
+import UserStore from '../../stores/UserStore';
 import GlobalErrorStore from '../../stores/GlobalErrorStore';
 import AppLoader from '../../components/ui/AppLoader';
 
@@ -23,7 +24,7 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer
       stores, actions, children, location,
     } = this.props;
     const {
-      app, features, globalError,
+      app, features, globalError, user,
     } = stores;
 
     const isLoadingBaseFeatures = features.defaultFeaturesRequest.isExecuting
@@ -37,6 +38,15 @@ export default @inject('stores', 'actions') @observer class AuthLayoutContainer
       );
     }
 
+    const { isLoggingOut } = user;
+    if (isLoggingOut) {
+      return (
+        <ThemeProvider theme={stores.ui.theme}>
+          <AppLoader texts={['Logging you out...']} />
+        </ThemeProvider>
+      );
+    }
+
     return (
       <ThemeProvider theme={stores.ui.theme}>
         <AuthLayout
@@ -62,6 +72,7 @@ AuthLayoutContainer.wrappedComponent.propTypes = {
   stores: PropTypes.shape({
     app: PropTypes.instanceOf(AppStore).isRequired,
     globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     app: PropTypes.shape({
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index e188c1d23..b056f0d1b 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1733,104 +1733,104 @@
         "defaultMessage": "!!!Available services",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 20
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.availableServices",
         "start": {
           "column": 21,
-          "line": 14
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 24
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.yourServices",
         "start": {
           "column": 16,
-          "line": 18
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 28
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.yourWorkspaces",
         "start": {
           "column": 18,
-          "line": 22
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!Account",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 32
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.account",
         "start": {
           "column": 11,
-          "line": 26
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Manage Team",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 36
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.team",
         "start": {
           "column": 8,
-          "line": 30
+          "line": 33
         }
       },
       {
         "defaultMessage": "!!!Settings",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 40
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.settings",
         "start": {
           "column": 12,
-          "line": 34
+          "line": 37
         }
       },
       {
         "defaultMessage": "!!!Support Ferdi",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 44
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.supportFerdi",
         "start": {
           "column": 16,
-          "line": 38
+          "line": 41
         }
       },
       {
         "defaultMessage": "!!!Logout",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 48
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.logout",
         "start": {
           "column": 10,
-          "line": 42
+          "line": 45
         }
       }
     ],
diff --git a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
index b7309469e..154cdbe84 100644
--- a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
+++ b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 14,
+      "line": 17,
       "column": 21
     },
     "end": {
-      "line": 17,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 18,
+      "line": 21,
       "column": 16
     },
     "end": {
-      "line": 21,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 22,
+      "line": 25,
       "column": 18
     },
     "end": {
-      "line": 25,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Account",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 26,
+      "line": 29,
       "column": 11
     },
     "end": {
-      "line": 29,
+      "line": 32,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Manage Team",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 30,
+      "line": 33,
       "column": 8
     },
     "end": {
-      "line": 33,
+      "line": 36,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 34,
+      "line": 37,
       "column": 12
     },
     "end": {
-      "line": 37,
+      "line": 40,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Support Ferdi",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 38,
+      "line": 41,
       "column": 16
     },
     "end": {
-      "line": 41,
+      "line": 44,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Logout",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 42,
+      "line": 45,
       "column": 10
     },
     "end": {
-      "line": 45,
+      "line": 48,
       "column": 3
     }
   }
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 61b7d4adf..03aa79606 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -56,6 +56,8 @@ export default class UserStore extends Store {
 
   @observable isImportLegacyServicesCompleted = false;
 
+  @observable isLoggingOut = false;
+
   @observable id;
 
   @observable authToken = localStorage.getItem('authToken') || null;
-- 
cgit v1.2.3-54-g00ecf