Prepare v0.1.0 release dependencies

webui/src/components/PasswordField.tsx

@@ -0,0 +1,64 @@
+import { useId, useState, type InputHTMLAttributes } from "react";
+import { Eye, EyeOff } from "lucide-react";
+
+export type PasswordFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> & {
+  value: string;
+  onValueChange: (value: string) => void;
+  saved?: boolean;
+  savedPlaceholder?: string;
+  revealLabel?: string;
+  hideLabel?: string;
+  inputClassName?: string;
+};
+
+export default function PasswordField({
+  value,
+  onValueChange,
+  saved = false,
+  savedPlaceholder = "••••••••",
+  revealLabel = "Show password",
+  hideLabel = "Hide password",
+  placeholder,
+  disabled = false,
+  className = "",
+  inputClassName = "",
+  id,
+  ...inputProps
+}: PasswordFieldProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const [visible, setVisible] = useState(false);
+  const hasTypedPassword = value.length > 0;
+  const showSavedPlaceholder = saved && !hasTypedPassword;
+  const canReveal = hasTypedPassword && !disabled;
+  const inputType = visible && canReveal ? "text" : "password";
+
+  return (
+    <div className={`password-field ${canReveal ? "has-toggle" : ""} ${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 && (
+        <button
+          type="button"
+          className="password-field-toggle"
+          aria-label={visible ? hideLabel : revealLabel}
+          title={visible ? hideLabel : revealLabel}
+          onClick={() => setVisible((current) => !current)}
+        >
+          {visible ? <EyeOff size={17} aria-hidden="true" /> : <Eye size={17} aria-hidden="true" />}
+        </button>
+      )}
+    </div>
+  );
+}