Add secure password generator

webui/src/components/PasswordField.tsx

@@ -1,5 +1,8 @@
 import { useId, useState, type InputHTMLAttributes } from "react";
-import { Eye, EyeOff } from "lucide-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;
@@ -8,6 +11,9 @@ export type PasswordFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "ty
   savedPlaceholder?: string;
   revealLabel?: string;
   hideLabel?: string;
+  generator?: boolean;
+  generatorLabel?: string;
+  generatorOptions?: Partial<PasswordGeneratorOptions>;
   inputClassName?: string;
 };
 
@@ -18,6 +24,9 @@ export default function PasswordField({
   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 = "",
@@ -26,39 +35,72 @@ export default function PasswordField({
   ...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 ? "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>);
+    <>
+      <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)}
+      />
+    </>
+  );
+}