Ant Design 密码修改模态框 - React 组件

import { Modal, Form, Input, Row, Col } from 'antd'; import { PASSWORD_REGEX } from 'constants/antd'; import { AUTH_CHANGE_PASSWORD } from 'constants/api'; import React, { useState } from 'react'; import { firePostJsonRequest, firePostRequest } from 'services/app'; import { openNotification, showSuccessMsg } from 'utils/antd'; import appStore from 'stores/appStore'; import ICON_SUCCESS from 'assets/icons/icon_success_password.png'; import ICON_ERROR from 'assets/icons/icon_error_password.png';

const PasswordModal = ({ visible = false, onCancel = () => {} }) => { const [form] = Form.useForm(); const [confirmLoading, setConfirmLoading] = useState(false); const [oldImgUrl, setOldImgUrl] = useState(''); const [newImgUrl, setNewImgUrl] = useState(''); const [confirmImgUrl, setConfirmImgUrl] = useState('');

const validateOldRules = (_, value) => { if (value) { setOldImgUrl(ICON_SUCCESS); } }

const validateRules = (_, value) => { if (value === form.getFieldValue('oldPassword')) { setNewImgUrl(ICON_ERROR); return Promise.reject(new Error('新密码不能和原密码相同')); } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/.test(value)) { setNewImgUrl(ICON_ERROR); return Promise.reject(new Error('正确的密码需要包含数字+字母（大小写均可）')); } else { setNewImgUrl(ICON_SUCCESS); return Promise.resolve(); } }

const validateConfirmRules = (_, value) => { if (!value || form.getFieldValue('newPassword') === value) { setConfirmImgUrl(ICON_SUCCESS); return Promise.resolve(); } setConfirmImgUrl(ICON_ERROR); return Promise.reject(new Error('两次密码输入不一致，请输入确认密码')); }

const onOk = () => { form.validateFields().then((values) => { setConfirmLoading(true); firePostJsonRequest(AUTH_CHANGE_PASSWORD, values).then((res) => { setConfirmLoading(false); if (res.code !== 200) { openNotification('error', '修改密码失败', res.message); return; } showSuccessMsg('修改密码成功，请用新密码重新登录！'); onCancel(); appStore.logout(() => { window.location.href = '/account/login'; }); }); }); }

return ( <Modal wrapClassName={'hx-modal-wrap'} width={'6rem'} visible={visible} destroyOnClose onCancel={onCancel} onOk={onOk} confirmLoading={confirmLoading} keyboard={false} maskClosable={false} closable={false} title={'修改密码'} > <Form form={form} layout={'horizontal'} colon={false} > <Form.Item label={'原始密码'} name={'oldPassword'} rules={[{ required: true }, { validator: validateOldRules }]} labelCol={{ style: { width: 110 } }} labelAlign='right' > <Input.Password placeholder='请输入密码' /> </Form.Item> {oldImgUrl && } <Form.Item label={'新密码'} name={'newPassword'} labelCol={{ style: { width: 110 } }} labelAlign='right' rules={[ { required: true }, { validator: validateRules } ]} > <Input.Password placeholder='请输入密码，8位以上数字+字母组合' /> </Form.Item> {newImgUrl && } <Form.Item label={'确认新密码'} name={'confirmPassword'} dependencies={['newPassword']} labelCol={{ style: { width: 110 } }} labelAlign='right' rules={[ { required: true }, { validator: validateConfirmRules } ]} > <Input.Password placeholder='请输入密码，8位以上数字+字母组合' /> </Form.Item> {confirmImgUrl && } ) }

export default PasswordModal;