fix(web/react-native/ui): use translated strings and censorContactMethod for VerifyUser screen

.changeset/cyan-taxis-explode.md

@@ -0,0 +1,13 @@
+---
+"@aws-amplify/ui": patch
+"@aws-amplify/ui-angular": patch
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui-react-native": patch
+"@aws-amplify/ui-vue": patch
+---
+
+fix(web/react-native/ui): use translated strings for VerifyUser screen and use censorContactMethod util 
+
+**ui/Angular/React/Vue/ReactNative:** adds a `censorContactMethod()` utility to the `ui` package and refactors the VerifyUser screen in Angular, React, Vue, and ReactNative packages to use this utility.
+
+**Vue:** Fixes an issue where translated strings were not being properly used for the VerifyUser screen. Additionally, removes duplicate "verify" id that was on multiple elements.

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/verify-user/verify-user.component.html

@@ -19,7 +19,9 @@ <h3 class="amplify-heading amplify-heading--3">{{ this.headerText }}</h3>
         [value]="unverifiedUserAttribute.key"
         [id]="labelId"
       />
-      <label [for]="labelId">{{ getLabel(unverifiedUserAttribute.key) }}</label>
+      <label [for]="labelId">{{
+        getLabel(unverifiedUserAttribute.key, unverifiedUserAttribute.value)
+      }}</label>
     </div>
 
     <button

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/verify-user/verify-user.component.ts

@@ -12,6 +12,8 @@ import {
   translate,
   authenticatorTextUtil,
   UnverifiedUserAttributes,
+  censorContactMethod,
+  ContactMethod,
 } from '@aws-amplify/ui';
 import { AuthenticatorService } from '../../../../services/authenticator.service';
 import { getAttributeMap } from '../../../../common';
@@ -48,10 +50,15 @@ export class VerifyUserComponent implements OnInit {
     this.unverifiedUserAttributes = actorState.context.unverifiedUserAttributes;
   }
 
-  getLabel(attr: keyof UnverifiedUserAttributes): string {
+  getLabel(attr: keyof UnverifiedUserAttributes, value: string): string {
     const attributeMap = getAttributeMap();
     const { label } = attributeMap[attr];
-    return translate(label);
+    const translatedTypeLabel = translate(label);
+    const censoredAttributeValue = censorContactMethod(
+      label as ContactMethod,
+      value
+    );
+    return `${translatedTypeLabel}: ${censoredAttributeValue}`;
   }
 
   onInput(event: Event): void {

packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx

@@ -1,20 +1,17 @@
 import React from 'react';
-import { censorAllButFirstAndLast, censorPhoneNumber } from '@aws-amplify/ui';
+import { censorContactMethod, ContactMethod } from '@aws-amplify/ui';
 
 import { Radio, RadioGroup } from '../../../primitives';
 import { DefaultRadioFormFieldsProps } from './types';
 
-const censorContactInformation = (name: string, value: string): string => {
-  let censoredVal = value;
-  if (name === 'email') {
-    const splitEmail = value.split('@');
-    const censoredName = censorAllButFirstAndLast(splitEmail[0]);
+interface AttributeMap {
+  email: ContactMethod;
+  phone_number: ContactMethod;
+}
 
-    censoredVal = `${censoredName}@${splitEmail[1]}`;
-  } else if (name === 'phone_number') {
-    censoredVal = censorPhoneNumber(value);
-  }
-  return censoredVal;
+const attributeMap: AttributeMap = {
+  email: 'Email',
+  phone_number: 'Phone Number',
 };
 
 const DefaultRadioFormFields = ({
@@ -26,18 +23,22 @@ const DefaultRadioFormFields = ({
 }: DefaultRadioFormFieldsProps): JSX.Element => {
   return (
     <RadioGroup disabled={isPending} style={style}>
-      {(fields ?? []).map(({ name, value, ...props }) => (
-        <Radio
-          {...props}
-          key={value}
-          // value has to be name, because Auth is only interested in the
-          // string "email" or "phone_number", not the actual value
-          value={name}
-          label={censorContactInformation(name, value)}
-          labelStyle={fieldLabelStyle}
-          style={fieldContainerStyle}
-        />
-      ))}
+      {(fields ?? []).map(({ name, value, ...props }) => {
+        const attributeType = attributeMap[name as keyof AttributeMap];
+
+        return (
+          <Radio
+            {...props}
+            key={value}
+            // value has to be name, because Auth is only interested in the
+            // string "email" or "phone_number", not the actual value
+            value={name}
+            label={censorContactMethod(attributeType, value)}
+            labelStyle={fieldLabelStyle}
+            style={fieldContainerStyle}
+          />
+        );
+      })}
     </RadioGroup>
   );
 };

packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import {
   defaultFormFieldOptions,
-  censorAllButFirstAndLast,
-  censorPhoneNumber,
+  censorContactMethod,
   ContactMethod,
   translate,
   UnverifiedUserAttributes,
@@ -27,36 +26,20 @@ const {
   getAccountRecoveryInfoText,
 } = authenticatorTextUtil;
 
-const censorContactInformation = (
-  type: ContactMethod,
-  value: string
-): string => {
-  const translated = translate(type);
-  let newVal = value;
-
-  if (type === 'Phone Number') {
-    newVal = censorPhoneNumber(value);
-  } else if (type === 'Email') {
-    const splitEmail = value.split('@');
-    const censoredName = censorAllButFirstAndLast(splitEmail[0]);
-
-    newVal = `${censoredName}@${splitEmail[1]}`;
-  }
-
-  return `${translated}: ${newVal}`;
-};
-
 const generateRadioGroup = (
   attributes: UnverifiedUserAttributes
 ): JSX.Element[] => {
-  return Object.entries(attributes).map(([key, value]: [string, string]) => (
-    <Radio name="unverifiedAttr" value={key} key={key}>
-      {censorContactInformation(
-        (defaultFormFieldOptions[key] as { label: ContactMethod }).label,
-        value
-      )}
-    </Radio>
-  ));
+  return Object.entries(attributes).map(([key, value]: [string, string]) => {
+    const verificationType = (
+      defaultFormFieldOptions[key] as { label: ContactMethod }
+    ).label;
+    return (
+      <Radio name="unverifiedAttr" value={key} key={key}>
+        {translate(verificationType)}:{' '}
+        {censorContactMethod(verificationType, value)}
+      </Radio>
+    );
+  });
 };
 
 export const VerifyUser = ({

packages/ui/src/helpers/__tests__/utils.test.ts

@@ -1,4 +1,9 @@
-import { censorAllButFirstAndLast, censorPhoneNumber } from '..';
+import {
+  censorAllButFirstAndLast,
+  censorContactMethod,
+  censorEmail,
+  censorPhoneNumber,
+} from '..';
 
 describe('censorAllButFirstAndLast', () => {
   it('should only censor characters between the first and last indexes of a string', () => {
@@ -53,3 +58,27 @@ describe('censorPhoneNumber', () => {
     expect(phone6).toEqual('+12');
   });
 });
+
+describe('censorEmail', () => {
+  it('should return a censored email', () => {
+    const censoredEmail = censorEmail('[email protected]');
+    expect(censoredEmail).toEqual('e*****[email protected]');
+  });
+});
+
+describe('censorContactMethod', () => {
+  it('should return a censored phone number when passed type of Phone Number', () => {
+    const censoredPhoneNumber = censorContactMethod(
+      'Phone Number',
+      '+11231234567'
+    );
+    expect(censoredPhoneNumber).toEqual('********4567');
+  });
+  it('should return a censored email when passed type of Email', () => {
+    const censoredPhoneNumber = censorContactMethod(
+      'Email',
+      '[email protected]'
+    );
+    expect(censoredPhoneNumber).toEqual('e*****[email protected]');
+  });
+});

packages/ui/src/helpers/authenticator/utils.ts

@@ -1,4 +1,5 @@
 import { ALLOWED_SPECIAL_CHARACTERS, emailRegex } from './constants';
+import type { ContactMethod } from '../../types';
 
 // replaces all characters in a string with '*', except for the first and last char
 export const censorAllButFirstAndLast = (value: string): string => {
@@ -26,6 +27,24 @@ export const censorPhoneNumber = (val: string): string => {
   return split.join('');
 };
 
+// censors all but the first and last of the name of an email and keeps domain
+export const censorEmail = (val: string): string => {
+  const splitEmail = val.split('@');
+  const censoredName = censorAllButFirstAndLast(splitEmail[0]);
+
+  return `${censoredName}@${splitEmail[1]}`;
+};
+
+// based on the ContactMethod type, returns a censored contact value
+export const censorContactMethod = (
+  type: ContactMethod,
+  value: string
+): string => {
+  return type === 'Phone Number'
+    ? censorPhoneNumber(value)
+    : censorEmail(value);
+};
+
 export const hasSpecialChars = (password: string) =>
   ALLOWED_SPECIAL_CHARACTERS.some((char) => password.includes(char));
 

packages/vue/src/components/__tests__/__snapshots__/authenticator.spec.ts.snap

@@ -1265,19 +1265,28 @@ exports[`authenticator renders verifyUser subcomponent 1`] = `
                 >
 
 
+
                   <label
                     class="amplify-flex amplify-radio"
                     data-amplify-label=""
                     data-amplify-verify-label=""
-                    id="verify"
                   >
 
+
+                    <span
+                      class="amplify-text amplify-radio__label"
+                      data-amplify-text=""
+                    >
+
+                      Email: t**[email protected]
+
+                    </span>
+
                     <input
                       aria-invalid="false"
                       class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
                       data-amplify-input=""
                       data-amplify-verify-input=""
-                      id="verify"
                       name="unverifiedAttr"
                       type="radio"
                       value="email"
@@ -1293,19 +1302,10 @@ exports[`authenticator renders verifyUser subcomponent 1`] = `
                     </span>
 
 
-                    <span
-                      class="amplify-text amplify-radio__label"
-                      data-amplify-text=""
-                    >
-
-                      Email
-
-                    </span>
-
-
                   </label>
 
 
+
                 </div>
 
               </div>

packages/vue/src/components/__tests__/__snapshots__/verify-user.spec.ts.snap

@@ -44,19 +44,28 @@ exports[`VerifyUser renders as expected 1`] = `
           >
 
 
+
             <label
               class="amplify-flex amplify-radio"
               data-amplify-label=""
               data-amplify-verify-label=""
-              id="verify"
             >
 
+
+              <span
+                class="amplify-text amplify-radio__label"
+                data-amplify-text=""
+              >
+
+                Email: t**[email protected]
+
+              </span>
+
               <input
                 aria-invalid="false"
                 class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
                 data-amplify-input=""
                 data-amplify-verify-input=""
-                id="verify"
                 name="unverifiedAttr"
                 type="radio"
                 value="email"
@@ -72,19 +81,10 @@ exports[`VerifyUser renders as expected 1`] = `
               </span>
 
 
-              <span
-                class="amplify-text amplify-radio__label"
-                data-amplify-text=""
-              >
-
-                Email
-
-              </span>
-
-
             </label>
 
 
+
           </div>
 
         </div>

packages/vue/src/components/__tests__/authenticator.spec.ts

@@ -7,6 +7,7 @@ import {
   AuthEvent,
   AuthInterpreter,
   AuthMachineState,
+  UnverifiedUserAttributes,
 } from '@aws-amplify/ui';
 
 import { components } from '../../../global-spec';
@@ -59,6 +60,10 @@ const setupState = {
   matches: (state: string) => state === 'setup',
 } as unknown as AuthMachineState;
 
+const unverifiedUserAttributes: UnverifiedUserAttributes = {
+  email: '[email protected]',
+};
+
 const mockStateRef = ref(idleState) as unknown as Ref<AuthMachineState>;
 
 const sendSpy = jest.fn();
@@ -181,6 +186,7 @@ describe('authenticator', () => {
         user,
         totpSecretCode:
           route === 'setupTotp' ? 'totp-mock-secret-code' : undefined,
+        unverifiedUserAttributes,
       })
     );