Austin/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2024-11-16 19:59:50 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

chore: use base component Input instead native html input

Browse Source
This commit is contained in:
NFish 2024-09-11 11:10:02 +08:00
parent afc489debc
commit 5641348428
11 changed files with 51 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/app/forgot-password/ChangePasswordForm.tsx
View File

@ -5,6 +5,7 @@ import useSWR from 'swr'
import { useSearchParams } from 'next/navigation' import { useSearchParams } from 'next/navigation'
import cn from 'classnames' import cn from 'classnames'
import { CheckCircleIcon } from '@heroicons/react/24/solid' import { CheckCircleIcon } from '@heroicons/react/24/solid'
import Input from '../components/base/input'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import { changePasswordWithToken, verifyForgotPasswordToken } from '@/service/common' import { changePasswordWithToken, verifyForgotPasswordToken } from '@/service/common'
import Toast from '@/app/components/base/toast' import Toast from '@/app/components/base/toast'
@ -113,33 +114,29 @@ const ChangePasswordForm = () => {
<label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900"> <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
{t('common.account.newPassword')} {t('common.account.newPassword')}
</label> </label>
<div className="mt-1 relative rounded-md shadow-sm"> <Input
<input id="password"
id="password" type='password'
type='password' value={password}
value={password} onChange={e => setPassword(e.target.value)}
onChange={e => setPassword(e.target.value)} placeholder={t('login.passwordPlaceholder') || ''}
placeholder={t('login.passwordPlaceholder') || ''} className='mt-1'
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'} />
/> <div className='mt-1 text-xs text-text-secondary'>{t('login.error.passwordInvalid')}</div>
</div>
<div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>
</div> </div>
{/* Confirm Password */} {/* Confirm Password */}
<div className='mb-5'> <div className='mb-5'>
<label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900"> <label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
{t('common.account.confirmPassword')} {t('common.account.confirmPassword')}
</label> </label>
<div className="mt-1 relative rounded-md shadow-sm"> <Input
<input id="confirmPassword"
id="confirmPassword" type='password'
type='password' value={confirmPassword}
value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)}
onChange={e => setConfirmPassword(e.target.value)} placeholder={t('login.confirmPasswordPlaceholder') || ''}
placeholder={t('login.confirmPasswordPlaceholder') || ''} className='mt-1'
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'} />
/>
</div>
</div> </div>
<div> <div>
<Button <Button
@ -165,7 +162,7 @@ const ChangePasswordForm = () => {
</h2> </h2>
</div> </div>
<div className="w-full mx-auto mt-6"> <div className="w-full mx-auto mt-6">
<Button variant='primary' className='w-full !text-sm'> <Button variant='primary' className='w-full'>
<a href="/signin">{t('login.passwordChanged')}</a> <a href="/signin">{t('login.passwordChanged')}</a>
</Button> </Button>
</div> </div>

6
web/app/forgot-password/ForgotPasswordForm.tsx
View File

@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form'
import { z } from 'zod' import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod' import { zodResolver } from '@hookform/resolvers/zod'
import Loading from '../components/base/loading' import Loading from '../components/base/loading'
import Input from '../components/base/input'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import { import {
@ -78,7 +79,7 @@ const ForgotPasswordForm = () => {
return ( return (
loading loading
? <Loading/> ? <Loading />
: <> : <>
<div className="sm:mx-auto sm:w-full sm:max-w-md"> <div className="sm:mx-auto sm:w-full sm:max-w-md">
<h2 className="text-[32px] font-bold text-gray-900"> <h2 className="text-[32px] font-bold text-gray-900">
@ -98,10 +99,9 @@ const ForgotPasswordForm = () => {
{t('login.email')} {t('login.email')}
</label> </label>
<div className="mt-1"> <div className="mt-1">
<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'}
/> />
{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>

2
web/app/reset-password/check-code/page.tsx
View File

@ -72,7 +72,7 @@ export default function CheckCode() {
<form action=""> <form action="">
<label htmlFor="code" className='text-text-secondary text-sm font-semibold mb-1'>{t('login.checkCode.verificationCode')}</label> <label htmlFor="code" className='text-text-secondary text-sm font-semibold mb-1'>{t('login.checkCode.verificationCode')}</label>
<Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='px-3 mt-1 leading-5 h-9 appearance-none' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} /> <Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
<Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button> <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
<Countdown onResend={resendCode} /> <Countdown onResend={resendCode} />
</form> </form>

2
web/app/reset-password/page.tsx
View File

@ -64,7 +64,7 @@ export default function CheckCode() {
<div className='mb-2'> <div className='mb-2'>
<label htmlFor="email" className='my-2 block text-sm font-medium text-text-secondary'>{t('login.email')}</label> <label htmlFor="email" className='my-2 block text-sm font-medium text-text-secondary'>{t('login.email')}</label>
<div className='mt-1'> <div className='mt-1'>
<Input id='email' type="email" disabled={loading} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} className="px-3 h-9" /> <Input id='email' type="email" disabled={loading} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
</div> </div>
<div className='mt-3'> <div className='mt-3'>
<Button loading={loading} disabled={loading} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.continueWithCode')}</Button> <Button loading={loading} disabled={loading} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.continueWithCode')}</Button>

41
web/app/reset-password/set-password/page.tsx
View File

@ -7,6 +7,7 @@ import { RiCheckboxCircleFill } from '@remixicon/react'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import { changePasswordWithToken } from '@/service/common' import { changePasswordWithToken } from '@/service/common'
import Toast from '@/app/components/base/toast' import Toast from '@/app/components/base/toast'
import Input from '@/app/components/base/input'
const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/ const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
@ -93,38 +94,34 @@ const ChangePasswordForm = () => {
<label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900"> <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
{t('common.account.newPassword')} {t('common.account.newPassword')}
</label> </label>
<div className="mt-1 relative rounded-md shadow-sm"> <Input
<input id="password"
id="password" type='password'
type='password' value={password}
value={password} onChange={e => setPassword(e.target.value)}
onChange={e => setPassword(e.target.value)} placeholder={t('login.passwordPlaceholder') || ''}
placeholder={t('login.passwordPlaceholder') || ''} className='mt-1'
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'} />
/> <div className='mt-1 text-xs text-text-secondary'>{t('login.error.passwordInvalid')}</div>
</div>
<div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>
</div> </div>
{/* Confirm Password */} {/* Confirm Password */}
<div className='mb-5'> <div className='mb-5'>
<label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900"> <label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
{t('common.account.confirmPassword')} {t('common.account.confirmPassword')}
</label> </label>
<div className="mt-1 relative rounded-md shadow-sm"> <Input
<input id="confirmPassword"
id="confirmPassword" type='password'
type='password' value={confirmPassword}
value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)}
onChange={e => setConfirmPassword(e.target.value)} placeholder={t('login.confirmPasswordPlaceholder') || ''}
placeholder={t('login.confirmPasswordPlaceholder') || ''} className='mt-1'
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'} />
/>
</div>
</div> </div>
<div> <div>
<Button <Button
variant='primary' variant='primary'
className='w-full !text-sm' className='w-full'
onClick={handleChangePassword} onClick={handleChangePassword}
> >
{t('common.operation.reset')} {t('common.operation.reset')}

2
web/app/signin/check-code/page.tsx
View File

@ -72,7 +72,7 @@ export default function CheckCode() {
<form action=""> <form action="">
<label htmlFor="code" className='text-text-secondary text-sm font-semibold mb-1'>{t('login.checkCode.verificationCode')}</label> <label htmlFor="code" className='text-text-secondary text-sm font-semibold mb-1'>{t('login.checkCode.verificationCode')}</label>
<Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='px-3 mt-1 leading-5 h-9 appearance-none' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} /> <Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
<Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button> <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
<Countdown onResend={resendCode} /> <Countdown onResend={resendCode} />
</form> </form>

2
web/app/signin/components/mail-and-code-auth.tsx
View File

@ -56,7 +56,7 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
<div className='mb-2'> <div className='mb-2'>
<label htmlFor="email" className='my-2 block text-sm font-medium text-text-secondary'>{t('login.email')}</label> <label htmlFor="email" className='my-2 block text-sm font-medium text-text-secondary'>{t('login.email')}</label>
<div className='mt-1'> <div className='mt-1'>
<Input id='email' type="email" disabled={isInvite} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} className="px-3 h-9" /> <Input id='email' type="email" disabled={isInvite} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
</div> </div>
<div className='mt-3'> <div className='mt-3'>
<Button loading={loading} disabled={loading} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.continueWithCode')}</Button> <Button loading={loading} disabled={loading} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.continueWithCode')}</Button>

2
web/app/signin/components/mail-and-password-auth.tsx
View File

@ -81,7 +81,6 @@ export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthPro
type="email" type="email"
autoComplete="email" autoComplete="email"
placeholder={t('login.emailPlaceholder') || ''} placeholder={t('login.emailPlaceholder') || ''}
className='px-3 h-9'
/> />
</div> </div>
</div> </div>
@ -105,7 +104,6 @@ export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthPro
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
autoComplete="current-password" autoComplete="current-password"
placeholder={t('login.passwordPlaceholder') || ''} placeholder={t('login.passwordPlaceholder') || ''}
className='px-3 h-9'
/> />
<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">
<button <button

8
web/app/signin/components/social-auth.tsx
View File

@ -26,7 +26,7 @@ export default function SocialAuth(props: SocialAuthProps) {
<a href={getOAuthLink('/oauth/login/github')}> <a href={getOAuthLink('/oauth/login/github')}>
<Button <Button
disabled={props.disabled} disabled={props.disabled}
className='w-full hover:!bg-gray-50' className='w-full'
> >
<> <>
<span className={ <span className={
@ -35,7 +35,7 @@ export default function SocialAuth(props: SocialAuthProps) {
'w-5 h-5 mr-2', 'w-5 h-5 mr-2',
) )
} /> } />
<span className="truncate text-gray-800">{t('login.withGitHub')}</span> <span className="truncate">{t('login.withGitHub')}</span>
</> </>
</Button> </Button>
</a> </a>
@ -44,7 +44,7 @@ export default function SocialAuth(props: SocialAuthProps) {
<a href={getOAuthLink('/oauth/login/google')}> <a href={getOAuthLink('/oauth/login/google')}>
<Button <Button
disabled={props.disabled} disabled={props.disabled}
className='w-full hover:!bg-gray-50' className='w-full'
> >
<> <>
<span className={ <span className={
@ -53,7 +53,7 @@ export default function SocialAuth(props: SocialAuthProps) {
'w-5 h-5 mr-2', 'w-5 h-5 mr-2',
) )
} /> } />
<span className="truncate text-gray-800">{t('login.withGoogle')}</span> <span className="truncate">{t('login.withGoogle')}</span>
</> </>
</Button> </Button>
</a> </a>

1
web/app/signin/invite-settings/page.tsx
View File

@ -98,7 +98,6 @@ export default function InviteSettingsPage() {
value={name} value={name}
onChange={e => setName(e.target.value)} onChange={e => setName(e.target.value)}
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'}
/> />
</div> </div>
</div> </div>

4
web/app/signin/oneMoreStep.tsx
View File

@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
import Link from 'next/link' import Link from 'next/link'
import useSWR from 'swr' import useSWR from 'swr'
import { useRouter, useSearchParams } from 'next/navigation' import { useRouter, useSearchParams } from 'next/navigation'
import Input from '../components/base/input'
import Button from '@/app/components/base/button' import Button from '@/app/components/base/button'
import Tooltip from '@/app/components/base/tooltip' import Tooltip from '@/app/components/base/tooltip'
import { SimpleSelect } from '@/app/components/base/select' import { SimpleSelect } from '@/app/components/base/select'
@ -99,12 +100,11 @@ const OneMoreStep = () => {
</Tooltip> </Tooltip>
</label> </label>
<div className="mt-1"> <div className="mt-1">
<input <Input
id="invitation_code" id="invitation_code"
value={state.invitation_code} value={state.invitation_code}
type="text" type="text"
placeholder={t('login.invitationCodePlaceholder') || ''} placeholder={t('login.invitationCodePlaceholder') || ''}
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'}
onChange={(e) => { onChange={(e) => {
dispatch({ type: 'invitation_code', value: e.target.value.trim() }) dispatch({ type: 'invitation_code', value: e.target.value.trim() })
}} }}