Add unsupported WireGuard port notification

3 files changed, 85 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
index cd6d25c3a6..b22a533eab 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
@@ -23,6 +23,7 @@ import {
   NewVersionNotificationProvider,
   NoOpenVpnServerAvailableNotificationProvider,
   OpenVpnSupportEndingNotificationProvider,
+  UnsupportedWireGuardPortNotificationProvider,
 } from '../lib/notifications';
 import { useTunnelProtocol } from '../lib/relay-settings-hooks';
 import { RoutePath } from '../lib/routes';
@@ -55,6 +56,8 @@ export default function NotificationArea(props: IProps) {
   const version = useSelector((state: IReduxState) => state.version);
   const tunnelProtocol = useTunnelProtocol();
   const fullRelayList = useSelector((state) => state.settings.relayLocations);
+  const allowedPortRanges = useSelector((state) => state.settings.wireguardEndpointData.portRanges);
+  const relaySettings = useSelector((state) => state.settings.relaySettings);
 
   const blockWhenDisconnected = useSelector(
     (state: IReduxState) => state.settings.blockWhenDisconnected,
@@ -99,6 +102,12 @@ export default function NotificationArea(props: IProps) {
       tunnelProtocol,
       relayLocations: fullRelayList,
     }),
+    new UnsupportedWireGuardPortNotificationProvider({
+      connection,
+      relaySettings,
+      tunnelProtocol,
+      allowedPortRanges,
+    }),
     new ErrorNotificationProvider({
       tunnelState,
       hasExcludedApps,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/index.ts
index d949ff0428..1e5d95339f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/index.ts
@@ -2,3 +2,4 @@ export * from './new-device';
 export * from './new-version';
 export * from './open-vpn-support-ending';
 export * from './no-open-vpn-server-available';
+export * from './unsupported-wireguard-port';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/unsupported-wireguard-port.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/unsupported-wireguard-port.ts
new file mode 100644
index 0000000000..6f3ebf327b
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/unsupported-wireguard-port.ts
@@ -0,0 +1,75 @@
+import { sprintf } from 'sprintf-js';
+
+import { strings } from '../../../shared/constants';
+import { TunnelProtocol } from '../../../shared/daemon-rpc-types';
+import { messages } from '../../../shared/gettext';
+import { InAppNotification, InAppNotificationProvider } from '../../../shared/notifications';
+import { isInRanges } from '../../../shared/utils';
+import { IConnectionReduxState } from '../../redux/connection/reducers';
+import { RelaySettingsRedux } from '../../redux/settings/reducers';
+import { RoutePath } from '../routes';
+
+interface UnsupportedWireGuardPortNotificationContext {
+  connection: IConnectionReduxState;
+  tunnelProtocol: TunnelProtocol;
+  relaySettings: RelaySettingsRedux;
+  allowedPortRanges: [number, number][];
+}
+
+export class UnsupportedWireGuardPortNotificationProvider implements InAppNotificationProvider {
+  public constructor(private context: UnsupportedWireGuardPortNotificationContext) {}
+
+  public mayDisplay = () => {
+    const { connection, tunnelProtocol, relaySettings, allowedPortRanges } = this.context;
+    if (tunnelProtocol === 'wireguard' && connection.status.state === 'error') {
+      if ('normal' in relaySettings) {
+        const { port } = relaySettings.normal.wireguard;
+        if (port !== 'any' && !isInRanges(port, allowedPortRanges)) return true;
+      }
+    }
+    return false;
+  };
+
+  public getInAppNotification(): InAppNotification {
+    return {
+      indicator: 'error',
+      title: messages.pgettext('in-app-notifications', 'BLOCKING INTERNET'),
+      subtitle: [
+        {
+          content: sprintf(
+            // TRANSLATORS: Notification subtitle indicating the user is using an unsupported port for WireGuard.
+            // TRANSLATORS: Available placeholders:
+            // TRANSLATORS: %(wireGuard)s - Will be replaced with WireGuard
+            messages.pgettext(
+              'in-app-notifications',
+              'The selected %(wireGuard)s port is not supported, please change it under ',
+            ),
+            { wireGuard: strings.wireguard },
+          ),
+        },
+        {
+          content: sprintf(
+            // TRANSLATORS: Link in notication to go to WireGuard settings.
+            // TRANSLATORS: Available placeholders:
+            // TRANSLATORS: %(wireGuard)s - Will be replaced with WireGuard
+            messages.pgettext('in-app-notifications', '%(wireGuard)s settings.'),
+            { wireGuard: strings.wireguard },
+          ),
+          action: {
+            type: 'navigate-internal',
+            link: {
+              to: RoutePath.wireguardSettings,
+              'aria-label': sprintf(
+                // TRANSLATORS: Accessibility label for link to wireguard settings.
+                // TRANSLATORS: Available placeholders:
+                // TRANSLATORS: %(wireGuard)s - Will be replaced with WireGuard
+                messages.pgettext('accessibility', 'Go to %(wireGuard)s settings.'),
+                { wireGuard: strings.wireguard },
+              ),
+            },
+          },
+        },
+      ],
+    };
+  }
+}