Merge branch 'update-account-number-label'

5 files changed, 94 insertions, 39 deletions

diff --git a/gui/src/renderer/components/AccountTokenLabel.tsx b/gui/src/renderer/components/AccountTokenLabel.tsx
index b2623a5ad2..704f41af10 100644
--- a/gui/src/renderer/components/AccountTokenLabel.tsx
+++ b/gui/src/renderer/components/AccountTokenLabel.tsx
@@ -3,6 +3,7 @@ import ClipboardLabel from './ClipboardLabel';
 
 interface IAccountTokenLabelProps {
   accountToken: string;
+  obscureValue?: boolean;
   className?: string;
 }
 
@@ -11,6 +12,7 @@ export default function AccountTokenLabel(props: IAccountTokenLabelProps) {
     <ClipboardLabel
       value={props.accountToken}
       displayValue={formatAccountToken(props.accountToken)}
+      obscureValue={props.obscureValue}
       className={props.className}
     />
   );
diff --git a/gui/src/renderer/components/ClipboardLabel.tsx b/gui/src/renderer/components/ClipboardLabel.tsx
index 43b0d2c764..071a6991a8 100644
--- a/gui/src/renderer/components/ClipboardLabel.tsx
+++ b/gui/src/renderer/components/ClipboardLabel.tsx
@@ -1,58 +1,104 @@
-import * as React from 'react';
+import { useCallback } from 'react';
 import styled from 'styled-components';
+import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
-import { Scheduler } from '../../shared/scheduler';
+import { useScheduler } from '../../shared/scheduler';
+import { useBoolean } from '../lib/utilityHooks';
+import ImageView from './ImageView';
+
+const COPIED_ICON_DURATION = 2000;
 
 interface IProps {
   value: string;
   displayValue?: string;
-  delay: number;
+  obscureValue?: boolean;
   message?: string;
   className?: string;
 }
 
-interface IState {
-  showsMessage: boolean;
-}
-
-const Label = styled.span({
-  cursor: 'pointer',
+const StyledLabelContainer = styled.div({
+  display: 'flex',
+  flex: 1,
+  height: '19px',
+  alignItems: 'center',
 });
 
-export default class ClipboardLabel extends React.Component<IProps, IState> {
-  public static defaultProps: Partial<IProps> = {
-    delay: 3000,
-  };
+const StyledLabel = styled.span({
+  flex: 1,
+});
 
-  public state: IState = {
-    showsMessage: false,
-  };
+const StyledButton = styled.button({
+  cursor: 'default',
+  padding: 0,
+  marginLeft: '20px',
+  backgroundColor: 'transparent',
+  border: 'none',
+});
 
-  private scheduler = new Scheduler();
+const StyledCopyButton = styled(StyledButton)({
+  width: '24px',
+});
 
-  public componentWillUnmount() {
-    this.scheduler.cancel();
-  }
+export default function ClipboardLabel(props: IProps) {
+  const [obscured, , , toggleObscured] = useBoolean(props.obscureValue ?? true);
+  const [justCopied, setJustCopied, resetJustCopied] = useBoolean(false);
 
-  public render() {
-    const message = this.props.message ?? messages.gettext('COPIED TO CLIPBOARD!');
-    const displayValue = this.props.displayValue ?? this.props.value;
-    return (
-      <Label className={this.props.className} onClick={this.handlePress}>
-        {this.state.showsMessage ? message : displayValue}
-      </Label>
-    );
-  }
+  const copiedScheduler = useScheduler();
 
-  private handlePress = async () => {
+  const onCopy = useCallback(async () => {
     try {
-      await navigator.clipboard.writeText(this.props.value);
-      this.scheduler.schedule(() => this.setState({ showsMessage: false }), this.props.delay);
-      this.setState({ showsMessage: true });
+      await navigator.clipboard.writeText(props.value);
+      copiedScheduler.schedule(resetJustCopied, COPIED_ICON_DURATION);
+      setJustCopied();
     } catch (e) {
       const error = e as Error;
       log.error(`Failed to copy to clipboard: ${error.message}`);
     }
-  };
+  }, [props.value, copiedScheduler, setJustCopied, resetJustCopied]);
+
+  const value = props.displayValue ?? props.value;
+  return (
+    <StyledLabelContainer>
+      <StyledLabel className={props.className} aria-hidden={obscured}>
+        {obscured ? '●●●● ●●●● ●●●● ●●●●' : value}
+      </StyledLabel>
+      {props.obscureValue !== false && (
+        <StyledButton
+          onClick={toggleObscured}
+          aria-label={
+            obscured
+              ? // This line is here to prevent the following one to be moved up here by prettier
+                // TRANSLATORS: Provided to accessibility tools such as screenreaders to describe
+                // TRANSLATORS: the button which unobscures the account number.
+                messages.pgettext('accessibility', 'Show account number')
+              : // This line is here to prevent the following one to be moved up here by prettier
+                // TRANSLATORS: Provided to accessibility tools such as screenreaders to describe
+                // TRANSLATORS: the button which obscures the account number.
+                messages.pgettext('accessibility', 'Hide account number')
+          }>
+          <ImageView
+            source={obscured ? 'icon-unobscure' : 'icon-obscure'}
+            tintColor={colors.white}
+            tintHoverColor={colors.white80}
+            width={24}
+          />
+        </StyledButton>
+      )}
+      <StyledCopyButton
+        onClick={onCopy}
+        aria-label={
+          // TRANSLATORS: Provided to accessibility tools such as screenreaders to describe a button
+          // TRANSLATORS: which copies the account number to the clipboard.
+          messages.pgettext('accessibility', 'Copy account number')
+        }>
+        <ImageView
+          source={justCopied ? 'icon-tick' : 'icon-copy'}
+          tintColor={justCopied ? colors.green : colors.white}
+          tintHoverColor={justCopied ? colors.green : colors.white80}
+          width={justCopied ? 22 : 24}
+        />
+      </StyledCopyButton>
+    </StyledLabelContainer>
+  );
 }
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index d4ac395c2c..0fedb67fdf 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -127,7 +127,10 @@ export default class ExpiredAccountErrorView extends React.Component<
         <StyledAccountTokenMessage>
           {messages.pgettext('connect-view', 'Here’s your account number. Save it!')}
           <StyledAccountTokenContainer>
-            <StyledAccountTokenLabel accountToken={this.props.accountToken || ''} />
+            <StyledAccountTokenLabel
+              accountToken={this.props.accountToken || ''}
+              obscureValue={false}
+            />
           </StyledAccountTokenContainer>
         </StyledAccountTokenMessage>
 
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index 8872bbb312..5aa4e6ea63 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -14,8 +14,8 @@ export const StyledHeader = styled(DefaultHeaderBar)({
 
 export const StyledAccountTokenLabel = styled(AccountTokenLabel)({
   fontFamily: 'Open Sans',
-  lineHeight: '24px',
-  fontSize: '24px',
+  lineHeight: '20px',
+  fontSize: '20px',
   fontWeight: 800,
   color: colors.white,
 });
@@ -80,6 +80,6 @@ export const StyledStatusIcon = styled.div({
 
 export const StyledAccountTokenContainer = styled.div({
   display: 'flex',
-  height: '68px',
+  height: '50px',
   alignItems: 'center',
 });
diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index 3201e0a708..be8c043458 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -242,7 +242,11 @@ export default class WireguardKeys extends React.Component<IProps, IState> {
         const publicKey = this.props.keyState.key.publicKey;
         return (
           <StyledRowValue title={this.props.keyState.key.publicKey}>
-            <ClipboardLabel value={publicKey} displayValue={publicKey.substring(0, 20) + '...'} />
+            <ClipboardLabel
+              value={publicKey}
+              displayValue={publicKey.substring(0, 20) + '...'}
+              obscureValue={false}
+            />
           </StyledRowValue>
         );
       }