Disable wireguard if there's no wireguard key

2 files changed, 26 insertions, 17 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index dd9568bed5..4778aac916 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -3,6 +3,7 @@ import { Component, View } from 'reactxp';
 import { sprintf } from 'sprintf-js';
 import { BridgeState, RelayProtocol, TunnelProtocol } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
+import { WgKeyState } from '../redux/settings/reducers';
 import styles from './AdvancedSettingsStyles';
 import * as Cell from './Cell';
 import { Container, Layout } from './Layout';
@@ -40,6 +41,7 @@ interface IProps {
     protocol?: RelayProtocol;
     port?: number;
   };
+  wireguardKeyState: WgKeyState;
   wireguard: { port?: number };
   mssfix?: number;
   bridgeState: BridgeState;
@@ -64,7 +66,6 @@ export default class AdvancedSettings extends Component<IProps, IState> {
   private portItems: { [key in RelayProtocol]: Array<ISelectorItem<OptionalPort>> };
   private protocolItems: Array<ISelectorItem<OptionalRelayProtocol>>;
   private bridgeStateItems: Array<ISelectorItem<BridgeState>>;
-  private tunnelProtocolItems: Array<ISelectorItem<OptionalTunnelProtocol>>;
   private wireguardPortItems: Array<ISelectorItem<OptionalPort>>;
 
   constructor(props: IProps) {
@@ -99,21 +100,6 @@ export default class AdvancedSettings extends Component<IProps, IState> {
       },
     ];
 
-    this.tunnelProtocolItems = [
-      {
-        label: messages.pgettext('advanced-settings-view', 'Automatic'),
-        value: undefined,
-      },
-      {
-        label: messages.pgettext('advanced-settings-view', 'OpenVPN'),
-        value: 'openvpn',
-      },
-      {
-        label: messages.pgettext('advanced-settings-view', 'WireGuard'),
-        value: 'wireguard',
-      },
-    ];
-
     this.wireguardPortItems = [automaticPort].concat(
       WIREUGARD_UDP_PORTS.map(mapPortToSelectorItem),
     );
@@ -156,6 +142,8 @@ export default class AdvancedSettings extends Component<IProps, IState> {
       : styles.advanced_settings__mssfix_invalid_value;
     const mssfixValue = this.state.editedMssfix;
 
+    const hasWireguardKey = this.props.wireguardKeyState.type === 'key-set';
+
     return (
       <Layout>
         <Container>
@@ -228,7 +216,7 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                   <View style={styles.advanced_settings__content}>
                     <Selector
                       title={messages.pgettext('advanced-settings-view', 'Tunnel protocol')}
-                      values={this.tunnelProtocolItems}
+                      values={this.tunnelProtocolItems(hasWireguardKey)}
                       value={this.props.tunnelProtocol}
                       onSelect={this.onSelectTunnelProtocol}
                     />
@@ -348,6 +336,26 @@ export default class AdvancedSettings extends Component<IProps, IState> {
     );
   }
 
+  private tunnelProtocolItems = (
+    hasWireguardKey: boolean,
+  ): Array<ISelectorItem<OptionalTunnelProtocol>> => {
+    return [
+      {
+        label: messages.pgettext('advanced-settings-view', 'Automatic'),
+        value: undefined,
+      },
+      {
+        label: messages.pgettext('advanced-settings-view', 'OpenVPN'),
+        value: 'openvpn',
+      },
+      {
+        label: messages.pgettext('advanced-settings-view', 'WireGuard'),
+        value: 'wireguard',
+        disabled: !hasWireguardKey,
+      },
+    ];
+  };
+
   private onSelectTunnelProtocol = (protocol?: TunnelProtocol) => {
     this.props.setTunnelProtocol(protocol);
   };
diff --git a/gui/src/renderer/containers/AdvancedSettingsPage.tsx b/gui/src/renderer/containers/AdvancedSettingsPage.tsx
index fad5704a97..6cbd991325 100644
--- a/gui/src/renderer/containers/AdvancedSettingsPage.tsx
+++ b/gui/src/renderer/containers/AdvancedSettingsPage.tsx
@@ -16,6 +16,7 @@ const mapStateToProps = (state: IReduxState) => {
   return {
     enableIpv6: state.settings.enableIpv6,
     blockWhenDisconnected: state.settings.blockWhenDisconnected,
+    wireguardKeyState: state.settings.wireguardKeyState,
     mssfix: state.settings.openVpn.mssfix,
     bridgeState: state.settings.bridgeState,
     ...protocolAndPort,