Add secure password generator

2026-08-04 11:07:55 +02:00
parent 25da7d49a9
commit 0c9bf6758c
14 changed files with 497 additions and 39 deletions
@@ -0,0 +1,163 @@
+import { useEffect, useState } from "react";
+import { Copy, Dice5, RefreshCw } from "lucide-react";
+import Button from "./Button";
+import Dialog from "./Dialog";
+import DismissibleAlert from "./DismissibleAlert";
+import FormField from "./FormField";
+import IconButton from "./IconButton";
+import ToggleSwitch from "./ToggleSwitch";
+import {
+  DEFAULT_PASSWORD_GENERATOR_OPTIONS,
+  generateSecurePassword,
+  PasswordGeneratorError,
+  type PasswordGeneratorErrorCode,
+  type PasswordGeneratorOptions
+} from "./passwordGenerator";
+import { usePlatformLanguage } from "../i18n/LanguageContext";
+
+const GENERATION_ERROR_LABELS: Record<PasswordGeneratorErrorCode, string> = {
+  "invalid-length": "i18n:govoplan-core.password_length_must_be_between_12_and_128_character.4d147c07",
+  "no-character-set": "i18n:govoplan-core.select_at_least_one_character_set.6150a9c2",
+  "length-too-short": "i18n:govoplan-core.password_length_is_too_short_for_the_selected_charact.1d7845f1",
+  "invalid-random-range": "i18n:govoplan-core.password_generation_could_not_use_the_selected_setti.c2f0da38",
+  "secure-random-unavailable": "i18n:govoplan-core.secure_browser_password_generation_is_unavailable.55275f10"
+};
+
+export type PasswordGeneratorDialogProps = {
+  open: boolean;
+  initialOptions?: Partial<PasswordGeneratorOptions>;
+  onUse: (password: string) => void;
+  onClose: () => void;
+};
+
+export default function PasswordGeneratorDialog({
+  open,
+  initialOptions,
+  onUse,
+  onClose
+}: PasswordGeneratorDialogProps) {
+  const { translateText } = usePlatformLanguage();
+  const [options, setOptions] = useState<PasswordGeneratorOptions>({
+    ...DEFAULT_PASSWORD_GENERATOR_OPTIONS,
+    ...initialOptions
+  });
+  const [candidate, setCandidate] = useState("");
+  const [error, setError] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  const generate = () => {
+    try {
+      setCandidate(generateSecurePassword(options));
+      setError("");
+      setCopied(false);
+    } catch (generationError) {
+      setCandidate("");
+      setError(translateText(
+        generationError instanceof PasswordGeneratorError
+          ? GENERATION_ERROR_LABELS[generationError.code]
+          : "i18n:govoplan-core.password_generation_failed.5a40a004"
+      ));
+    }
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    setOptions({ ...DEFAULT_PASSWORD_GENERATOR_OPTIONS, ...initialOptions });
+  }, [initialOptions, open]);
+
+  useEffect(() => {
+    if (open) generate();
+    // Generation must react to the exact selected candidate policy.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, options]);
+
+  const setOption = <K extends keyof PasswordGeneratorOptions>(
+    key: K,
+    value: PasswordGeneratorOptions[K]
+  ) => setOptions((current) => ({ ...current, [key]: value }));
+
+  const copy = async () => {
+    if (!candidate || typeof navigator === "undefined" || !navigator.clipboard?.writeText) return;
+    try {
+      await navigator.clipboard.writeText(candidate);
+      setCopied(true);
+    } catch {
+      setCopied(false);
+      setError(translateText("i18n:govoplan-core.the_generated_password_could_not_be_copied_select_it.569e025e"));
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      title="i18n:govoplan-core.generate_password.bd5bede8"
+      className="password-generator-dialog"
+      bodyClassName="password-generator-body"
+      footerClassName="button-row compact-actions"
+      portal
+      onClose={onClose}
+      footer={(
+        <>
+          <Button type="button" onClick={onClose}>i18n:govoplan-core.cancel.77dfd213</Button>
+          <Button
+            type="button"
+            variant="primary"
+            disabled={!candidate}
+            onClick={() => {
+              if (!candidate) return;
+              onUse(candidate);
+              onClose();
+            }}
+          >
+            <Dice5 size={16} aria-hidden="true" /> i18n:govoplan-core.use_password.2e1913a6
+          </Button>
+        </>
+      )}
+    >
+      {error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null}
+      <div className="password-generator-options">
+        <FormField label="i18n:govoplan-core.length.adc95605">
+          <input
+            type="number"
+            min={12}
+            max={128}
+            step={1}
+            value={options.length}
+            onChange={(event) => setOption("length", Number(event.target.value))}
+          />
+        </FormField>
+        <div className="password-generator-character-sets" aria-label={translateText("i18n:govoplan-core.character_sets.db6efda2")}>
+          <ToggleSwitch label="i18n:govoplan-core.lowercase.3b677a18" checked={options.lowercase} onChange={(checked) => setOption("lowercase", checked)} />
+          <ToggleSwitch label="i18n:govoplan-core.uppercase.b463d690" checked={options.uppercase} onChange={(checked) => setOption("uppercase", checked)} />
+          <ToggleSwitch label="i18n:govoplan-core.digits.9cd500d3" checked={options.digits} onChange={(checked) => setOption("digits", checked)} />
+          <ToggleSwitch label="i18n:govoplan-core.symbols.9491fc41" checked={options.symbols} onChange={(checked) => setOption("symbols", checked)} />
+        </div>
+      </div>
+      <FormField label="i18n:govoplan-core.generated_password.78461854">
+        <div className="password-generator-result">
+          <input
+            type="text"
+            value={candidate}
+            readOnly
+            autoComplete="off"
+            spellCheck={false}
+          />
+          <IconButton
+            label={copied ? "i18n:govoplan-core.copied.8d525e5f" : "i18n:govoplan-core.copy_generated_password.180ca876"}
+            icon={<Copy size={16} />}
+            onClick={() => void copy()}
+            disabled={!candidate || typeof navigator === "undefined" || !navigator.clipboard?.writeText}
+          />
+          <IconButton
+            label="i18n:govoplan-core.generate_another_password.d99fc019"
+            icon={<RefreshCw size={16} />}
+            onClick={generate}
+          />
+        </div>
+      </FormField>
+      <p className="password-generator-note">
+        i18n:govoplan-core.the_current_field_is_not_changed_until_you_choose_use_pass.447608e7
+      </p>
+    </Dialog>
+  );
+}