fix(web): use primary headings on password reset pages (#40193)

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' })}

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>

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

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()

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">

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 () => {

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' })

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' })}

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>

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', () => {

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