107 lines
3.8 KiB
TypeScript
107 lines
3.8 KiB
TypeScript
import { useId, useState, type InputHTMLAttributes } from "react";
|
|
import { Dice5, Eye, EyeOff } from "lucide-react";
|
|
import PasswordGeneratorDialog from "./PasswordGeneratorDialog";
|
|
import type { PasswordGeneratorOptions } from "./passwordGenerator";
|
|
import { usePlatformLanguage } from "../i18n/LanguageContext";
|
|
|
|
export type PasswordFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> & {
|
|
value: string;
|
|
onValueChange: (value: string) => void;
|
|
saved?: boolean;
|
|
savedPlaceholder?: string;
|
|
revealLabel?: string;
|
|
hideLabel?: string;
|
|
generator?: boolean;
|
|
generatorLabel?: string;
|
|
generatorOptions?: Partial<PasswordGeneratorOptions>;
|
|
inputClassName?: string;
|
|
};
|
|
|
|
export default function PasswordField({
|
|
value,
|
|
onValueChange,
|
|
saved = false,
|
|
savedPlaceholder = "••••••••",
|
|
revealLabel = "i18n:govoplan-core.show_password.044b852f",
|
|
hideLabel = "i18n:govoplan-core.hide_password.e40123b4",
|
|
generator = false,
|
|
generatorLabel = "i18n:govoplan-core.generate_password.bd5bede8",
|
|
generatorOptions,
|
|
placeholder,
|
|
disabled = false,
|
|
className = "",
|
|
inputClassName = "",
|
|
id,
|
|
...inputProps
|
|
}: PasswordFieldProps) {
|
|
const generatedId = useId();
|
|
const { translateText } = usePlatformLanguage();
|
|
const inputId = id ?? generatedId;
|
|
const [visible, setVisible] = useState(false);
|
|
const [generatorOpen, setGeneratorOpen] = useState(false);
|
|
const hasTypedPassword = value.length > 0;
|
|
const showSavedPlaceholder = saved && !hasTypedPassword;
|
|
const canReveal = hasTypedPassword && !disabled;
|
|
const canGenerate = generator && !disabled && !inputProps.readOnly;
|
|
const inputType = visible && canReveal ? "text" : "password";
|
|
const translatedGeneratorLabel = translateText(generatorLabel);
|
|
const translatedRevealLabel = translateText(revealLabel);
|
|
const translatedHideLabel = translateText(hideLabel);
|
|
|
|
return (
|
|
<>
|
|
<div className={`password-field ${canReveal || canGenerate ? "has-actions" : ""} ${canGenerate ? "has-generator" : ""} ${canReveal ? "has-reveal" : ""} ${showSavedPlaceholder ? "is-saved-empty" : ""} ${className}`.trim()}>
|
|
<input
|
|
{...inputProps}
|
|
id={inputId}
|
|
className={inputClassName}
|
|
type={inputType}
|
|
value={value}
|
|
disabled={disabled}
|
|
placeholder={showSavedPlaceholder ? savedPlaceholder : placeholder}
|
|
onChange={(event) => {
|
|
onValueChange(event.target.value);
|
|
if (!event.target.value) setVisible(false);
|
|
}} />
|
|
|
|
{canReveal || canGenerate ? (
|
|
<span className="password-field-actions">
|
|
{canGenerate ? (
|
|
<button
|
|
type="button"
|
|
className="password-field-action"
|
|
aria-label={translatedGeneratorLabel}
|
|
title={translatedGeneratorLabel}
|
|
onClick={() => setGeneratorOpen(true)}
|
|
>
|
|
<Dice5 size={17} aria-hidden="true" />
|
|
</button>
|
|
) : null}
|
|
{canReveal ? (
|
|
<button
|
|
type="button"
|
|
className="password-field-action"
|
|
aria-label={visible ? translatedHideLabel : translatedRevealLabel}
|
|
title={visible ? translatedHideLabel : translatedRevealLabel}
|
|
onClick={() => setVisible((current) => !current)}
|
|
>
|
|
{visible ? <EyeOff size={17} aria-hidden="true" /> : <Eye size={17} aria-hidden="true" />}
|
|
</button>
|
|
) : null}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
|
|
<PasswordGeneratorDialog
|
|
open={generatorOpen}
|
|
initialOptions={generatorOptions}
|
|
onUse={(password) => {
|
|
onValueChange(password);
|
|
setVisible(false);
|
|
}}
|
|
onClose={() => setGeneratorOpen(false)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|