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

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

@ -5,6 +5,7 @@ import useSWR from 'swr'
import { useSearchParams } from 'next/navigation'
import cn from 'classnames'
import { CheckCircleIcon } from '@heroicons/react/24/solid'
import Input from '../components/base/input'
import Button from '@/app/components/base/button'
import { changePasswordWithToken, verifyForgotPasswordToken } from '@/service/common'
import Toast from '@/app/components/base/toast'
@ -113,34 +114,30 @@ const ChangePasswordForm = () => {
<label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
{t('common.account.newPassword')}
</label>
<div className="mt-1 relative rounded-md shadow-sm">
<input
<Input
id="password"
type='password'
value={password}
onChange={e => setPassword(e.target.value)}
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='mt-1'
/>
</div>
<div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>
<div className='mt-1 text-xs text-text-secondary'>{t('login.error.passwordInvalid')}</div>
</div>
{/* Confirm Password */}
<div className='mb-5'>
<label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
{t('common.account.confirmPassword')}
</label>
<div className="mt-1 relative rounded-md shadow-sm">
<input
<Input
id="confirmPassword"
type='password'
value={confirmPassword}
onChange={e => setConfirmPassword(e.target.value)}
placeholder={t('login.confirmPasswordPlaceholder') || ''}
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='mt-1'
/>
</div>
</div>
<div>
<Button
variant='primary'
@ -165,7 +162,7 @@ const ChangePasswordForm = () => {
</h2>
</div>
<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>
</Button>
</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 { zodResolver } from '@hookform/resolvers/zod'
import Loading from '../components/base/loading'
import Input from '../components/base/input'
import Button from '@/app/components/base/button'
import {
@ -78,7 +79,7 @@ const ForgotPasswordForm = () => {
return (
loading
? <Loading/>
? <Loading />
: <>
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<h2 className="text-[32px] font-bold text-gray-900">
@ -98,10 +99,9 @@ const ForgotPasswordForm = () => {
{t('login.email')}
</label>
<div className="mt-1">
<input
<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>

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

@ -72,7 +72,7 @@ export default function CheckCode() {
<form action="">
<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>
<Countdown onResend={resendCode} />
</form>

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

@ -64,7 +64,7 @@ export default function CheckCode() {
<div className='mb-2'>
<label htmlFor="email" className='my-2 block text-sm font-medium text-text-secondary'>{t('login.email')}</label>
<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 className='mt-3'>
<Button loading={loading} disabled={loading} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.continueWithCode')}</Button>

17
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 { changePasswordWithToken } from '@/service/common'
import Toast from '@/app/components/base/toast'
import Input from '@/app/components/base/input'
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">
{t('common.account.newPassword')}
</label>
<div className="mt-1 relative rounded-md shadow-sm">
<input
<Input
id="password"
type='password'
value={password}
onChange={e => setPassword(e.target.value)}
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='mt-1'
/>
</div>
<div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>
<div className='mt-1 text-xs text-text-secondary'>{t('login.error.passwordInvalid')}</div>
</div>
{/* Confirm Password */}
<div className='mb-5'>
<label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
{t('common.account.confirmPassword')}
</label>
<div className="mt-1 relative rounded-md shadow-sm">
<input
<Input
id="confirmPassword"
type='password'
value={confirmPassword}
onChange={e => setConfirmPassword(e.target.value)}
placeholder={t('login.confirmPasswordPlaceholder') || ''}
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='mt-1'
/>
</div>
</div>
<div>
<Button
variant='primary'
className='w-full !text-sm'
className='w-full'
onClick={handleChangePassword}
>
{t('common.operation.reset')}

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

@ -72,7 +72,7 @@ export default function CheckCode() {
<form action="">
<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>
<Countdown onResend={resendCode} />
</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'>
<label htmlFor="email" className='my-2 block text-sm font-medium text-text-secondary'>{t('login.email')}</label>
<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 className='mt-3'>
<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"
autoComplete="email"
placeholder={t('login.emailPlaceholder') || ''}
className='px-3 h-9'
/>
</div>
</div>
@ -105,7 +104,6 @@ export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthPro
type={showPassword ? 'text' : 'password'}
autoComplete="current-password"
placeholder={t('login.passwordPlaceholder') || ''}
className='px-3 h-9'
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
<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')}>
<Button
disabled={props.disabled}
className='w-full hover:!bg-gray-50'
className='w-full'
>
<>
<span className={
@ -35,7 +35,7 @@ export default function SocialAuth(props: SocialAuthProps) {
'w-5 h-5 mr-2',
)
} />
<span className="truncate text-gray-800">{t('login.withGitHub')}</span>
<span className="truncate">{t('login.withGitHub')}</span>
</>
</Button>
</a>
@ -44,7 +44,7 @@ export default function SocialAuth(props: SocialAuthProps) {
<a href={getOAuthLink('/oauth/login/google')}>
<Button
disabled={props.disabled}
className='w-full hover:!bg-gray-50'
className='w-full'
>
<>
<span className={
@ -53,7 +53,7 @@ export default function SocialAuth(props: SocialAuthProps) {
'w-5 h-5 mr-2',
)
} />
<span className="truncate text-gray-800">{t('login.withGoogle')}</span>
<span className="truncate">{t('login.withGoogle')}</span>
</>
</Button>
</a>

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

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

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

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