refactor(web): migrate legacy forms to TanStack Form (#30631)

web/app/forgot-password/ForgotPasswordForm.tsx

@@ -1,15 +1,16 @@
 'use client'
 import type { InitValidateStatusResponse } from '@/models/common'
-import { zodResolver } from '@hookform/resolvers/zod'
+import { useStore } from '@tanstack/react-form'
 
 import { useRouter } from 'next/navigation'
 
 import * as React from 'react'
 import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 import Button from '@/app/components/base/button'
+import { formContext, useAppForm } from '@/app/components/base/form'
+import { zodSubmitValidator } from '@/app/components/base/form/utils/zod-submit-validator'
 import {
   fetchInitValidateStatus,
   fetchSetupStatus,
@@ -27,44 +28,45 @@ const accountFormSchema = z.object({
     .email('error.emailInValid'),
 })
 
-type AccountFormValues = z.infer<typeof accountFormSchema>
-
 const ForgotPasswordForm = () => {
   const { t } = useTranslation()
   const router = useRouter()
   const [loading, setLoading] = useState(true)
   const [isEmailSent, setIsEmailSent] = useState(false)
-  const { register, trigger, getValues, formState: { errors } } = useForm<AccountFormValues>({
-    resolver: zodResolver(accountFormSchema),
+
+  const form = useAppForm({
     defaultValues: { email: '' },
+    validators: {
+      onSubmit: zodSubmitValidator(accountFormSchema),
+    },
+    onSubmit: async ({ value }) => {
+      try {
+        const res = await sendForgotPasswordEmail({
+          url: '/forgot-password',
+          body: { email: value.email },
+        })
+        if (res.result === 'success')
+          setIsEmailSent(true)
+        else console.error('Email verification failed')
+      }
+      catch (error) {
+        console.error('Request failed:', error)
+      }
+    },
   })
 
-  const handleSendResetPasswordEmail = async (email: string) => {
-    try {
-      const res = await sendForgotPasswordEmail({
-        url: '/forgot-password',
-        body: { email },
-      })
-      if (res.result === 'success')
-        setIsEmailSent(true)
-
-      else console.error('Email verification failed')
-    }
-    catch (error) {
-      console.error('Request failed:', error)
-    }
-  }
+  const isSubmitting = useStore(form.store, state => state.isSubmitting)
+  const emailErrors = useStore(form.store, state => state.fieldMeta.email?.errors)
 
   const handleSendResetPasswordClick = async () => {
+    if (isSubmitting)
+      return
+
     if (isEmailSent) {
       router.push('/signin')
     }
     else {
-      const isValid = await trigger('email')
-      if (isValid) {
-        const email = getValues('email')
-        await handleSendResetPasswordEmail(email)
-      }
+      form.handleSubmit()
     }
   }
 
@@ -94,30 +96,51 @@ const ForgotPasswordForm = () => {
             </div>
             <div className="mt-8 grow sm:mx-auto sm:w-full sm:max-w-md">
               <div className="relative">
-                <form>
-                  {!isEmailSent && (
-                    <div className="mb-5">
-                      <label
-                        htmlFor="email"
-                        className="my-2 flex items-center justify-between text-sm font-medium text-text-primary"
-                      >
-                        {t('email', { ns: 'login' })}
-                      </label>
-                      <div className="mt-1">
-                        <Input
-                          {...register('email')}
-                          placeholder={t('emailPlaceholder', { ns: 'login' }) || ''}
-                        />
-                        {errors.email && <span className="text-sm text-red-400">{t(`${errors.email?.message}` as 'error.emailInValid', { ns: 'login' })}</span>}
+                <formContext.Provider value={form}>
+                  <form
+                    onSubmit={(e) => {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      form.handleSubmit()
+                    }}
+                  >
+                    {!isEmailSent && (
+                      <div className="mb-5">
+                        <label
+                          htmlFor="email"
+                          className="my-2 flex items-center justify-between text-sm font-medium text-text-primary"
+                        >
+                          {t('email', { ns: 'login' })}
+                        </label>
+                        <div className="mt-1">
+                          <form.AppField
+                            name="email"
+                          >
+                            {field => (
+                              <Input
+                                id="email"
+                                value={field.state.value}
+                                onChange={e => field.handleChange(e.target.value)}
+                                onBlur={field.handleBlur}
+                                placeholder={t('emailPlaceholder', { ns: 'login' }) || ''}
+                              />
+                            )}
+                          </form.AppField>
+                          {emailErrors && emailErrors.length > 0 && (
+                            <span className="text-sm text-red-400">
+                              {t(`${emailErrors[0]}` as 'error.emailInValid', { ns: 'login' })}
+                            </span>
+                          )}
+                        </div>
                       </div>
+                    )}
+                    <div>
+                      <Button variant="primary" className="w-full" disabled={isSubmitting} onClick={handleSendResetPasswordClick}>
+                        {isEmailSent ? t('backToSignIn', { ns: 'login' }) : t('sendResetLink', { ns: 'login' })}
+                      </Button>
                     </div>
-                  )}
-                  <div>
-                    <Button variant="primary" className="w-full" onClick={handleSendResetPasswordClick}>
-                      {isEmailSent ? t('backToSignIn', { ns: 'login' }) : t('sendResetLink', { ns: 'login' })}
-                    </Button>
-                  </div>
-                </form>
+                  </form>
+                </formContext.Provider>
               </div>
             </div>
           </>