perf(webui): load optional password generation on demand

2026-09-08 03:15:07 +02:00
parent c209b3c27d
commit c3daa4a9aa
7 changed files with 212 additions and 14 deletions
@@ -0,0 +1,64 @@
+import { StrictMode, useState } from "react";
+import { createRoot } from "react-dom/client";
+import Button from "../src/components/Button";
+import FormField from "../src/components/FormField";
+import PasswordField from "../src/components/PasswordField";
+import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
+import "../src/styles/tokens.css";
+import "../src/styles/layout.css";
+import "../src/styles/forms.css";
+import "../src/styles/components.css";
+import "../src/styles/dialogs.css";
+import "./conformance.css";
+
+const GENERATOR_OPTIONS = { length: 24 };
+
+function PasswordFieldScenario() {
+  const [password, setPassword] = useState("fixture-unchanged-password");
+  const [disabled, setDisabled] = useState(false);
+  const [changes, setChanges] = useState(0);
+
+  return (
+    <main className="conformance-root">
+      <h1>Optional password generator</h1>
+      <FormField label="Editable password">
+        <PasswordField
+          data-testid="editable-password"
+          value={password}
+          disabled={disabled}
+          generator
+          generatorOptions={GENERATOR_OPTIONS}
+          helpContextId="access.authentication.password"
+          helpModuleId="access"
+          onValueChange={(value) => {
+            setPassword(value);
+            setChanges((count) => count + 1);
+          }}
+        />
+      </FormField>
+      <output data-testid="password-changes">{changes}</output>
+      <Button data-testid="toggle-generator-access" onClick={() => setDisabled((value) => !value)}>
+        {disabled ? "Enable generation" : "Disable generation"}
+      </Button>
+      <FormField label="Sign-in password">
+        <PasswordField value="fixture-sign-in-password" onValueChange={() => undefined} />
+      </FormField>
+      <FormField label="Disabled password">
+        <PasswordField generator disabled value="" onValueChange={() => undefined} />
+      </FormField>
+      <FormField label="Read-only password">
+        <PasswordField generator readOnly value="" onValueChange={() => undefined} />
+      </FormField>
+    </main>
+  );
+}
+
+// Deliberately no Core barrel or other fixture imports: they could eagerly load
+// the generator and mask a regression in this field's real lazy boundary.
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <PlatformLanguageProvider preferredLanguageCode={new URLSearchParams(window.location.search).get("language") ?? "en"}>
+      <PasswordFieldScenario />
+    </PlatformLanguageProvider>
+  </StrictMode>,
+);