初始化

src/component/Header/ChangePasswordModal.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Button, Flex, Form, Input, Modal, Typography} from "antd";
+
+const ChangePasswordModal = props => {
+        const formLayout = {
+            labelCol: {span: 4},
+            wrapperCol: {span: 20},
+        };
+        const {commonAxios, messageApi, open, setOpen, closable} = props;
+        const [form] = Form.useForm();
+
+        const onSubmit = (values) => {
+            const passwordConfirmCheck = values.newPassword === values.confirmNewPassword;
+            if (!passwordConfirmCheck) {
+                messageApi.error('两次输入的密码不一致，请重新输入');
+                return;
+            }
+            const changeRequest = {
+                originalPassword: values.originalPassword,
+                newPassword: values.newPassword,
+            }
+            commonAxios.put('/api/auth/change/password', changeRequest)
+                .then(response => {
+                    let result = response.data.success;
+                    if (result) {
+                        messageApi.success('修改密码成功');
+                        setOpen(false);
+                        form.resetFields();
+                    }
+                })
+        }
+
+        const onCancel = () => {
+            setOpen(false);
+            form.resetFields();
+        }
+
+        return (
+            <div>
+                <Modal
+                    open={open}
+                    title="修改密码"
+                    onCancel={onCancel}
+                    closable={closable}
+                    maskClosable={closable}
+                    footer={
+                        <Flex justify={"end"} align={"center"} gap={"middle"}>
+                            <Button disabled={!closable} onClick={onCancel}>取消</Button>
+                            <Button type={"primary"} onClick={() => form.submit()}>确认</Button>
+                        </Flex>
+                    }
+                >
+                    {!closable ? <Typography.Text level={5}
+                                                  style={{color: "red"}}>您的密码已过期，请修改密码！</Typography.Text> : <></>}
+                    <Form
+                        form={form}
+                        {...formLayout}
+                        style={{marginTop: 20}}
+                        onFinish={onSubmit}
+                    >
+                        <Form.Item label={'旧密码'} name='originalPassword'
+                                   rules={[{required: true, message: '请输入旧密码'}]}>
+                            <Input type={'password'}/>
+                        </Form.Item>
+                        <Form.Item label={'新密码'} name='newPassword'
+                                   rules={[{required: true, message: '请输入新密码'}]}>
+                            <Input type={'password'}/>
+                        </Form.Item>
+                        <Form.Item label={'确认密码'} name='confirmNewPassword'
+                                   rules={[{required: true, message: '请再次输入新密码'}]}>
+                            <Input type={'password'}/>
+                        </Form.Item>
+
+                    </Form>
+                </Modal>
+            </div>
+        );
+    }
+;
+
+ChangePasswordModal.propTypes = {
+    commonAxios: PropTypes.func.isRequired,
+    messageApi: PropTypes.object.isRequired,
+    open: PropTypes.bool.isRequired,
+    setOpen: PropTypes.func.isRequired,
+    closable: PropTypes.bool.isRequired,
+};
+
+export default ChangePasswordModal;