198 lines
8.8 KiB
JavaScript
198 lines
8.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Form, Input } from 'antd';
|
|
import UserRelation from './userRelation';
|
|
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
|
|
import { encryptPasswordSha1 } from '../../../../utils/password';
|
|
export default function Render(props) {
|
|
const { name, isNew, nickname, relations, oakFullpath, entity, entityId, setPasswordConfirm, passwordRequired, pwdMin, pwdMax, needVerify, regexs, tip, mode, } = props.data;
|
|
const { t, update } = props.methods;
|
|
const [form] = Form.useForm();
|
|
const [password, setPassword] = useState('');
|
|
const [password2, setPassword2] = useState('');
|
|
const [validateHelp, setValidateHelp] = useState('');
|
|
const [validateHelp1, setValidateHelp1] = useState('');
|
|
const [validateStatus, setValidateStatus] = useState('');
|
|
useEffect(() => {
|
|
form.setFieldsValue({
|
|
name,
|
|
});
|
|
}, [name]);
|
|
useEffect(() => {
|
|
form.setFieldsValue({
|
|
nickname,
|
|
});
|
|
}, [nickname]);
|
|
return (<>
|
|
<Form form={form} colon labelCol={{ span: 4 }} wrapperCol={{ span: 8 }}>
|
|
<Form.Item style={{ marginBottom: 0 }} label={!isNew ? t('existedUser') : t('newUser')} colon={false}/>
|
|
<Form.Item label={t('user:attr.name')} name="name" rules={[
|
|
{
|
|
required: true,
|
|
},
|
|
]}>
|
|
<>
|
|
<Input disabled={!isNew} onChange={(e) => {
|
|
const strValue = e.target.value;
|
|
if (isNew) {
|
|
update({
|
|
name: strValue,
|
|
});
|
|
}
|
|
}} value={name} placeholder={t('placeholder.name')}/>
|
|
</>
|
|
</Form.Item>
|
|
<Form.Item label={t('user:attr.nickname')} name="nickname">
|
|
<>
|
|
<Input disabled={!isNew} value={nickname} onChange={(e) => {
|
|
const strValue = e.target.value;
|
|
if (isNew) {
|
|
update({
|
|
nickname: strValue,
|
|
});
|
|
}
|
|
}} placeholder={t('placeholder.nickname')}/>
|
|
</>
|
|
</Form.Item>
|
|
{isNew ? (<>
|
|
<Form.Item label={t('user:attr.password')} name="password" help={validateHelp1} tooltip={tip} rules={[
|
|
{
|
|
required: passwordRequired,
|
|
message: '请输入密码',
|
|
validator: (_, value) => {
|
|
if (!value && !password2) {
|
|
setValidateHelp1('');
|
|
setValidateStatus('');
|
|
return;
|
|
}
|
|
if (value.length < pwdMin) {
|
|
setValidateHelp1(`密码最短长度为${pwdMin}位`);
|
|
setValidateStatus('error');
|
|
return;
|
|
}
|
|
else if (value.length > pwdMax) {
|
|
setValidateHelp1(`密码最大长度为${pwdMax}位`);
|
|
setValidateStatus('error');
|
|
return;
|
|
}
|
|
else if (!!needVerify && regexs && regexs.length > 0) {
|
|
for (const regex of regexs) {
|
|
const pattern = new RegExp(regex);
|
|
if (!pattern.test(value)) {
|
|
setValidateHelp1(`当前密码较弱`);
|
|
setValidateHelp('');
|
|
setValidateStatus('error');
|
|
return;
|
|
}
|
|
}
|
|
if (password2) {
|
|
setValidateHelp1('');
|
|
setValidateHelp(value === password2
|
|
? ''
|
|
: '两次输入的密码不一致，请检查');
|
|
setValidateStatus(value === password2
|
|
? 'success'
|
|
: 'error');
|
|
}
|
|
else {
|
|
setValidateHelp('请再次确认密码');
|
|
setValidateHelp1('');
|
|
setValidateStatus('error');
|
|
}
|
|
}
|
|
else {
|
|
if (password2) {
|
|
setValidateHelp(value === password2
|
|
? ''
|
|
: '两次输入的密码不一致，请检查');
|
|
setValidateStatus(value === password2
|
|
? 'success'
|
|
: 'error');
|
|
}
|
|
else {
|
|
setValidateHelp('请再次确认密码');
|
|
setValidateHelp1('');
|
|
setValidateStatus('error');
|
|
}
|
|
}
|
|
},
|
|
},
|
|
]} hasFeedback validateStatus={validateStatus}>
|
|
<Input.Password value={password} onChange={(e) => {
|
|
const strValue = e.target.value;
|
|
setPassword(strValue);
|
|
if (mode !== 'sha1') {
|
|
update({
|
|
password: strValue,
|
|
});
|
|
}
|
|
else {
|
|
update({
|
|
password: null,
|
|
});
|
|
}
|
|
setPasswordConfirm(password2 || strValue
|
|
? password2 === strValue
|
|
: true);
|
|
}} iconRender={(visible) => visible ? (<EyeTwoTone />) : (<EyeInvisibleOutlined />)} placeholder={t('placeholder.password', { min: pwdMin })}/>
|
|
</Form.Item>
|
|
<Form.Item label={'确认密码'} name="confirmPassword" rules={[
|
|
{
|
|
required: passwordRequired,
|
|
validator: (_, value) => {
|
|
if (!value && !password) {
|
|
setValidateHelp('');
|
|
setValidateStatus('');
|
|
return;
|
|
}
|
|
if (password.length < pwdMin || password.length > pwdMax) {
|
|
return;
|
|
}
|
|
else if (!!needVerify && regexs && regexs.length > 0) {
|
|
for (const regex of regexs) {
|
|
const pattern = new RegExp(regex);
|
|
if (!pattern.test(password)) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
setValidateHelp(value === password
|
|
? ''
|
|
: '两次输入的密码不一致，请检查');
|
|
setValidateStatus(value === password
|
|
? 'success'
|
|
: 'error');
|
|
},
|
|
},
|
|
]} validateTrigger="onChange" help={validateHelp} validateStatus={validateStatus} hasFeedback>
|
|
<Input.Password value={password2} onChange={(e) => {
|
|
const strValue = e.target.value;
|
|
setPassword2(strValue);
|
|
if (password === strValue) {
|
|
if (mode !== 'plain') {
|
|
update({
|
|
passwordSha1: encryptPasswordSha1(password),
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
update({
|
|
passwordSha1: null,
|
|
});
|
|
}
|
|
setPasswordConfirm(password || strValue
|
|
? password === strValue
|
|
: true);
|
|
}} iconRender={(visible) => visible ? (<EyeTwoTone />) : (<EyeInvisibleOutlined />)} placeholder={t('placeholder.confirmPassword')}/>
|
|
</Form.Item>
|
|
</>) : null}
|
|
<Form.Item label={t('auth')} rules={[
|
|
{
|
|
required: true,
|
|
},
|
|
]} name="relation">
|
|
<UserRelation oakAutoUnmount={true} oakPath={`${oakFullpath}.userRelation$user`} entity={entity} entityId={entityId} relations={relations}/>
|
|
</Form.Item>
|
|
</Form>
|
|
</>);
|
|
}
|