Merge pull request #18853 from mozilla/FXA-11511

feat(settings): Split and update design ConfirmTotpResetPassword

Author: vpomerleau

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

@@ -56,6 +56,7 @@ import ConfirmResetPasswordContainer from '../../pages/ResetPassword/ConfirmRese
 import CompleteResetPasswordContainer from '../../pages/ResetPassword/CompleteResetPassword/container';
 import AccountRecoveryConfirmKeyContainer from '../../pages/ResetPassword/AccountRecoveryConfirmKey/container';
 import ConfirmTotpResetPasswordContainer from '../../pages/ResetPassword/ConfirmTotpResetPassword/container';
+import ConfirmBackupCodeResetPasswordContainer from '../../pages/ResetPassword/ConfirmBackupCodeResetPassword/container';
 import ResetPasswordConfirmedContainer from '../../pages/ResetPassword/ResetPasswordConfirmed/container';
 import ResetPasswordWithRecoveryKeyVerifiedContainer from '../../pages/ResetPassword/ResetPasswordWithRecoveryKeyVerified/container';
 import CompleteSigninContainer from '../../pages/Signin/CompleteSignin/container';
@@ -373,6 +374,7 @@ const AuthAndAccountSetupRoutes = ({
       />
       <ConfirmResetPasswordContainer path="/confirm_reset_password/*" />
       <ConfirmTotpResetPasswordContainer path="/confirm_totp_reset_password/*" />
+      <ConfirmBackupCodeResetPasswordContainer path="/confirm_backup_code_reset_password/*" />
       <CompleteResetPasswordContainer
         path="/complete_reset_password/*"
         {...{ integration }}

packages/fxa-settings/src/components/ErrorBoundaries/index.stories.tsx

@@ -4,10 +4,8 @@
 
 import React from 'react';
 import { AppError } from '.';
-import AppLayout from '../AppLayout';
 import {
-  GenericData,
-  ModelValidationErrors,
+
   UrlQueryData,
 } from '../../lib/model-data';
 import { withLocalization } from 'fxa-react/lib/storybooks';

packages/fxa-settings/src/components/PasswordStrengthInline/index.test.tsx

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { screen, within } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import PasswordStrengthInline from '.';
 // import { getFtlBundle, testAllL10n } from 'fxa-react/lib/test-utils';

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

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import { fireEvent, screen, waitFor, within } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { logViewEvent } from '../../../lib/metrics';
 import FlowRecoveryKeyDownload from './';
 import { renderWithRouter } from '../../../models/mocks';

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

@@ -2,7 +2,6 @@
  * 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, fireEvent, waitFor } from '@testing-library/react';
 import { renderWithRouter } from '../../../models/mocks';
 import { createSubject } from './mocks';

packages/fxa-settings/src/pages/ResetPassword/CompleteResetPassword/index.test.tsx

@@ -6,7 +6,7 @@ import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localiz
 import { Subject } from './mocks';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MOCK_EMAIL, MOCK_PASSWORD } from '../../mocks';
+import { MOCK_PASSWORD } from '../../mocks';
 import GleanMetrics from '../../../lib/glean';
 
 const mockSubmitNewPassword = jest.fn((newPassword: string) =>
@@ -73,15 +73,17 @@ describe('CompleteResetPassword page', () => {
       expect(screen.queryByText(serviceRelayText)).not.toBeInTheDocument();
     });
 
-    it('renders expected text when service=relay', () => {
+    it('renders expected text when service=relay', async () => {
       renderWithLocalizationProvider(
         <Subject
           isDesktopServiceRelay={true}
           estimatedSyncDeviceCount={0}
           recoveryKeyExists={false}
         />
       );
-      screen.getByText(serviceRelayText);
+      await waitFor(() =>
+        expect(screen.getByText(serviceRelayText)).toBeVisible()
+      );
     });
 
     it('renders as expected for account without sync', async () => {

packages/fxa-settings/src/pages/ResetPassword/ConfirmBackupCodeResetPassword/container.test.tsx

@@ -0,0 +1,106 @@
+/* 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 { LocationProvider } from '@reach/router';
+import { act } from '@testing-library/react';
+import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
+import { MOCK_EMAIL, MOCK_PASSWORD_CHANGE_TOKEN, MOCK_UID } from '../../mocks';
+import ConfirmBackupCodeResetPasswordContainer from './container';
+
+const mockConsume = jest.fn();
+jest.mock('../../../models', () => ({
+  __esModule: true,
+  useAuthClient: () => ({
+    consumeRecoveryCodeWithPasswordForgotToken: mockConsume,
+  }),
+  useFtlMsgResolver: () => ({
+    getMsg: (_id: string, fallback: string) => fallback,
+  }),
+}));
+
+const mockNavigate = jest.fn();
+jest.mock('../../../lib/hooks/useNavigateWithQuery', () => ({
+  useNavigateWithQuery: () => mockNavigate,
+}));
+
+let mockLocationState = {
+  code: 'ignored',
+  email: MOCK_EMAIL,
+  token: MOCK_PASSWORD_CHANGE_TOKEN,
+  emailToHashWith: MOCK_EMAIL,
+  recoveryKeyExists: false,
+  estimatedSyncDeviceCount: 2,
+  uid: MOCK_UID,
+};
+jest.mock('@reach/router', () => {
+  const actual = jest.requireActual('@reach/router');
+  return {
+    ...actual,
+    useLocation: () => {
+      return {
+        pathname: '/confirm_backup_code_reset_password',
+        state: mockLocationState,
+      };
+    },
+  };
+});
+
+let capturedProps: any;
+jest.mock('.', () => (props: any) => {
+  capturedProps = props;
+  return null;
+});
+
+async function render() {
+  renderWithLocalizationProvider(
+    <LocationProvider>
+      <ConfirmBackupCodeResetPasswordContainer />
+    </LocationProvider>
+  );
+}
+
+describe('ConfirmBackupCodeResetPasswordContainer', () => {
+  beforeEach(() => {
+    capturedProps = undefined;
+    mockConsume.mockReset();
+    mockNavigate.mockReset();
+  });
+
+  it('calls authClient then navigates on success', async () => {
+    mockConsume.mockResolvedValueOnce(undefined);
+
+    render();
+
+    await act(async () => {
+      await capturedProps.verifyBackupCode('BACKUPCODE');
+    });
+
+    expect(mockConsume).toHaveBeenCalledWith(
+      MOCK_PASSWORD_CHANGE_TOKEN,
+      'BACKUPCODE'
+    );
+
+    expect(mockNavigate).toHaveBeenCalledWith('/complete_reset_password', {
+      state: expect.objectContaining({
+        token: MOCK_PASSWORD_CHANGE_TOKEN,
+        email: MOCK_EMAIL,
+        uid: MOCK_UID,
+      }),
+      replace: true,
+    });
+  });
+
+  it('sets localized error message when authClient throws', async () => {
+    mockConsume.mockRejectedValueOnce('Some error');
+
+    render();
+
+    await act(async () => {
+      await capturedProps.verifyBackupCode('INVALDCODE');
+    });
+
+    expect(capturedProps.codeErrorMessage).toBe('Unexpected error');
+  });
+});

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

@@ -0,0 +1,67 @@
+/* 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 { RouteComponentProps, useLocation } from '@reach/router';
+import { useAuthClient, useFtlMsgResolver } from '../../../models';
+import ConfirmBackupCodeResetPassword from '.';
+import { useNavigateWithQuery } from '../../../lib/hooks/useNavigateWithQuery';
+import { CompleteResetPasswordLocationState } from '../CompleteResetPassword/interfaces';
+import { getLocalizedErrorMessage } from '../../../lib/error-utils';
+
+const ConfirmBackupCodeResetPasswordContainer = (_: RouteComponentProps) => {
+  const authClient = useAuthClient();
+  const location = useLocation();
+
+  const {
+    code,
+    email,
+    token,
+    emailToHashWith,
+    recoveryKeyExists,
+    estimatedSyncDeviceCount,
+    uid,
+  } = location.state as CompleteResetPasswordLocationState;
+
+  const ftlMsgResolver = useFtlMsgResolver();
+  const navigateWithQuery = useNavigateWithQuery();
+
+  const [codeErrorMessage, setCodeErrorMessage] = useState<string>('');
+
+  const onSuccess = () => {
+    navigateWithQuery('/complete_reset_password', {
+      state: {
+        code,
+        email,
+        emailToHashWith,
+        estimatedSyncDeviceCount,
+        recoveryKeyExists,
+        token,
+        uid,
+      },
+      replace: true,
+    });
+  };
+
+  const verifyBackupCode = async (backupCode: string) => {
+    setCodeErrorMessage('');
+    try {
+      await authClient.consumeRecoveryCodeWithPasswordForgotToken(
+        token,
+        backupCode
+      );
+      onSuccess();
+    } catch (error) {
+      setCodeErrorMessage(getLocalizedErrorMessage(ftlMsgResolver, error));
+    }
+  };
+
+  return (
+    <ConfirmBackupCodeResetPassword
+      {...{ verifyBackupCode, codeErrorMessage, setCodeErrorMessage }}
+    />
+  );
+};
+
+export default ConfirmBackupCodeResetPasswordContainer;

packages/fxa-settings/src/pages/ResetPassword/ConfirmBackupCodeResetPassword/en.ftl

@@ -0,0 +1,8 @@
+# ConfirmBackupCodeResetPassword page
+
+confirm-backup-code-reset-password-input-label = Enter 10-character code
+confirm-backup-code-reset-password-confirm-button = Confirm
+confirm-backup-code-reset-password-subheader = Enter backup authentication code
+confirm-backup-code-reset-password-instruction = Enter one of the one-time-use codes you saved when you set up two-step authentication.
+# Link out to support article: https://support.mozilla.org/kb/what-if-im-locked-out-two-step-authentication
+confirm-backup-code-reset-password-locked-out-link = Are you locked out?

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

@@ -0,0 +1,21 @@
+/* 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 ConfirmBackupCodeResetPassword from '.';
+import { Meta } from '@storybook/react';
+import { withLocalization } from 'fxa-react/lib/storybooks';
+import { Subject } from './mocks';
+
+export default {
+  title: 'Pages/ResetPassword/ConfirmBackupCodeResetPassword',
+  component: ConfirmBackupCodeResetPassword,
+  decorators: [withLocalization],
+} as Meta;
+
+export const Default = () => <Subject />;
+
+export const WithErrorBanner = () => (
+  <Subject errorMessage="Unexpected error" />
+);