Merge branch 'disable-wireguard-if-no-key'

5 files changed, 67 insertions, 21 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 780f0feaec..f92b886341 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ Line wrap the file at 100 chars.                                              Th
 - Don't try to replace WireGuard key if account has too many keys already.
 - Fix bogus update notification caused by an outdated cache.
 - Fix layout issues when showing messages in WireGuard key view.
+- Disable WireGuard protocol option if there's no WireGuard key.
 
 #### Windows
 - Fix regression due to which a TAP adapter issue was not given as the specific block reason when
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index dd9568bed5..10757e4d8d 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Component, View } from 'reactxp';
+import { Component, Text, 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>
@@ -225,13 +213,26 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                     )}
                   </Cell.Footer>
 
-                  <View style={styles.advanced_settings__content}>
+                  <View
+                    style={[
+                      styles.advanced_settings__content,
+                      styles.advanced_settings__tunnel_protocol,
+                    ]}>
                     <Selector
                       title={messages.pgettext('advanced-settings-view', 'Tunnel protocol')}
-                      values={this.tunnelProtocolItems}
+                      values={this.tunnelProtocolItems(hasWireguardKey)}
                       value={this.props.tunnelProtocol}
                       onSelect={this.onSelectTunnelProtocol}
+                      style={styles.advanced_settings__tunnel_protocol_selector}
                     />
+                    {!hasWireguardKey && (
+                      <Text style={styles.advanced_settings__wg_no_key}>
+                        {messages.pgettext(
+                          'advanced-settings-view',
+                          'To enable WireGuard, generate a key under the "WireGuard key" setting below.',
+                        )}
+                      </Text>
+                    )}
                   </View>
 
                   {this.props.tunnelProtocol !== 'wireguard' ? (
@@ -348,6 +349,31 @@ 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: hasWireguardKey
+          ? messages.pgettext('advanced-settings-view', 'WireGuard')
+          : sprintf('%(label)s (%(error)s)', {
+              label: messages.pgettext('advanced-settings-view', 'WireGuard'),
+              error: messages.pgettext('advanced-settings-view-wireguard', 'missing key'),
+            }),
+        value: 'wireguard',
+        disabled: !hasWireguardKey,
+      },
+    ];
+  };
+
   private onSelectTunnelProtocol = (protocol?: TunnelProtocol) => {
     this.props.setTunnelProtocol(protocol);
   };
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index 53ad5c1829..acdc9e5d8e 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -16,12 +16,24 @@ export default {
   advanced_settings__content: Styles.createViewStyle({
     flex: 0,
   }),
-  advanced_settings__selector_section: Styles.createViewStyle({
+  advanced_settings__tunnel_protocol: Styles.createViewStyle({
     marginBottom: 24,
   }),
+  advanced_settings__tunnel_protocol_selector: Styles.createViewStyle({
+    marginBottom: 0,
+  }),
   advanced_settings__wgkeys_cell: Styles.createViewStyle({
     marginBottom: 24,
   }),
+  advanced_settings__wg_no_key: Styles.createTextStyle({
+    fontFamily: 'Open Sans',
+    fontSize: 13,
+    fontWeight: '800',
+    lineHeight: 20,
+    color: colors.red,
+    marginTop: 12,
+    paddingHorizontal: 24,
+  }),
   advanced_settings__cell_hover: Styles.createButtonStyle({
     backgroundColor: colors.blue80,
   }),
diff --git a/gui/src/renderer/components/Selector.tsx b/gui/src/renderer/components/Selector.tsx
index a17b960d78..c78b5a3ad8 100644
--- a/gui/src/renderer/components/Selector.tsx
+++ b/gui/src/renderer/components/Selector.tsx
@@ -6,6 +6,7 @@ import * as Cell from './Cell';
 export interface ISelectorItem<T> {
   label: string;
   value: T;
+  disabled?: boolean;
 }
 
 interface ISelectorProps<T> {
@@ -36,6 +37,7 @@ export default class Selector<T> extends Component<ISelectorProps<T>> {
           key={i}
           value={item.value}
           selected={selected}
+          disabled={item.disabled}
           ref={selected ? this.props.selectedCellRef : undefined}
           onSelect={this.props.onSelect}>
           {item.label}
@@ -59,6 +61,7 @@ export default class Selector<T> extends Component<ISelectorProps<T>> {
 interface ISelectorCellProps<T> {
   value: T;
   selected: boolean;
+  disabled?: boolean;
   onSelect: (value: T) => void;
   children?: React.ReactText;
 }
@@ -66,7 +69,10 @@ interface ISelectorCellProps<T> {
 export class SelectorCell<T> extends Component<ISelectorCellProps<T>> {
   public render() {
     return (
-      <Cell.CellButton onPress={this.onPress} selected={this.props.selected}>
+      <Cell.CellButton
+        onPress={this.onPress}
+        selected={this.props.selected}
+        disabled={this.props.disabled}>
         <Cell.Icon
           style={this.props.selected ? undefined : styles.invisibleIcon}
           source="icon-tick"
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,