Convert WireGuard keys view from ReactXP

2 files changed, 202 insertions, 228 deletions

diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index 6214b23ea5..a8cc7f517e 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -1,7 +1,6 @@
 import log from 'electron-log';
 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';
@@ -9,7 +8,7 @@ import { IWgKey, WgKeyState } from '../redux/settings/reducers';
 import * as AppButton from './AppButton';
 import ClipboardLabel from './ClipboardLabel';
 import ImageView from './ImageView';
-import { Container, Layout } from './Layout';
+import { Layout } from './Layout';
 import {
   BackBarItem,
   NavigationBar,
@@ -18,7 +17,19 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import styles, { StyledNavigationScrollbars } from './WireguardKeysStyles';
+import {
+  StyledButtonRow,
+  StyledContainer,
+  StyledContent,
+  StyledLastButtonRow,
+  StyledMessage,
+  StyledMessages,
+  StyledNavigationScrollbars,
+  StyledRow,
+  StyledRowLabel,
+  StyledRowLabelSpacer,
+  StyledRowValue,
+} from './WireguardKeysStyles';
 
 export interface IProps {
   keyState: WgKeyState;
@@ -38,7 +49,7 @@ export interface IState {
   userHasInitiatedVerification: boolean;
 }
 
-export default class WireguardKeys extends Component<IProps, IState> {
+export default class WireguardKeys extends React.Component<IProps, IState> {
   public state = {
     recentlyGeneratedKey: false,
     userHasInitiatedVerification: false,
@@ -69,108 +80,102 @@ export default class WireguardKeys extends Component<IProps, IState> {
   public render() {
     return (
       <Layout>
-        <Container>
-          <View style={styles.wgkeys}>
-            <NavigationContainer>
-              <NavigationBar>
-                <NavigationItems>
-                  <BackBarItem action={this.props.onClose}>
-                    {
-                      // TRANSLATORS: Back button in navigation bar
-                      messages.pgettext('wireguard-keys-nav', 'Advanced')
-                    }
-                  </BackBarItem>
-                  <TitleBarItem>
-                    {
-                      // TRANSLATORS: Title label in navigation bar
-                      messages.pgettext('wireguard-keys-nav', 'WireGuard key')
-                    }
-                  </TitleBarItem>
-                </NavigationItems>
-              </NavigationBar>
+        <StyledContainer>
+          <NavigationContainer>
+            <NavigationBar>
+              <NavigationItems>
+                <BackBarItem action={this.props.onClose}>
+                  {
+                    // TRANSLATORS: Back button in navigation bar
+                    messages.pgettext('wireguard-keys-nav', 'Advanced')
+                  }
+                </BackBarItem>
+                <TitleBarItem>
+                  {
+                    // TRANSLATORS: Title label in navigation bar
+                    messages.pgettext('wireguard-keys-nav', 'WireGuard key')
+                  }
+                </TitleBarItem>
+              </NavigationItems>
+            </NavigationBar>
 
-              <View style={styles.wgkeys__container}>
-                <StyledNavigationScrollbars fillContainer>
-                  <View style={styles.wgkeys__content}>
-                    <SettingsHeader>
-                      <HeaderTitle>
-                        {messages.pgettext('wireguard-keys-nav', 'WireGuard key')}
-                      </HeaderTitle>
-                    </SettingsHeader>
+            <StyledNavigationScrollbars fillContainer>
+              <StyledContent>
+                <SettingsHeader>
+                  <HeaderTitle>
+                    {messages.pgettext('wireguard-keys-nav', 'WireGuard key')}
+                  </HeaderTitle>
+                </SettingsHeader>
 
-                    <View style={styles.wgkeys__row}>
-                      <Text style={styles.wgkeys__row_label}>
-                        {messages.pgettext('wireguard-key-view', 'Public key')}
-                      </Text>
+                <StyledRow>
+                  <StyledRowLabel>
+                    <span>{messages.pgettext('wireguard-key-view', 'Public key')}</span>
+                    <StyledRowLabelSpacer />
+                    <span>{this.keyValidityLabel()}</span>
+                  </StyledRowLabel>
 
-                      <View style={styles.wgkeys__row_value}>{this.getKeyText()}</View>
-                    </View>
-                    <View style={styles.wgkeys__row}>
-                      <Text style={styles.wgkeys__row_label}>
-                        {messages.pgettext('wireguard-key-view', 'Key generated')}
-                      </Text>
-                      <Text style={styles.wgkeys__row_value}>{this.ageOfKeyString()}</Text>
-                    </View>
+                  <StyledRowValue>{this.getKeyText()}</StyledRowValue>
+                </StyledRow>
+                <StyledRow>
+                  <StyledRowLabel>
+                    {messages.pgettext('wireguard-key-view', 'Key generated')}
+                  </StyledRowLabel>
+                  <StyledRowValue>{this.ageOfKeyString()}</StyledRowValue>
+                </StyledRow>
 
-                    <View style={styles.wgkeys__messages}>
-                      {this.props.isOffline ? (
-                        this.offlineLabel()
-                      ) : (
-                        <View style={styles.wgkeys__row}>{this.keyValidityLabel()}</View>
-                      )}
-                    </View>
+                <StyledMessages>
+                  {this.props.isOffline ? (
+                    this.offlineLabel()
+                  ) : (
+                    <StyledMessage success={false}>{this.getStatusMessage()}</StyledMessage>
+                  )}
+                </StyledMessages>
 
-                    <View style={styles.wgkeys__button_row}>{this.getGenerateButton()}</View>
-                    <View style={styles.wgkeys__button_row}>
-                      <AppButton.BlueButton
-                        disabled={this.isVerifyButtonDisabled()}
-                        onClick={this.handleVerifyKeyPress}>
-                        <AppButton.Label>
-                          {messages.pgettext('wireguard-key-view', 'Verify key')}
-                        </AppButton.Label>
-                      </AppButton.BlueButton>
-                    </View>
-                    <View style={[styles.wgkeys__button_row, styles.wgkeys__last_button]}>
-                      <AppButton.BlockingButton
-                        disabled={this.props.isOffline}
-                        onClick={this.props.onVisitWebsiteKey}>
-                        <AppButton.BlueButton>
-                          <AppButton.Label>
-                            {messages.pgettext('wireguard-key-view', 'Manage keys')}
-                          </AppButton.Label>
-                          <AppButton.Icon source="icon-extLink" height={16} width={16} />
-                        </AppButton.BlueButton>
-                      </AppButton.BlockingButton>
-                    </View>
-                  </View>
-                </StyledNavigationScrollbars>
-              </View>
-            </NavigationContainer>
-          </View>
-        </Container>
+                <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}>
+                    <AppButton.BlueButton>
+                      <AppButton.Label>
+                        {messages.pgettext('wireguard-key-view', 'Manage keys')}
+                      </AppButton.Label>
+                      <AppButton.Icon source="icon-extLink" height={16} width={16} />
+                    </AppButton.BlueButton>
+                  </AppButton.BlockingButton>
+                </StyledLastButtonRow>
+              </StyledContent>
+            </StyledNavigationScrollbars>
+          </NavigationContainer>
+        </StyledContainer>
       </Layout>
     );
   }
 
   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>
+    return (
+      <StyledMessage success={this.state.recentlyGeneratedKey}>
+        {this.state.recentlyGeneratedKey
+          ? messages.pgettext('wireguard-key-view', 'Reconnecting with new WireGuard key...')
+          : messages.pgettext(
+              'wireguard-key-view',
+              'Unable to manage keys while in a blocked state',
+            )}
+      </StyledMessage>
     );
   }
 
   private isVerifyButtonDisabled(): boolean {
-    switch (this.props.keyState.type) {
-      case 'key-set':
-        return false || this.props.isOffline;
-      default:
-        return true;
-    }
+    return this.props.keyState.type !== 'key-set' || this.props.isOffline;
   }
 
   private handleVerifyKeyPress = () => {
@@ -192,10 +197,10 @@ export default class WireguardKeys extends Component<IProps, IState> {
 
   /// Action button can either generate or verify a key
   private getGenerateButton() {
-    const generateText = messages.pgettext('wireguard-key-view', 'Generate key');
+    let buttonText = messages.pgettext('wireguard-key-view', 'Generate key');
     const regenerateText = messages.pgettext('wireguard-key-view', 'Regenerate key');
-    let buttonText = generateText;
 
+    let disabled = this.props.isOffline;
     let generateKey = this.props.onGenerateKey;
     switch (this.props.keyState.type) {
       case 'key-set': {
@@ -205,27 +210,22 @@ export default class WireguardKeys extends Component<IProps, IState> {
         break;
       }
       case 'being-verified':
-        return this.busyButton(regenerateText);
+        disabled = true;
+        buttonText = regenerateText;
+        break;
       case 'being-replaced':
       case 'being-generated':
-        return this.busyButton(messages.pgettext('wireguard-key-view', 'Generating key'));
+        disabled = true;
+        buttonText = messages.pgettext('wireguard-key-view', 'Generating key');
     }
+
     return (
-      <AppButton.GreenButton disabled={this.props.isOffline} onClick={generateKey}>
+      <AppButton.GreenButton disabled={disabled} onClick={generateKey}>
         <AppButton.Label>{buttonText}</AppButton.Label>
       </AppButton.GreenButton>
     );
   }
 
-  private busyButton(message: string) {
-    return (
-      <AppButton.BlueButton disabled={true}>
-        <AppButton.Label>{message}</AppButton.Label>
-        <AppButton.Icon source="icon-spinner" height={16} width={16} />
-      </AppButton.BlueButton>
-    );
-  }
-
   private getKeyText() {
     switch (this.props.keyState.type) {
       case 'being-verified':
@@ -233,91 +233,73 @@ export default class WireguardKeys extends Component<IProps, IState> {
         // mimicking the truncating of the key from website
         const publicKey = this.props.keyState.key.publicKey;
         return (
-          <View title={this.props.keyState.key.publicKey}>
-            <Text style={styles.wgkeys__row_value}>
-              <ClipboardLabel value={publicKey} displayValue={publicKey.substring(0, 20) + '...'} />
-            </Text>
-          </View>
+          <StyledRowValue title={this.props.keyState.key.publicKey}>
+            <ClipboardLabel value={publicKey} displayValue={publicKey.substring(0, 20) + '...'} />
+          </StyledRowValue>
         );
       }
       case 'being-replaced':
       case 'being-generated':
         return <ImageView source="icon-spinner" height={19} width={19} />;
-      case 'too-many-keys':
-      case 'generation-failure':
-        return (
-          <Text style={styles.wgkeys__invalid_key}>
-            {this.formatKeygenFailure(this.props.keyState.type)}
-          </Text>
-        );
       default:
         return (
-          <Text style={styles.wgkeys__row_value}>
-            {messages.pgettext('wireguard-key-view', 'No key set')}
-          </Text>
+          <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 ageOfKeyString(): string {
     switch (this.props.keyState.type) {
+      case 'key-set':
       case 'being-verified':
-        return this.state.userHasInitiatedVerification ? (
-          <ImageView source="icon-spinner" height={20} width={20} />
-        ) : null;
+        return moment(this.props.keyState.key.created).locale(this.props.locale).fromNow();
+      default:
+        return '-';
+    }
+  }
+
+  private getStatusMessage(): string {
+    switch (this.props.keyState.type) {
       case 'key-set': {
         const key = this.props.keyState.key;
-        if (key.valid === true && this.state.userHasInitiatedVerification) {
-          return (
-            <Text style={styles.wgkeys__valid_key}>
-              {messages.pgettext('wireguard-key-view', 'Key is valid')}
-            </Text>
-          );
-        } else if (key.valid === false) {
-          return (
-            <Text style={styles.wgkeys__invalid_key}>
-              {messages.pgettext('wireguard-key-view', 'Key is invalid')}
-            </Text>
-          );
-        } else if (key.replacementFailure) {
-          let failureMessage = '';
+        if (key.replacementFailure) {
           switch (key.replacementFailure) {
             case 'too_many_keys':
-              failureMessage = this.formatKeygenFailure('too-many-keys');
-              break;
+              return this.formatKeygenFailure('too-many-keys');
             case 'generation_failure':
-              failureMessage = this.formatKeygenFailure('generation-failure');
-              break;
+              return this.formatKeygenFailure('generation-failure');
           }
-
-          return <Text style={styles.wgkeys__invalid_key}>{failureMessage}</Text>;
         } else if (key.verificationFailed) {
-          return (
-            <Text style={styles.wgkeys__invalid_key}>
-              {messages.pgettext('wireguard-key-view', 'Key verification failed')}
-            </Text>
-          );
-        } else {
-          return null;
+          return messages.pgettext('wireguard-key-view', 'Key verification failed');
         }
+
+        return '';
       }
+      case 'too-many-keys':
+      case 'generation-failure':
+        return this.formatKeygenFailure(this.props.keyState.type);
       default:
-        return null;
-    }
-  }
-
-  private ageOfKeyString(): string {
-    let keyCreatedSince = '-';
-    switch (this.props.keyState.type) {
-      case 'key-set':
-      case 'being-verified':
-        keyCreatedSince = moment(this.props.keyState.key.created)
-          .locale(this.props.locale)
-          .fromNow();
-        break;
+        return '';
     }
-
-    return keyCreatedSince;
   }
 
   private formatKeygenFailure(failure: 'too-many-keys' | 'generation-failure'): string {
diff --git a/gui/src/renderer/components/WireguardKeysStyles.tsx b/gui/src/renderer/components/WireguardKeysStyles.tsx
index 7176f560af..c603900e02 100644
--- a/gui/src/renderer/components/WireguardKeysStyles.tsx
+++ b/gui/src/renderer/components/WireguardKeysStyles.tsx
@@ -1,70 +1,62 @@
-import { Styles } from 'reactxp';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
+import { smallText } from './common-styles';
+import { Container } from './Layout';
 import { NavigationScrollbars } from './NavigationBar';
 
 export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
   flex: 1,
 });
 
-export default {
-  wgkeys: Styles.createViewStyle({
-    backgroundColor: colors.darkBlue,
-    flex: 1,
-  }),
-  wgkeys__container: Styles.createViewStyle({
-    flexDirection: 'column',
-    flex: 1,
-  }),
-  wgkeys__content: Styles.createViewStyle({
-    // ReactXP don't allow setting 'minHeight' and don't allow percentages. This will work well
-    // without the '@ts-ignore' when moving away from ReactXP.
-    // @ts-ignore
-    minHeight: '100%',
-  }),
-  wgkeys__messages: Styles.createViewStyle({
-    flex: 1,
-  }),
-  wgkeys__row: Styles.createViewStyle({
-    paddingVertical: 0,
-    paddingHorizontal: 22,
-    marginBottom: 20,
-  }),
-  wgkeys__button_row: Styles.createViewStyle({
-    paddingHorizontal: 22,
-    marginBottom: 18,
-  }),
-  wgkeys__last_button: Styles.createViewStyle({
-    marginBottom: 22,
-  }),
-  wgkeys__row_label: Styles.createTextStyle({
-    flex: 1,
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    lineHeight: 20,
-    color: colors.white60,
-    marginBottom: 9,
-  }),
-  wgkeys__row_value: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 16,
-    lineHeight: 19,
-    fontWeight: '800',
-    color: colors.white,
-  }),
-  wgkeys__invalid_key: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '800',
-    lineHeight: 20,
-    color: colors.red,
-  }),
-  wgkeys__valid_key: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    fontWeight: '600',
-    lineHeight: 20,
-    color: colors.green,
-  }),
-};
+export const StyledContainer = styled(Container)({
+  backgroundColor: colors.darkBlue,
+});
+
+export const StyledContent = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '100%',
+});
+
+export const StyledMessages = styled.div({
+  padding: '0 22px 20px',
+  flex: 1,
+});
+
+export const StyledMessage = styled.span(smallText, (props: { success: boolean }) => ({
+  fontWeight: props.success ? 600 : 800,
+  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(smallText, {
+  display: 'flex',
+  color: colors.white60,
+  marginBottom: '9px',
+});
+
+export const StyledRowLabelSpacer = styled.div({
+  flex: 1,
+});
+
+export const StyledRowValue = styled.span({
+  fontFamily: 'Open Sans',
+  fontSize: '16px',
+  lineHeight: '19px',
+  fontWeight: 800,
+  color: colors.white,
+});