Merge branch 'reconnecting-with-new-key-message'

2 files changed, 43 insertions, 7 deletions

diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index d36e79c1b5..2a589890e7 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -3,6 +3,7 @@ import moment from 'moment';
 import * as React from 'react';
 import { Component, Text, View } from 'reactxp';
 import { sprintf } from 'sprintf-js';
+import { TunnelState } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { IWgKey, WgKeyState } from '../redux/settings/reducers';
 import * as AppButton from './AppButton';
@@ -17,6 +18,7 @@ export interface IProps {
   keyState: WgKeyState;
   isOffline: boolean;
   locale: string;
+  tunnelState: TunnelState;
 
   onClose: () => void;
   onGenerateKey: () => void;
@@ -25,7 +27,33 @@ export interface IProps {
   onVisitWebsiteKey: () => Promise<void>;
 }
 
-export default class WireguardKeys extends Component<IProps> {
+export interface IState {
+  recentlyGeneratedKey: boolean;
+}
+
+export default class WireguardKeys extends Component<IProps, IState> {
+  public state = {
+    recentlyGeneratedKey: false,
+  };
+
+  public componentDidUpdate(prevProps: IProps) {
+    const prevKey =
+      prevProps.keyState.type === 'key-set' ? prevProps.keyState.key.publicKey : undefined;
+    const key =
+      this.props.keyState.type === 'key-set' ? this.props.keyState.key.publicKey : undefined;
+    if (this.props.tunnelState.state === 'connected' && key !== undefined && key != prevKey) {
+      this.setState({ recentlyGeneratedKey: true });
+    }
+
+    if (
+      this.state.recentlyGeneratedKey &&
+      prevProps.tunnelState.state !== 'connected' &&
+      this.props.tunnelState.state === 'connected'
+    ) {
+      this.setState({ recentlyGeneratedKey: false });
+    }
+  }
+
   public render() {
     return (
       <Layout>
@@ -65,12 +93,7 @@ export default class WireguardKeys extends Component<IProps> {
 
               <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>
+                  this.offlineLabel()
                 ) : (
                   <View style={styles.wgkeys__row}>{this.keyValidityLabel()}</View>
                 )}
@@ -105,6 +128,18 @@ export default class WireguardKeys extends Component<IProps> {
     );
   }
 
+  private offlineLabel() {
+    return this.state.recentlyGeneratedKey ? (
+      <Text style={[styles.wgkeys__row, styles.wgkeys__valid_key]}>
+        {messages.pgettext('wireguard-key-view', 'Reconnecting with new WireGuard key...')}
+      </Text>
+    ) : (
+      <Text style={[styles.wgkeys__row, styles.wgkeys__invalid_key]}>
+        {messages.pgettext('wireguard-key-view', 'Unable to manage keys while in a blocked state')}
+      </Text>
+    );
+  }
+
   private isVerifyButtonDisabled(): boolean {
     switch (this.props.keyState.type) {
       case 'key-set':
diff --git a/gui/src/renderer/containers/WireguardKeysPage.tsx b/gui/src/renderer/containers/WireguardKeysPage.tsx
index 44e7a7d109..c31b4d86c5 100644
--- a/gui/src/renderer/containers/WireguardKeysPage.tsx
+++ b/gui/src/renderer/containers/WireguardKeysPage.tsx
@@ -11,6 +11,7 @@ const mapStateToProps = (state: IReduxState) => ({
   keyState: state.settings.wireguardKeyState,
   isOffline: state.connection.isBlocked,
   locale: state.userInterface.locale,
+  tunnelState: state.connection.status,
 });
 const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   const history = bindActionCreators({ push, goBack }, dispatch);