79 lines
3.6 KiB
JavaScript
79 lines
3.6 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Col, Divider, Input, Form, Space, Radio, InputNumber, Switch, } from 'antd';
|
||
import Styles from './web.module.less';
|
||
import EditorRegexs from '../../../passport/password/editorRegexs';
|
||
export default function Password(props) {
|
||
const { password, setValue, setValues } = props;
|
||
const { mode, min, max, verify, regexs, tip } = password || {};
|
||
const [newTip, setNewTip] = useState('');
|
||
useEffect(() => {
|
||
const { password } = props;
|
||
if (!password.mode) {
|
||
setValues({
|
||
mode: 'all',
|
||
min: 8,
|
||
max: 24,
|
||
});
|
||
}
|
||
}, [password]);
|
||
useEffect(() => {
|
||
if (tip && !newTip) {
|
||
setNewTip(tip);
|
||
}
|
||
}, [tip]);
|
||
return (<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
|
||
<Col flex="auto">
|
||
<Divider orientation="left" className={Styles.title}>
|
||
密码设置
|
||
</Divider>
|
||
<Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }}>
|
||
<Form.Item label="密码存储模式" tooltip="密码存储模式">
|
||
<Radio.Group onChange={({ target }) => {
|
||
const { value } = target;
|
||
setValue('mode', value);
|
||
}} 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) => {
|
||
setValue('min', value);
|
||
}}/>
|
||
<div>~</div>
|
||
<InputNumber min={min} value={max} onChange={(value) => {
|
||
setValue('max', value);
|
||
}}/>
|
||
</Space>
|
||
</Form.Item>
|
||
|
||
<Form.Item label="开启正则校验" tooltip="开启后将使用下方设置的正则表达式对密码进行校验">
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={!!verify} onChange={(checked) => {
|
||
setValue('verigy', checked);
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="正则" tooltip="可同时设置多组正则，系统将按照【与】逻辑进行校验，每个正则请以^开头以$结尾">
|
||
<>
|
||
{!!verify ? (<>
|
||
<EditorRegexs regexs={regexs || []} updateRegexs={(regexs) => {
|
||
setValue('regexs', regexs);
|
||
}}/>
|
||
</>) : (<div>暂未启用正则校验，无需设置</div>)}
|
||
</>
|
||
</Form.Item>
|
||
<Form.Item label="密码提示语" tooltip="此提示语将显示在用户设置密码的输入框附近，用于清晰告知用户密码的格式要求">
|
||
<Input placeholder="请输入密码提示语" type="text" value={tip} onChange={(e) => {
|
||
setNewTip(e.target.value);
|
||
}} onBlur={() => {
|
||
if (newTip && newTip !== tip) {
|
||
setValue('tip', newTip);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>
|
||
</Col>
|
||
</Space>);
|
||
}
|