-
-
+
+
+
diff --git a/web/src/pages/user-setting/index.tsx b/web/src/pages/user-setting/index.tsx
index 7fa104431..4caf9fa2f 100644
--- a/web/src/pages/user-setting/index.tsx
+++ b/web/src/pages/user-setting/index.tsx
@@ -1,5 +1,5 @@
import { Outlet } from 'umi';
-import SideBar from './sidebar';
+import { SideBar } from './sidebar';
import { PageHeader } from '@/components/page-header';
import {
diff --git a/web/src/pages/user-setting/profile/hooks/use-profile.ts b/web/src/pages/user-setting/profile/hooks/use-profile.ts
new file mode 100644
index 000000000..5b8bdf7b5
--- /dev/null
+++ b/web/src/pages/user-setting/profile/hooks/use-profile.ts
@@ -0,0 +1,151 @@
+// src/hooks/useProfile.ts
+import {
+ useFetchUserInfo,
+ useSaveSetting,
+} from '@/hooks/use-user-setting-request';
+import { rsaPsw } from '@/utils';
+import { useCallback, useEffect, useState } from 'react';
+
+interface ProfileData {
+ userName: string;
+ timeZone: string;
+ currPasswd?: string;
+ newPasswd?: string;
+ avatar: string;
+ email: string;
+ confirmPasswd?: string;
+}
+
+export const EditType = {
+ editName: 'editName',
+ editTimeZone: 'editTimeZone',
+ editPassword: 'editPassword',
+} as const;
+
+export type IEditType = keyof typeof EditType;
+
+export const modalTitle = {
+ [EditType.editName]: 'Edit Name',
+ [EditType.editTimeZone]: 'Edit Time Zone',
+ [EditType.editPassword]: 'Edit Password',
+} as const;
+
+export const useProfile = () => {
+ const { data: userInfo } = useFetchUserInfo();
+ const [profile, setProfile] = useState
({
+ userName: '',
+ avatar: '',
+ timeZone: '',
+ email: '',
+ currPasswd: '',
+ });
+
+ const [editType, setEditType] = useState(EditType.editName);
+ const [isEditing, setIsEditing] = useState(false);
+ const [editForm, setEditForm] = useState>({});
+ const {
+ saveSetting,
+ loading: submitLoading,
+ data: saveSettingData,
+ } = useSaveSetting();
+
+ useEffect(() => {
+ // form.setValue('currPasswd', ''); // current password
+ const profile = {
+ userName: userInfo.nickname,
+ timeZone: userInfo.timezone,
+ avatar: userInfo.avatar || '',
+ email: userInfo.email,
+ currPasswd: userInfo.password,
+ };
+ setProfile(profile);
+ }, [userInfo, setProfile]);
+
+ useEffect(() => {
+ if (saveSettingData === 0) {
+ setIsEditing(false);
+ setEditForm({});
+ }
+ }, [saveSettingData]);
+ const onSubmit = (newProfile: ProfileData) => {
+ const payload: Partial<{
+ nickname: string;
+ password: string;
+ new_password: string;
+ avatar: string;
+ timezone: string;
+ }> = {
+ nickname: newProfile.userName,
+ avatar: newProfile.avatar,
+ timezone: newProfile.timeZone,
+ };
+
+ if (
+ 'currPasswd' in newProfile &&
+ 'newPasswd' in newProfile &&
+ newProfile.currPasswd &&
+ newProfile.newPasswd
+ ) {
+ payload.password = rsaPsw(newProfile.currPasswd!) as string;
+ payload.new_password = rsaPsw(newProfile.newPasswd!) as string;
+ }
+ console.log('payload', payload);
+ if (editType === EditType.editName && payload.nickname) {
+ saveSetting({ nickname: payload.nickname });
+ setProfile(newProfile);
+ }
+ if (editType === EditType.editTimeZone && payload.timezone) {
+ saveSetting({ timezone: payload.timezone });
+ setProfile(newProfile);
+ }
+ if (editType === EditType.editPassword && payload.password) {
+ saveSetting({
+ password: payload.password,
+ new_password: payload.new_password,
+ });
+ setProfile(newProfile);
+ }
+ // saveSetting(payload);
+ };
+
+ const handleEditClick = useCallback(
+ (type: IEditType) => {
+ setEditForm(profile);
+ setEditType(type);
+ setIsEditing(true);
+ },
+ [profile],
+ );
+
+ const handleCancel = useCallback(() => {
+ setIsEditing(false);
+ setEditForm({});
+ }, []);
+
+ const handleSave = (data: ProfileData) => {
+ console.log('handleSave', data);
+ const newProfile = { ...profile, ...data };
+
+ onSubmit(newProfile);
+ // setIsEditing(false);
+ // setEditForm({});
+ };
+
+ const handleAvatarUpload = (avatar: string) => {
+ setProfile((prev) => ({ ...prev, avatar }));
+ saveSetting({ avatar });
+ };
+
+ return {
+ profile,
+ setProfile,
+ submitLoading: submitLoading,
+ isEditing,
+ editType,
+ editForm,
+ handleEditClick,
+ handleCancel,
+ handleSave,
+ handleAvatarUpload,
+ };
+};
diff --git a/web/src/pages/user-setting/profile/index.tsx b/web/src/pages/user-setting/profile/index.tsx
new file mode 100644
index 000000000..266569fc5
--- /dev/null
+++ b/web/src/pages/user-setting/profile/index.tsx
@@ -0,0 +1,413 @@
+// src/components/ProfilePage.tsx
+import { AvatarUpload } from '@/components/avatar-upload';
+import PasswordInput from '@/components/originui/password-input';
+import { Button } from '@/components/ui/button';
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Modal } from '@/components/ui/modal/modal';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { useTranslate } from '@/hooks/common-hooks';
+import { TimezoneList } from '@/pages/user-setting/constants';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from 'i18next';
+import { Loader2Icon, PenLine } from 'lucide-react';
+import { FC, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { EditType, modalTitle, useProfile } from './hooks/use-profile';
+
+const baseSchema = z.object({
+ userName: z
+ .string()
+ .min(1, { message: t('setting.usernameMessage') })
+ .trim(),
+ timeZone: z
+ .string()
+ .trim()
+ .min(1, { message: t('setting.timezonePlaceholder') }),
+});
+
+const nameSchema = baseSchema.extend({
+ currPasswd: z.string().optional(),
+ newPasswd: z.string().optional(),
+ confirmPasswd: z.string().optional(),
+});
+
+const passwordSchema = baseSchema
+ .extend({
+ currPasswd: z
+ .string({
+ required_error: t('setting.currentPasswordMessage'),
+ })
+ .trim(),
+ newPasswd: z
+ .string({
+ required_error: t('setting.newPasswordMessage'),
+ })
+ .trim()
+ .min(8, { message: t('setting.newPasswordDescription') }),
+ confirmPasswd: z
+ .string({
+ required_error: t('setting.confirmPasswordMessage'),
+ })
+ .trim()
+ .min(8, { message: t('setting.newPasswordDescription') }),
+ })
+ .superRefine((data, ctx) => {
+ if (
+ data.newPasswd &&
+ data.confirmPasswd &&
+ data.newPasswd !== data.confirmPasswd
+ ) {
+ ctx.addIssue({
+ path: ['confirmPasswd'],
+ message: t('setting.confirmPasswordNonMatchMessage'),
+ code: z.ZodIssueCode.custom,
+ });
+ }
+ });
+const ProfilePage: FC = () => {
+ const { t } = useTranslate('setting');
+
+ const {
+ profile,
+ editType,
+ isEditing,
+ submitLoading,
+ editForm,
+ handleEditClick,
+ handleCancel,
+ handleSave,
+ handleAvatarUpload,
+ } = useProfile();
+
+ const form = useForm>({
+ resolver: zodResolver(
+ editType === EditType.editPassword ? passwordSchema : nameSchema,
+ ),
+ defaultValues: {
+ userName: '',
+ timeZone: '',
+ },
+ // shouldUnregister: true,
+ });
+ useEffect(() => {
+ form.reset({ ...editForm, currPasswd: undefined });
+ }, [editForm, form]);
+
+ // const ModalContent: FC = () => {
+ // // let content = null;
+ // // if (editType === EditType.editName) {
+ // // content = editName();
+ // // }
+ // return (
+ // <>
+
+ //
+ // );
+ // };
+
+ return (
+
+ {/* Header */}
+
+
+ {/* Main Content */}
+
+ {/* Name */}
+
+
+
+
+ {profile.userName}
+
+
+
+
+
+ {/* Avatar */}
+
+
+ {/* Time Zone */}
+
+
+
+
+ {profile.timeZone}
+
+
+
+
+
+ {/* Email Address */}
+
+
+
+
+ {profile.email}
+
+
+ {t('emailDescription')}
+
+
+
+
+ {/* Password */}
+
+
+
+
+ {profile.currPasswd ? '********' : ''}
+
+
+
+
+
+
+ {editType && (
+
{
+ if (!open) {
+ handleCancel();
+ }
+ }}
+ className="!w-[480px]"
+ >
+ {/* */}
+
+
+
+ )}
+