Add error message when there's no wireguard key

2 files changed, 34 insertions, 4 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 4778aac916..10757e4d8d 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -1,5 +1,5 @@
 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';
@@ -213,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(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' ? (
@@ -349,7 +362,12 @@ export default class AdvancedSettings extends Component<IProps, IState> {
         value: 'openvpn',
       },
       {
-        label: messages.pgettext('advanced-settings-view', 'WireGuard'),
+        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,
       },
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,
   }),