shihezi-admin/src/pages/System/User/components/ResetPwd.tsx

import React from 'react';
import { Form, Modal } from 'antd';
import { useIntl } from '@umijs/max';
import { ProForm, ProFormText } from '@ant-design/pro-components';

/* *
 *
 * @author whiteshader@163.com
 * @datetime  2023/02/06
 * 
 * */

export type FormValueType = any & Partial<API.System.User>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  open: boolean;
  values: Partial<API.System.User>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [form] = Form.useForm();
  const loginPassword = Form.useWatch('password', form);
  const userId = props.values.userId;

  const intl = useIntl();
  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };
  const handleFinish = async (values: Record<string, any>) => {
    props.onSubmit({ ...values, userId } as FormValueType);
  };

  // 密码强度校验
  const validatePasswordStrength = (rule: any, value: string) => {
    if (!value) {
      return Promise.reject(new Error('登录密码不可为空。'));
    }

    if (value.length < 8) {
      return Promise.reject(new Error('密码长度至少8位。'));
    }

    // 检查密码复杂度：至少包含大小写字母、数字、特殊字符中的三种
    const hasLowerCase = /[a-z]/.test(value);
    const hasUpperCase = /[A-Z]/.test(value);
    const hasNumber = /[0-9]/.test(value);
    const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(value);

    const complexityCount = [hasLowerCase, hasUpperCase, hasNumber, hasSpecialChar].filter(Boolean).length;

    if (complexityCount < 3) {
      return Promise.reject(new Error('密码需包含大小写字母、数字、特殊字符中的至少三种。'));
    }

    return Promise.resolve();
  };

  // 确认密码校验
  const checkPassword = (rule: any, value: string) => {
    if (!value) {
      return Promise.reject(new Error('确认密码不可为空。'));
    }
    
    if (value !== loginPassword) {
      return Promise.reject(new Error('两次密码输入不一致'));
    }
    
    return Promise.resolve();
  };

  return (
    <Modal
      width={640}
      title={intl.formatMessage({
        id: 'system.user.reset.password',
        defaultMessage: '密码重置',
      })}
      open={props.open}
      destroyOnClose
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <ProForm
        grid={true}
        form={form}
        layout="horizontal"
        onFinish={handleFinish}
        initialValues={{
          password: '',
          confirm_password: '',
        }}
      >
        <p>请输入用户{props.values.userName}的新密码！</p>
        <ProFormText.Password
          name="password"
          label="登录密码"
          rules={[
            {
              validator: validatePasswordStrength,
            },
          ]}
          placeholder="请输入新密码"
        />
        <ProFormText.Password
          name="confirm_password"
          label="确认密码"
          rules={[
            {
              validator: checkPassword,
            },
          ]}
          placeholder="请再次输入密码"
        />
      </ProForm>
    </Modal>
  );
};

export default UpdateForm;