70 lines
2.1 KiB
Plaintext
70 lines
2.1 KiB
Plaintext
import React, { useState, useMemo, useCallback } from 'react';
|
|
import './PasswordInput.css';
|
|
|
|
function levelOf(v) {
|
|
if (!v) return '';
|
|
let s = 0;
|
|
if (v.length >= 8) s++;
|
|
if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;
|
|
if (/\d/.test(v)) s++;
|
|
if (/[^A-Za-z0-9]/.test(v)) s++;
|
|
if (v.length >= 12) s++;
|
|
if (s <= 2) return 'weak';
|
|
if (s <= 3) return 'mid';
|
|
return 'strong';
|
|
}
|
|
|
|
export default function PasswordInput({ value = '', placeholder = '请输入密码', showStrength = true, onChange }) {
|
|
const [visible, setVisible] = useState(false);
|
|
const [focused, setFocused] = useState(false);
|
|
|
|
const level = useMemo(() => levelOf(value), [value]);
|
|
const tip = useMemo(() => {
|
|
if (level === 'weak') return '弱：建议使用字母、数字与符号组合';
|
|
if (level === 'mid') return '中：再增加长度或符号更安全';
|
|
if (level === 'strong') return '强：密码强度良好';
|
|
return '';
|
|
}, [level]);
|
|
|
|
const handle = useCallback(
|
|
(e) => {
|
|
if (onChange) onChange(e.target.value);
|
|
},
|
|
[onChange]
|
|
);
|
|
|
|
const barClass = (i) => {
|
|
if (!showStrength || !level) return '';
|
|
const on =
|
|
(level === 'weak' && i < 1) || (level === 'mid' && i < 2) || (level === 'strong' && i < 3);
|
|
return on ? 'on ' + level : '';
|
|
};
|
|
|
|
return (
|
|
<div className="aa-pwd">
|
|
<div className={'aa-pwd-field' + (focused ? ' is-focus' : '')}>
|
|
<input
|
|
className="aa-pwd-input"
|
|
type={visible ? 'text' : 'password'}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
onChange={handle}
|
|
onFocus={() => setFocused(true)}
|
|
onBlur={() => setFocused(false)}
|
|
/>
|
|
<button className="aa-pwd-toggle" type="button" onClick={() => setVisible((v) => !v)}>
|
|
{visible ? '隐藏' : '显示'}
|
|
</button>
|
|
</div>
|
|
{showStrength && (
|
|
<div className="aa-pwd-strength">
|
|
{[0, 1, 2].map((i) => (
|
|
<span key={i} className={'aa-pwd-bar ' + barClass(i)} />
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="aa-pwd-tip">{tip}</div>
|
|
</div>
|
|
);
|
|
}
|