74 lines
4.0 KiB
JavaScript
74 lines
4.0 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
||
import { Switch, Form, Input, Space, Tag, InputNumber, } from 'antd';
|
||
import Styles from './web.module.less';
|
||
import EditorRegexs from "../password/editorRegexs";
|
||
export default function LoginName(props) {
|
||
const { passport, t, changeEnabled, updateConfig } = props;
|
||
const { id, type, enabled, stateColor } = passport;
|
||
const config = passport.config || {};
|
||
const [min, setMin] = useState(config?.min);
|
||
const [max, setMax] = useState(config?.max);
|
||
const [regexs, setRegexs] = useState(config?.regexs || []);
|
||
const [register, setRegister] = useState(false);
|
||
const [tip, setTip] = useState(config?.tip || '');
|
||
useEffect(() => {
|
||
setMin(config?.min || 2);
|
||
setMax(config?.max || 8);
|
||
setRegexs(config?.regexs || []);
|
||
setRegister(!!config?.register);
|
||
setTip(config?.tip || '');
|
||
}, [config]);
|
||
return (<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
|
||
changeEnabled(checked);
|
||
}}/>
|
||
</div>
|
||
{enabled &&
|
||
<div>
|
||
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
|
||
<Form.Item label="账号位数范围" tooltip="账号位数范围">
|
||
<Space>
|
||
<InputNumber min={1} max={max} value={min} onChange={(value) => {
|
||
updateConfig(id, config, 'min', value, 'loginName');
|
||
}}/>
|
||
<div>~</div>
|
||
<InputNumber min={min} value={max} onChange={(value) => {
|
||
updateConfig(id, config, 'max', value, 'loginName');
|
||
}}/>
|
||
</Space>
|
||
</Form.Item>
|
||
<Form.Item label="开启正则校验" tooltip="开启后将使用下方设置的正则表达式对账号进行校验">
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={!!config?.verify} onChange={(checked) => {
|
||
updateConfig(id, config, 'verify', checked, 'loginName');
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="正则" tooltip="可同时设置多组正则，系统将按照【与】逻辑进行校验，每个正则请以^开头以$结尾">
|
||
<>
|
||
{!!config?.verify ? (<>
|
||
<EditorRegexs regexs={regexs} updateRegexs={(regexs) => {
|
||
updateConfig(id, config, 'regexs', regexs, 'loginName');
|
||
}}/>
|
||
</>) : (<div>暂未启用正则校验，无需设置</div>)}
|
||
</>
|
||
</Form.Item>
|
||
<Form.Item label="是否允许注册账号" tooltip="开启后用户可自行注册账号">
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={!!config?.register} onChange={(checked) => {
|
||
updateConfig(id, config, 'register', checked, 'loginName');
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="账号提示语" tooltip="此提示语将显示在用户设置账号的输入框附近，用于清晰告知用户账号的格式要求">
|
||
<Input placeholder="请输入账号提示语" type="text" value={tip} onChange={(e) => {
|
||
setTip(e.target.value);
|
||
}} onBlur={() => {
|
||
if (tip && tip !== config?.tip) {
|
||
updateConfig(id, config, 'tip', tip, 'loginName');
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>}
|
||
</div>);
|
||
}
|