add change password

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>
   );