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