Merge branch 'correctly-show-blocked-state-fail'

6 files changed, 54 insertions, 34 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d08c6c0574..a1d0d27fe9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -41,6 +41,7 @@ Line wrap the file at 100 chars.                                              Th
 
 ### Fixed
 - Fix bug that could lead to Javascript error dialog to appear upon the desktop app termination.
+- Show when the app failed to block all connections after an error in the android and desktop apps.
 
 #### macOS
 - Fix firewall rules to properly handle DNS requests over TCP when "Local network sharing" is 
@@ -49,7 +50,6 @@ Line wrap the file at 100 chars.                                              Th
 #### Android
 - Make sure the settings screen is scrollable so that devices with small screens can access the quit
   button.
-- Show when the app failed to block all connections after an error.
 
 #### Windows
 - Fix bug where failing to initialize the route manager could cause the daemon to get stuck in a
diff --git a/gui/src/main/notification-controller.ts b/gui/src/main/notification-controller.ts
index 4c542db3ea..c0371114e5 100644
--- a/gui/src/main/notification-controller.ts
+++ b/gui/src/main/notification-controller.ts
@@ -84,7 +84,7 @@ export default class NotificationController {
           );
         } else {
           this.showTunnelStateNotification(
-            messages.pgettext('notifications', 'Critical failure - Unsecured'),
+            messages.pgettext('notifications', 'Critical error (your attention is required)'),
           );
         }
         break;
diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index 4cdf0c75a9..ebc818e767 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -203,12 +203,7 @@ export default class Connect extends Component<IProps, IState> {
       case 'connected':
         return HeaderBarStyle.success;
       case 'error':
-        switch (status.details.cause.reason) {
-          case 'set_firewall_policy_error':
-            return HeaderBarStyle.error;
-          default:
-            return HeaderBarStyle.success;
-        }
+        return status.details.isBlocking ? HeaderBarStyle.success : HeaderBarStyle.error;
       case 'disconnecting':
         switch (status.details) {
           case 'block':
@@ -262,12 +257,7 @@ export default class Connect extends Component<IProps, IState> {
       case 'connected':
         return MarkerStyle.secure;
       case 'error':
-        switch (status.details.cause.reason) {
-          case 'set_firewall_policy_error':
-            return MarkerStyle.unsecure;
-          default:
-            return MarkerStyle.secure;
-        }
+        return status.details.isBlocking ? MarkerStyle.secure : MarkerStyle.unsecure;
       case 'disconnected':
         return MarkerStyle.unsecure;
       case 'disconnecting':
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 (