LaiToolManagementSystem/src/pages/User/UserCenter/ModifyPassword.tsx

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;