add change password

src/App.tsx

@@ -11,8 +11,7 @@ import { App as DomainApp } from './pages/domain';
 import { App as HomeApp } from './pages/home';
 import { basename } from './modules/basename';
 import { Redirect } from './modules/Redirect';
-import { CustomThemeProvider } from '@kevisual/components/theme/index.tsx';
-import { useTheme } from '@mui/material/styles';
+import { CustomThemeProvider, useTheme, themeOptions, theme } from '@kevisual/components/theme/index.tsx';
 import { ToastContainer } from 'react-toastify';
 import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/en';
@@ -21,7 +20,10 @@ import enUS from 'antd/locale/en_US';
 import ConfigProvider from 'antd/es/config-provider';
 import { useTranslation } from 'react-i18next';
 import { useEffect, useState } from 'react';
-
+import { ThemeProvider, createTheme } from '@mui/material';
+export const CustomThemeProvider2 = ({ children }: { children: React.ReactNode }) => {
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
 const AntProvider = ({ children }: { children: React.ReactNode }) => {
   const theme = useTheme();
   const primaryColor = theme.palette.primary.main;
@@ -67,7 +69,7 @@ const AntProvider = ({ children }: { children: React.ReactNode }) => {
 };
 export const App = () => {
   return (
-    <CustomThemeProvider>
+    <CustomThemeProvider2>
       <AntProvider>
         <div className='w-full h-full'>
           <Router basename={basename}>
@@ -93,6 +95,6 @@ export const App = () => {
       <div id='for-drawer'></div>
       <div id='for-modal'></div>
       <ToastContainer />
-    </CustomThemeProvider>
+    </CustomThemeProvider2>
   );
 };

src/modules/layout/index.tsx

@@ -17,6 +17,7 @@ import { IconButton } from '@kevisual/components/button/index.tsx';
 import { Languages, QrCode } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
+import { useTheme } from '@kevisual/components/theme/index.tsx';
 
 type LayoutMainProps = {
   title?: React.ReactNode;

src/pages/user/edit/Profile.tsx

@@ -10,9 +10,10 @@ import UploadOutlined from '@ant-design/icons/UploadOutlined';
 import PandaPNG from '@/assets/panda.png';
 import { FileUpload } from '../module/FileUpload';
 import { useTranslation } from 'react-i18next';
-import { Edit } from 'lucide-react';
+import { Edit, UserCog } from 'lucide-react';
 import { toast } from 'react-toastify';
 import { useAdminStore } from '../admin/store/admin-store';
+import { IconButton } from '@kevisual/components/button/index.tsx';
 export const CheckUserExistModal = () => {
   const { t } = useTranslation();
   const userStore = useUserStore(
@@ -62,7 +63,57 @@ export const CheckUserExistModal = () => {
     </Dialog>
   );
 };
-
+export const ChangePasswordModal = () => {
+  const { t } = useTranslation();
+  const userStore = useUserStore(
+    useShallow((state) => {
+      return {
+        showChangePassword: state.showChangePassword,
+        setShowChangePassword: state.setShowChangePassword,
+        updateSelf: state.updateSelf,
+      };
+    }),
+  );
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const onSubmit = async () => {
+    if (newPassword !== confirmPassword) {
+      toast.error('两次密码不一致');
+      return;
+    }
+    const res = await userStore.updateSelf({
+      password: newPassword,
+    });
+    if (res.code === 200) {
+      onClose();
+    }
+  };
+  const onClose = () => {
+    setNewPassword('');
+    setConfirmPassword('');
+    userStore.setShowChangePassword(false);
+  };
+  return (
+    <Dialog open={userStore.showChangePassword} onClose={onClose}>
+      <DialogTitle>{t('Change Password')}</DialogTitle>
+      <DialogContent>
+        <div className='flex flex-col w-[400px] p-4 gap-4 pt-2'>
+          {/* <TextField label='oldPassword' /> */}
+          <TextField label='New Password' type='password' value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+          <TextField label='Confirm Password' type='password' value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
+          <div className='flex justify-end gap-2  '>
+            <Button variant='contained' color='primary' onClick={onSubmit}>
+              {t('Submit')}
+            </Button>
+            <Button variant='contained' color='primary' onClick={onClose}>
+              {t('Cancel')}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
 export const Profile = () => {
   const { t } = useTranslation();
   const { control, handleSubmit, setValue, reset, formState, getValues } = useForm({
@@ -83,6 +134,7 @@ export const Profile = () => {
         setFormData: state.setFormData,
         updateSelf: state.updateSelf,
         setShowCheckUserExist: state.setShowCheckUserExist,
+        setShowChangePassword: state.setShowChangePassword,
       };
     }),
   );
@@ -201,8 +253,16 @@ export const Profile = () => {
               </Button>
             </form>
           </div>
+          <div className='mt-2'>
+            <Tooltip title={t('Change Password')}>
+              <IconButton className='' onClick={() => userStore.setShowChangePassword(true)}>
+                <UserCog size={16} />
+              </IconButton>
+            </Tooltip>
+          </div>
         </div>
         <CheckUserExistModal />
+        <ChangePasswordModal />
       </div>
     </div>
   );

src/pages/user/store/index.ts

@@ -17,6 +17,8 @@ type UserStore = {
   updateData: (data: any) => Promise<void>;
   updateSelf: (data: any) => Promise<any>;
   deleteData: (id: string) => Promise<void>;
+  showChangePassword: boolean;
+  setShowChangePassword: (showChangePassword: boolean) => void;
 };
 export const useUserStore = create<UserStore>((set, get) => {
   return {
@@ -88,5 +90,7 @@ export const useUserStore = create<UserStore>((set, get) => {
         message.error(res.message || 'Request failed');
       }
     },
+    showChangePassword: false,
+    setShowChangePassword: (showChangePassword) => set({ showChangePassword }),
   };
 });