@eifi1/ui-kit 0.28.1 → 0.30.0

package/src/auth/complete-name-dialog.tsx

@@ -0,0 +1,253 @@
+import { useContext, useEffect, useId, useRef, useState } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
+
+import { useKitLabels } from "../i18n/kit-labels";
+import { usePromisePending } from "../components/danger-confirm";
+import { DialogFrame } from "../components/dialog-frame";
+import { ModalCloseContext } from "../components/modal";
+import { Button, Input } from "../components/ui";
+import { personNameOk, PERSON_NAME_MAX_LENGTH } from "./form-rules";
+
+/** What `CompleteNameDialog` hands `onSave`: both names, trimmed, 1–120 characters —
+ *  `PATCH /auth/me {first_name, last_name}` (§6.1). */
+export interface CompleteNameValues {
+  firstName: string;
+  lastName: string;
+}
+
+/**
+ * Every string the dialog renders — the `completeName` namespace of `<UiKitProvider
+ * labels>`, overridable per instance through `labels`.
+ */
+export interface CompleteNameLabels {
+  title: string;
+  description: string;
+  firstName: string;
+  lastName: string;
+  save: string;
+  /** Dismisses the dialog until the next sign-in. */
+  later: string;
+  /** Under the fields when `onSave` rejected and the app passed no `error`. */
+  failed: string;
+}
+
+export const DEFAULT_COMPLETE_NAME_LABELS: CompleteNameLabels = {
+  title: "Complete your name",
+  description: "First and last name are now asked for separately. Check what is filled in and add what is missing.",
+  firstName: "First name",
+  lastName: "Last name",
+  save: "Save",
+  later: "Later",
+  failed: "Your name could not be saved. Please try again.",
+};
+
+export interface CompleteNameDialogProps {
+  /** What the account holds now — after the migration, the old display name (§3.3). */
+  firstName?: string;
+  /** Usually empty: that is why the dialog is up. */
+  lastName?: string;
+  /**
+   * Save the names (`PATCH /auth/me`). Resolve and the dialog closes (`onClose(true)`);
+   * reject and it stays open with the names kept and `error` — or "Your name could not
+   * be saved" — under them.
+   */
+  onSave: (values: CompleteNameValues) => Promise<unknown>;
+  /**
+   * The dialog has closed: `true` after a resolved `onSave`, `false` for "Later", Escape,
+   * the backdrop and Back. `false` only DEFERS it: the app shows it again after the
+   * next sign-in while `/auth/me` still answers `name_incomplete: true`.
+   */
+  onClose: (saved: boolean) => void;
+  /** The app's words for the last failed save, instead of `labels.failed`. Hidden again
+   *  once a name is edited. */
+  error?: ReactNode;
+  /** Kept-mounted mode, as on `Modal`: left out, the dialog is open while mounted. */
+  open?: boolean;
+  labels?: Partial<CompleteNameLabels>;
+}
+
+/**
+ * "Complete your name" — asked once after sign-in of a user whose name was migrated
+ * (docs/auth-harmonization.md §3.3). keksdose's and Kurvenschmiede's accounts had one
+ * `display_name`; it moved whole into `first_name`, `last_name` stayed empty, and
+ * nothing was split by guesswork (§2.4). The app shows this while `/auth/me` answers
+ * `name_incomplete: true` — never for a demo user.
+ *
+ * Both names prefilled with what is there; "Save" waits until both have 1–120
+ * characters after trimming. **"Later" only defers it**: nothing else waits on a
+ * complete name, no page is blocked, and the app asks again at the next sign-in.
+ *
+ * The promise handling is `ReauthDialog`'s: busy while `onSave` runs (the fields
+ * read-only, "Later" disabled, Escape held — a request that has left cannot be called
+ * back by closing the dialog), closed on resolve, kept open on reject. Save is a
+ * `commit` control, so a `WriteLockProvider` above it locks it with its reason.
+ *
+ * Focus starts in the first EMPTY field — the last name, as a rule — because filling it
+ * in is the whole of what the dialog is for.
+ */
+export function CompleteNameDialog({
+  firstName: initialFirst = "",
+  lastName: initialLast = "",
+  onSave,
+  onClose,
+  error,
+  open,
+  labels: labelsProp,
+}: CompleteNameDialogProps) {
+  const labels = useKitLabels("completeName", DEFAULT_COMPLETE_NAME_LABELS, labelsProp);
+  const [first, setFirst] = useState(initialFirst);
+  const [last, setLast] = useState(initialLast);
+  // A failed save describes the names that were sent; an edit makes it stale.
+  const [failed, setFailed] = useState(false);
+  const { pending, run } = usePromisePending();
+  const [done, setDone] = useState(false);
+  const saved = useRef(false);
+  const formId = useId();
+  const firstRef = useRef<HTMLInputElement>(null);
+  const lastRef = useRef<HTMLInputElement>(null);
+  const isOpen = open ?? true;
+
+  // Reopened (kept-mounted): start again from what the account holds. During render,
+  // as ReauthDialog wipes its password, so no frame shows the old draft.
+  const [wasOpen, setWasOpen] = useState(isOpen);
+  if (wasOpen !== isOpen) {
+    setWasOpen(isOpen);
+    if (isOpen) {
+      setFirst(initialFirst);
+      setLast(initialLast);
+      setFailed(false);
+      setDone(false);
+    }
+  }
+
+  // After Modal's own effect, so its trap has recorded the trigger before focus moves.
+  useEffect(() => {
+    if (!isOpen) return;
+    saved.current = false;
+    const target = firstRef.current?.value.trim() ? lastRef.current : firstRef.current;
+    target?.focus();
+  }, [isOpen]);
+
+  const canSave = personNameOk(first) && personNameOk(last);
+
+  const submit = () => {
+    if (pending || !canSave) return;
+    setFailed(false);
+    const values = { firstName: first.trim(), lastName: last.trim() };
+    let result: Promise<unknown>;
+    try {
+      result = Promise.resolve(onSave(values));
+    } catch (err) {
+      result = Promise.reject(err);
+    }
+    // A rejection must not go unhandled; usePromisePending clears `pending` on it.
+    result.catch(() => setFailed(true));
+    run(result, () => {
+      saved.current = true;
+      setDone(true);
+    });
+  };
+
+  const edit = (set: (value: string) => void) => (value: string) => {
+    set(value);
+    setFailed(false);
+  };
+
+  const message = failed ? (error ?? labels.failed) : undefined;
+
+  return (
+    <DialogFrame
+      open={open}
+      title={labels.title}
+      description={labels.description}
+      onClose={() => onClose(saved.current)}
+      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {
+        if (pending && e.key === "Escape") e.preventDefault();
+      }}
+      aria-busy={pending || undefined}
+      actions={
+        <CompleteNameActions
+          formId={formId}
+          done={done}
+          busy={pending}
+          canSave={canSave}
+          laterLabel={labels.later}
+          saveLabel={labels.save}
+        />
+      }
+    >
+      <form
+        id={formId}
+        noValidate
+        className="grid gap-3 @container"
+        onSubmit={(e) => {
+          e.preventDefault();
+          submit();
+        }}
+      >
+        <div className="grid gap-3 @xs:grid-cols-2">
+          <Input
+            ref={firstRef}
+            name="given-name"
+            autoComplete="given-name"
+            label={labels.firstName}
+            value={first}
+            onChange={(e) => edit(setFirst)(e.target.value)}
+            maxLength={PERSON_NAME_MAX_LENGTH}
+            readOnly={pending}
+            required
+          />
+          <Input
+            ref={lastRef}
+            name="family-name"
+            autoComplete="family-name"
+            label={labels.lastName}
+            value={last}
+            onChange={(e) => edit(setLast)(e.target.value)}
+            maxLength={PERSON_NAME_MAX_LENGTH}
+            readOnly={pending}
+            required
+          />
+        </div>
+        {message !== undefined && (
+          <p role="alert" className="text-xs text-[var(--danger)]">
+            {message}
+          </p>
+        )}
+      </form>
+    </DialogFrame>
+  );
+}
+
+/** The actions row, inside the `Modal`, where its animated close is in context: a
+ *  resolved save lowers the panel through it, as "Later" and Escape do. */
+function CompleteNameActions({
+  formId,
+  done,
+  busy,
+  canSave,
+  laterLabel,
+  saveLabel,
+}: {
+  formId: string;
+  done: boolean;
+  busy: boolean;
+  canSave: boolean;
+  laterLabel: string;
+  saveLabel: string;
+}) {
+  const close = useContext(ModalCloseContext);
+  useEffect(() => {
+    if (done) close?.();
+  }, [done, close]);
+  return (
+    <>
+      <Button type="button" variant="ghost" disabled={busy} onClick={() => close?.()}>
+        {laterLabel}
+      </Button>
+      <Button type="submit" form={formId} commit disabled={!busy && !canSave} pending={busy}>
+        {saveLabel}
+      </Button>
+    </>
+  );
+}

package/src/auth/email-tag.ts

@@ -0,0 +1,75 @@
+/**
+ * The address tag: `you@example.com` → `you+kastlan@example.com`, the app's own name as
+ * a sub-address of the address a person types for themselves (docs/auth-harmonization.md
+ * §4.5, Marcel 2026-10-05). Lifted from keksdose (`features/auth/email-tag.ts`, feedback
+ * dev#481), where the tag was the constant `keksdose`; here it is the app's.
+ *
+ * **Structurally valid is not the same as deliverable.** `+` is an ordinary character in
+ * the local part under RFC 5322, and sub-addressing — `user+tag@host` delivered to
+ * `user@host` — is specified (RFC 5233). But it is specified as a convention the
+ * RECEIVING server may implement: Gmail, Outlook, iCloud, Fastmail and Proton do; many
+ * Exchange installs, small hosters and corporate filters do not, and some web forms
+ * refuse the character outright.
+ *
+ * Which is why every caller OFFERS the result and never applies it. Silently registering
+ * somebody as `you+kastlan@example.com` would send the verification mail — the one
+ * message the account depends on — down a delivery path nobody checked, and make the
+ * address they sign in with one they never typed. The tag is a convenience for the
+ * person who wants it: one click, with the exact resulting address on the button
+ * (`RegisterForm` does this with its `emailTag`).
+ *
+ * The tagged address is then the identity. The server trims and lower-cases an address
+ * at every entry and never strips a tag, so `you@…` and `you+kastlan@…` are two
+ * different accounts; sign-in stays exact (§4.5), which is why `SignInForm`'s hint after
+ * a failed sign-in names the tagged address rather than trying it.
+ *
+ * Offer it only where a person types an address FOR THEMSELVES — sign-up, a later email
+ * change in the profile — never in a field for someone else's (an invite dialog, a
+ * share), where the tag would be a guess about another person's mail server.
+ */
+
+/** What a tag may be: the app's name, lower case — letters, digits, `.`, `_`, `-`. A
+ *  space, `@` or `+` would make the result something other than a sub-address. */
+const TAG_SHAPE = /^[a-z0-9][a-z0-9._-]*$/;
+
+/**
+ * `taggedEmail("you@example.com", "kastlan")` → `"you+kastlan@example.com"`, or `null`
+ * when there is nothing to offer:
+ *
+ *  - the address is not complete enough to split — no local part, no domain, or a
+ *    domain without an inner dot (the shape the field's own `type="email"` accepts), so
+ *    the offer cannot appear before the address is plausible or linger once it stops
+ *    being one;
+ *  - the address already carries a `+` — the person's own scheme wins, and stacking a
+ *    second tag on it would be wrong;
+ *  - the tag is empty or not a plain name (see `TAG_SHAPE`).
+ *
+ * The tag is the app's name in lower case (`keksdose`, `kastlan`, `kurvenschmiede`); it
+ * is trimmed and lower-cased here, so `"Kastlan"` gives the same answer. The address is
+ * trimmed and otherwise kept as typed — normalising it is the server's job (server-kit's
+ * `normalise_email`).
+ */
+export function taggedEmail(email: string, tag: string): string | null {
+  const name = tag.trim().toLowerCase();
+  if (!TAG_SHAPE.test(name)) return null;
+  const parts = emailParts(email);
+  if (!parts || parts.local.includes("+")) return null;
+  return `${parts.local}+${name}@${parts.domain}`;
+}
+
+/**
+ * The trimmed address split at its last `@`, or `null` while it is not complete enough
+ * to split: no local part, no domain, or a domain without an inner dot — the shape the
+ * field's own `type="email"` accepts.
+ *
+ * @internal `RegisterForm` gates its submit on it; not part of the barrel.
+ */
+export function emailParts(email: string): { local: string; domain: string } | null {
+  const trimmed = email.trim();
+  const at = trimmed.lastIndexOf("@");
+  if (at <= 0 || at === trimmed.length - 1) return null;
+  const local = trimmed.slice(0, at);
+  const domain = trimmed.slice(at + 1);
+  if (!domain.includes(".") || domain.startsWith(".") || domain.endsWith(".")) return null;
+  return { local, domain };
+}

package/src/auth/forgot-password-form.tsx

@@ -0,0 +1,229 @@
+import { useId, useRef, useState } from "react";
+import type { ComponentPropsWithoutRef, FormEvent, ReactNode } from "react";
+import { MailCheck } from "lucide-react";
+import { cn } from "../lib/cn";
+import { useKitLabels } from "../i18n/kit-labels";
+import { AlertBanner } from "../components/alert-banner";
+import { TextLink } from "../components/text-link";
+import { Button, Input } from "../components/ui";
+import { englishRateLimited, isRateLimited, retryAfterSeconds } from "./auth-errors";
+import { FORM_HEADING_CLASS, INTRO_CLASS, OutcomeMessage, isThenable, useFocusWhen } from "./status-parts";
+import type { AuthHeadingLevel } from "./status-parts";
+
+/* ── Labels ──────────────────────────────────────────────────────────────── */
+
+/** Every string the form renders — the `forgotPassword` namespace. keksdose's words
+ *  (`auth.forgot.*`), which kastlan took over unchanged. */
+export interface ForgotPasswordLabels {
+  /** The heading. */
+  title: string;
+  /** Under the heading, before the field. */
+  intro: string;
+  /** The email field's label. */
+  email: string;
+  submit: string;
+  /** The one answer, whatever the server knows — given the address as typed. */
+  sent: (email: string) => string;
+  /** Under it: how long the link lives, and where else to look. */
+  sentHint: string;
+  /** The link back to the sign-in page, on both states. */
+  backToSignIn: string;
+  /** A request that did not go through: a throttle, an outage. Never "unknown
+   *  address" — the endpoint does not say. */
+  error: string;
+  /** 0.30.0: the request was throttled — HTTP 429 ({@link isRateLimited}) — given the
+   *  `Retry-After` wait in seconds, or `undefined` without one. OPTIONAL, like every key
+   *  added to a shipped interface; the provider's `forgotPassword`, then English, fill
+   *  it. */
+  rateLimited?: (seconds?: number) => string;
+}
+
+/** `Required`: every key, the 0.30 one included, has its English here. */
+export const DEFAULT_FORGOT_PASSWORD_LABELS: Required<ForgotPasswordLabels> = {
+  title: "Forgot password",
+  intro: "Enter your account’s email address. We’ll send you a link to choose a new password.",
+  email: "Email",
+  submit: "Send the link",
+  sent: (email) => `If an account exists for ${email}, the link is on its way.`,
+  sentHint: "The link is valid for one hour and works exactly once. Check your spam folder too.",
+  backToSignIn: "Back to sign in",
+  error: "The request failed. Please try again later.",
+  rateLimited: englishRateLimited,
+};
+
+/* ── The form ────────────────────────────────────────────────────────────── */
+
+export interface ForgotPasswordFormProps
+  extends Omit<ComponentPropsWithoutRef<"div">, "onSubmit" | "children" | "title"> {
+  /**
+   * The address was submitted, trimmed: send `POST /auth/password-reset/request`.
+   * Resolve when the server answered — whatever it answered: it is `204` whether or not
+   * an account exists. Reject only when the request did not go through (a throttle, an
+   * outage); the form then stays, with the address, and says so. The form never sends a
+   * request itself (§8).
+   */
+  onSubmit: (email: string) => Promise<unknown> | void;
+  /** "Back to sign in" — the app's `/login`. Default `/login`. */
+  signInHref?: string;
+  /** The field's start value — the address the sign-in form already had, so someone
+   *  whose password just failed need not type it twice. */
+  defaultEmail?: string;
+  /**
+   * The app's words for a failed request ("Too many requests — try again in an hour"),
+   * or `undefined` for the kit's: `rateLimited` for a bare `429` (0.30.0), else `error`.
+   * The same hook as `SignInForm`'s.
+   */
+  describeError?: (error: unknown) => ReactNode | undefined;
+  /** App content under the intro — a notice, a support address. */
+  formContent?: ReactNode;
+  /** The heading. Default `labels.title`; `null` draws none, for a page that puts it
+   *  in `AuthLayout`'s `title` instead. */
+  title?: ReactNode;
+  /** The heading's level. Default `h2`, under the page's `h1`. */
+  headingAs?: AuthHeadingLevel;
+  labels?: Partial<ForgotPasswordLabels>;
+}
+
+/**
+ * "I forgot my password" for every app (docs/auth-harmonization.md §7): one field, then
+ * the same sentence whatever the answer — keksdose's `ForgotPasswordPage`
+ * (features/auth/forgot-password-page.tsx), kastlan's copy of it, as one component.
+ *
+ * **It always ends on the same message**: "If an account exists for …, the link is on
+ * its way." The server answers `204` whether or not the address has an account — so the
+ * page cannot be used to find out who has one — and the page must not undo that by
+ * saying more than the server knows. Worded as a promise ("we sent you a link"), a typo
+ * would look like a mail-delivery problem and send the person waiting instead of trying
+ * their other address (keksdose #198). The address shown is the one they typed, so a
+ * typo is visible.
+ *
+ * The only failure it can show is a request that did not go through (throttled, the
+ * server down), never "unknown address". §4.5's fallback to a tagged address
+ * (`you+kastlan@…` when `you@…` has no account) is the server's and changes nothing here.
+ *
+ * The submit is not disabled while the field is empty — a browser that autofills
+ * withholds the value until the first interaction, and a disabled button would swallow
+ * that first click; the field's own `required` answers an empty submit instead. After a
+ * submit the confirmation takes focus, because the button that had it is gone with the
+ * form.
+ */
+export function ForgotPasswordForm({
+  onSubmit,
+  signInHref = "/login",
+  defaultEmail = "",
+  describeError,
+  formContent,
+  title,
+  headingAs: Heading = "h2",
+  labels: labelsProp,
+  className,
+  ...rest
+}: ForgotPasswordFormProps) {
+  const labels = useKitLabels("forgotPassword", DEFAULT_FORGOT_PASSWORD_LABELS, labelsProp);
+  const [email, setEmail] = useState(defaultEmail);
+  const [pending, setPending] = useState(false);
+  const [failure, setFailure] = useState<ReactNode>(null);
+  const [sentTo, setSentTo] = useState<string | null>(null);
+  const headingId = useId();
+  const sentRef = useRef<HTMLDivElement>(null);
+  useFocusWhen(sentTo !== null, sentRef);
+
+  const heading =
+    title === null ? null : (
+      <Heading id={headingId} className={FORM_HEADING_CLASS}>
+        {title ?? labels.title}
+      </Heading>
+    );
+  const back = (
+    <p className="text-center text-sm">
+      <TextLink href={signInHref} tone="primary">
+        {labels.backToSignIn}
+      </TextLink>
+    </p>
+  );
+
+  if (sentTo !== null) {
+    return (
+      <div {...rest} data-state="sent" className={cn("space-y-3", className)}>
+        {heading}
+        <OutcomeMessage icon={<MailCheck className="text-[var(--success)]" />} focusRef={sentRef}>
+          <p className={INTRO_CLASS}>{labels.sent(sentTo)}</p>
+          <p className="text-xs text-[var(--text-muted)]">{labels.sentHint}</p>
+        </OutcomeMessage>
+        {back}
+      </div>
+    );
+  }
+
+  // The app's words first, then the throttle's, then the kit's catch-all.
+  const failureFor = (error: unknown): ReactNode =>
+    describeError?.(error) ??
+    (isRateLimited(error)
+      ? (labels.rateLimited ?? DEFAULT_FORGOT_PASSWORD_LABELS.rateLimited)(retryAfterSeconds(error))
+      : labels.error);
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    const address = email.trim();
+    if (pending || address === "") return;
+    setFailure(null);
+    let result: unknown;
+    try {
+      result = onSubmit(address);
+    } catch (error) {
+      setFailure(failureFor(error));
+      return;
+    }
+    if (!isThenable(result)) {
+      setSentTo(address);
+      return;
+    }
+    setPending(true);
+    result.then(
+      () => {
+        setPending(false);
+        setSentTo(address);
+      },
+      (error: unknown) => {
+        setPending(false);
+        setFailure(failureFor(error));
+      },
+    );
+  };
+
+  return (
+    <div {...rest} data-state="form" className={cn("space-y-3", className)}>
+      <form
+        className="space-y-3"
+        aria-labelledby={title === null ? undefined : headingId}
+        onSubmit={submit}
+      >
+        {heading}
+        <p className={INTRO_CLASS}>{labels.intro}</p>
+        {formContent}
+        <Input
+          type="email"
+          name="email"
+          autoComplete="email"
+          label={labels.email}
+          value={email}
+          onChange={(e) => {
+            setEmail(e.target.value);
+            if (failure) setFailure(null);
+          }}
+          readOnly={pending}
+          required
+        />
+        {failure != null && (
+          <AlertBanner tone="danger" size="sm" role="alert">
+            {failure}
+          </AlertBanner>
+        )}
+        <Button type="submit" className="w-full" pending={pending}>
+          {labels.submit}
+        </Button>
+      </form>
+      {back}
+    </div>
+  );
+}

package/src/auth/form-rules.ts

@@ -0,0 +1,40 @@
+import { passwordByteLength } from "../components/password-strength";
+
+/**
+ * The few hard rules of the sign-up and sign-in forms, in one place — and the only ones
+ * (docs/auth-harmonization.md §3.1, §8). The servers check the same; the kit adds no
+ * rule of its own, and everything the strength meter shows beyond these is advice.
+ *
+ * @internal Shared by RegisterForm, SignInForm and CompleteNameDialog; the coordinator
+ * decides whether the constants join the barrel.
+ */
+
+/** At least 8 characters. */
+export const PASSWORD_MIN_LENGTH = 8;
+
+/** At most 72 BYTES — bcrypt reads no further, so a longer password would be silently
+ *  cut. "ü" is two bytes, an emoji four. */
+export const PASSWORD_MAX_BYTES = 72;
+
+/** A first or last name: 1–120 characters after trimming — the old `display_name`
+ *  limit, so a migrated name fits (§3.1). */
+export const PERSON_NAME_MAX_LENGTH = 120;
+
+/** 1–120 characters after trimming. */
+export function personNameOk(value: string): boolean {
+  const length = value.trim().length;
+  return length >= 1 && length <= PERSON_NAME_MAX_LENGTH;
+}
+
+/**
+ * Why a new password and its confirmation may not be submitted yet, or `null` when they
+ * may — keksdose's `passwordPairError` (features/auth/password-fields.tsx). Characters
+ * are counted as code points, as the strength meter counts them: an emoji is one
+ * character to the person typing it.
+ */
+export function newPasswordProblem(password: string, confirm: string): "length" | "bytes" | "mismatch" | null {
+  if ([...password].length < PASSWORD_MIN_LENGTH) return "length";
+  if (passwordByteLength(password) > PASSWORD_MAX_BYTES) return "bytes";
+  if (password !== confirm) return "mismatch";
+  return null;
+}

package/src/auth/new-password-fields.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode, Ref } from "react";
+import { PasswordStrengthMeter } from "../components/password-strength";
+import { Input } from "../components/ui";
+import { PASSWORD_MAX_BYTES, PASSWORD_MIN_LENGTH } from "./form-rules";
+
+/** @internal The words the fields show — the host form's own labels. */
+export interface NewPasswordFieldsText {
+  password: ReactNode;
+  confirm: ReactNode;
+  mismatch: ReactNode;
+}
+
+/** @internal */
+export interface NewPasswordFieldsProps {
+  password: string;
+  confirm: string;
+  onPasswordChange: (value: string) => void;
+  onConfirmChange: (value: string) => void;
+  text: NewPasswordFieldsText;
+  /** A request is running: both fields `readOnly` (not `disabled`, which would drop
+   *  the focus of the one being typed in). */
+  busy?: boolean;
+  passwordRef?: Ref<HTMLInputElement>;
+}
+
+/**
+ * "Choose a password": the field, the strength meter with its advisory checklist, and
+ * the confirmation — keksdose's `PasswordFields`, which its register form, its reset
+ * page and its forced-change step share so that every screen choosing a password does
+ * it under the same rules and the same feedback. Here `RegisterForm` and
+ * `SignInForm`'s set-a-new-password step share it.
+ *
+ * Both fields are `new-password`: a password manager offers to generate one and never
+ * fills in the current one. The confirmation carries the mismatch as its own `error`,
+ * attached with `aria-describedby`; the key is always passed, so the message coming and
+ * going never remounts the field under the typist.
+ *
+ * @internal Not part of the barrel; the forms are.
+ */
+export function NewPasswordFields({
+  password,
+  confirm,
+  onPasswordChange,
+  onConfirmChange,
+  text,
+  busy = false,
+  passwordRef,
+}: NewPasswordFieldsProps) {
+  const mismatch = confirm !== "" && confirm !== password;
+  return (
+    <>
+      <div>
+        <Input
+          ref={passwordRef}
+          type="password"
+          name="new-password"
+          autoComplete="new-password"
+          label={text.password}
+          value={password}
+          onChange={(e) => onPasswordChange(e.target.value)}
+          minLength={PASSWORD_MIN_LENGTH}
+          readOnly={busy}
+          required
+        />
+        {/* The 72-byte cap is passed because a SIGN-IN password has one (bcrypt); the
+            minimum is passed rather than left to the meter's own default 8, so the two
+            cannot drift apart. */}
+        <PasswordStrengthMeter value={password} minLength={PASSWORD_MIN_LENGTH} maxBytes={PASSWORD_MAX_BYTES} />
+      </div>
+      {/* A typo'd password costs a reset mail — and under keksdose's end-to-end
+          encryption, data (feedback #124) — so it is typed twice. */}
+      <Input
+        type="password"
+        name="confirm-password"
+        autoComplete="new-password"
+        label={text.confirm}
+        value={confirm}
+        onChange={(e) => onConfirmChange(e.target.value)}
+        readOnly={busy}
+        error={mismatch ? text.mismatch : undefined}
+        required
+      />
+    </>
+  );
+}