修改密码

src/layout/head/Head.tsx

@@ -7,6 +7,7 @@ import {useContext, useEffect, useState} from "react";
 import {get, put} from "../../util/AjaxUtils.ts";
 import {GlobalContext, GlobalDataActionType, GlobalDispatchContext} from "../../context/GlobalContext.ts";
 import UserEdit from "../../route/user/UserEdit.tsx";
+import PasswordChange from "../../route/password/PasswordChange.tsx";
 
 export default function Head() {
     const globalContext = useContext(GlobalContext);
@@ -15,6 +16,7 @@ export default function Head() {
     const [modal, modalHolder] = Modal.useModal();
     const [loading, setLoading] = useState<boolean>(false);
     const [isSelfModalOpen, setIsSelfModalOpen] = useState(false);
+    const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
 
     useEffect(() => {
         get({
@@ -58,6 +60,9 @@ export default function Head() {
                     <span className="title">修改密码</span>
                 </div>
             ),
+            onClick: () => {
+                setIsPasswordModalOpen(true);
+            }
         },
         {
             key: 'logout',
@@ -108,7 +113,7 @@ export default function Head() {
                    }} >
                 <UserEdit handleConfirm={(data) => {
                     modal.confirm({
-                        title: 'Confirm',
+                        title: '提示',
                         content: '确定保存吗？',
                         okText: '确认',
                         cancelText: '取消',
@@ -133,7 +138,43 @@ export default function Head() {
                                     setLoading(false);
                                 }
                             })
-                            console.log(data);
+                        }
+                    });
+                }}/>
+            </Modal>
+            <Modal open={isPasswordModalOpen}
+                   title="修改密码"
+                   footer={false}
+                   onCancel={() => {
+                       setIsPasswordModalOpen(false)
+                   }} >
+                <PasswordChange handleConfirm={(data) => {
+                    modal.confirm({
+                        title: '提示',
+                        content: '确定修改吗？',
+                        okText: '确认',
+                        cancelText: '取消',
+                        okButtonProps: {
+                            style: {
+                                backgroundColor: 'var(--color-primary)'
+                            }
+                        },
+                        onOk: () => {
+                            put({
+                                messageApi,
+                                url: '/api/user/update-password',
+                                body: data,
+                                onBefore() {
+                                    setLoading(true);
+                                },
+                                onSuccess() {
+                                    setIsPasswordModalOpen(false);
+                                    messageApi.success('修改成功，重新登录生效');
+                                },
+                                onFinally() {
+                                    setLoading(false);
+                                }
+                            })
                         }
                     });
                 }}/>

src/route/password/PasswordChange.tsx

@@ -0,0 +1,70 @@
+import {Button, Flex, Form, Input} from "antd";
+import {useEffect} from "react";
+
+type FormFieldType = {
+    oldPassword: string;
+    newPassword: string;
+    confirmNewPassword: string;
+}
+
+export interface IPasswordChangeProps {
+    handleConfirm(data: FormFieldType): void;
+}
+
+export default function PasswordChange(props: IPasswordChangeProps) {
+
+    const [form] = Form.useForm<FormFieldType>();
+
+    useEffect(() => {
+        form.setFieldsValue({
+            oldPassword: '',
+            newPassword: '',
+            confirmNewPassword: '',
+        })
+    }, [])
+
+    return (
+        <Form
+            layout="vertical"
+            form={form}
+            onFinish={(data) => {
+                props.handleConfirm(data);
+            }}
+        >
+            <Form.Item label="旧密码"
+                       name="oldPassword"
+                       rules={[{required: true, message: '请输入旧密码'}]}
+            >
+                <Input.Password placeholder="请输入旧密码"/>
+            </Form.Item>
+            <Form.Item label="新密码"
+                       name="newPassword"
+                       rules={[{required: true, message: '请输入新密码'}]}
+            >
+                <Input.Password placeholder="请输入新密码"/>
+            </Form.Item>
+            <Form.Item label="确认密码"
+                       name="confirmNewPassword"
+                       rules={[{required: true, message: '请输入确认密码'}, ({getFieldValue}) => ({
+                           validator(_, value) {
+                               if (!value || getFieldValue('newPassword') === value) {
+                                   return Promise.resolve();
+                               }
+                               return Promise.reject(new Error('密码需要一致'));
+                           }
+                       })]}
+            >
+                <Input.Password placeholder="请输入确认密码"/>
+            </Form.Item>
+            <Form.Item wrapperCol={{span: 24}}>
+                <Flex align="center" justify="center" gap="large">
+                    <Button type="primary"
+                            htmlType="submit"
+                            style={{backgroundColor: 'var(--color-primary)'}}>
+                        保存
+                    </Button>
+                </Flex>
+            </Form.Item>
+        </Form>
+    )
+}