mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-08 12:32:30 +08:00
Optimize the style and logic of the profile (#8639)
### What problem does this PR solve? Optimize the style and logic of the profile [#3221 ](https://github.com/infiniflow/ragflow/issues/3221) ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
dcc123456
@ -552,6 +552,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
|
||||
setting: {
|
||||
profile: 'Profile',
|
||||
avatar: 'Avatar',
|
||||
avatarTip: 'This will be displayed on your profile.',
|
||||
profileDescription: 'Update your photo and personal details here.',
|
||||
maxTokens: 'Max Tokens',
|
||||
maxTokensMessage: 'Max Tokens is required',
|
||||
@ -584,6 +585,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
|
||||
currentPassword: 'Current password',
|
||||
currentPasswordMessage: 'Please input your password!',
|
||||
newPassword: 'New password',
|
||||
changePassword: 'Change Password',
|
||||
newPasswordMessage: 'Please input your password!',
|
||||
newPasswordDescription:
|
||||
'Your new password must be more than 8 characters.',
|
||||
|
||||
@ -535,6 +535,7 @@ export default {
|
||||
setting: {
|
||||
profile: '概述',
|
||||
avatar: '头像',
|
||||
avatarTip: '這會在你的個人主頁展示',
|
||||
profileDescription: '在此更新您的照片和個人詳細信息。',
|
||||
maxTokens: '最大token數',
|
||||
maxTokensMessage: '最大token數是必填項',
|
||||
@ -567,6 +568,7 @@ export default {
|
||||
currentPassword: '當前密碼',
|
||||
currentPasswordMessage: '請輸入當前密碼',
|
||||
newPassword: '新密碼',
|
||||
changePassword: '修改密碼',
|
||||
newPasswordMessage: '請輸入新密碼',
|
||||
newPasswordDescription: '您的新密碼必須超過 8 個字符。',
|
||||
confirmPassword: '確認新密碼',
|
||||
|
||||
@ -556,6 +556,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
|
||||
setting: {
|
||||
profile: '概要',
|
||||
avatar: '头像',
|
||||
avatarTip: '这会在你的个人主页展示',
|
||||
profileDescription: '在此更新您的照片和个人详细信息。',
|
||||
maxTokens: '最大token数',
|
||||
maxTokensMessage: '最大token数是必填项',
|
||||
@ -588,6 +589,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
|
||||
currentPassword: '当前密码',
|
||||
currentPasswordMessage: '请输入当前密码',
|
||||
newPassword: '新密码',
|
||||
changePassword: '修改密码',
|
||||
newPasswordMessage: '请输入新密码',
|
||||
newPasswordDescription: '您的新密码必须超过 8 个字符。',
|
||||
confirmPassword: '确认新密码',
|
||||
|
||||
@ -28,68 +28,71 @@ import { Loader2Icon, Pencil, Upload } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
function defineSchema(
|
||||
t: TFunction<'translation', string>,
|
||||
showPasswordForm = false,
|
||||
) {
|
||||
const baseSchema = z.object({
|
||||
userName: z
|
||||
.string()
|
||||
.min(1, { message: t('usernameMessage') })
|
||||
.trim(),
|
||||
avatarUrl: z.string().trim(),
|
||||
timeZone: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, { message: t('timezonePlaceholder') }),
|
||||
email: z
|
||||
.string({ required_error: 'Please select an email to display.' })
|
||||
.trim()
|
||||
.regex(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, {
|
||||
message: 'Enter a valid email address.',
|
||||
}),
|
||||
});
|
||||
|
||||
function defineSchema(t: TFunction<'translation', string>) {
|
||||
return z
|
||||
.object({
|
||||
userName: z
|
||||
.string()
|
||||
.min(1, {
|
||||
message: t('usernameMessage'),
|
||||
})
|
||||
.trim(),
|
||||
avatarUrl: z.string().trim(),
|
||||
timeZone: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, {
|
||||
message: t('timezonePlaceholder'),
|
||||
}),
|
||||
email: z
|
||||
.string({
|
||||
required_error: 'Please select an email to display.',
|
||||
})
|
||||
.trim()
|
||||
.regex(
|
||||
/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
|
||||
{
|
||||
message: 'Enter a valid email address.',
|
||||
},
|
||||
),
|
||||
currPasswd: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, {
|
||||
message: t('currentPasswordMessage'),
|
||||
}),
|
||||
newPasswd: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(8, {
|
||||
message: t('confirmPasswordMessage'),
|
||||
}),
|
||||
confirmPasswd: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(8, {
|
||||
message: t('newPasswordDescription'),
|
||||
}),
|
||||
})
|
||||
.refine((data) => data.newPasswd === data.confirmPasswd, {
|
||||
message: t('confirmPasswordNonMatchMessage'),
|
||||
path: ['confirmPasswd'],
|
||||
});
|
||||
if (showPasswordForm) {
|
||||
return baseSchema
|
||||
.extend({
|
||||
currPasswd: z
|
||||
.string({
|
||||
required_error: t('currentPasswordMessage'),
|
||||
})
|
||||
.trim()
|
||||
.min(1, { message: t('currentPasswordMessage') }),
|
||||
newPasswd: z
|
||||
.string({
|
||||
required_error: t('confirmPasswordMessage'),
|
||||
})
|
||||
.trim()
|
||||
.min(8, { message: t('confirmPasswordMessage') }),
|
||||
confirmPasswd: z
|
||||
.string({
|
||||
required_error: t('newPasswordDescription'),
|
||||
})
|
||||
.trim()
|
||||
.min(8, { message: t('newPasswordDescription') }),
|
||||
})
|
||||
.refine((data) => data.newPasswd === data.confirmPasswd, {
|
||||
message: t('confirmPasswordNonMatchMessage'),
|
||||
path: ['confirmPasswd'],
|
||||
});
|
||||
}
|
||||
|
||||
return baseSchema;
|
||||
}
|
||||
|
||||
export default function Profile() {
|
||||
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
||||
const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
|
||||
const { data: userInfo } = useFetchUserInfo();
|
||||
const { saveSetting, loading: submitLoading } = useSaveSetting();
|
||||
const {
|
||||
saveSetting,
|
||||
loading: submitLoading,
|
||||
data: saveUserData,
|
||||
} = useSaveSetting();
|
||||
|
||||
const { t } = useTranslate('setting');
|
||||
const FormSchema = defineSchema(t);
|
||||
|
||||
const [showPasswordForm, setShowPasswordForm] = useState(false);
|
||||
const FormSchema = defineSchema(t, showPasswordForm);
|
||||
const form = useForm<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
defaultValues: {
|
||||
@ -97,10 +100,11 @@ export default function Profile() {
|
||||
avatarUrl: '',
|
||||
timeZone: '',
|
||||
email: '',
|
||||
currPasswd: '',
|
||||
newPasswd: '',
|
||||
confirmPasswd: '',
|
||||
// currPasswd: '',
|
||||
// newPasswd: '',
|
||||
// confirmPasswd: '',
|
||||
},
|
||||
shouldUnregister: true,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@ -108,10 +112,20 @@ export default function Profile() {
|
||||
form.setValue('email', userInfo?.email); // email
|
||||
form.setValue('userName', userInfo?.nickname); // nickname
|
||||
form.setValue('timeZone', userInfo?.timezone); // time zone
|
||||
form.setValue('currPasswd', ''); // current password
|
||||
// form.setValue('currPasswd', ''); // current password
|
||||
setAvatarBase64Str(userInfo?.avatar ?? '');
|
||||
}, [userInfo]);
|
||||
|
||||
useEffect(() => {
|
||||
if (saveUserData === 0) {
|
||||
setShowPasswordForm(false);
|
||||
form.resetField('currPasswd');
|
||||
form.resetField('newPasswd');
|
||||
form.resetField('confirmPasswd');
|
||||
}
|
||||
console.log('saveUserData', saveUserData);
|
||||
}, [saveUserData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (avatarFile) {
|
||||
// make use of img compression transformFile2Base64
|
||||
@ -122,24 +136,34 @@ export default function Profile() {
|
||||
}, [avatarFile]);
|
||||
|
||||
function onSubmit(data: z.infer<typeof FormSchema>) {
|
||||
// toast('You submitted the following values', {
|
||||
// description: (
|
||||
// <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
|
||||
// <code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||
// </pre>
|
||||
// ),
|
||||
// });
|
||||
// console.log('data=', data);
|
||||
// final submit form
|
||||
saveSetting({
|
||||
const payload: Partial<{
|
||||
nickname: string;
|
||||
password: string;
|
||||
new_password: string;
|
||||
avatar: string;
|
||||
timezone: string;
|
||||
}> = {
|
||||
nickname: data.userName,
|
||||
password: rsaPsw(data.currPasswd) as string,
|
||||
new_password: rsaPsw(data.newPasswd) as string,
|
||||
avatar: avatarBase64Str,
|
||||
timezone: data.timeZone,
|
||||
});
|
||||
};
|
||||
|
||||
if (showPasswordForm && 'currPasswd' in data && 'newPasswd' in data) {
|
||||
payload.password = rsaPsw(data.currPasswd!) as string;
|
||||
payload.new_password = rsaPsw(data.newPasswd!) as string;
|
||||
}
|
||||
saveSetting(payload);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (showPasswordForm) {
|
||||
form.register('currPasswd');
|
||||
form.register('newPasswd');
|
||||
form.register('confirmPasswd');
|
||||
} else {
|
||||
form.unregister(['currPasswd', 'newPasswd', 'confirmPasswd']);
|
||||
}
|
||||
}, [showPasswordForm]);
|
||||
return (
|
||||
<section className="p-8">
|
||||
<h1 className="text-3xl font-bold">{t('profile')}</h1>
|
||||
@ -152,12 +176,13 @@ export default function Profile() {
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="block space-y-6"
|
||||
>
|
||||
{/* Username Field */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="userName"
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0 ">
|
||||
<div className="flex w-[600px]">
|
||||
<div className="flex w-[640px]">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
|
||||
<span className="text-red-600">*</span>
|
||||
{t('username')}
|
||||
@ -170,24 +195,26 @@ export default function Profile() {
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="flex w-[600px] pt-1">
|
||||
<div className="flex w-[640px] pt-1">
|
||||
<div className="w-1/4"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Avatar Field */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="avatarUrl"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-y-0">
|
||||
<div className="flex w-[600px]">
|
||||
<div className="flex w-[640px]">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
|
||||
Avatar
|
||||
</FormLabel>
|
||||
<FormControl className="w-3/4">
|
||||
<>
|
||||
<div className="flex justify-start items-end space-x-2">
|
||||
<div className="relative group">
|
||||
{!avatarBase64Str ? (
|
||||
<div className="w-[64px] h-[64px] grid place-content-center">
|
||||
@ -198,18 +225,18 @@ export default function Profile() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-[64px] h-[64px] relative grid place-content-center">
|
||||
<Avatar className="w-[64px] h-[64px]">
|
||||
<Avatar className="w-[64px] h-[64px] rounded-md">
|
||||
<AvatarImage
|
||||
className=" block"
|
||||
className="block"
|
||||
src={avatarBase64Str}
|
||||
alt=""
|
||||
/>
|
||||
<AvatarFallback></AvatarFallback>
|
||||
<AvatarFallback className="rounded-md"></AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="absolute inset-0 bg-[#000]/20 group-hover:bg-[#000]/60">
|
||||
<Pencil
|
||||
size={20}
|
||||
className="absolute right-2 bottom-0 opacity-50 hidden group-hover:block"
|
||||
size={16}
|
||||
className="absolute right-1 bottom-1 opacity-50 hidden group-hover:block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -234,22 +261,27 @@ export default function Profile() {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
<div className="margin-1 text-muted-foreground">
|
||||
{t('avatarTip')}
|
||||
</div>
|
||||
</div>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="flex w-[600px] pt-1">
|
||||
<div className="flex w-[640px] pt-1">
|
||||
<div className="w-1/4"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Time Zone Field */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="timeZone"
|
||||
render={({ field }) => (
|
||||
<FormItem className="items-center space-y-0">
|
||||
<div className="flex w-[600px]">
|
||||
<div className="flex w-[640px]">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
|
||||
<span className="text-red-600">*</span>
|
||||
{t('timezone')}
|
||||
@ -269,37 +301,35 @@ export default function Profile() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex w-[600px] pt-1">
|
||||
<div className="flex w-[640px] pt-1">
|
||||
<div className="w-1/4"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Email Address Field */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<div>
|
||||
<FormItem className="items-center space-y-0">
|
||||
<div className="flex w-[600px]">
|
||||
<div className="flex w-[640px]">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
|
||||
{t('email')}
|
||||
</FormLabel>
|
||||
<FormControl className="w-3/4">
|
||||
<Input
|
||||
placeholder="Alex@gmail.com"
|
||||
disabled
|
||||
{...field}
|
||||
/>
|
||||
<>{field.value}</>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="flex w-[600px] pt-1">
|
||||
<div className="flex w-[640px] pt-1">
|
||||
<div className="w-1/4"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
<div className="flex w-[600px] pt-1">
|
||||
<div className="flex w-[640px] pt-1">
|
||||
<p className="w-1/4"> </p>
|
||||
<p className="text-sm text-muted-foreground whitespace-nowrap w-3/4">
|
||||
{t('emailDescription')}
|
||||
@ -308,92 +338,110 @@ export default function Profile() {
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<div className="h-[10px]"></div>
|
||||
|
||||
{/* Password Section */}
|
||||
<div className="pb-6">
|
||||
<h1 className="text-3xl font-bold">{t('password')}</h1>
|
||||
<div className="flex items-center justify-start">
|
||||
<h1 className="text-3xl font-bold">{t('password')}</h1>
|
||||
<Button
|
||||
type="button"
|
||||
className="bg-transparent hover:bg-transparent border text-muted-foreground hover:text-white ml-10"
|
||||
onClick={() => {
|
||||
setShowPasswordForm(!showPasswordForm);
|
||||
}}
|
||||
>
|
||||
{t('changePassword')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{t('passwordDescription')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-0 overflow-hidden absolute">
|
||||
<input type="password" className=" w-0 height-0 opacity-0" />
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="currPasswd"
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0">
|
||||
<div className="flex w-[600px]">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-2/5">
|
||||
<span className="text-red-600">*</span>
|
||||
{t('currentPassword')}
|
||||
</FormLabel>
|
||||
<FormControl className="w-3/5">
|
||||
<PasswordInput {...field} />
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="flex w-[600px] pt-1">
|
||||
<div className="min-w-[170px] max-w-[170px]"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="newPasswd"
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0">
|
||||
<div className="flex w-[600px]">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-2/5">
|
||||
<span className="text-red-600">*</span>
|
||||
{t('newPassword')}
|
||||
</FormLabel>
|
||||
<FormControl className="w-3/5">
|
||||
<PasswordInput {...field} />
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="flex w-[600px] pt-1">
|
||||
<div className="min-w-[170px] max-w-[170px]"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirmPasswd"
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0">
|
||||
<div className="flex w-[600px]">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-2/5">
|
||||
<span className="text-red-600">*</span>
|
||||
{t('confirmPassword')}
|
||||
</FormLabel>
|
||||
<FormControl className="w-3/5">
|
||||
<PasswordInput
|
||||
{...field}
|
||||
onBlur={() => {
|
||||
form.trigger('confirmPasswd');
|
||||
}}
|
||||
onChange={(ev) => {
|
||||
form.setValue(
|
||||
'confirmPasswd',
|
||||
ev.target.value.trim(),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="flex w-[600px] pt-1">
|
||||
<div className="min-w-[170px] max-w-[170px]"> </div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="w-[600px] text-right space-x-4">
|
||||
<Button variant="secondary">{t('cancel')}</Button>
|
||||
{/* Password Form */}
|
||||
{showPasswordForm && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="currPasswd"
|
||||
render={({ field }) => (
|
||||
<FormItem className="items-center space-y-0">
|
||||
<div className="flex w-[640px]">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-2/5">
|
||||
<span className="text-red-600">*</span>
|
||||
{t('currentPassword')}
|
||||
</FormLabel>
|
||||
<FormControl className="w-3/5">
|
||||
<PasswordInput {...field} />
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="flex w-[640px] pt-1">
|
||||
<div className="min-w-[170px] max-w-[170px]"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="newPasswd"
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0">
|
||||
<div className="flex w-[640px]">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-2/5">
|
||||
<span className="text-red-600">*</span>
|
||||
{t('newPassword')}
|
||||
</FormLabel>
|
||||
<FormControl className="w-3/5">
|
||||
<PasswordInput {...field} />
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="flex w-[640px] pt-1">
|
||||
<div className="min-w-[170px] max-w-[170px]"></div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirmPasswd"
|
||||
render={({ field }) => (
|
||||
<FormItem className=" items-center space-y-0">
|
||||
<div className="flex w-[640px]">
|
||||
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-2/5">
|
||||
<span className="text-red-600">*</span>
|
||||
{t('confirmPassword')}
|
||||
</FormLabel>
|
||||
<FormControl className="w-3/5">
|
||||
<PasswordInput
|
||||
{...field}
|
||||
onBlur={() => {
|
||||
form.trigger('confirmPasswd');
|
||||
}}
|
||||
onChange={(ev) => {
|
||||
form.setValue(
|
||||
'confirmPasswd',
|
||||
ev.target.value.trim(),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
<div className="flex w-[640px] pt-1">
|
||||
<div className="min-w-[170px] max-w-[170px]">
|
||||
|
||||
</div>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div className="w-[640px] text-right space-x-4">
|
||||
<Button type="reset" variant="secondary">
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button type="submit" disabled={submitLoading}>
|
||||
{submitLoading && <Loader2Icon className="animate-spin" />}
|
||||
{t('save', { keyPrefix: 'common' })}
|
||||
|
||||
Reference in New Issue
Block a user