65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
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>,
|
|
);
|