gmakstutis/ragflow
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: update login-next form display

Browse source
This commit is contained in:
Manh Pham 2025-11-23 04:09:14 +00:00
parent cfdccebb17
commit c8e27fa9a7
1 changed files with 38 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
web/src/pages/login-next/index.tsx
View file

@ -186,26 +186,29 @@ const Login = () => {
{title === 'login' ? t('loginTitle') : t('signUpTitle')} {title === 'login' ? t('loginTitle') : t('signUpTitle')}
</h2> </h2>
</div> </div>
<div className=" w-full max-w-[540px] bg-bg-component backdrop-blur-sm rounded-2xl shadow-xl pt-14 pl-10 pr-10 pb-2 border border-border-button "> <div className="w-full max-w-[540px] bg-bg-component backdrop-blur-sm rounded-2xl shadow-xl pt-14 px-10 pb-8 border border-border-button">
<Form {...form}> <Form {...form}>
<form <form
className="flex flex-col gap-8 text-text-primary " className="flex flex-col gap-6 text-text-primary"
onSubmit={form.handleSubmit((data) => onCheck(data))} onSubmit={form.handleSubmit((data) => onCheck(data))}
> >
<FormField <FormField
control={form.control} control={form.control}
name="email" name="email"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="space-y-2">
<FormLabel required>{t('emailLabel')}</FormLabel> <FormLabel required className="text-sm font-medium">
{t('emailLabel')}
</FormLabel>
<FormControl> <FormControl>
<Input <Input
placeholder={t('emailPlaceholder')} placeholder={t('emailPlaceholder')}
autoComplete="email" autoComplete="email"
className="h-11 rounded-lg border-border-button focus:border-accent-primary transition-colors"
{...field} {...field}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage className="text-xs" />
</FormItem> </FormItem>
)} )}
/> />
@ -214,16 +217,19 @@ const Login = () => {
control={form.control} control={form.control}
name="nickname" name="nickname"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="space-y-2">
<FormLabel required>{t('nicknameLabel')}</FormLabel> <FormLabel required className="text-sm font-medium">
{t('nicknameLabel')}
</FormLabel>
<FormControl> <FormControl>
<Input <Input
placeholder={t('nicknamePlaceholder')} placeholder={t('nicknamePlaceholder')}
autoComplete="username" autoComplete="username"
className="h-11 rounded-lg border-border-button focus:border-accent-primary transition-colors"
{...field} {...field}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage className="text-xs" />
</FormItem> </FormItem>
)} )}
/> />
@ -233,8 +239,10 @@ const Login = () => {
control={form.control} control={form.control}
name="password" name="password"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="space-y-2">
<FormLabel required>{t('passwordLabel')}</FormLabel> <FormLabel required className="text-sm font-medium">
{t('passwordLabel')}
</FormLabel>
<FormControl> <FormControl>
<div className="relative"> <div className="relative">
<Input <Input
@ -245,6 +253,7 @@ const Login = () => {
? 'current-password' ? 'current-password'
: 'new-password' : 'new-password'
} }
className="h-11 rounded-lg border-border-button focus:border-accent-primary transition-colors pr-10"
{...field} {...field}
/> />
{/* <button {/* <button
@ -260,7 +269,7 @@ const Login = () => {
</button> */} </button> */}
</div> </div>
</FormControl> </FormControl>
<FormMessage /> <FormMessage className="text-xs" />
</FormItem> </FormItem>
)} )}
/> />
@ -272,24 +281,28 @@ const Login = () => {
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormControl> <FormControl>
<div className="flex gap-2"> <div className="flex items-center gap-2.5">
<Checkbox <Checkbox
checked={field.value} checked={field.value}
onCheckedChange={(checked) => { onCheckedChange={(checked) => {
field.onChange(checked); field.onChange(checked);
}} }}
className="border-border-button data-[state=checked]:bg-accent-primary data-[state=checked]:border-accent-primary"
/> />
<FormLabel <FormLabel
className={cn(' hover:text-text-primary', { className={cn(
'text-text-disabled': !field.value, 'text-sm cursor-pointer transition-colors hover:text-text-primary',
'text-text-primary': field.value, {
})} 'text-text-disabled': !field.value,
'text-text-primary': field.value,
},
)}
> >
{t('rememberMe')} {t('rememberMe')}
</FormLabel> </FormLabel>
</div> </div>
</FormControl> </FormControl>
<FormMessage /> <FormMessage className="text-xs" />
</FormItem> </FormItem>
)} )}
/> />
@ -297,27 +310,29 @@ const Login = () => {
<ButtonLoading <ButtonLoading
type="submit" type="submit"
loading={loading} loading={loading}
className="bg-metallic-gradient border-b-[#00BEB4] border-b-2 hover:bg-metallic-gradient hover:border-b-[#02bcdd] w-full my-8" className="bg-metallic-gradient border-b-[#00BEB4] border-b-2 hover:bg-metallic-gradient hover:border-b-[#02bcdd] w-full h-11 rounded-lg mt-2 mb-4 font-medium text-base shadow-sm transition-all duration-200"
> >
{title === 'login' ? t('login') : t('continue')} {title === 'login' ? t('login') : t('continue')}
</ButtonLoading> </ButtonLoading>
{title === 'login' && channels && channels.length > 0 && ( {title === 'login' && channels && channels.length > 0 && (
<div className="mt-3 border"> <div className="mt-2 space-y-2.5 border-t border-border-button pt-4">
{channels.map((item) => ( {channels.map((item) => (
<Button <Button
variant={'transparent'} variant={'transparent'}
key={item.channel} key={item.channel}
onClick={() => handleLoginWithChannel(item.channel)} onClick={() => handleLoginWithChannel(item.channel)}
style={{ marginTop: 10 }} className="w-full h-11 rounded-lg border border-border-button bg-transparent hover:bg-bg-secondary hover:border-accent-primary/50 transition-all duration-200 mt-0"
> >
<div className="flex items-center"> <div className="flex items-center justify-center gap-2.5">
<SvgIcon <SvgIcon
name={item.icon || 'sso'} name={item.icon || 'sso'}
width={20} width={20}
height={20} height={20}
style={{ marginRight: 5 }} className="mr-0"
/> />
Sign in with {item.display_name} <span className="text-sm font-medium">
Sign in with {item.display_name}
</span>
</div> </div>
</Button> </Button>
))} ))}