31 lines
939 B
TypeScript
31 lines
939 B
TypeScript
import { useState, type ComponentProps } from 'react';
|
|
import { Eye, EyeOff } from 'lucide-react';
|
|
import { Input } from '@/components/ui/input';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type Props = ComponentProps<typeof Input>;
|
|
|
|
/** 带显示/隐藏切换的密码输入 */
|
|
export default function AuthPasswordInput({ className, ...props }: Props) {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
return (
|
|
<div className="auth-password-field">
|
|
<Input
|
|
{...props}
|
|
type={visible ? 'text' : 'password'}
|
|
className={cn('auth-password-field__input', className)}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="auth-password-field__toggle"
|
|
onClick={() => setVisible(v => !v)}
|
|
aria-label={visible ? '隐藏密码' : '显示密码'}
|
|
tabIndex={-1}
|
|
>
|
|
{visible ? <EyeOff size={16} aria-hidden /> : <Eye size={16} aria-hidden />}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|