90 lines
3.5 KiB
React
90 lines
3.5 KiB
React
|
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;
|