46 lines
No EOL
1.6 KiB
TypeScript
46 lines
No EOL
1.6 KiB
TypeScript
import {Eye, EyeOff} from "lucide-react";
|
|
import {useState} from "react";
|
|
import {defaultIconSize} from "./SvgIcon";
|
|
import clsx from "clsx";
|
|
|
|
type PasswordFieldProps = {
|
|
onPasswordChanged: (password: string) => void
|
|
onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* Password field component
|
|
*/
|
|
export default function PasswordField({onPasswordChanged, onKeyDown, className = ""}: PasswordFieldProps) {
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [password, setPassword] = useState<string>("");
|
|
|
|
const changePassword = (password: string) => {
|
|
setPassword(password);
|
|
onPasswordChanged(password)
|
|
}
|
|
return (
|
|
<div className={clsx(
|
|
"relative",
|
|
className)}>
|
|
<input
|
|
className="pr-10"
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder="Passwort"
|
|
value={password}
|
|
onChange={(e) => changePassword(e.target.value)}
|
|
onKeyDown={onKeyDown}
|
|
/>
|
|
{/* Add a little eye icon to the right for showing password */}
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
aria-label={showPassword ? "Passwort ausblenden" : "Passwort anzeigen"}
|
|
>
|
|
{showPassword ? <EyeOff size={defaultIconSize}/> : <Eye size={defaultIconSize}/>}
|
|
</button>
|
|
</div>
|
|
);
|
|
} |