124 lines
3.2 KiB
TypeScript
124 lines
3.2 KiB
TypeScript
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; |