143 lines
4.1 KiB
TypeScript
143 lines
4.1 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { Form, Input, Button, message, Card, Typography } from 'antd';
|
||
import { LockOutlined } from '@ant-design/icons';
|
||
import { request, useModel } from '@umijs/max';
|
||
import { isEmpty } from 'lodash';
|
||
|
||
const { Title } = Typography;
|
||
|
||
const ResetPassword: React.FC = () => {
|
||
const [form] = Form.useForm();
|
||
const [loading, setLoading] = useState(false);
|
||
const [messageApi, contextHolder] = message.useMessage();
|
||
const { initialState, setInitialState } = useModel('@@initialState');
|
||
|
||
// 提交重置密码请求
|
||
const handleResetPassword = async () => {
|
||
try {
|
||
debugger;
|
||
const values = form.getFieldsValue();
|
||
if (initialState?.currentUser?.id == null) {
|
||
messageApi.error('用户信息不存在，请重新登录');
|
||
return;
|
||
}
|
||
|
||
// 检查两次密码是否一致
|
||
if (values.newPassword !== values.confirmPassword) {
|
||
messageApi.error('两次输入的密码不一致');
|
||
return;
|
||
}
|
||
if (isEmpty(values.newPassword)) {
|
||
messageApi.error('请输入新密码');
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
// 发送重置密码请求
|
||
const res = await request<ApiResponse.SuccessItem<string>>(`/lms/User/ResetPassword/${initialState?.currentUser?.id}`, {
|
||
method: 'POST',
|
||
data: {
|
||
"newPassword": values.newPassword,
|
||
}
|
||
});
|
||
|
||
if (res.code !== 1) {
|
||
throw new Error(res.message);
|
||
}
|
||
messageApi.success('密码重置成功');
|
||
form.resetFields();
|
||
} catch (error: any) {
|
||
messageApi.error(error.message || '密码重置失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Card
|
||
bordered={false}
|
||
style={{
|
||
borderRadius: '8px',
|
||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
|
||
margin: "20px"
|
||
}}
|
||
>
|
||
{contextHolder}
|
||
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||
<LockOutlined style={{ fontSize: '28px', color: '#1890ff', marginBottom: '12px' }} />
|
||
<Title level={4} style={{ margin: 0 }}>设置新密码</Title>
|
||
</div>
|
||
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
name="resetPassword"
|
||
size="large"
|
||
onFinish={handleResetPassword}
|
||
>
|
||
<Form.Item
|
||
name="newPassword"
|
||
rules={[
|
||
{ required: true, message: '请输入新密码' },
|
||
{
|
||
pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?.&.])[A-Za-z\d@$!%*?.&]{8,}$/,
|
||
message: '密码必须至少8位，包含大小写字母、数字和特殊字符'
|
||
}
|
||
]}
|
||
>
|
||
<Input.Password
|
||
prefix={<LockOutlined style={{ color: '#d9d9d9' }} />}
|
||
placeholder="请输入新密码"
|
||
style={{
|
||
height: '45px',
|
||
borderRadius: '4px',
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
name="confirmPassword"
|
||
dependencies={['newPassword']}
|
||
rules={[
|
||
{ required: true, message: '请再次输入新密码' },
|
||
({ getFieldValue }) => ({
|
||
validator(_, value) {
|
||
if (!value || getFieldValue('newPassword') === value) {
|
||
return Promise.resolve();
|
||
}
|
||
return Promise.reject(new Error('两次输入的密码不一致'));
|
||
},
|
||
})
|
||
]}
|
||
>
|
||
<Input.Password
|
||
prefix={<LockOutlined style={{ color: '#d9d9d9' }} />}
|
||
placeholder="请再次输入新密码"
|
||
style={{
|
||
height: '45px',
|
||
borderRadius: '4px',
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
|
||
<Form.Item style={{ marginTop: '24px', marginBottom: '0' }}>
|
||
<Button
|
||
type="primary"
|
||
htmlType="submit"
|
||
loading={loading}
|
||
style={{
|
||
width: '100%',
|
||
height: '45px',
|
||
borderRadius: '4px',
|
||
}}
|
||
>
|
||
确认修改
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default ResetPassword;
|