83 lines
4.8 KiB
JavaScript
83 lines
4.8 KiB
JavaScript
import React, { useState } from "react";
|
||
import { Switch, Form, Input, Space, Tag, InputNumber, Radio, Tooltip, } from 'antd';
|
||
import Styles from './web.module.less';
|
||
import EditorRegexs from "./editorRegexs";
|
||
export default function Password(props) {
|
||
const { passport, t, changeEnabled, updateConfig } = props;
|
||
const { id, type, enabled, stateColor } = passport;
|
||
const config = passport.config || {};
|
||
const [min, setMin] = useState(config?.min || 8);
|
||
const [max, setMax] = useState(config?.max || 24);
|
||
const [regexs, setRegexs] = useState(config?.regexs || []);
|
||
const [tip, setTip] = useState(config?.tip || '');
|
||
const [mode, setMode] = useState(config?.mode || 'all');
|
||
// useEffect(() => {
|
||
// const newMin = config?.min || 8;
|
||
// const newMax = config?.max || 24;
|
||
// const newRegexs = config?.regexs || [];
|
||
// const newTip = config?.tip || '';
|
||
// const newMode = config?.mode || 'all';
|
||
// if (min !== newMin) setMin(newMin);
|
||
// if (max !== newMax) setMax(newMax);
|
||
// if (JSON.stringify(regexs) !== JSON.stringify(newRegexs)) setRegexs(newRegexs);
|
||
// if (tip !== newTip) setTip(newTip);
|
||
// if (mode !== newMode) setMode(newMode);
|
||
// }, [config?.min, config?.max, config?.regexs, config?.tip, config?.mode, config?.verify]);
|
||
return (<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
|
||
<Tooltip title="密码登录方式已调整，请关闭该登录方式，对于密码的相关配置请前往系统配置管理中修改密码设置。" placement="topLeft">
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
|
||
changeEnabled(checked);
|
||
}} disabled={!enabled}/>
|
||
</Tooltip>
|
||
</div>
|
||
{enabled &&
|
||
<div>
|
||
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
|
||
<Form.Item label="密码存储模式" tooltip="密码存储模式">
|
||
<Radio.Group onChange={(e) => updateConfig(id, config, 'mode', e.target.value, 'password')} value={mode}>
|
||
<Radio value="all">明文与SHA1加密</Radio>
|
||
<Radio value="plain">仅明文</Radio>
|
||
<Radio value="sha1">仅SHA1加密</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
<Form.Item label="密码位数范围" tooltip="密码位数范围">
|
||
<Space>
|
||
<InputNumber min={1} max={max} value={min} onChange={(value) => {
|
||
updateConfig(id, config, 'min', value, 'password');
|
||
}}/>
|
||
<div>~</div>
|
||
<InputNumber min={min} value={max} onChange={(value) => {
|
||
updateConfig(id, config, 'max', value, 'password');
|
||
}}/>
|
||
</Space>
|
||
</Form.Item>
|
||
<Form.Item label="开启正则校验" tooltip="开启后将使用下方设置的正则表达式对密码进行校验">
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={!!config?.verify} onChange={(checked) => {
|
||
updateConfig(id, config, 'verify', checked, 'password');
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="正则" tooltip="可同时设置多组正则，系统将按照【与】逻辑进行校验，每个正则请以^开头以$结尾">
|
||
<>
|
||
{!!config?.verify ? (<>
|
||
<EditorRegexs regexs={regexs} updateRegexs={(regexs) => {
|
||
updateConfig(id, config, 'regexs', regexs, 'password');
|
||
}}/>
|
||
</>) : (<div>暂未启用正则校验，无需设置</div>)}
|
||
</>
|
||
</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, 'password');
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>}
|
||
</div>);
|
||
}
|