3 files changed, 47 insertions, 21 deletions
diff --git a/gui/src/renderer/components/ExpiredAccountAddTime.tsx b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
index 2564fc5b0c..9831430d4e 100644
--- a/gui/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -7,7 +7,9 @@ import { links, colors } from '../../config.json';
 import { formatRelativeDate } from '../../shared/date-helper';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import useActions from '../lib/actionsHook';
 import History from '../lib/history';
+import account from '../redux/account/actions';
 import { IReduxState } from '../redux/store';
 import * as AppButton from './AppButton';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
@@ -127,7 +129,8 @@ interface ITimeAddedProps {
 }
 
 export function TimeAdded(props: ITimeAddedProps) {
-  const history = useHistory() as History;
+  const history = useHistory();
+  const finish = useFinishedCallback();
   const accountData = useSelector((state: IReduxState) => state.account);
   const isNewAccount = useSelector(
     (state: IReduxState) =>
@@ -138,9 +141,9 @@ export function TimeAdded(props: ITimeAddedProps) {
     if (isNewAccount) {
       history.push('/main/setup-finished');
     } else {
-      history.resetTo('/main');
+      finish();
     }
-  }, [history]);
+  }, [history, finish]);
 
   const duration =
     (accountData.expiry &&
@@ -180,13 +183,9 @@ export function TimeAdded(props: ITimeAddedProps) {
 }
 
 export function SetupFinished() {
-  const history = useHistory() as History;
+  const finish = useFinishedCallback();
   const { openUrl } = useAppContext();
 
-  const navigateToMain = useCallback(() => {
-    history.resetWith('/main');
-  }, [history]);
-
   const openPrivacyLink = useCallback(() => openUrl(links.privacyGuide), [openUrl]);
 
   return (
@@ -229,7 +228,7 @@ export function SetupFinished() {
                   </AppButton.BlueButton>
                 </AriaDescribed>
               </AriaDescriptionGroup>
-              <AppButton.GreenButton onClick={navigateToMain}>
+              <AppButton.GreenButton onClick={finish}>
                 {messages.pgettext('connect-view', 'Start using the app')}
               </AppButton.GreenButton>
             </AppButton.ButtonGroup>
@@ -252,3 +251,24 @@ function HeaderBar() {
 
   return <StyledHeader barStyle={headerBarStyle} />;
 }
+
+function useFinishedCallback() {
+  const { loggedIn } = useActions(account);
+
+  const history = useHistory() as History;
+  const isNewAccount = useSelector(
+    (state: IReduxState) =>
+      state.account.status.type === 'ok' && state.account.status.method === 'new_account',
+  );
+
+  const callback = useCallback(() => {
+    // Changes login method from "new_account" to "existing_account"
+    if (isNewAccount) {
+      loggedIn();
+    }
+
+    history.resetWith('/main');
+  }, [isNewAccount, loggedIn, history]);
+
+  return callback;
+}
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index 90e3148bbb..04d9f96156 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { sprintf } from 'sprintf-js';
 import { links } from '../../config.json';
-import { hasExpired } from '../../shared/account-expiry';
 import { AccountToken, TunnelState } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { LoginState } from '../redux/account/reducers';
@@ -39,10 +38,8 @@ interface IExpiredAccountErrorViewProps {
   isBlocked: boolean;
   blockWhenDisconnected: boolean;
   accountToken?: AccountToken;
-  accountExpiry?: string;
   loginState: LoginState;
   tunnelState: TunnelState;
-  hideWelcomeView: () => void;
   onExternalLinkWithAuth: (url: string) => Promise<void>;
   onDisconnect: () => Promise<void>;
   setBlockWhenDisconnected: (value: boolean) => void;
@@ -61,12 +58,6 @@ export default class ExpiredAccountErrorView extends React.Component<
     showBlockWhenDisconnectedAlert: false,
   };
 
-  public componentDidUpdate() {
-    if (this.props.accountExpiry && !hasExpired(this.props.accountExpiry)) {
-      this.props.hideWelcomeView();
-    }
-  }
-
   public render() {
     const headerBarStyle =
       this.props.loginState.type === 'ok' && this.props.loginState.method === 'new_account'
diff --git a/gui/src/renderer/components/MainView.tsx b/gui/src/renderer/components/MainView.tsx
index a9daeb5453..9698321940 100644
--- a/gui/src/renderer/components/MainView.tsx
+++ b/gui/src/renderer/components/MainView.tsx
@@ -1,13 +1,28 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router';
 import { hasExpired } from '../../shared/account-expiry';
 import { IReduxState } from '../redux/store';
 import ConnectPage from '../containers/ConnectPage';
 import ExpiredAccountErrorViewContainer from '../containers/ExpiredAccountErrorViewContainer';
 
 export default function MainView() {
+  const history = useHistory();
   const accountExpiry = useSelector((state: IReduxState) => state.account.expiry);
-  const accountExpired = accountExpiry && hasExpired(accountExpiry);
+  const accountHasExpired = accountExpiry && hasExpired(accountExpiry);
+  const isNewAccount = useSelector(
+    (state: IReduxState) =>
+      state.account.status.type === 'ok' && state.account.status.method === 'new_account',
+  );
+  const [showAccountExpired, setShowAccountExpired] = useState(isNewAccount || accountHasExpired);
 
-  return accountExpired ? <ExpiredAccountErrorViewContainer /> : <ConnectPage />;
+  useEffect(() => {
+    if (accountHasExpired) {
+      setShowAccountExpired(true);
+    } else if (showAccountExpired && !accountHasExpired) {
+      history.push('/main/time-added');
+    }
+  }, [showAccountExpired, accountHasExpired]);
+
+  return showAccountExpired ? <ExpiredAccountErrorViewContainer /> : <ConnectPage />;
 }