Add offline-state label to WireGuard key page

2 files changed, 13 insertions, 0 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 499f0dc080..5a5c4a699d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ Line wrap the file at 100 chars.                                              Th
 ## [Unreleased]
 ### Changed
 - Decreased default MTU for WireGuard to 1380 to improve performance over 4G
+- WireGuard key page now shows a label explaining why buttons are disabled when in a blocked state
 
 ### Fixed
 - Fix old settings deserialization to allow migrating settings from versions older than 2019.6.
diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index ba00cfa8f8..d66ef68cf2 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -41,6 +41,7 @@ export default class WireguardKeys extends Component<IProps> {
                 </HeaderTitle>
               </SettingsHeader>
 
+              <View style={styles.wgkeys__row}>{this.blockedStateLabel()}</View>
               <View style={styles.wgkeys__row}>
                 <Text style={styles.wgkeys__row_label}>
                   {messages.pgettext('wireguard-keys', 'Public key')}
@@ -165,4 +166,15 @@ export default class WireguardKeys extends Component<IProps> {
         return '';
     }
   }
+
+  private blockedStateLabel() {
+    if (!this.props.isOffline) {
+      return undefined;
+    }
+    return (
+      <Text style={styles.wgkeys__invalid_key}>
+        {messages.pgettext('wireguard-key-view', "Can't manage keys whilst in a blocked state")}
+      </Text>
+    );
+  }
 }