55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { Eye, EyeOff } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { Box } from './Box';
|
|
import { IconButton } from './IconButton';
|
|
import { Input, InputProps } from './Input';
|
|
|
|
export interface PasswordFieldProps extends InputProps {
|
|
showPassword?: boolean;
|
|
onTogglePassword?: () => void;
|
|
}
|
|
|
|
export const PasswordField = ({
|
|
showPassword: controlledShowPassword,
|
|
onTogglePassword,
|
|
...props
|
|
}: PasswordFieldProps) => {
|
|
const [internalShowPassword, setInternalShowPassword] = useState(false);
|
|
|
|
const isControlled = controlledShowPassword !== undefined;
|
|
const showPassword = isControlled ? controlledShowPassword : internalShowPassword;
|
|
|
|
const handleToggle = () => {
|
|
if (onTogglePassword) {
|
|
onTogglePassword();
|
|
}
|
|
if (!isControlled) {
|
|
setInternalShowPassword(!internalShowPassword);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box position="relative">
|
|
<Input
|
|
{...props}
|
|
type={showPassword ? 'text' : 'password'}
|
|
/>
|
|
<Box
|
|
position="absolute"
|
|
right="0.5rem"
|
|
top="50%"
|
|
style={{ transform: 'translateY(-50%)' }}
|
|
zIndex={10}
|
|
>
|
|
<IconButton
|
|
icon={showPassword ? EyeOff : Eye}
|
|
onClick={handleToggle}
|
|
variant="ghost"
|
|
size="sm"
|
|
title={showPassword ? 'Hide password' : 'Show password'}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|