refactor(web): migrate signup password fields (#40991)

oxlint-suppressions.json

@@ -5194,11 +5194,6 @@
       "count": 1
     }
   },
-  "web/app/signup/set-password/page.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/context/hooks/use-trigger-events-limit-modal.ts": {
     "eslint-react/set-state-in-effect": {
       "count": 3

web/app/signup/set-password/__tests__/page.spec.tsx

@@ -2,6 +2,7 @@ import type { ReactElement } from 'react'
 import type { MockedFunction } from 'vite-plus/test'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import Cookies from 'js-cookie'
 import { beforeEach, describe, expect, it, vi } from 'vite-plus/test'
 import { useLocale } from '@/context/i18n'
@@ -100,15 +101,17 @@ describe('Signup Set Password Page', () => {
 
   describe('Registration payload', () => {
     it('should submit locale and browser timezone when setting password', async () => {
+      const user = userEvent.setup()
       renderWithQueryClient(<ChangePasswordForm />)
 
-      fireEvent.change(screen.getByLabelText('common.account.newPassword'), {
-        target: { value: 'ValidPass123!' },
-      })
-      fireEvent.change(screen.getByLabelText('common.account.confirmPassword'), {
-        target: { value: 'ValidPass123!' },
-      })
-      fireEvent.click(screen.getByRole('button', { name: 'login.changePasswordBtn' }))
+      const passwordInput = screen.getByLabelText('common.account.newPassword')
+      const confirmPasswordInput = screen.getByLabelText('common.account.confirmPassword')
+
+      expect(passwordInput).toHaveAttribute('autocomplete', 'new-password')
+      expect(confirmPasswordInput).toHaveAttribute('autocomplete', 'new-password')
+
+      await user.type(passwordInput, 'ValidPass123!')
+      await user.type(confirmPasswordInput, 'ValidPass123!{Enter}')
 
       await waitFor(() => {
         expect(mockRegister).toHaveBeenCalledWith({

web/app/signup/set-password/page.tsx

@@ -2,13 +2,15 @@
 import type { MailRegisterResponse } from '@/service/use-common'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Field, FieldDescription, FieldLabel } from '@langgenius/dify-ui/field'
+import { Form } from '@langgenius/dify-ui/form'
+import { Input } from '@langgenius/dify-ui/input'
 import { toast } from '@langgenius/dify-ui/toast'
 import { useQueryClient } from '@tanstack/react-query'
 import Cookies from 'js-cookie'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { rememberRegistrationSuccess } from '@/app/components/base/amplitude/registration-tracking'
-import Input from '@/app/components/base/input'
 import { resolvePostLoginRedirect } from '@/app/signin/utils/post-login-redirect'
 import { validPassword } from '@/config'
 import { useLocale } from '@/context/i18n'
@@ -125,54 +127,45 @@ const ChangePasswordForm = () => {
         </div>
 
         <div className="mx-auto mt-6 w-full">
-          <div>
-            {/* Password */}
-            <div className="mb-5">
-              <label htmlFor="password" className="my-2 system-md-semibold text-text-secondary">
+          <Form onFormSubmit={() => void handleSubmit()}>
+            <Field name="password" className="mb-5">
+              <FieldLabel className="py-0 text-[14px] leading-5 font-semibold text-text-secondary">
                 {t(($) => $['account.newPassword'], { ns: 'common' })}
-              </label>
-              <div className="relative mt-1">
-                <Input
-                  id="password"
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder={t(($) => $.passwordPlaceholder, { ns: 'login' }) || ''}
-                />
-              </div>
-              <div className="mt-1 body-xs-regular text-text-secondary">
+              </FieldLabel>
+              <Input
+                type="password"
+                autoComplete="new-password"
+                spellCheck={false}
+                value={password}
+                onValueChange={setPassword}
+                placeholder={t(($) => $.passwordPlaceholder, { ns: 'login' }) || ''}
+              />
+              <FieldDescription className="py-0 text-text-secondary">
                 {t(($) => $['error.passwordInvalid'], { ns: 'login' })}
-              </div>
-            </div>
-            {/* Confirm Password */}
-            <div className="mb-5">
-              <label
-                htmlFor="confirmPassword"
-                className="my-2 system-md-semibold text-text-secondary"
-              >
+              </FieldDescription>
+            </Field>
+            <Field name="confirmPassword" className="mb-5">
+              <FieldLabel className="py-0 text-[14px] leading-5 font-semibold text-text-secondary">
                 {t(($) => $['account.confirmPassword'], { ns: 'common' })}
-              </label>
-              <div className="relative mt-1">
-                <Input
-                  id="confirmPassword"
-                  type="password"
-                  value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
-                  placeholder={t(($) => $.confirmPasswordPlaceholder, { ns: 'login' }) || ''}
-                />
-              </div>
-            </div>
-            <div>
-              <Button
-                variant="primary"
-                className="w-full"
-                onClick={handleSubmit}
-                disabled={isPending || !password || !confirmPassword}
-              >
-                {t(($) => $.changePasswordBtn, { ns: 'login' })}
-              </Button>
-            </div>
-          </div>
+              </FieldLabel>
+              <Input
+                type="password"
+                autoComplete="new-password"
+                spellCheck={false}
+                value={confirmPassword}
+                onValueChange={setConfirmPassword}
+                placeholder={t(($) => $.confirmPasswordPlaceholder, { ns: 'login' }) || ''}
+              />
+            </Field>
+            <Button
+              type="submit"
+              variant="primary"
+              className="w-full"
+              disabled={isPending || !password || !confirmPassword}
+            >
+              {t(($) => $.changePasswordBtn, { ns: 'login' })}
+            </Button>
+          </Form>
         </div>
       </div>
     </div>