@eifi1/ui-kit 0.28.0 → 0.29.0

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

@@ -0,0 +1,213 @@
+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 { 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;
+}
+
+export const DEFAULT_FORGOT_PASSWORD_LABELS: 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.",
+};
+
+/* ── 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 (a `429`: "Too many requests — try again in
+   * an hour"), or `undefined` for the kit's `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>
+    );
+  }
+
+  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(describeError?.(error) ?? labels.error);
+      return;
+    }
+    if (!isThenable(result)) {
+      setSentTo(address);
+      return;
+    }
+    setPending(true);
+    result.then(
+      () => {
+        setPending(false);
+        setSentTo(address);
+      },
+      (error: unknown) => {
+        setPending(false);
+        setFailure(describeError?.(error) ?? labels.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
+      />
+    </>
+  );
+}

package/src/auth/not-found-page.tsx

@@ -0,0 +1,98 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { useKitLabels } from "../i18n/kit-labels";
+import { useNoIndex } from "../hooks/use-noindex";
+import { Button } from "../components/ui";
+import type { AuthHeadingLevel } from "./status-parts";
+
+/** Every string the page renders — the `notFound` namespace. keksdose's words
+ *  (`error.not_found_*`), which kastlan took over. */
+export interface NotFoundLabels {
+  /** The heading. */
+  title: string;
+  /** Under it. */
+  body: string;
+  /** The way out for everyone — to `homeHref`. */
+  home: string;
+  /** The second way out for someone signed in — to `appHref`. */
+  app: string;
+}
+
+export const DEFAULT_NOT_FOUND_LABELS: NotFoundLabels = {
+  title: "Page not found",
+  body: "This address doesn’t exist (any more). It may be a typo, or the page has moved.",
+  home: "Go to the start page",
+  app: "Back to the app",
+};
+
+export interface NotFoundPageProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
+  /** "Go to the start page". Default `/`, which takes a signed-in user into the app and
+   *  anyone else to sign-in in all three apps. */
+  homeHref?: string;
+  /**
+   * "Back to the app", beside it — pass it while someone is signed in. A LITERAL page
+   * (keksdose's `/budget`), never the "last visited page" an app restores on start: a
+   * stale one of those pointing at a route that is gone is the likeliest way a
+   * signed-in user lands here (keksdose's not-found-page.tsx).
+   */
+  appHref?: string;
+  /** App content under the text — a search field, a support address. */
+  children?: ReactNode;
+  /** `false` adds no `noindex` — for a preview inside another page. Default `true`. */
+  noIndex?: boolean;
+  /** The heading's level. Default `h2`, under `AuthLayout`'s `h1`; `h1` where the page
+   *  stands alone (inside the app shell). */
+  headingAs?: AuthHeadingLevel;
+  labels?: Partial<NotFoundLabels>;
+}
+
+/**
+ * What an unknown address renders (the router's catch-all), signed out and signed in —
+ * keksdose's `NotFoundPage` (app/not-found-page.tsx, feedback #129), which kastlan took
+ * over on `AuthLayout` (docs/auth-harmonization.md §7).
+ *
+ * In place of the silent `<Navigate to="/">` keksdose had: bouncing every typo, dead link
+ * and fabricated URL to the start page is what Search Console reports as a soft 404, and
+ * it hid broken links. An SPA cannot send a real 404 status — the web server answers
+ * every path with index.html — so the page says it in words and calls
+ * {@link useNoIndex}, which makes a crawler drop it (the server's `X-Robots-Tag` is the
+ * authoritative half).
+ *
+ * It is the page's CONTENT, not a frame, so it sits in either: as `AuthLayout`'s child
+ * for a visitor (`headingAs` default `h2`, under the layout's title), or bare inside the
+ * app shell for someone signed in (`headingAs="h1"`, and `appHref`). The large "404" is
+ * decoration — the heading says it in words — and hidden from a screen reader.
+ */
+export function NotFoundPage({
+  homeHref = "/",
+  appHref,
+  children,
+  noIndex = true,
+  headingAs: Heading = "h2",
+  labels: labelsProp,
+  className,
+  ...rest
+}: NotFoundPageProps) {
+  const labels = useKitLabels("notFound", DEFAULT_NOT_FOUND_LABELS, labelsProp);
+  useNoIndex(noIndex);
+  return (
+    <div {...rest} className={cn("flex flex-col items-center gap-2 py-4 text-center", className)}>
+      <p aria-hidden className="text-6xl font-bold leading-none tracking-tight text-[var(--text-placeholder)]">
+        404
+      </p>
+      <Heading className="mt-2 text-xl font-semibold text-[var(--text-primary)]">{labels.title}</Heading>
+      <p className="max-w-prose text-sm text-[var(--text-secondary)]">{labels.body}</p>
+      {children}
+      <div className="mt-4 flex flex-wrap justify-center gap-3">
+        <Button href={homeHref} variant="brand">
+          {labels.home}
+        </Button>
+        {appHref !== undefined && (
+          <Button href={appHref} variant="secondary">
+            {labels.app}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}