Reload duration since key was generated every minute and when the app is opened

7 files changed, 71 insertions, 5 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index 9163264a03..8339fb8d7a 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -403,6 +403,8 @@ class ApplicationMain {
         break;
     }
 
+    this.installGenericFocusHandlers(windowController);
+
     if (this.shouldShowWindowOnStart() || process.env.NODE_ENV === 'development') {
       windowController.show();
     }
@@ -1583,6 +1585,15 @@ class ApplicationMain {
     });
   }
 
+  private installGenericFocusHandlers(windowController: WindowController) {
+    windowController.window.on('focus', () => {
+      IpcMainEventChannel.windowFocus.notify(windowController.webContents, true);
+    });
+    windowController.window.on('blur', () => {
+      IpcMainEventChannel.windowFocus.notify(windowController.webContents, false);
+    });
+  }
+
   private shouldShowWindowOnStart(): boolean {
     switch (process.platform) {
       case 'win32':
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index cc65289a26..b7c9b1a187 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -188,6 +188,10 @@ export default class AppRenderer {
       this.reduxActions.settings.setWireguardKeygenEvent(event);
     });
 
+    IpcRendererEventChannel.windowFocus.listen((focus: boolean) => {
+      this.reduxActions.userInterface.setWindowFocused(focus);
+    });
+
     // Request the initial state from the main process
     const initialState = IpcRendererEventChannel.state.get();
 
diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index 3f3e8521d7..d5b0dc1833 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -37,6 +37,7 @@ export interface IProps {
   isOffline: boolean;
   locale: string;
   tunnelState: TunnelState;
+  windowFocused: boolean;
 
   onClose: () => void;
   onGenerateKey: () => void;
@@ -48,16 +49,31 @@ export interface IProps {
 export interface IState {
   recentlyGeneratedKey: boolean;
   userHasInitiatedVerification: boolean;
+  ageOfKeyString: string;
 }
 
 export default class WireguardKeys extends React.Component<IProps, IState> {
+  private keyAgeUpdateInterval?: number;
+
   public state = {
     recentlyGeneratedKey: false,
     userHasInitiatedVerification: false,
+    ageOfKeyString: WireguardKeys.ageOfKeyString(this.props.keyState, this.props.locale),
   };
 
+  public static getDerivedStateFromProps(props: IProps) {
+    return {
+      ageOfKeyString: WireguardKeys.ageOfKeyString(props.keyState, props.locale),
+    };
+  }
+
   public componentDidMount() {
     this.verifyKey();
+    this.keyAgeUpdateInterval = setInterval(this.setAgeOfKeyStringState, 60 * 1000);
+  }
+
+  public componentWillUnmount() {
+    clearInterval(this.keyAgeUpdateInterval);
   }
 
   public componentDidUpdate(prevProps: IProps) {
@@ -121,7 +137,7 @@ export default class WireguardKeys extends React.Component<IProps, IState> {
                   <StyledRowLabel>
                     {messages.pgettext('wireguard-key-view', 'Key generated')}
                   </StyledRowLabel>
-                  <StyledRowValue>{this.ageOfKeyString()}</StyledRowValue>
+                  <StyledRowValue>{this.state.ageOfKeyString}</StyledRowValue>
                 </StyledRow>
 
                 <StyledMessages>
@@ -279,16 +295,22 @@ export default class WireguardKeys extends React.Component<IProps, IState> {
     }
   }
 
-  private ageOfKeyString(): string {
-    switch (this.props.keyState.type) {
+  private static ageOfKeyString(keyState: WgKeyState, locale: string): string {
+    switch (keyState.type) {
       case 'key-set':
       case 'being-verified':
-        return moment(this.props.keyState.key.created).locale(this.props.locale).fromNow();
+        return moment(keyState.key.created).locale(locale).fromNow();
       default:
         return '-';
     }
   }
 
+  private setAgeOfKeyStringState = () => {
+    this.setState({
+      ageOfKeyString: WireguardKeys.ageOfKeyString(this.props.keyState, this.props.locale),
+    });
+  };
+
   private getStatusMessage(): string {
     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 c31b4d86c5..869f0df223 100644
--- a/gui/src/renderer/containers/WireguardKeysPage.tsx
+++ b/gui/src/renderer/containers/WireguardKeysPage.tsx
@@ -12,6 +12,7 @@ const mapStateToProps = (state: IReduxState) => ({
   isOffline: state.connection.isBlocked,
   locale: state.userInterface.locale,
   tunnelState: state.connection.status,
+  windowFocused: state.userInterface.windowFocused,
 });
 const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   const history = bindActionCreators({ push, goBack }, dispatch);
diff --git a/gui/src/renderer/redux/userinterface/actions.ts b/gui/src/renderer/redux/userinterface/actions.ts
index 2954161f89..affd11798d 100644
--- a/gui/src/renderer/redux/userinterface/actions.ts
+++ b/gui/src/renderer/redux/userinterface/actions.ts
@@ -19,11 +19,17 @@ export interface ISetLocationScopeAction {
   scope: LocationScope;
 }
 
+export interface ISetWindowFocusedAction {
+  type: 'SET_WINDOW_FOCUSED';
+  focused: boolean;
+}
+
 export type UserInterfaceAction =
   | IUpdateLocaleAction
   | IUpdateWindowArrowPositionAction
   | IUpdateConnectionInfoOpenAction
-  | ISetLocationScopeAction;
+  | ISetLocationScopeAction
+  | ISetWindowFocusedAction;
 
 function updateLocale(locale: string): IUpdateLocaleAction {
   return {
@@ -52,9 +58,17 @@ function setLocationScope(scope: LocationScope): ISetLocationScopeAction {
   };
 }
 
+function setWindowFocused(focused: boolean): ISetWindowFocusedAction {
+  return {
+    type: 'SET_WINDOW_FOCUSED',
+    focused,
+  };
+}
+
 export default {
   updateLocale,
   updateWindowArrowPosition,
   toggleConnectionPanel,
   setLocationScope,
+  setWindowFocused,
 };
diff --git a/gui/src/renderer/redux/userinterface/reducers.ts b/gui/src/renderer/redux/userinterface/reducers.ts
index 62231aafaf..4fef8efbfb 100644
--- a/gui/src/renderer/redux/userinterface/reducers.ts
+++ b/gui/src/renderer/redux/userinterface/reducers.ts
@@ -10,12 +10,14 @@ export interface IUserInterfaceReduxState {
   arrowPosition?: number;
   connectionPanelVisible: boolean;
   locationScope: LocationScope;
+  windowFocused: boolean;
 }
 
 const initialState: IUserInterfaceReduxState = {
   locale: 'en',
   connectionPanelVisible: false,
   locationScope: LocationScope.relay,
+  windowFocused: false,
 };
 
 export default function (
@@ -35,6 +37,9 @@ export default function (
     case 'SET_LOCATION_SCOPE':
       return { ...state, locationScope: action.scope };
 
+    case 'SET_WINDOW_FOCUSED':
+      return { ...state, windowFocused: action.focused };
+
     default:
       return state;
   }
diff --git a/gui/src/shared/ipc-event-channel.ts b/gui/src/shared/ipc-event-channel.ts
index 3c4cd55cfb..5cd1d22098 100644
--- a/gui/src/shared/ipc-event-channel.ts
+++ b/gui/src/shared/ipc-event-channel.ts
@@ -168,6 +168,7 @@ interface ISplitTunnelingHandlers {
 
 const LOCALE_CHANGED = 'locale-changed';
 const WINDOW_SHAPE_CHANGED = 'window-shape-changed';
+const WINDOW_FOCUS_CHANGED = 'window-focus';
 
 const DAEMON_CONNECTED = 'daemon-connected';
 const DAEMON_DISCONNECTED = 'daemon-disconnected';
@@ -244,6 +245,10 @@ export class IpcRendererEventChannel {
     listen: listen(WINDOW_SHAPE_CHANGED),
   };
 
+  public static windowFocus: IReceiver<boolean> = {
+    listen: listen(WINDOW_FOCUS_CHANGED),
+  };
+
   public static daemonConnected: IReceiver<void> = {
     listen: listen(DAEMON_CONNECTED),
   };
@@ -346,6 +351,10 @@ export class IpcMainEventChannel {
     notify: sender(WINDOW_SHAPE_CHANGED),
   };
 
+  public static windowFocus: ISender<boolean> = {
+    notify: sender(WINDOW_FOCUS_CHANGED),
+  };
+
   public static daemonConnected: ISenderVoid = {
     notify: senderVoid(DAEMON_CONNECTED),
   };