Improve error notification when in the non-blocking error state

3 files changed, 50 insertions, 20 deletions

diff --git a/gui/src/renderer/components/NotificationArea.tsx b/gui/src/renderer/components/NotificationArea.tsx
index 3876793ff8..f08eefbb75 100644
--- a/gui/src/renderer/components/NotificationArea.tsx
+++ b/gui/src/renderer/components/NotificationArea.tsx
@@ -219,9 +219,14 @@ export default class NotificationArea extends Component<IProps, State> {
             <NotificationIndicator type={'error'} />
             <NotificationContent>
               <NotificationTitle>
-                {messages.pgettext('in-app-notifications', 'FAILURE - UNSECURED')}
+                {messages.pgettext('in-app-notifications', 'YOU MIGHT BE LEAKING NETWORK TRAFFIC')}
               </NotificationTitle>
-              <NotificationSubtitle>{this.state.reason}</NotificationSubtitle>
+              <NotificationSubtitle>
+                {messages.pgettext(
+                  'in-app-notifications',
+                  'Failed to block all network traffic. Please troubleshoot or report the problem to us.',
+                )}
+              </NotificationSubtitle>
             </NotificationContent>
           </React.Fragment>
         )}
diff --git a/gui/src/renderer/components/SecuredLabel.tsx b/gui/src/renderer/components/SecuredLabel.tsx
index fc91a97773..453388acb4 100644
--- a/gui/src/renderer/components/SecuredLabel.tsx
+++ b/gui/src/renderer/components/SecuredLabel.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Component, Styles, Text, Types } from 'reactxp';
+import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 
 export enum SecuredDisplayStyle {
@@ -7,6 +8,7 @@ export enum SecuredDisplayStyle {
   blocked,
   securing,
   unsecured,
+  failedToSecure,
 }
 
 interface IProps {
@@ -16,13 +18,13 @@ interface IProps {
 
 const styles = {
   securing: Styles.createTextStyle({
-    color: 'rgb(255, 255, 255)', // white
+    color: colors.white,
   }),
   secured: Styles.createTextStyle({
-    color: 'rgb(68, 173, 77)', // green
+    color: colors.green,
   }),
   unsecured: Styles.createTextStyle({
-    color: 'rgb(227, 64, 57)', // red
+    color: colors.red,
   }),
 };
 
@@ -44,6 +46,9 @@ export default class SecuredLabel extends Component<IProps> {
 
       case SecuredDisplayStyle.unsecured:
         return messages.gettext('UNSECURED CONNECTION');
+
+      case SecuredDisplayStyle.failedToSecure:
+        return messages.gettext('FAILED TO SECURE CONNECTION');
     }
   }
 
@@ -57,6 +62,7 @@ export default class SecuredLabel extends Component<IProps> {
         return styles.securing;
 
       case SecuredDisplayStyle.unsecured:
+      case SecuredDisplayStyle.failedToSecure:
         return styles.unsecured;
     }
   }
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 47310e2b84..bb2c06ef62 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -111,6 +111,12 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
       </AppButton.RedTransparentButton>
     );
 
+    const Dismiss = (props: IMainButtonProps) => (
+      <AppButton.RedTransparentButton onPress={this.props.onDisconnect} {...props}>
+        {messages.pgettext('tunnel-control', 'Dismiss')}
+      </AppButton.RedTransparentButton>
+    );
+
     const Reconnect = (props: ISideButtonProps) => (
       <AppButton.RedTransparentButton onPress={this.props.onReconnect} {...props}>
         <ImageView height={22} width={22} source="icon-reload" tintColor="white" />
@@ -127,10 +133,6 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
     let state = this.props.tunnelState.state;
 
     switch (this.props.tunnelState.state) {
-      case 'error':
-        state = this.props.tunnelState.details.isBlocking ? 'error' : 'disconnected';
-        break;
-
       case 'disconnecting':
         switch (this.props.tunnelState.details) {
           case 'block':
@@ -183,17 +185,34 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
         );
 
       case 'error':
-        return (
-          <Wrapper>
-            <Body>
-              <Secured displayStyle={SecuredDisplayStyle.blocked} />
-            </Body>
-            <Footer>
-              <SwitchLocation />
-              <MultiButton mainButton={Cancel} sideButton={Reconnect} />
-            </Footer>
-          </Wrapper>
-        );
+        if (
+          this.props.tunnelState.state === 'error' &&
+          !this.props.tunnelState.details.isBlocking
+        ) {
+          return (
+            <Wrapper>
+              <Body>
+                <Secured displayStyle={SecuredDisplayStyle.failedToSecure} />
+              </Body>
+              <Footer>
+                <SwitchLocation />
+                <MultiButton mainButton={Dismiss} sideButton={Reconnect} />
+              </Footer>
+            </Wrapper>
+          );
+        } else {
+          return (
+            <Wrapper>
+              <Body>
+                <Secured displayStyle={SecuredDisplayStyle.blocked} />
+              </Body>
+              <Footer>
+                <SwitchLocation />
+                <MultiButton mainButton={Cancel} sideButton={Reconnect} />
+              </Footer>
+            </Wrapper>
+          );
+        }
 
       case 'disconnecting':
         return (