update password

client/src/pages/account/components/Info.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Box, Flex, Button, useDisclosure } from '@chakra-ui/react';
+import { Box, Flex, Button, useDisclosure, useTheme, ModalBody } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
 import { putUserInfo } from '@/api/user';
@@ -7,35 +7,48 @@ import { useToast } from '@/hooks/useToast';
 import { useGlobalStore } from '@/store/global';
 import { useUserStore } from '@/store/user';
 import { UserType } from '@/types/user';
-import { useRouter } from 'next/router';
 import { useQuery } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
 import { useSelectFile } from '@/hooks/useSelectFile';
 import { compressImg } from '@/utils/file';
 import { getErrText } from '@/utils/tools';
 import { feConfigs } from '@/store/static';
+import { useTranslation } from 'react-i18next';
 
 import Loading from '@/components/Loading';
 import Avatar from '@/components/Avatar';
+import MyIcon from '@/components/Icon';
+import MyTooltip from '@/components/MyTooltip';
 
 const PayModal = dynamic(() => import('./PayModal'), {
   loading: () => <Loading fixed={false} />,
   ssr: false
 });
+const UpdatePswModal = dynamic(() => import('./UpdatePswModal'), {
+  loading: () => <Loading fixed={false} />,
+  ssr: false
+});
 
 const UserInfo = () => {
-  const router = useRouter();
+  const theme = useTheme();
+  const { t } = useTranslation();
   const { userInfo, updateUserInfo, initUserInfo } = useUserStore();
   const { setLoading } = useGlobalStore();
-  const { reset } = useForm<UserUpdateParams>({
+  const { reset, register } = useForm<UserUpdateParams>({
     defaultValues: userInfo as UserType
   });
+
   const { toast } = useToast();
   const {
     isOpen: isOpenPayModal,
     onClose: onClosePayModal,
     onOpen: onOpenPayModal
   } = useDisclosure();
+  const {
+    isOpen: isOpenUpdatePsw,
+    onClose: onCloseUpdatePsw,
+    onOpen: onOpenUpdatePsw
+  } = useDisclosure();
   const { File, onOpen: onOpenSelectFile } = useSelectFile({
     fileType: '.jpg,.png',
     multiple: false
@@ -98,41 +111,68 @@ const UserInfo = () => {
     }
   });
   return (
-    <Flex flexDirection={'column'} alignItems={'center'} py={[0, 8]} fontSize={['lg', 'xl']}>
-      <Flex mt={6} alignItems={'center'} w={'260px'}>
-        <Box flex={'0 0 50px'}>头像:</Box>
-        <Box flex={1} pl={10}>
-          <Avatar
-            src={userInfo?.avatar}
-            w={['34px', '44px']}
-            h={['34px', '44px']}
-            cursor={'pointer'}
-            title={'点击切换头像'}
-            onClick={onOpenSelectFile}
-          />
-        </Box>
+    <Box display={['block', 'flex']} py={[2, 10]} justifyContent={'center'} fontSize={['lg', 'xl']}>
+      <Flex
+        flexDirection={'column'}
+        alignItems={'center'}
+        cursor={'pointer'}
+        onClick={onOpenSelectFile}
+      >
+        <MyTooltip label={'更换头像'}>
+          <Box
+            w={['44px', '54px']}
+            h={['44px', '54px']}
+            borderRadius={'50%'}
+            border={theme.borders.base}
+            boxShadow={'0 0 5px rgba(0,0,0,0.1)'}
+            mb={2}
+          >
+            <Avatar src={userInfo?.avatar} w={'100%'} h={'100%'} />
+          </Box>
+        </MyTooltip>
+
+        <Flex alignItems={'center'} fontSize={'sm'} color={'myGray.600'}>
+          <MyIcon mr={1} name={'edit'} w={'14px'} />
+          更换
+        </Flex>
       </Flex>
-      <Flex mt={6} alignItems={'center'} w={'260px'}>
-        <Box flex={'0 0 50px'}>账号:</Box>
-        <Box>{userInfo?.username}</Box>
-      </Flex>
-      {feConfigs?.show_userDetail && (
-        <Box mt={6} w={'260px'} whiteSpace={'nowrap'}>
-          <Flex alignItems={'center'}>
-            <Box flex={'0 0 50px'}>余额:</Box>
-            <Box>
-              <strong>{userInfo?.balance.toFixed(3)}</strong> 元
-            </Box>
-            <Button size={['xs', 'sm']} w={['70px', '80px']} ml={5} onClick={onOpenPayModal}>
-              充值
-            </Button>
-          </Flex>
-        </Box>
-      )}
+      <Box
+        display={['flex', 'block']}
+        flexDirection={'column'}
+        alignItems={'center'}
+        ml={[0, 10]}
+        mt={[6, 0]}
+      >
+        <Flex alignItems={'center'} w={['85%', '300px']}>
+          <Box flex={'0 0 50px'}>账号:</Box>
+          <Box flex={1}>{userInfo?.username}</Box>
+        </Flex>
+        <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
+          <Box flex={'0 0 50px'}>密码:</Box>
+          <Box flex={1}>*****</Box>
+          <Button size={['sm', 'md']} variant={'base'} ml={5} onClick={onOpenUpdatePsw}>
+            变更
+          </Button>
+        </Flex>
+        {feConfigs?.show_userDetail && (
+          <Box mt={6} whiteSpace={'nowrap'} w={['85%', '300px']}>
+            <Flex alignItems={'center'}>
+              <Box flex={'0 0 50px'}>余额:</Box>
+              <Box flex={1}>
+                <strong>{userInfo?.balance.toFixed(3)}</strong> 元
+              </Box>
+              <Button size={['sm', 'md']} ml={5} onClick={onOpenPayModal}>
+                充值
+              </Button>
+            </Flex>
+          </Box>
+        )}
+      </Box>
 
       {isOpenPayModal && <PayModal onClose={onClosePayModal} />}
+      {isOpenUpdatePsw && <UpdatePswModal onClose={onCloseUpdatePsw} />}
       <File onSelect={onSelectFile} />
-    </Flex>
+    </Box>
   );
 };
 

client/src/pages/account/components/UpdatePswModal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ModalBody, Box, Flex, Input, ModalFooter, Button } from '@chakra-ui/react';
+import MyModal from '@/components/MyModal';
+import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { useRequest } from '@/hooks/useRequest';
+import { updatePasswordByOld } from '@/api/user';
+
+const UpdatePswModal = ({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation();
+  const { register, handleSubmit } = useForm({
+    defaultValues: {
+      oldPsw: '',
+      newPsw: '',
+      confirmPsw: ''
+    }
+  });
+
+  const { mutate: onSubmit, isLoading } = useRequest({
+    mutationFn: (data) => {
+      return updatePasswordByOld(data);
+    },
+    onSuccess() {
+      onClose();
+    },
+    successToast: t('user.Update password succseful'),
+    errorToast: t('user.Update password failed')
+  });
+
+  return (
+    <MyModal isOpen onClose={onClose} title={t('user.Update Password')}>
+      <ModalBody>
+        <Flex alignItems={'center'}>
+          <Box flex={'0 0 70px'}>旧密码:</Box>
+          <Input flex={1} type={'password'} {...register('oldPsw', { required: true })}></Input>
+        </Flex>
+        <Flex alignItems={'center'} mt={5}>
+          <Box flex={'0 0 70px'}>新密码:</Box>
+          <Input flex={1} type={'password'} {...register('newPsw', { required: true })}></Input>
+        </Flex>
+        <Flex alignItems={'center'} mt={5}>
+          <Box flex={'0 0 70px'}>确认密码:</Box>
+          <Input flex={1} type={'password'} {...register('confirmPsw', { required: true })}></Input>
+        </Flex>
+      </ModalBody>
+      <ModalFooter>
+        <Button mr={3} variant={'base'} onClick={onClose}>
+          取消
+        </Button>
+        <Button isLoading={isLoading} onClick={handleSubmit((data) => onSubmit(data))}>
+          确认
+        </Button>
+      </ModalFooter>
+    </MyModal>
+  );
+};
+
+export default UpdatePswModal;