feat(settings): Update copy and styling of initial reset password page

Because:

* Page was redesigned, needs new strings and left-alignment

This commit:

* Update copy, l10n, styling and tests for the initial reset password page

Closes #FXA-10475

packages/functional-tests/pages/resetPassword.ts

@@ -9,14 +9,9 @@ export class ResetPasswordPage extends BaseLayout {
   readonly path = '';
 
   get resetPasswordHeading() {
-    return (
-      this.page
-        // TODO in FXA-9728, remove the second option in regex
-        // (support for reset password with link)
-        .getByRole('heading', {
-          name: /^(?:Reset your password|Reset password)/,
-        })
-    );
+    return this.page.getByRole('heading', {
+      name: /^Reset your password/,
+    });
   }
 
   get emailTextbox() {
@@ -24,36 +19,21 @@ export class ResetPasswordPage extends BaseLayout {
   }
 
   get beginResetButton() {
-    return (
-      this.page
-        // TODO in FXA-9728, remove the second option in regex
-        // (support for reset password with link)
-        .getByRole('button', {
-          name: /^(?:Send me reset instructions|Begin reset)/,
-        })
-    );
+    return this.page.getByRole('button', {
+      name: /Continue/,
+    });
   }
 
   get confirmResetPasswordHeading() {
-    return (
-      this.page
-        // TODO in FXA-9728, remove the second option in regex
-        // (support for reset password with link)
-        .getByRole('heading', {
-          name: /^(?:Check your email|Reset email sent)/,
-        })
-    );
+    return this.page.getByRole('heading', {
+      name: /^Check your email/,
+    });
   }
 
   get resendButton() {
-    return (
-      this.page
-        // TODO in FXA-9728, remove the second option in regex
-        // (support for reset password with link)
-        .getByRole('button', {
-          name: /^(?:Resend code|Not in inbox or spam folder)/,
-        })
-    );
+    return this.page.getByRole('button', {
+      name: /^Resend code/,
+    });
   }
 
   get statusBar() {

packages/functional-tests/tests/key-stretching-v2/recoveryKey.spec.ts

@@ -8,9 +8,6 @@ import { BaseTarget } from '../../lib/targets/base';
 const AGE_21 = '21';
 const HINT = 'secret key location';
 
-// This test file includes the new version of the reset password flow (reset with code)
-// TODO in FXA-9728: remove this comment when code flow is fully rolled out in production
-
 /**
  * These tests represent various permutations between interacting with V1 and V2
  * key stretched passwords. We need to ensure that operations are interchangeable!

packages/functional-tests/tests/key-stretching-v2/resetPassword.spec.ts

@@ -7,9 +7,6 @@ import { BaseTarget } from '../../lib/targets/base';
 
 const AGE_21 = '21';
 
-// This test file includes the new version of the reset password flow (reset with code)
-// TODO in FXA-9728: remove this comment when code flow is fully rolled out in production
-
 /**
  * These tests represent various permutations between interacting with V1 and V2
  * key stretched passwords. We need to ensure that operations are interchangeable!

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

@@ -2,9 +2,10 @@
 
 password-reset-flow-heading = Reset your password
 
-password-reset-body = Enter your email and we’ll send you a confirmation code to confirm it’s really you.
+password-reset-body-2 = We’ll ask for a couple of things only you know to keep your account
+          safe.
 
 password-reset-email-input =
   .label = Enter your email
 
-password-reset-submit-button = Send me reset instructions
+password-reset-submit-button-2 = Continue

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

@@ -34,9 +34,7 @@ describe('ResetPassword', () => {
       expect(
         screen.getByRole('textbox', { name: 'Enter your email' })
       ).toBeVisible();
-      expect(
-        screen.getByRole('button', { name: 'Send me reset instructions' })
-      ).toBeVisible();
+      expect(screen.getByRole('button', { name: 'Continue' })).toBeVisible();
       expect(screen.getByText('Remember your password?')).toBeVisible();
       expect(screen.getByRole('link', { name: 'Sign in' })).toBeVisible();
     });

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

@@ -11,7 +11,6 @@ import { FtlMsg } from 'fxa-react/lib/utils';
 
 import AppLayout from '../../../components/AppLayout';
 import Banner, { BannerType } from '../../../components/Banner';
-import CardHeader from '../../../components/CardHeader';
 import { InputText } from '../../../components/InputText';
 import LinkRememberPassword from '../../../components/LinkRememberPassword';
 import { isEmailValid } from 'fxa-shared/email/helpers';
@@ -83,10 +82,9 @@ const ResetPassword = ({
 
   return (
     <AppLayout>
-      <CardHeader
-        headingText="Reset your password"
-        headingTextFtlId="password-reset-start-heading"
-      />
+      <FtlMsg id="password-reset-start-heading">
+        <h1 className="card-header text-start">Reset your password</h1>
+      </FtlMsg>
 
       {errorMessage && (
         <Banner type={BannerType.error}>
@@ -94,10 +92,10 @@ const ResetPassword = ({
         </Banner>
       )}
 
-      <FtlMsg id="password-reset-body">
-        <p className="my-6">
-          Enter your email and we’ll send you a confirmation code to confirm
-          it’s really you.
+      <FtlMsg id="password-reset-body-2">
+        <p className="text-start mt-2 mb-6">
+          We’ll ask for a couple of things only you know to keep your account
+          safe.
         </p>
       </FtlMsg>
 
@@ -119,13 +117,13 @@ const ResetPassword = ({
           />
         </FtlMsg>
 
-        <FtlMsg id="password-reset-submit-button">
+        <FtlMsg id="password-reset-submit-button-2">
           <button
             type="submit"
             className="cta-primary cta-xl"
             disabled={isSubmitting}
           >
-            Send me reset instructions
+            Continue
           </button>
         </FtlMsg>
       </form>