AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-06-30 10:45:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add debounced enter key submission to install form (#15445) (#15542)

Browse Source
This commit is contained in:
Lam 2025-03-12 11:25:54 +08:00 committed by GitHub
parent 037f200527
commit 0bc4da38fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/app/install/installForm.tsx
View File

@ -1,6 +1,7 @@
'use client' 'use client'
import React, { useEffect } from 'react' import React, { useCallback, useEffect } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useDebounceFn } from 'ahooks'
import Link from 'next/link' import Link from 'next/link'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
@ -39,7 +40,7 @@ const InstallForm = () => {
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors, isSubmitting },
} = useForm<AccountFormValues>({ } = useForm<AccountFormValues>({
resolver: zodResolver(accountFormSchema), resolver: zodResolver(accountFormSchema),
defaultValues: { defaultValues: {
@ -59,9 +60,22 @@ const InstallForm = () => {
} }
const handleSetting = async () => { const handleSetting = async () => {
if (isSubmitting) return
handleSubmit(onSubmit)() handleSubmit(onSubmit)()
} }
const { run: debouncedHandleKeyDown } = useDebounceFn(
(e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
e.preventDefault()
handleSetting()
}
},
{ wait: 200 },
)
const handleKeyDown = useCallback(debouncedHandleKeyDown, [debouncedHandleKeyDown])
useEffect(() => { useEffect(() => {
fetchSetupStatus().then((res: SetupStatusResponse) => { fetchSetupStatus().then((res: SetupStatusResponse) => {
if (res.step === 'finished') { if (res.step === 'finished') {
@ -90,7 +104,7 @@ const InstallForm = () => {
</div> </div>
<div className="grow mt-8 sm:mx-auto sm:w-full sm:max-w-md"> <div className="grow mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white "> <div className="bg-white ">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)} onKeyDown={handleKeyDown}>
<div className='mb-5'> <div className='mb-5'>
<label htmlFor="email" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900"> <label htmlFor="email" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
{t('login.email')} {t('login.email')}
@ -99,7 +113,7 @@ const InstallForm = () => {
<input <input
{...register('email')} {...register('email')}
placeholder={t('login.emailPlaceholder') || ''} 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'} 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:text-gray-400 caret-primary-600 sm:text-sm'}
/> />
{errors.email && <span className='text-red-400 text-sm'>{t(`${errors.email?.message}`)}</span>} {errors.email && <span className='text-red-400 text-sm'>{t(`${errors.email?.message}`)}</span>}
</div> </div>
@ -114,7 +128,7 @@ const InstallForm = () => {
<input <input
{...register('name')} {...register('name')}
placeholder={t('login.namePlaceholder') || ''} placeholder={t('login.namePlaceholder') || ''}
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 pr-10'} 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:text-gray-400 caret-primary-600 sm:text-sm pr-10'}
/> />
</div> </div>
{errors.name && <span className='text-red-400 text-sm'>{t(`${errors.name.message}`)}</span>} {errors.name && <span className='text-red-400 text-sm'>{t(`${errors.name.message}`)}</span>}
@ -129,7 +143,7 @@ const InstallForm = () => {
{...register('password')} {...register('password')}
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
placeholder={t('login.passwordPlaceholder') || ''} placeholder={t('login.passwordPlaceholder') || ''}
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 pr-10'} 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:text-gray-400 caret-primary-600 sm:text-sm pr-10'}
/> />
<div className="absolute inset-y-0 right-0 flex items-center pr-3"> <div className="absolute inset-y-0 right-0 flex items-center pr-3">