Merge pull request #20406 from mozilla/fxa-13419

fix(settings): label delete-account button destructively for password less account

Author: vbudhram

packages/functional-tests/pages/settings/deleteAccount.ts

@@ -24,6 +24,10 @@ export class DeleteAccountPage extends SettingsLayout {
     return this.page.getByRole('button', { name: 'Continue' });
   }
 
+  get passwordlessDeleteButton() {
+    return this.page.getByRole('button', { name: 'Delete account' });
+  }
+
   get step2Heading() {
     return this.page.getByRole('heading', { name: 'Step 2 of 2' });
   }

packages/functional-tests/tests/settings/deleteAccount.spec.ts

@@ -95,6 +95,49 @@ test.describe('severity-1 #smoke', () => {
     await expect(deleteAccount.tooltip).toHaveText('Incorrect password');
   });
 
+  test('passwordless account sees "Delete account" button (not "Continue") and can delete without password step', async ({
+    target,
+    pages: { page, signin, signinPasswordlessCode, settings, deleteAccount },
+    testAccountTracker,
+  }) => {
+    // Passwordless accounts skip Step 2 (password entry). The Step 1 button
+    // must therefore read "Delete account" with a destructive style, not
+    // "Continue", since clicking it deletes immediately.
+    const { email } = await testAccountTracker.signUpPasswordless();
+
+    await signin.clearCache();
+    await page.goto(
+      `${target.contentServerUrl}/signin?email=${encodeURIComponent(email)}`
+    );
+    await page.waitForURL(/signin_passwordless_code/);
+
+    const code = await target.emailClient.getPasswordlessSigninCode(email);
+    await signinPasswordlessCode.fillOutCodeForm(code);
+    await expect(settings.settingsHeading).toBeVisible();
+
+    await settings.deleteAccountButton.click();
+
+    await expect(deleteAccount.deleteAccountHeading).toBeVisible();
+    // Passwordless accounts have no Step 1 of 2 subtitle
+    await expect(deleteAccount.step1Heading).toBeHidden();
+    // The primary "Continue" button must not exist for passwordless accounts
+    await expect(deleteAccount.continueButton).toBeHidden();
+
+    await deleteAccount.checkAllBoxes();
+
+    // Assert the button reads "Delete account" and uses the destructive style
+    await expect(deleteAccount.passwordlessDeleteButton).toBeVisible();
+    await expect(deleteAccount.passwordlessDeleteButton).toBeEnabled();
+    await expect(deleteAccount.passwordlessDeleteButton).toHaveClass(
+      /cta-caution/
+    );
+
+    await deleteAccount.passwordlessDeleteButton.click();
+
+    // Account should be deleted immediately without prompting for a password
+    await expect(page.getByText('Account deleted successfully')).toBeVisible();
+  });
+
   test('delete account A then sign in with account B, no apollo cache pollution', async ({
     target,
     pages: { page, deleteAccount, settings, signin },

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

@@ -30,6 +30,7 @@ delete-account-chk-box-4 =
 
 
 delete-account-continue-button = Continue
+delete-account-delete-button-passwordless = Delete account
 
 delete-account-password-input =
  .label = Enter password

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

@@ -22,7 +22,10 @@ import { typeByTestIdFn } from '../../../lib/test-utils';
 import { Account, AppContext } from '../../../models';
 import { MOCK_EMAIL } from '../../../pages/mocks';
 import GleanMetrics from '../../../lib/glean';
-import { discardSessionToken, clearSignedInAccountUid } from '../../../lib/cache';
+import {
+  discardSessionToken,
+  clearSignedInAccountUid,
+} from '../../../lib/cache';
 
 jest.mock('../../../lib/cache', () => ({
   ...jest.requireActual('../../../lib/cache'),
@@ -266,10 +269,42 @@ describe('PageDeleteAccount', () => {
           })
         );
         expect(GleanMetrics.deleteAccount.engage).toHaveBeenCalled();
-        await userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+        await userEvent.click(
+          screen.getByRole('button', { name: 'Delete account' })
+        );
         expect(GleanMetrics.deleteAccount.submit).toHaveBeenCalled();
         expect(GleanMetrics.deleteAccount.passwordView).not.toHaveBeenCalled();
       });
     });
   });
+
+  describe('step 1 action button', () => {
+    it('renders as "Continue" with primary style when account has a password', () => {
+      renderWithRouter(
+        <AppContext.Provider value={mockAppContext({ account, session })}>
+          <PageDeleteAccount />
+        </AppContext.Provider>
+      );
+
+      const button = screen.getByTestId('continue-button');
+      expect(button.textContent).toContain('Continue');
+      expect(button).toHaveClass('cta-primary');
+      expect(button).not.toHaveClass('cta-caution');
+    });
+
+    it('renders as "Delete account" with caution style when account has no password', () => {
+      renderWithRouter(
+        <AppContext.Provider
+          value={mockAppContext({ account: pwdlessAccount, session })}
+        >
+          <PageDeleteAccount />
+        </AppContext.Provider>
+      );
+
+      const button = screen.getByTestId('continue-button');
+      expect(button.textContent).toContain('Delete account');
+      expect(button).toHaveClass('cta-caution');
+      expect(button).not.toHaveClass('cta-primary');
+    });
+  });
 });

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

@@ -19,7 +19,11 @@ import { AuthUiErrors } from '../../../lib/auth-errors/auth-errors';
 import { getLocalizedErrorMessage } from '../../../lib/error-utils';
 import GleanMetrics from '../../../lib/glean';
 import { useFtlMsgResolver } from '../../../models/hooks';
-import { clearSignedInAccountUid, discardSessionToken, setSigningOut } from '../../../lib/cache';
+import {
+  clearSignedInAccountUid,
+  discardSessionToken,
+  setSigningOut,
+} from '../../../lib/cache';
 
 type FormData = {
   password: string;
@@ -253,16 +257,29 @@ export const PageDeleteAccount = (_: RouteComponentProps) => {
                   Cancel
                 </button>
               </Localized>
-              <Localized id="delete-account-continue-button">
-                <button
-                  className="cta-primary mx-2 px-10 py-2"
-                  disabled={!allBoxesChecked}
-                  onClick={() => advanceStep()}
-                  data-testid="continue-button"
-                >
-                  Continue
-                </button>
-              </Localized>
+              {account.hasPassword ? (
+                <Localized id="delete-account-continue-button">
+                  <button
+                    className="cta-primary mx-2 px-10 py-2"
+                    disabled={!allBoxesChecked}
+                    onClick={() => advanceStep()}
+                    data-testid="continue-button"
+                  >
+                    Continue
+                  </button>
+                </Localized>
+              ) : (
+                <Localized id="delete-account-delete-button-passwordless">
+                  <button
+                    className="cta-caution mx-2 px-10 py-2"
+                    disabled={!allBoxesChecked}
+                    onClick={() => advanceStep()}
+                    data-testid="continue-button"
+                  >
+                    Delete account
+                  </button>
+                </Localized>
+              )}
             </div>
           </div>
         )}