Merge branch 'fix-gui-wireguard-key-error-bug'

3 files changed, 34 insertions, 28 deletions

diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index fd4c739a65..f51287ce52 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -48,22 +48,10 @@ export default class WireguardKeys extends Component<IProps> {
                 </HeaderTitle>
               </SettingsHeader>
 
-              {this.props.isOffline && (
-                <Text style={[styles.wgkeys__row, styles.wgkeys__invalid_key]}>
-                  {messages.pgettext(
-                    'wireguard-key-view',
-                    'Unable to manage keys while in a blocked state',
-                  )}
-                </Text>
-              )}
-
               <View style={styles.wgkeys__row}>
-                <View style={styles.wgkeys__validity_row}>
-                  <Text style={styles.wgkeys__row_label}>
-                    {messages.pgettext('wireguard-keys', 'Public key')}
-                  </Text>
-                  {this.keyValidityLabel()}
-                </View>
+                <Text style={styles.wgkeys__row_label}>
+                  {messages.pgettext('wireguard-keys', 'Public key')}
+                </Text>
 
                 <View style={styles.wgkeys__row_value}>{this.getKeyText()}</View>
               </View>
@@ -74,6 +62,19 @@ export default class WireguardKeys extends Component<IProps> {
                 <Text style={styles.wgkeys__row_value}>{this.ageOfKeyString()}</Text>
               </View>
 
+              <View style={styles.wgkeys__messages}>
+                {this.props.isOffline ? (
+                  <Text style={[styles.wgkeys__row, styles.wgkeys__invalid_key]}>
+                    {messages.pgettext(
+                      'wireguard-key-view',
+                      'Unable to manage keys while in a blocked state',
+                    )}
+                  </Text>
+                ) : (
+                  <View style={styles.wgkeys__row}>{this.keyValidityLabel()}</View>
+                )}
+              </View>
+
               <View style={styles.wgkeys__row}>{this.getGenerateButton()}</View>
               <View style={styles.wgkeys__row}>
                 <AppButton.GreenButton
@@ -234,10 +235,7 @@ export default class WireguardKeys extends Component<IProps> {
         }
 
       default:
-        return (
-          // Placeholder to take up the same amount of space as the validity text/spinner
-          <View style={{ marginBottom: 20 }} />
-        );
+        return null;
     }
   }
 
diff --git a/gui/src/renderer/components/WireguardKeysStyles.tsx b/gui/src/renderer/components/WireguardKeysStyles.tsx
index a1aebdedf2..7d0bd43e76 100644
--- a/gui/src/renderer/components/WireguardKeysStyles.tsx
+++ b/gui/src/renderer/components/WireguardKeysStyles.tsx
@@ -10,11 +10,12 @@ export default {
     flexDirection: 'column',
     flex: 1,
   }),
+  wgkeys__messages: Styles.createViewStyle({
+    flex: 1,
+  }),
   wgkeys__row: Styles.createViewStyle({
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 24,
-    paddingRight: 24,
+    paddingVertical: 0,
+    paddingHorizontal: 24,
     marginBottom: 24,
   }),
   wgkeys__row_label: Styles.createTextStyle({
@@ -27,9 +28,6 @@ export default {
     color: colors.white60,
     marginBottom: 9,
   }),
-  wgkeys__validity_row: Styles.createViewStyle({
-    flexDirection: 'row',
-  }),
   wgkeys__row_value: Styles.createTextStyle({
     fontFamily: 'Open Sans',
     fontSize: 16,
diff --git a/gui/src/renderer/redux/settings/reducers.ts b/gui/src/renderer/redux/settings/reducers.ts
index 585eefbbb2..ac86f25a29 100644
--- a/gui/src/renderer/redux/settings/reducers.ts
+++ b/gui/src/renderer/redux/settings/reducers.ts
@@ -261,7 +261,7 @@ export default function(
     case 'VERIFY_WIREGUARD_KEY':
       return {
         ...state,
-        wireguardKeyState: { type: 'being-verified', key: action.key },
+        wireguardKeyState: { type: 'being-verified', key: resetWireguardKeyErrors(action.key) },
       };
 
     case 'GENERATE_WIREGUARD_KEY':
@@ -273,7 +273,10 @@ export default function(
     case 'REPLACE_WIREGUARD_KEY':
       return {
         ...state,
-        wireguardKeyState: { type: 'being-replaced', oldKey: action.oldKey },
+        wireguardKeyState: {
+          type: 'being-replaced',
+          oldKey: resetWireguardKeyErrors(action.oldKey),
+        },
       };
 
     default:
@@ -294,6 +297,13 @@ function setWireguardKey(key?: IWgKey): WgKeyState {
   }
 }
 
+function resetWireguardKeyErrors(key: IWgKey): IWgKey {
+  return {
+    publicKey: key.publicKey,
+    created: key.created,
+  };
+}
+
 function setWireguardKeygenEvent(state: ISettingsReduxState, keygenEvent: KeygenEvent): WgKeyState {
   const oldKeyState = state.wireguardKeyState;
   if (oldKeyState.type === 'being-replaced') {