Add route for revoked view

4 files changed, 19 insertions, 14 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 1ad4a620e5..8558b98050 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -670,6 +670,7 @@ export default class AppRenderer {
           [RoutePath.login]: {
             [RoutePath.launch]: transitions.push,
             [RoutePath.main]: transitions.pop,
+            [RoutePath.deviceRevoked]: transitions.pop,
             '*': transitions.none,
           },
           [RoutePath.main]: {
@@ -678,6 +679,9 @@ export default class AppRenderer {
             [RoutePath.tooManyDevices]: transitions.push,
             '*': transitions.dismiss,
           },
+          [RoutePath.deviceRevoked]: {
+            '*': transitions.pop,
+          },
         };
 
         const transition =
@@ -691,7 +695,14 @@ export default class AppRenderer {
     if (this.connectedToDaemon) {
       const loginState = this.reduxStore.getState().account.status;
       const deviceRevoked = loginState.type === 'none' && loginState.deviceRevoked;
-      return this.deviceConfig?.accountToken || deviceRevoked ? RoutePath.main : RoutePath.login;
+
+      if (deviceRevoked) {
+        return RoutePath.deviceRevoked;
+      } else if (this.deviceConfig?.accountToken) {
+        return RoutePath.main;
+      } else {
+        return RoutePath.login;
+      }
     } else {
       return RoutePath.launch;
     }
diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index 28988ea566..46b322785a 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -27,6 +27,7 @@ import {
 import { RoutePath } from '../lib/routes';
 import FilterByProvider from './FilterByProvider';
 import TooManyDevices from './TooManyDevices';
+import { DeviceRevokedView } from './DeviceRevokedView';
 
 interface IAppRoutesState {
   currentLocation: IHistoryProps['history']['location'];
@@ -78,6 +79,7 @@ class AppRouter extends React.Component<IHistoryProps, IAppRoutesState> {
                 <Route exact path={RoutePath.launch} component={Launch} />
                 <Route exact path={RoutePath.login} component={LoginPage} />
                 <Route exact path={RoutePath.tooManyDevices} component={TooManyDevices} />
+                <Route exact path={RoutePath.deviceRevoked} component={DeviceRevokedView} />
                 <Route exact path={RoutePath.main} component={MainView} />
                 <Route exact path={RoutePath.redeemVoucher} component={VoucherInput} />
                 <Route
diff --git a/gui/src/renderer/components/MainView.tsx b/gui/src/renderer/components/MainView.tsx
index 9ced798cf9..56878fb521 100644
--- a/gui/src/renderer/components/MainView.tsx
+++ b/gui/src/renderer/components/MainView.tsx
@@ -5,7 +5,6 @@ import ConnectPage from '../containers/ConnectPage';
 import ExpiredAccountErrorViewContainer from '../containers/ExpiredAccountErrorViewContainer';
 import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
-import { DeviceRevokedView } from './DeviceRevokedView';
 
 export default function MainView() {
   const history = useHistory();
@@ -14,29 +13,20 @@ export default function MainView() {
   const isNewAccount = useSelector(
     (state) => state.account.status.type === 'ok' && state.account.status.method === 'new_account',
   );
-  const showDeviceRevoked = useSelector(
-    (state) =>
-      (state.connection.status.state === 'error' &&
-        state.connection.status.details.cause.reason === 'tunnel_parameter_error' &&
-        state.connection.status.details.cause.details === 'no_wireguard_key') ||
-      (state.account.status.type === 'none' && state.account.status.deviceRevoked),
-  );
 
   const [showAccountExpired, setShowAccountExpired] = useState<boolean>(
-    (isNewAccount || accountHasExpired) && !showDeviceRevoked,
+    isNewAccount || accountHasExpired,
   );
 
   useEffect(() => {
-    if (accountHasExpired && !showDeviceRevoked) {
+    if (accountHasExpired) {
       setShowAccountExpired(true);
     } else if (showAccountExpired && !accountHasExpired) {
       history.push(RoutePath.timeAdded);
     }
   }, [showAccountExpired, accountHasExpired]);
 
-  if (showDeviceRevoked) {
-    return <DeviceRevokedView />;
-  } else if (showAccountExpired) {
+  if (showAccountExpired) {
     return <ExpiredAccountErrorViewContainer />;
   } else {
     return <ConnectPage />;
diff --git a/gui/src/renderer/lib/routes.ts b/gui/src/renderer/lib/routes.ts
index d56c36e82a..994a9f6124 100644
--- a/gui/src/renderer/lib/routes.ts
+++ b/gui/src/renderer/lib/routes.ts
@@ -6,6 +6,7 @@ export enum RoutePath {
   launch = '/',
   login = '/login',
   tooManyDevices = '/login/too-many-devices',
+  deviceRevoked = '/login/device-revoked',
   main = '/main',
   redeemVoucher = '/main/voucher/redeem',
   voucherSuccess = '/main/voucher/success/:newExpiry/:secondsAdded',
@@ -28,6 +29,7 @@ export const disableDismissForRoutes = [
   RoutePath.launch,
   RoutePath.login,
   RoutePath.tooManyDevices,
+  RoutePath.deviceRevoked,
   RoutePath.main,
   RoutePath.redeemVoucher,
   RoutePath.voucherSuccess,