dify/web/app/forgot-password/ForgotPasswordForm.tsx

'use client'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'

import { useRouter } from 'next/navigation'

import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import Loading from '../components/base/loading'
import Button from '@/app/components/base/button'

import {
  fetchInitValidateStatus,
  fetchSetupStatus,
  sendForgotPasswordEmail,
} from '@/service/common'
import type { InitValidateStatusResponse, SetupStatusResponse } from '@/models/common'

const accountFormSchema = z.object({
  email: z
    .string()
    .min(1, { message: 'login.error.emailInValid' })
    .email('login.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),
    defaultValues: { email: '' },
  })

  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 handleSendResetPasswordClick = async () => {
    if (isEmailSent) {
      router.push('/signin')
    }
    else {
      const isValid = await trigger('email')
      if (isValid) {
        const email = getValues('email')
        await handleSendResetPasswordEmail(email)
      }
    }
  }

  useEffect(() => {
    fetchSetupStatus().then((res: SetupStatusResponse) => {
      fetchInitValidateStatus().then((res: InitValidateStatusResponse) => {
        if (res.status === 'not_started')
          window.location.href = '/init'
      })

      setLoading(false)
    })
  }, [])

  return (
    loading
      ? <Loading/>
      : <>
        <div className="sm:mx-auto sm:w-full sm:max-w-md">
          <h2 className="text-[32px] font-bold text-gray-900">
            {isEmailSent ? t('login.resetLinkSent') : t('login.forgotPassword')}
          </h2>
          <p className='mt-1 text-sm text-gray-600'>
            {isEmailSent ? t('login.checkEmailForResetLink') : t('login.forgotPasswordDesc')}
          </p>
        </div>
        <div className="grow mt-8 sm:mx-auto sm:w-full sm:max-w-md">
          <div className="bg-white ">
            <form>
              {!isEmailSent && (
                <div className='mb-5'>
                  <label htmlFor="email"
                    className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
                    {t('login.email')}
                  </label>
                  <div className="mt-1">
                    <input
                      {...register('email')}
                      placeholder={t('login.emailPlaceholder') || ''}
                      className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm'}
                    />
                    {errors.email && <span className='text-red-400 text-sm'>{t(`${errors.email?.message}`)}</span>}
                  </div>
                </div>
              )}
              <div>
                <Button variant='primary' className='w-full' onClick={handleSendResetPasswordClick}>
                  {isEmailSent ? t('login.backToSignIn') : t('login.sendResetLink')}
                </Button>
              </div>
            </form>
          </div>
        </div>
      </>
  )
}

export default ForgotPasswordForm