Use authenticated URLs in ExpiredAccountErrorView

4 files changed, 27 insertions, 23 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8565aa01ae..3240b7f2dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,7 @@ Line wrap the file at 100 chars.                                              Th
 ### Fixed
 - Fix Norwegian (Bokmal) language detection.
 - Fix missing localizations when formatting date and time in Norwegian (Bokmal).
+- Use authenticated URL to go to account page from expired account view.
 
 
 ## [2019.9-beta1] - 2019-10-08
diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index 3763751c60..3d8546745b 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -23,7 +23,6 @@ interface IProps {
   onSelectLocation: () => void;
   onConnect: () => void;
   onDisconnect: () => void;
-  onExternalLink: (url: string) => Promise<void>;
   onExternalLinkWithAuth: (url: string) => Promise<void>;
 }
 
@@ -173,19 +172,19 @@ export default class Connect extends Component<IProps, IState> {
     );
   }
 
-  private handleExpiredAccountRecovery = async (recoveryAction: RecoveryAction) => {
+  private handleExpiredAccountRecovery = async (recoveryAction: RecoveryAction): Promise<void> => {
     switch (recoveryAction) {
       case RecoveryAction.disableBlockedWhenDisconnected:
         break;
 
       case RecoveryAction.openBrowser:
-        this.props.onExternalLink(links.purchase);
+        await this.props.onExternalLinkWithAuth(links.purchase);
         break;
 
       case RecoveryAction.disconnectAndOpenBrowser:
         try {
           await this.props.onDisconnect();
-          this.props.onExternalLink(links.purchase);
+          await this.props.onExternalLinkWithAuth(links.purchase);
         } catch (error) {
           // no-op
         }
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index ebd4fa1f4e..1b0ceeb9f8 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -14,7 +14,7 @@ export enum RecoveryAction {
 interface IProps {
   isBlocked: boolean;
   blockWhenDisconnected: boolean;
-  action: (recoveryAction: RecoveryAction) => void;
+  action: (recoveryAction: RecoveryAction) => Promise<void>;
 }
 
 interface IState {
@@ -93,12 +93,14 @@ export default class ExpiredAccountErrorView extends Component<IProps, IState> {
     }
   }
 
-  private handleAction = () => {
-    this.props.action(this.state.recoveryAction);
+  private handleAction = (): Promise<void> => {
+    return this.props.action(this.state.recoveryAction);
   };
 }
 
-class DisconnectAndOpenBrowserContentView extends Component<{ actionHandler: () => void }> {
+class DisconnectAndOpenBrowserContentView extends Component<{
+  actionHandler: () => Promise<void>;
+}> {
   public render() {
     return (
       <View>
@@ -109,19 +111,21 @@ class DisconnectAndOpenBrowserContentView extends Component<{ actionHandler: ()
           )}
         </View>
         <View>
-          <AppButton.RedButton onPress={this.props.actionHandler}>
-            <AppButton.Label>
-              {messages.pgettext('connect-view', 'Disconnect and buy more credit')}
-            </AppButton.Label>
-            <AppButton.Icon source="icon-extLink" height={16} width={16} />
-          </AppButton.RedButton>
+          <AppButton.BlockingButton onPress={this.props.actionHandler}>
+            <AppButton.RedButton>
+              <AppButton.Label>
+                {messages.pgettext('connect-view', 'Disconnect and buy more credit')}
+              </AppButton.Label>
+              <AppButton.Icon source="icon-extLink" height={16} width={16} />
+            </AppButton.RedButton>
+          </AppButton.BlockingButton>
         </View>
       </View>
     );
   }
 }
 
-class OpenBrowserContentView extends Component<{ actionHandler: () => void }> {
+class OpenBrowserContentView extends Component<{ actionHandler: () => Promise<void> }> {
   public render() {
     return (
       <View>
@@ -132,12 +136,14 @@ class OpenBrowserContentView extends Component<{ actionHandler: () => void }> {
           )}
         </View>
         <View>
-          <AppButton.GreenButton onPress={this.props.actionHandler}>
-            <AppButton.Label>
-              {messages.pgettext('connect-view', 'Buy more credit')}
-            </AppButton.Label>
-            <AppButton.Icon source="icon-extLink" height={16} width={16} />
-          </AppButton.GreenButton>
+          <AppButton.BlockingButton onPress={this.props.actionHandler}>
+            <AppButton.GreenButton>
+              <AppButton.Label>
+                {messages.pgettext('connect-view', 'Buy more credit')}
+              </AppButton.Label>
+              <AppButton.Icon source="icon-extLink" height={16} width={16} />
+            </AppButton.GreenButton>
+          </AppButton.BlockingButton>
         </View>
       </View>
     );
diff --git a/gui/src/renderer/containers/ConnectPage.tsx b/gui/src/renderer/containers/ConnectPage.tsx
index b473a523c8..e5261a161a 100644
--- a/gui/src/renderer/containers/ConnectPage.tsx
+++ b/gui/src/renderer/containers/ConnectPage.tsx
@@ -1,5 +1,4 @@
 import { push } from 'connected-react-router';
-import { shell } from 'electron';
 import log from 'electron-log';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -100,7 +99,6 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
         log.error(`Failed to disconnect the tunnel: ${error.message}`);
       }
     },
-    onExternalLink: (url: string) => shell.openExternal(url),
     onExternalLinkWithAuth: (url: string) => props.app.openLinkWithAuth(url),
   };
 };