feat(settings): new FlowSetup2faBackupCodeConfirm component

Because:

* The design for 2FA setup has been updated
* We want the UI component to be reusable
* We want to document the component and states in storybook

This commit:

* Creates a new UI component with l10n, storybook and unit tests
* Updates FormVerifyTotp to allow custom styling
* Does not hook up the component in the setup flow - that will be done in a later ticket

Closes #FXA-11625

Author: MagentaManifold

packages/fxa-settings/src/components/FormVerifyTotp/index.tsx

@@ -9,6 +9,7 @@ import { getLocalizedErrorMessage } from '../../lib/error-utils';
 import { useFtlMsgResolver } from '../../models';
 import { AuthUiErrors } from '../../lib/auth-errors/auth-errors';
 import { FormVerifyTotpProps, VerifyTotpFormData } from './interfaces';
+import classNames from 'classnames';
 
 // Split inputs are not recommended for accesibility
 // Code inputs should be a single input field
@@ -25,6 +26,7 @@ const FormVerifyTotp = ({
   setErrorMessage,
   verifyCode,
   gleanDataAttrs,
+  className = '',
 }: FormVerifyTotpProps) => {
   const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
 
@@ -87,7 +89,7 @@ const FormVerifyTotp = ({
   return (
     <form
       noValidate
-      className="flex flex-col gap-4 my-6"
+      className={classNames('flex flex-col gap-4', className)}
       onSubmit={handleSubmit(onSubmit)}
     >
       {/* Using `type="text" inputmode="numeric"` shows the numeric keyboard on mobile
@@ -105,7 +107,7 @@ const FormVerifyTotp = ({
         spellCheck={false}
         inputRef={register({ required: true })}
         hasErrors={!!errorMessage}
-        aria-describedby={errorBannerId}
+        ariaDescribedBy={errorBannerId}
       />
       <button
         type="submit"

packages/fxa-settings/src/components/FormVerifyTotp/interfaces.ts

@@ -15,6 +15,7 @@ export type FormVerifyTotpProps = {
   setErrorMessage: React.Dispatch<React.SetStateAction<string>>;
   verifyCode: (code: string) => void;
   gleanDataAttrs?: GleanClickEventDataAttrs;
+  className?: string;
 };
 
 export type VerifyTotpFormData = {

packages/fxa-settings/src/components/InputText/index.tsx

@@ -48,6 +48,7 @@ export type InputTextProps = {
   required?: boolean;
   tooltipPosition?: 'top' | 'bottom';
   isPasswordInput?: boolean;
+  ariaDescribedBy?: string;
 };
 
 export const InputText = ({
@@ -80,6 +81,7 @@ export const InputText = ({
   required,
   tooltipPosition,
   isPasswordInput = false,
+  ariaDescribedBy,
 }: InputTextProps) => {
   const [focused, setFocused] = useState<boolean>(false);
   const [hasContent, setHasContent] = useState<boolean>(defaultValue != null);
@@ -176,6 +178,7 @@ export const InputText = ({
           data-testid={formatDataTestId('input-field')}
           onChange={textFieldChange}
           ref={combinedRef}
+          aria-describedby={ariaDescribedBy}
           {...{
             name,
             disabled,

packages/fxa-settings/src/components/Settings/FlowSetup2faBackupCodeConfirm/en.ftl

@@ -0,0 +1,15 @@
+## The backup code confirm step of the setup 2 factor authentication flow,
+## where the user confirm that they have saved their backup authentication codes
+## by entering one of them.
+
+flow-setup-2fa-backup-code-confirm-heading = Enter backup authentication code
+
+# codes here refers to backup authentication codes
+flow-setup-2fa-backup-code-confirm-confirm-saved = Confirm you saved your codes by entering one. Without these codes, you might not be able to sign in if you don’t have your authenticator app.
+
+flow-setup-2fa-backup-code-confirm-code-input = Enter 10-character code
+
+# Clicking on this button finishes the whole flow upon success.
+flow-setup-2fa-backup-code-confirm-button-finish = Finish
+
+##

packages/fxa-settings/src/components/Settings/FlowSetup2faBackupCodeConfirm/index.stories.tsx

@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React, { useState } from 'react';
+import { Meta } from '@storybook/react';
+import { withLocalization } from 'fxa-react/lib/storybooks';
+import SettingsLayout from '../SettingsLayout';
+import { action } from '@storybook/addon-actions';
+import { FlowSetup2faBackupCodeConfirm } from '.';
+
+export default {
+  title: 'Components/Settings/FlowSetup2faBackupCodeConfirm',
+  component: FlowSetup2faBackupCodeConfirm,
+  decorators: [withLocalization],
+} as Meta;
+
+const navigateBackward = async () => {
+  action('navigateBackward')();
+};
+
+const verifyCode = (code: string) => {
+  action('verifyCode')(code);
+  return Promise.resolve();
+};
+
+export const Default = () => (
+  <SettingsLayout>
+    <FlowSetup2faBackupCodeConfirm
+      currentStep={3}
+      numberOfSteps={3}
+      localizedFlowTitle="Two-step authentication"
+      onBackButtonClick={navigateBackward}
+      showProgressBar
+      errorMessage=""
+      setErrorMessage={() => {}}
+      verifyCode={verifyCode}
+    />
+  </SettingsLayout>
+);
+
+export const WithError = () => {
+  const [errorMessage, setErrorMessage] = useState('');
+  const verifyCodeError = (code: string) => {
+    action('verifyCode')(code);
+    setErrorMessage('Invalid recovery code');
+    return Promise.resolve();
+  };
+  return (
+    <SettingsLayout>
+      <FlowSetup2faBackupCodeConfirm
+        currentStep={3}
+        numberOfSteps={3}
+        localizedFlowTitle="Two-step authentication"
+        onBackButtonClick={navigateBackward}
+        showProgressBar
+        {...{ errorMessage, setErrorMessage }}
+        verifyCode={verifyCodeError}
+      />
+    </SettingsLayout>
+  );
+};

packages/fxa-settings/src/components/Settings/FlowSetup2faBackupCodeConfirm/index.test.tsx

@@ -0,0 +1,98 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { FlowSetup2faBackupCodeConfirm } from '.';
+import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
+import GleanMetrics from '../../../lib/glean';
+import { GleanClickEventType2FA } from '../../../lib/types';
+
+const renderFlowSetup2faBackupCodeConfirm = (error?: string) => {
+  const onBackButtonClick = jest.fn();
+  const verifyCode = jest.fn();
+  const setErrorMessage = jest.fn();
+  return {
+    onBackButtonClick,
+    verifyCode,
+    setErrorMessage,
+    ...renderWithLocalizationProvider(
+      <FlowSetup2faBackupCodeConfirm
+        currentStep={3}
+        numberOfSteps={3}
+        localizedFlowTitle="Two-step authentication"
+        showProgressBar
+        errorMessage={error || ''}
+        {...{ onBackButtonClick, setErrorMessage, verifyCode }}
+      />
+    ),
+  };
+};
+
+describe('FlowSetup2faBackupCodeDownload', () => {
+  it('renders correctly', () => {
+    renderFlowSetup2faBackupCodeConfirm();
+    expect(screen.getByRole('progressbar')).toBeVisible();
+    expect(
+      screen.getByRole('textbox', { name: 'Enter 10-character code' })
+    ).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Finish' })).toBeVisible();
+  });
+
+  it('shows error correctly and clears error on input', async () => {
+    const errorMsg = 'Invalid recovery code';
+    const { setErrorMessage } = renderFlowSetup2faBackupCodeConfirm(errorMsg);
+    expect(screen.getByText(errorMsg)).toBeVisible();
+    await userEvent.type(
+      screen.getByRole('textbox', { name: /Enter 10-character code/ }),
+      '12345'
+    );
+    expect(setErrorMessage).toHaveBeenCalledWith('');
+  });
+
+  it('sets up Glean metrics correctly', () => {
+    const gleanSpy = jest.spyOn(
+      GleanMetrics.accountPref,
+      'twoStepAuthEnterCodeView'
+    );
+    renderFlowSetup2faBackupCodeConfirm();
+    expect(gleanSpy).toBeCalled();
+
+    const finishButton = screen.getByRole('button', { name: 'Finish' });
+
+    expect(finishButton).toHaveAttribute(
+      'data-glean-id',
+      'two_step_auth_enter_code_submit'
+    );
+    expect(finishButton).toHaveAttribute(
+      'data-glean-type',
+      GleanClickEventType2FA.setup
+    );
+  });
+
+  it('calls onBackButtonClick when the back button is clicked', async () => {
+    const { onBackButtonClick } = renderFlowSetup2faBackupCodeConfirm();
+    const cancelButton = screen.getByRole('button', { name: 'Back' });
+    await userEvent.click(cancelButton);
+    expect(onBackButtonClick).toHaveBeenCalled();
+  });
+
+  it('calls onRecoveryCodeSubmit when the input code is of valid format and the finish button is clicked', async () => {
+    const { verifyCode } = renderFlowSetup2faBackupCodeConfirm();
+    const finishButton = screen.getByRole('button', { name: 'Finish' });
+    const recoveryCodeInput = screen.getByRole('textbox', {
+      name: 'Enter 10-character code',
+    });
+    expect(finishButton).toBeDisabled();
+    await userEvent.type(recoveryCodeInput, '12345');
+    expect(finishButton).toBeDisabled();
+    await userEvent.type(recoveryCodeInput, 'abcde');
+    // After entering 10 characters, the button should now be enabled
+    expect(finishButton).toBeEnabled();
+    await userEvent.click(finishButton);
+    expect(verifyCode).toHaveBeenCalledWith('12345abcde');
+  });
+});

packages/fxa-settings/src/components/Settings/FlowSetup2faBackupCodeConfirm/index.tsx

@@ -0,0 +1,98 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React, { Dispatch, SetStateAction, useEffect } from 'react';
+import { FtlMsg } from 'fxa-react/lib/utils';
+import FlowContainer from '../FlowContainer';
+import ProgressBar from '../ProgressBar';
+import { GleanClickEventType2FA } from '../../../lib/types';
+import GleanMetrics from '../../../lib/glean';
+import { BackupCodesImage } from '../../images';
+import FormVerifyTotp from '../../FormVerifyTotp';
+import { useFtlMsgResolver } from '../../../models';
+import Banner from '../../Banner';
+
+type FlowSetup2faBackupCodeConfirmProps = {
+  currentStep?: number;
+  numberOfSteps?: number;
+  hideBackButton?: boolean;
+  localizedFlowTitle: string;
+  onBackButtonClick?: () => void;
+  showProgressBar?: boolean;
+  verifyCode: (code: string) => Promise<void>;
+  errorMessage: string;
+  setErrorMessage: Dispatch<SetStateAction<string>>;
+  reason?: GleanClickEventType2FA;
+};
+
+export const FlowSetup2faBackupCodeConfirm = ({
+  currentStep,
+  numberOfSteps,
+  hideBackButton = false,
+  localizedFlowTitle,
+  onBackButtonClick,
+  showProgressBar = true,
+  verifyCode,
+  setErrorMessage,
+  errorMessage,
+  reason = GleanClickEventType2FA.setup,
+}: FlowSetup2faBackupCodeConfirmProps) => {
+  useEffect(() => {
+    GleanMetrics.accountPref.twoStepAuthEnterCodeView({
+      event: { reason },
+    });
+  }, [reason]);
+
+  const ftlMsgResolver = useFtlMsgResolver();
+
+  return (
+    <FlowContainer
+      title={localizedFlowTitle}
+      {...{ hideBackButton, onBackButtonClick }}
+    >
+      {showProgressBar && currentStep != null && numberOfSteps != null && (
+        <ProgressBar {...{ currentStep, numberOfSteps }} />
+      )}
+      {errorMessage && (
+        <Banner
+          type="error"
+          bannerId="backup-code-confirm-error"
+          content={{ localizedDescription: errorMessage }}
+        />
+      )}
+      <BackupCodesImage />
+      <FtlMsg id="flow-setup-2fa-backup-code-confirm-heading">
+        <h2 className="font-bold text-xl my-2">
+          Enter backup authentication code
+        </h2>
+      </FtlMsg>
+      <FtlMsg id="flow-setup-2fa-backup-code-confirm-confirm-saved">
+        <p>
+          Confirm you saved your codes by entering one. Without these codes, you
+          might not be able to sign in if you don’t have your authenticator app.
+        </p>
+      </FtlMsg>
+      <FormVerifyTotp
+        codeType="alphanumeric"
+        codeLength={10}
+        {...{ verifyCode, errorMessage, setErrorMessage }}
+        localizedSubmitButtonText={ftlMsgResolver.getMsg(
+          'flow-setup-2fa-backup-code-confirm-button-finish',
+          'Finish'
+        )}
+        localizedInputLabel={ftlMsgResolver.getMsg(
+          'flow-setup-2fa-backup-code-confirm-code-input',
+          'Enter 10-character code'
+        )}
+        errorBannerId="backup-code-confirm-error"
+        clearBanners={() => setErrorMessage('')}
+        gleanDataAttrs={{
+          id: 'two_step_auth_enter_code_submit',
+          type: reason,
+        }}
+        className="mt-6"
+      />
+    </FlowContainer>
+  );
+};

packages/fxa-settings/src/components/Settings/FlowSetupRecoveryPhoneConfirmCode/index.tsx

@@ -164,6 +164,7 @@ export const FlowSetupRecoveryPhoneConfirmCode = ({
           id: 'two_step_auth_phone_verify_submit',
           type: reason,
         }}
+        className="my-6"
       />
       <div className="flex flex-wrap gap-2 mt-6 justify-center text-center">
         <FtlMsg id="flow-setup-phone-confirm-code-expired">

packages/fxa-settings/src/pages/ResetPassword/ConfirmBackupCodeResetPassword/index.tsx

@@ -79,6 +79,7 @@ const ConfirmBackupCodeResetPassword = ({
           id: 'password_reset_backup_code_submit',
         }}
         errorBannerId="confirm-backup-code-reset-password-error-banner"
+        className="my-6"
       />
 
       <div className="mt-5 link-blue text-sm flex justify-end">

packages/fxa-settings/src/pages/ResetPassword/ConfirmResetPassword/index.tsx

@@ -89,6 +89,7 @@ const ConfirmResetPassword = ({
           setErrorMessage,
           verifyCode,
         }}
+        className="my-6"
       />
       <LinkRememberPassword {...{ email }} clickHandler={signinClickHandler} />
       <div className="flex justify-between mt-5 text-sm">