Remove everything related to WireGuard key handling

7 files changed, 22 insertions, 480 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 8ecf6c0052..596a638f51 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -1,12 +1,8 @@
 import * as React from 'react';
-import { sprintf } from 'sprintf-js';
 import { TunnelProtocol } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
-import { WgKeyState } from '../redux/settings/reducers';
 import {
   StyledNavigationScrollbars,
-  StyledNoWireguardKeyError,
-  StyledNoWireguardKeyErrorContainer,
   StyledSelectorForFooter,
   StyledTunnelProtocolContainer,
 } from './AdvancedSettingsStyles';
@@ -28,7 +24,6 @@ interface IProps {
   enableIpv6: boolean;
   blockWhenDisconnected: boolean;
   tunnelProtocol?: TunnelProtocol;
-  wireguardKeyState: WgKeyState;
   setEnableIpv6: (value: boolean) => void;
   setBlockWhenDisconnected: (value: boolean) => void;
   setTunnelProtocol: (value: OptionalTunnelProtocol) => void;
@@ -49,9 +44,28 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
 
   private blockWhenDisconnectedRef = React.createRef<Switch>();
 
-  public render() {
-    const hasWireguardKey = this.props.wireguardKeyState.type === 'key-set';
+  private tunnelProtocolItems: Array<ISelectorItem<OptionalTunnelProtocol>>;
+
+  public constructor(props: IProps) {
+    super(props);
+
+    this.tunnelProtocolItems = [
+      {
+        label: messages.gettext('Automatic'),
+        value: undefined,
+      },
+      {
+        label: messages.pgettext('advanced-settings-view', 'WireGuard'),
+        value: 'wireguard',
+      },
+      {
+        label: messages.pgettext('advanced-settings-view', 'OpenVPN'),
+        value: 'openvpn',
+      },
+    ];
+  }
 
+  public render() {
     return (
       <BackAction action={this.props.onClose}>
         <Layout>
@@ -141,22 +155,10 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                   <StyledTunnelProtocolContainer>
                     <StyledSelectorForFooter
                       title={messages.pgettext('advanced-settings-view', 'Tunnel protocol')}
-                      values={this.tunnelProtocolItems(hasWireguardKey)}
+                      values={this.tunnelProtocolItems}
                       value={this.props.tunnelProtocol}
                       onSelect={this.onSelectTunnelProtocol}
                     />
-                    {!hasWireguardKey && (
-                      <StyledNoWireguardKeyErrorContainer>
-                        <AriaDescription>
-                          <StyledNoWireguardKeyError>
-                            {messages.pgettext(
-                              'advanced-settings-view',
-                              'To enable WireGuard, generate a key under the "WireGuard key" setting below.',
-                            )}
-                          </StyledNoWireguardKeyError>
-                        </AriaDescription>
-                      </StyledNoWireguardKeyErrorContainer>
-                    )}
                   </StyledTunnelProtocolContainer>
                 </AriaInputGroup>
 
@@ -191,31 +193,6 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
     );
   }
 
-  private tunnelProtocolItems = (
-    hasWireguardKey: boolean,
-  ): Array<ISelectorItem<OptionalTunnelProtocol>> => {
-    return [
-      {
-        label: messages.gettext('Automatic'),
-        value: undefined,
-      },
-      {
-        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', 'missing key'),
-            }),
-        value: 'wireguard',
-        disabled: !hasWireguardKey,
-      },
-      {
-        label: messages.pgettext('advanced-settings-view', 'OpenVPN'),
-        value: 'openvpn',
-      },
-    ];
-  };
-
   private renderConfirmBlockWhenDisconnectedAlert = () => {
     return (
       <ModalAlert
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index bdc84701c6..f7a87b5311 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -1,6 +1,4 @@
 import styled from 'styled-components';
-import { colors } from '../../config.json';
-import * as Cell from './cell';
 import { NavigationScrollbars } from './NavigationBar';
 import Selector from './cell/Selector';
 
@@ -19,12 +17,3 @@ export const StyledTunnelProtocolContainer = styled(StyledSelectorContainer)({
 export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
   flex: 1,
 });
-
-export const StyledNoWireguardKeyErrorContainer = styled(Cell.Footer)({
-  paddingBottom: 0,
-});
-
-export const StyledNoWireguardKeyError = styled(Cell.FooterText)({
-  fontWeight: 700,
-  color: colors.red,
-});
diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index f72de697e3..998877bf97 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -16,7 +16,6 @@ import SelectLanguagePage from '../containers/SelectLanguagePage';
 import SelectLocationPage from '../containers/SelectLocationPage';
 import SettingsPage from '../containers/SettingsPage';
 import SupportPage from '../containers/SupportPage';
-import WireguardKeysPage from '../containers/WireguardKeysPage';
 import WireguardSettingsPage from '../containers/WireguardSettingsPage';
 import { IHistoryProps, ITransitionSpecification, transitions, withHistory } from '../lib/history';
 import {
@@ -92,7 +91,6 @@ class AppRouter extends React.Component<IHistoryProps, IAppRoutesState> {
                 <Route exact path={RoutePath.preferences} component={PreferencesPage} />
                 <Route exact path={RoutePath.advancedSettings} component={AdvancedSettingsPage} />
                 <Route exact path={RoutePath.wireguardSettings} component={WireguardSettingsPage} />
-                <Route exact path={RoutePath.wireguardKeys} component={WireguardKeysPage} />
                 <Route exact path={RoutePath.openVpnSettings} component={OpenVPNSettingsPage} />
                 <Route exact path={RoutePath.splitTunneling} component={SplitTunnelingSettings} />
                 <Route exact path={RoutePath.support} component={SupportPage} />
diff --git a/gui/src/renderer/components/NotificationArea.tsx b/gui/src/renderer/components/NotificationArea.tsx
index 1f79d8b90d..de8b547087 100644
--- a/gui/src/renderer/components/NotificationArea.tsx
+++ b/gui/src/renderer/components/NotificationArea.tsx
@@ -9,7 +9,6 @@ import {
   InAppNotificationProvider,
   InconsistentVersionNotificationProvider,
   NotificationAction,
-  NoValidKeyNotificationProvider,
   ReconnectingNotificationProvider,
   UnsupportedVersionNotificationProvider,
   UpdateAvailableNotificationProvider,
@@ -38,12 +37,6 @@ export default function NotificationArea(props: IProps) {
   const blockWhenDisconnected = useSelector(
     (state: IReduxState) => state.settings.blockWhenDisconnected,
   );
-  const tunnelProtocol = useSelector((state: IReduxState) =>
-    'normal' in state.settings.relaySettings
-      ? state.settings.relaySettings.normal.tunnelProtocol
-      : undefined,
-  );
-  const wireGuardKey = useSelector((state: IReduxState) => state.settings.wireguardKeyState);
   const hasExcludedApps = useSelector(
     (state: IReduxState) =>
       state.settings.splitTunneling && state.settings.splitTunnelingApplications.length > 0,
@@ -58,7 +51,6 @@ export default function NotificationArea(props: IProps) {
       hasExcludedApps,
     }),
     new ErrorNotificationProvider({ tunnelState, accountExpiry, hasExcludedApps }),
-    new NoValidKeyNotificationProvider({ tunnelProtocol, wireGuardKey }),
     new InconsistentVersionNotificationProvider({ consistent: version.consistent }),
     new UnsupportedVersionNotificationProvider(version),
   ];
diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
deleted file mode 100644
index 1a4dab38a6..0000000000
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ /dev/null
@@ -1,345 +0,0 @@
-import * as React from 'react';
-import { sprintf } from 'sprintf-js';
-import { TunnelState } from '../../shared/daemon-rpc-types';
-import { formatRelativeDate } from '../../shared/date-helper';
-import { messages } from '../../shared/gettext';
-import log from '../../shared/logging';
-import { IWgKey, WgKeyState } from '../redux/settings/reducers';
-import * as AppButton from './AppButton';
-import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
-import ClipboardLabel from './ClipboardLabel';
-import ImageView from './ImageView';
-import { BackAction } from './KeyboardNavigation';
-import { Layout } from './Layout';
-import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
-import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import {
-  StyledButtonRow,
-  StyledContainer,
-  StyledContent,
-  StyledLastButtonRow,
-  StyledMessage,
-  StyledMessages,
-  StyledNavigationScrollbars,
-  StyledRow,
-  StyledRowLabel,
-  StyledRowLabelSpacer,
-  StyledRowValue,
-} from './WireguardKeysStyles';
-
-export interface IProps {
-  keyState: WgKeyState;
-  isOffline: boolean;
-  tunnelState: TunnelState;
-  windowFocused: boolean;
-
-  onClose: () => void;
-  onGenerateKey: () => void;
-  onReplaceKey: (old: IWgKey) => void;
-  onVerifyKey: (publicKey: IWgKey) => void;
-  onVisitWebsiteKey: () => Promise<void>;
-}
-
-export interface IState {
-  recentlyGeneratedKey: boolean;
-  userHasInitiatedVerification: boolean;
-  ageOfKeyString: string;
-}
-
-export default class WireguardKeys extends React.Component<IProps, IState> {
-  public state = {
-    recentlyGeneratedKey: false,
-    userHasInitiatedVerification: false,
-    ageOfKeyString: WireguardKeys.ageOfKeyString(this.props.keyState),
-  };
-
-  private keyAgeUpdateInterval?: number;
-
-  public static getDerivedStateFromProps(props: IProps) {
-    return {
-      ageOfKeyString: WireguardKeys.ageOfKeyString(props.keyState),
-    };
-  }
-
-  public componentDidMount() {
-    this.verifyKey();
-    this.keyAgeUpdateInterval = window.setInterval(this.setAgeOfKeyStringState, 60 * 1000);
-  }
-
-  public componentWillUnmount() {
-    clearInterval(this.keyAgeUpdateInterval);
-  }
-
-  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 (
-      <BackAction action={this.props.onClose}>
-        <Layout>
-          <StyledContainer>
-            <NavigationContainer>
-              <NavigationBar>
-                <NavigationItems>
-                  <TitleBarItem>
-                    {
-                      // TRANSLATORS: Title label in navigation bar
-                      messages.pgettext('wireguard-keys-nav', 'WireGuard key')
-                    }
-                  </TitleBarItem>
-                </NavigationItems>
-              </NavigationBar>
-
-              <StyledNavigationScrollbars fillContainer>
-                <StyledContent>
-                  <SettingsHeader>
-                    <HeaderTitle>
-                      {messages.pgettext('wireguard-keys-nav', 'WireGuard key')}
-                    </HeaderTitle>
-                  </SettingsHeader>
-
-                  <StyledRow>
-                    <StyledRowLabel>
-                      <span>{messages.pgettext('wireguard-key-view', 'Public key')}</span>
-                      <StyledRowLabelSpacer />
-                      <span>{this.keyValidityLabel()}</span>
-                    </StyledRowLabel>
-
-                    <StyledRowValue>{this.getKeyText()}</StyledRowValue>
-                  </StyledRow>
-                  <StyledRow>
-                    <StyledRowLabel>
-                      {messages.pgettext('wireguard-key-view', 'Key generated')}
-                    </StyledRowLabel>
-                    <StyledRowValue>{this.state.ageOfKeyString}</StyledRowValue>
-                  </StyledRow>
-
-                  <StyledMessages>{this.getStatusMessage()}</StyledMessages>
-
-                  <StyledButtonRow>{this.getGenerateButton()}</StyledButtonRow>
-                  <StyledButtonRow>
-                    <AppButton.BlueButton
-                      disabled={this.isVerifyButtonDisabled()}
-                      onClick={this.handleVerifyKeyPress}>
-                      <AppButton.Label>
-                        {messages.pgettext('wireguard-key-view', 'Verify key')}
-                      </AppButton.Label>
-                    </AppButton.BlueButton>
-                  </StyledButtonRow>
-                  <StyledLastButtonRow>
-                    <AppButton.BlockingButton
-                      disabled={this.props.isOffline}
-                      onClick={this.props.onVisitWebsiteKey}>
-                      <AriaDescriptionGroup>
-                        <AriaDescribed>
-                          <AppButton.BlueButton>
-                            <AppButton.Label>
-                              {messages.pgettext('wireguard-key-view', 'Manage keys')}
-                            </AppButton.Label>
-                            <AriaDescription>
-                              <AppButton.Icon
-                                source="icon-extLink"
-                                height={16}
-                                width={16}
-                                aria-label={messages.pgettext('accessibility', 'Opens externally')}
-                              />
-                            </AriaDescription>
-                          </AppButton.BlueButton>
-                        </AriaDescribed>
-                      </AriaDescriptionGroup>
-                    </AppButton.BlockingButton>
-                  </StyledLastButtonRow>
-                </StyledContent>
-              </StyledNavigationScrollbars>
-            </NavigationContainer>
-          </StyledContainer>
-        </Layout>
-      </BackAction>
-    );
-  }
-
-  private isVerifyButtonDisabled(): boolean {
-    return this.props.keyState.type !== 'key-set';
-  }
-
-  private handleVerifyKeyPress = () => {
-    this.setState({ userHasInitiatedVerification: true });
-    this.verifyKey();
-  };
-
-  private verifyKey() {
-    switch (this.props.keyState.type) {
-      case 'key-set': {
-        const key = this.props.keyState.key;
-        this.props.onVerifyKey(key);
-        break;
-      }
-      default:
-        log.error(`onVerifyKey called from invalid state -  ${this.props.keyState.type}`);
-    }
-  }
-
-  /// Action button can either generate or verify a key
-  private getGenerateButton() {
-    let buttonText = messages.pgettext('wireguard-key-view', 'Generate key');
-    const regenerateText = messages.pgettext('wireguard-key-view', 'Regenerate key');
-
-    let disabled = false;
-    let generateKey = this.props.onGenerateKey;
-    switch (this.props.keyState.type) {
-      case 'key-set': {
-        buttonText = regenerateText;
-        const key = this.props.keyState.key;
-        generateKey = () => this.props.onReplaceKey(key);
-        break;
-      }
-      case 'being-verified':
-        disabled = true;
-        buttonText = regenerateText;
-        break;
-      case 'being-replaced':
-      case 'being-generated':
-        disabled = true;
-        buttonText = messages.pgettext('wireguard-key-view', 'Generating key');
-    }
-
-    return (
-      <AppButton.GreenButton disabled={disabled} onClick={generateKey}>
-        <AppButton.Label>{buttonText}</AppButton.Label>
-      </AppButton.GreenButton>
-    );
-  }
-
-  private getKeyText() {
-    switch (this.props.keyState.type) {
-      case 'being-verified':
-      case 'key-set': {
-        // mimicking the truncating of the key from website
-        const publicKey = this.props.keyState.key.publicKey;
-        return (
-          <StyledRowValue title={this.props.keyState.key.publicKey}>
-            <ClipboardLabel
-              value={publicKey}
-              displayValue={publicKey.substring(0, 20) + '...'}
-              obscureValue={false}
-            />
-          </StyledRowValue>
-        );
-      }
-      case 'being-replaced':
-      case 'being-generated':
-        return <ImageView source="icon-spinner" height={19} width={19} />;
-      default:
-        return (
-          <StyledRowValue>{messages.pgettext('wireguard-key-view', 'No key set')}</StyledRowValue>
-        );
-    }
-  }
-
-  private keyValidityLabel() {
-    const keyStateType = this.props.keyState.type;
-    if (keyStateType === 'being-verified' && this.state.userHasInitiatedVerification) {
-      return <ImageView source="icon-spinner" height={20} width={20} />;
-    } else if (this.props.keyState.type === 'key-set') {
-      const valid = this.props.keyState.key.valid;
-      const show = this.state.userHasInitiatedVerification || valid === false;
-      return show && valid !== undefined ? (
-        <StyledMessage success={valid}>
-          {valid
-            ? messages.pgettext('wireguard-key-view', 'Key is valid')
-            : messages.pgettext('wireguard-key-view', 'Key is invalid')}
-        </StyledMessage>
-      ) : null;
-    } else {
-      return null;
-    }
-  }
-
-  private static ageOfKeyString(keyState: WgKeyState): string {
-    switch (keyState.type) {
-      case 'key-set':
-      case 'being-verified': {
-        const createdDate = Math.min(Date.parse(keyState.key.created), Date.now());
-        return formatRelativeDate(new Date(), createdDate, true);
-      }
-      default:
-        return '-';
-    }
-  }
-
-  private setAgeOfKeyStringState = () => {
-    this.setState({
-      ageOfKeyString: WireguardKeys.ageOfKeyString(this.props.keyState),
-    });
-  };
-
-  private getStatusMessage() {
-    if (this.props.isOffline && this.state.recentlyGeneratedKey) {
-      return (
-        <StyledMessage success={this.state.recentlyGeneratedKey}>
-          {messages.pgettext('wireguard-key-view', 'Reconnecting with new WireGuard key...')}
-        </StyledMessage>
-      );
-    } else {
-      let message = '';
-      switch (this.props.keyState.type) {
-        case 'key-set': {
-          const key = this.props.keyState.key;
-          if (key.replacementFailure) {
-            switch (key.replacementFailure) {
-              case 'too_many_keys':
-                message = this.formatKeygenFailure('too-many-keys');
-                break;
-              case 'generation_failure':
-                message = this.formatKeygenFailure('generation-failure');
-                break;
-            }
-          } else if (key.verificationFailed) {
-            message = messages.pgettext('wireguard-key-view', 'Key verification failed');
-          }
-
-          break;
-        }
-        case 'too-many-keys':
-        case 'generation-failure':
-          message = this.formatKeygenFailure(this.props.keyState.type);
-          break;
-      }
-
-      return <StyledMessage success={false}>{message}</StyledMessage>;
-    }
-  }
-
-  private formatKeygenFailure(failure: 'too-many-keys' | 'generation-failure'): string {
-    switch (failure) {
-      case 'too-many-keys':
-        // TRANSLATORS: "%(manage)" is replaced with the text in the "Manage keys" button.
-        return sprintf(
-          messages.pgettext(
-            'wireguard-key-view',
-            'Unable to regenerate key: you already have the maximum number of keys. To generate a new key, you first need to revoke one under “Manage keys.”',
-          ),
-          { manage: messages.pgettext('wireguard-key-view', 'Manage keys') },
-        );
-      case 'generation-failure':
-        return messages.pgettext('wireguard-key-view', 'Failed to generate a key');
-      default:
-        return failure;
-    }
-  }
-}
diff --git a/gui/src/renderer/components/WireguardKeysStyles.tsx b/gui/src/renderer/components/WireguardKeysStyles.tsx
deleted file mode 100644
index cf443b2fa5..0000000000
--- a/gui/src/renderer/components/WireguardKeysStyles.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import styled from 'styled-components';
-import { colors } from '../../config.json';
-import { normalText, smallText, tinyText } from './common-styles';
-import { Container } from './Layout';
-import { NavigationScrollbars } from './NavigationBar';
-
-export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
-  flex: 1,
-});
-
-export const StyledContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
-});
-
-export const StyledContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-});
-
-export const StyledMessages = styled.div({
-  padding: '0 22px 20px',
-  flex: 1,
-});
-
-export const StyledMessage = styled.span(smallText, (props: { success: boolean }) => ({
-  fontWeight: props.success ? 600 : 700,
-  color: props.success ? colors.green : colors.red,
-}));
-
-export const StyledRow = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  padding: '0 22px',
-  marginBottom: '20px',
-});
-
-export const StyledButtonRow = styled(StyledRow)({
-  marginBottom: '18px',
-});
-
-export const StyledLastButtonRow = styled(StyledButtonRow)({
-  marginBottom: '22px',
-});
-
-export const StyledRowLabel = styled.span(tinyText, {
-  color: colors.white60,
-  lineHeight: '20px',
-  marginBottom: '5px',
-});
-
-export const StyledRowLabelSpacer = styled.div({
-  flex: 1,
-});
-
-export const StyledRowValue = styled.span(normalText, {
-  fontWeight: 600,
-  color: colors.white,
-});
diff --git a/gui/src/renderer/components/WireguardSettings.tsx b/gui/src/renderer/components/WireguardSettings.tsx
index f799cff335..8bec012986 100644
--- a/gui/src/renderer/components/WireguardSettings.tsx
+++ b/gui/src/renderer/components/WireguardSettings.tsx
@@ -51,7 +51,6 @@ interface IProps {
   setWireguardMultihop: (value: boolean) => void;
   setWireguardPort: (port?: number) => void;
   setWireguardIpVersion: (ipVersion?: IpVersion) => void;
-  onViewWireguardKeys: () => void;
   onClose: () => void;
 }
 
@@ -202,15 +201,6 @@ export default class WireguardSettings extends React.Component<IProps, IState> {
                   </Cell.Footer>
                 </AriaInputGroup>
 
-                <Cell.CellButtonGroup>
-                  <Cell.CellButton onClick={this.props.onViewWireguardKeys}>
-                    <Cell.Label>
-                      {messages.pgettext('wireguard-settings-view', 'WireGuard key')}
-                    </Cell.Label>
-                    <Cell.Icon height={12} width={7} source="icon-chevron" />
-                  </Cell.CellButton>
-                </Cell.CellButtonGroup>
-
                 <AriaInputGroup>
                   <Cell.Container>
                     <AriaLabel>