From 7b84d4dacab644f9a93da5649e033272f68f1db7 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 10 Aug 2026 11:13:31 +0800
Subject: [PATCH] fix(web): use primary headings on password reset pages
 (#40193)

---
 .../webapp-reset-password/check-code/page.tsx        |  4 ++--
 web/app/(shareLayout)/webapp-reset-password/page.tsx |  4 ++--
 .../webapp-reset-password/set-password/page.tsx      |  8 ++++----
 web/app/forgot-password/ChangePasswordForm.spec.tsx  |  4 ++--
 web/app/forgot-password/ChangePasswordForm.tsx       | 12 ++++++------
 web/app/forgot-password/ForgotPasswordForm.spec.tsx  |  1 +
 web/app/forgot-password/ForgotPasswordForm.tsx       |  4 ++--
 web/app/reset-password/check-code/page.tsx           |  4 ++--
 web/app/reset-password/page.tsx                      |  4 ++--
 .../set-password/__tests__/page.spec.tsx             |  3 +++
 web/app/reset-password/set-password/page.tsx         |  8 ++++----
 11 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
index b4228de485a..409e2458afd 100644
--- a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
@@ -63,9 +63,9 @@ export default function CheckCode() {
         <RiMailSendFill className="size-6 text-2xl" />
       </div>
       <div className="pt-2 pb-4">
-        <h2 className="title-4xl-semi-bold text-text-primary">
+        <h1 className="title-4xl-semi-bold text-text-primary">
           {t(($) => $['checkCode.checkYourEmail'], { ns: 'login' })}
-        </h2>
+        </h1>
         <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t(($) => $['checkCode.tipsPrefix'], { ns: 'login' })}
diff --git a/web/app/(shareLayout)/webapp-reset-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/page.tsx
index adccea64f80..517d1b8dcc5 100644
--- a/web/app/(shareLayout)/webapp-reset-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/page.tsx
@@ -61,9 +61,9 @@ export default function CheckCode() {
         <RiLockPasswordLine className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
-        <h2 className="title-4xl-semi-bold text-text-primary">
+        <h1 className="title-4xl-semi-bold text-text-primary">
           {t(($) => $.resetPassword, { ns: 'login' })}
-        </h2>
+        </h1>
         <p className="mt-2 body-md-regular text-text-secondary">
           {t(($) => $.resetPasswordDesc, { ns: 'login' })}
         </p>
diff --git a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
index 9791b5e5ad4..de0f7c65ba1 100644
--- a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -81,9 +81,9 @@ const ChangePasswordForm = () => {
       {!showSuccess && (
         <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h1 className="title-4xl-semi-bold text-text-primary">
               {t(($) => $.changePassword, { ns: 'login' })}
-            </h2>
+            </h1>
             <p className="mt-2 body-md-regular text-text-secondary">
               {t(($) => $.changePasswordTip, { ns: 'login' })}
             </p>
@@ -161,9 +161,9 @@ const ChangePasswordForm = () => {
             <div className="mb-3 flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
               <RiCheckboxCircleFill className="size-6 text-text-success" />
             </div>
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h1 className="title-4xl-semi-bold text-text-primary">
               {t(($) => $.passwordChangedTip, { ns: 'login' })}
-            </h2>
+            </h1>
           </div>
           <div className="mx-auto mt-6 w-full">
             <Button
diff --git a/web/app/forgot-password/ChangePasswordForm.spec.tsx b/web/app/forgot-password/ChangePasswordForm.spec.tsx
index f9d8cc5ec31..bad387dd15c 100644
--- a/web/app/forgot-password/ChangePasswordForm.spec.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.spec.tsx
@@ -42,7 +42,7 @@ describe('ChangePasswordForm', () => {
 
     it('renders the password form', () => {
       render(<ChangePasswordForm />)
-      expect(screen.getByText('login.changePassword')).toBeInTheDocument()
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('login.changePassword')
     })
 
     it('submits with T2 (from validity response), NOT T1 (from URL)', async () => {
@@ -81,7 +81,7 @@ describe('ChangePasswordForm', () => {
 
     it('shows invalid token state and no form', () => {
       render(<ChangePasswordForm />)
-      expect(screen.getByText('login.invalid')).toBeInTheDocument()
+      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('login.invalid')
       expect(
         screen.queryByRole('button', { name: /common\.operation\.reset/ }),
       ).not.toBeInTheDocument()
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index 89a515f1765..040b6bd52be 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -75,9 +75,9 @@ const ChangePasswordForm = () => {
             <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">
               🤷‍♂️
             </div>
-            <h2 className="text-[32px] font-bold text-text-primary">
+            <h1 className="text-[32px] font-bold text-text-primary">
               {t(($) => $.invalid, { ns: 'login' })}
-            </h2>
+            </h1>
           </div>
           <div className="mx-auto mt-6 w-full">
             <Button variant="primary" className="w-full text-sm!">
@@ -89,9 +89,9 @@ const ChangePasswordForm = () => {
       {verifyTokenRes && verifyTokenRes.is_valid && !showSuccess && (
         <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
-            <h2 className="text-[32px] font-bold text-text-primary">
+            <h1 className="text-[32px] font-bold text-text-primary">
               {t(($) => $.changePassword, { ns: 'login' })}
-            </h2>
+            </h1>
             <p className="mt-1 text-sm text-text-secondary">
               {t(($) => $.changePasswordTip, { ns: 'login' })}
             </p>
@@ -155,9 +155,9 @@ const ChangePasswordForm = () => {
             <div className="mb-3 flex h-20 w-20 items-center justify-center rounded-[20px] border border-divider-regular bg-components-option-card-option-bg p-5 text-[40px] font-bold shadow-lg">
               <CheckCircleIcon className="h-10 w-10 text-[#039855]" />
             </div>
-            <h2 className="text-[32px] font-bold text-text-primary">
+            <h1 className="text-[32px] font-bold text-text-primary">
               {t(($) => $.passwordChangedTip, { ns: 'login' })}
-            </h2>
+            </h1>
           </div>
           <div className="mx-auto mt-6 w-full">
             <Button variant="primary" className="w-full">
diff --git a/web/app/forgot-password/ForgotPasswordForm.spec.tsx b/web/app/forgot-password/ForgotPasswordForm.spec.tsx
index 79fabe78719..9ca4c445164 100644
--- a/web/app/forgot-password/ForgotPasswordForm.spec.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.spec.tsx
@@ -40,6 +40,7 @@ describe('ForgotPasswordForm', () => {
     render(<ForgotPasswordForm />)
 
     expect(await screen.findByLabelText('login.email')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('login.forgotPassword')
   })
 
   it('should show validation error when email is empty', async () => {
diff --git a/web/app/forgot-password/ForgotPasswordForm.tsx b/web/app/forgot-password/ForgotPasswordForm.tsx
index 5a6041be4b0..60c8b3b4992 100644
--- a/web/app/forgot-password/ForgotPasswordForm.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.tsx
@@ -77,11 +77,11 @@ const ForgotPasswordForm = () => {
   ) : (
     <>
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h2 className="text-[32px] font-bold text-text-primary">
+        <h1 className="text-[32px] font-bold text-text-primary">
           {isEmailSent
             ? t(($) => $.resetLinkSent, { ns: 'login' })
             : t(($) => $.forgotPassword, { ns: 'login' })}
-        </h2>
+        </h1>
         <p className="mt-1 text-sm text-text-secondary">
           {isEmailSent
             ? t(($) => $.checkEmailForResetLink, { ns: 'login' })
diff --git a/web/app/reset-password/check-code/page.tsx b/web/app/reset-password/check-code/page.tsx
index 117316221e8..89ac8de8fef 100644
--- a/web/app/reset-password/check-code/page.tsx
+++ b/web/app/reset-password/check-code/page.tsx
@@ -63,9 +63,9 @@ export default function CheckCode() {
         <RiMailSendFill className="size-6 text-2xl" />
       </div>
       <div className="pt-2 pb-4">
-        <h2 className="title-4xl-semi-bold text-text-primary">
+        <h1 className="title-4xl-semi-bold text-text-primary">
           {t(($) => $['checkCode.checkYourEmail'], { ns: 'login' })}
-        </h2>
+        </h1>
         <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t(($) => $['checkCode.tipsPrefix'], { ns: 'login' })}
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx
index e7b551afb6d..0f906812168 100644
--- a/web/app/reset-password/page.tsx
+++ b/web/app/reset-password/page.tsx
@@ -59,9 +59,9 @@ export default function CheckCode() {
         <RiLockPasswordLine className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
-        <h2 className="title-4xl-semi-bold text-text-primary">
+        <h1 className="title-4xl-semi-bold text-text-primary">
           {t(($) => $.resetPassword, { ns: 'login' })}
-        </h2>
+        </h1>
         <p className="mt-2 body-md-regular text-text-secondary">
           {t(($) => $.resetPasswordDesc, { ns: 'login' })}
         </p>
diff --git a/web/app/reset-password/set-password/__tests__/page.spec.tsx b/web/app/reset-password/set-password/__tests__/page.spec.tsx
index 11225d344e2..61c3d53192c 100644
--- a/web/app/reset-password/set-password/__tests__/page.spec.tsx
+++ b/web/app/reset-password/set-password/__tests__/page.spec.tsx
@@ -41,6 +41,8 @@ const setSearchParams = (params: Record<string, string>) => {
 const completePasswordChange = async () => {
   render(<ChangePasswordForm />)
 
+  expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('login.changePassword')
+
   fireEvent.change(screen.getByLabelText('common.account.newPassword'), {
     target: { value: 'ValidPass123!' },
   })
@@ -52,6 +54,7 @@ const completePasswordChange = async () => {
   await waitFor(() => {
     expect(screen.getByRole('button', { name: /login\.passwordChanged/ })).toBeInTheDocument()
   })
+  expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('login.passwordChangedTip')
 }
 
 describe('Reset Password Set Password Page', () => {
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index baaca353f6f..5c6505a4113 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -94,9 +94,9 @@ const ChangePasswordForm = () => {
       {!showSuccess && (
         <div className="flex flex-col md:w-100">
           <div className="mx-auto w-full">
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h1 className="title-4xl-semi-bold text-text-primary">
               {t(($) => $.changePassword, { ns: 'login' })}
-            </h2>
+            </h1>
             <p className="mt-2 body-md-regular text-text-secondary">
               {t(($) => $.changePasswordTip, { ns: 'login' })}
             </p>
@@ -174,9 +174,9 @@ const ChangePasswordForm = () => {
             <div className="mb-3 flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle font-bold shadow-lg">
               <RiCheckboxCircleFill className="size-6 text-text-success" />
             </div>
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h1 className="title-4xl-semi-bold text-text-primary">
               {t(($) => $.passwordChangedTip, { ns: 'login' })}
-            </h2>
+            </h1>
           </div>
           <div className="mx-auto mt-6 w-full">
             <Button