Merge pull request #19943 from mozilla/FXA-12790

feat(settings): enable 2FA setup for passwordless accounts

Author: MagentaManifold

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

@@ -43,13 +43,6 @@ export const TFADisabled = () =>
     backupCodes: { count: 0 },
   });
 
-export const DisabledNoPassword = () =>
-  createSubject({
-    hasPassword: false,
-    totp: { enabled: false },
-    backupCodes: { count: 0 },
-  });
-
 export const TwoFAEnabledWithBackupCodesNoBackupPhone = () =>
   createSubject({
     recoveryPhone: { exists: false, phoneNumber: null, available: true },

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

@@ -82,29 +82,6 @@ describe('UnitRowTwoStepAuth', () => {
     ).toContain('Add');
   });
 
-  it('renders disabled state when account has no password', async () => {
-    renderWithRouter(
-      createSubject({
-        hasPassword: false,
-        totp: { exists: false, verified: false },
-        backupCodes: { hasBackupCodes: false, count: 0 },
-      })
-    );
-
-    const mainButton = await screen.findByText('Add');
-    expect(mainButton).toBeDisabled();
-    expect(mainButton).toHaveAttribute(
-      'title',
-      'Set a password to sync and use certain account security features.'
-    );
-    expect(
-      screen.getByTestId('two-step-unit-row-header-value').textContent
-    ).toContain('Disabled');
-    expect(
-      screen.queryByTestId('backup-authentication-codes-sub-row')
-    ).not.toBeInTheDocument();
-  });
-
   it('renders view as not enabled after disabling TOTP', async () => {
     const user = userEvent.setup();
     const disableTwoStepAuthMock = jest.fn().mockResolvedValue(true);

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

@@ -160,11 +160,6 @@ export const UnitRowTwoStepAuth = () => {
         headerId="two-step-authentication"
         prefixDataTestId="two-step"
         {...conditionalUnitRowProps}
-        disabled={!account.hasPassword}
-        disabledReason={ftlMsgResolver.getMsg(
-          'security-set-password',
-          'Set a password to sync and use certain account security features.'
-        )}
         subRows={getSubRows()}
       >
         {exists && verified ? (

packages/fxa-settings/src/components/Settings/UnitRowTwoStepAuth/mocks.tsx

@@ -13,7 +13,6 @@ export const createSubject = (
   settingsOverrides = {}
 ) => {
   const account = {
-    hasPassword: true,
     backupCodes: { hasBackupCodes: true, count: 3 },
     totp: { exists: true, verified: true },
     recoveryPhone: {

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

@@ -391,12 +391,12 @@ describe('Settings App', () => {
       {
         pageName: 'Page2faChange',
         route: '/two_step_authentication/change',
-        hasPassword: true,
+        hasPassword: false,
       },
       {
         pageName: 'PageSecondaryEmailAdd',
         route: '/emails',
-        hasPassword: true,
+        hasPassword: false,
       },
       {
         pageName: 'PageSecondaryEmailVerify',
@@ -406,7 +406,7 @@ describe('Settings App', () => {
       {
         pageName: 'Page2faReplaceBackupCodes',
         route: '/two_step_authentication/replace_codes',
-        hasPassword: true,
+        hasPassword: false,
       },
       {
         pageName: 'PageRecoveryPhoneSetup',
@@ -426,12 +426,12 @@ describe('Settings App', () => {
       {
         pageName: 'PageRecoveryPhoneRemove',
         route: '/recovery_phone/remove',
-        hasPassword: true,
+        hasPassword: false,
       },
       {
         pageName: 'Page2faSetup',
         route: '/two_step_authentication',
-        hasPassword: true,
+        hasPassword: false,
       },
     ];
 
@@ -491,18 +491,6 @@ describe('Settings App', () => {
       expect(history.location.pathname).toBe('/settings');
     });
 
-    it('redirects two-step authentication page', async () => {
-      await history.navigate(SETTINGS_PATH + '/two_step_authentication');
-      expect(history.location.pathname).toBe('/settings');
-    });
-
-    it('redirects Page2faReplaceRecoveryCodes', async () => {
-      await history.navigate(
-        SETTINGS_PATH + '/two_step_authentication/replace_codes'
-      );
-      expect(history.location.pathname).toBe('/settings');
-    });
-
     it('redirects ChangePassword', async () => {
       await history.navigate(SETTINGS_PATH + '/change_password');
       expect(history.location.pathname).toBe('/settings/create_password');

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

@@ -196,19 +196,15 @@ export const Settings = ({
           <PageSettings path="/" {...{ integration }} />
           <PageDisplayName path="/display_name" />
           <PageAvatar path="/avatar" />
-          {account.hasPassword ? (
-            <MfaGuardPageRecoveryKeyCreate path="/account_recovery" />
-          ) : (
-            <Redirect from="/account_recovery" to="/settings" noThrow />
-          )}
           {/* MfaPageCreatePassword internally redirects to /change_password if password exists */}
           <MfaPageCreatePassword path="/create_password" />
+          <MfaGuardPage2faSetup path="/two_step_authentication" />
+          <MfaGuardPage2faChange path="/two_step_authentication/change" />
+          <MfaGuardPage2faReplaceBackupCodes path="/two_step_authentication/replace_codes" />
           {account.hasPassword ? (
             <>
+              <MfaGuardPageRecoveryKeyCreate path="/account_recovery" />
               <MfaGuardedPageChangePassword path="/change_password" />
-              <MfaGuardPage2faSetup path="/two_step_authentication" />
-              <MfaGuardPage2faChange path="/two_step_authentication/change" />
-              <MfaGuardPage2faReplaceBackupCodes path="/two_step_authentication/replace_codes" />
             </>
           ) : (
             <>
@@ -218,16 +214,6 @@ export const Settings = ({
                 noThrow
               />
               <Redirect from="/account_recovery" to="/settings" noThrow />
-              <Redirect
-                from="/two_step_authentication"
-                to="/settings"
-                noThrow
-              />
-              <Redirect
-                from="/two_step_authentication/replace_codes"
-                to="/settings"
-                noThrow
-              />
             </>
           )}
           <MfaGuardPageSecondaryEmailAdd path="/emails" />