@sjolystinnovation/app-kit 0.21.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sjolystinnovation/app-kit",
-  "version": "0.21.0",
+  "version": "1.0.0",
   "description": "Building blocks for Next.js apps that sign in against a JWT API through next-auth",
   "license": "Apache-2.0",
   "author": "Sjølyst Innovation AS",
@@ -9,7 +9,10 @@
     "url": "git+https://github.com/sondresjolyst/si-web-packages.git",
     "directory": "packages/app-kit"
   },
-  "homepage": "https://github.com/sondresjolyst/si-web-packages#readme",
+  "homepage": "https://github.com/sondresjolyst/si-web-packages/tree/main/packages/app-kit#readme",
+  "bugs": {
+    "url": "https://github.com/sondresjolyst/si-web-packages/issues"
+  },
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -32,17 +35,21 @@
     "./next-config": "./src/next-config/index.ts",
     "./markdown": "./src/markdown/index.ts",
     "./legal": "./src/legal/index.ts",
+    "./sections": "./src/sections/index.ts",
     "./seo": "./src/seo/index.ts",
     "./seo/og": "./src/seo/og/index.tsx",
     "./branding": "./src/branding/index.ts",
     "./branding/server": "./src/branding/server.ts",
     "./payments": "./src/payments/index.ts",
+    "./locales/nb": "./src/locales/nb.ts",
     "./testing": "./src/testing/index.ts",
     "./styles.css": "./src/styles.css"
   },
   "files": [
     "src",
-    "!src/tests"
+    "!src/tests",
+    "README.md",
+    "LICENSE"
   ],
   "publishConfig": {
     "access": "public"
@@ -66,6 +73,9 @@
     "zod": "^4"
   },
   "peerDependenciesMeta": {
+    "@heroicons/react": {
+      "optional": true
+    },
     "axios": {
       "optional": true
     },
@@ -115,11 +125,18 @@
   },
   "keywords": [
     "next.js",
+    "nextjs",
+    "app-router",
     "next-auth",
     "session",
     "jwt",
+    "authentication",
+    "axios",
     "react",
-    "tailwindcss"
+    "tailwindcss",
+    "admin",
+    "seo",
+    "typescript"
   ],
   "dependencies": {
     "@types/jsonwebtoken": "^9.0.10",

package/src/admin/AdminShell.tsx

@@ -13,6 +13,7 @@ export interface AdminTab {
 
 type GateProps = RoleGateProps extends infer P ? (P extends unknown ? Omit<P, "children"> : never) : never;
 
+/** Props for `AdminShell`. The gate props are `RoleGate`'s, without `children`. */
 export type AdminShellProps = GateProps & {
   title: ReactNode;
   tabs: readonly AdminTab[];
@@ -48,6 +49,6 @@ export function AdminShell({ title, tabs, children, ...gate }: AdminShellProps)
       {children}
     </div>
   );
-  // The gate props came in as one of RoleGate's two shapes, so they go back as that shape.
+  // The gate props arrive as one of RoleGate's two shapes, so they go back as that shape.
   return <RoleGate {...({ ...gate, children: page } as RoleGateProps)} />;
 }

package/src/admin/AdminUsersPanel.tsx

@@ -1,23 +1,54 @@
 "use client";
 
 import { PlusIcon, TrashIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
+import { errorText, fieldErrorTexts } from "../api/fieldErrorText";
 import type { AdminUser, createAdminUsersService } from "../api/services";
 import { toast } from "../toast";
+import { FieldError } from "../ui/field";
 import { TextInput } from "../ui/TextInput";
 import { Toggle } from "../ui/Toggle";
 import { withDefaults, type TextOverrides } from "../ui/withDefaults";
-import { defaultAdminUsersPanelStrings, type AdminUsersPanelStrings } from "./adminUsersPanelStrings";
+import {
+  defaultAdminUsersPanelStrings,
+  type AdminUsersDeleteErrorStrings,
+  type AdminUsersErrorStrings,
+  type AdminUsersPanelStrings,
+  type AdminUsersValidationStrings,
+} from "./adminUsersPanelStrings";
 
-export interface AdminUsersPanelProps {
-  /** The user admin calls, such as `createAdminUsersService(api)`. */
-  service: ReturnType<typeof createAdminUsersService>;
-  /** The roles an admin may give, from the app's own endpoint. */
-  getRoles: () => Promise<string[]>;
-  /** The role a new invite starts with. `Admin` by default. */
+type AdminUsersService = ReturnType<typeof createAdminUsersService>;
+
+/**
+ * Props for `AdminUsersPanel`. The roles come from the service's `roles`, or from `getRoles` when the
+ * app passes it, so a service without `roles` needs `getRoles`.
+ */
+export type AdminUsersPanelProps = {
+  /** The role a new invite starts with. Defaults to `Admin`. */
   defaultInviteRole?: string | undefined;
-  strings?: TextOverrides<AdminUsersPanelStrings> | undefined;
-}
+  /** The panel's text. `validation`, `errors` and `deleteErrors` may name only some codes, the rest keep their defaults. */
+  strings?:
+    | (TextOverrides<Omit<AdminUsersPanelStrings, "validation" | "errors" | "deleteErrors">> & {
+        validation?: TextOverrides<AdminUsersValidationStrings> | undefined;
+        errors?: TextOverrides<AdminUsersErrorStrings> | undefined;
+        deleteErrors?: TextOverrides<AdminUsersDeleteErrorStrings> | undefined;
+      })
+    | undefined;
+} & (
+  | {
+      /** The user admin calls, such as `createAdminUsersService(api)`. */
+      service: AdminUsersService;
+      /** The roles an admin may give. Defaults to the service's `roles`. */
+      getRoles?: (() => Promise<string[]>) | undefined;
+    }
+  | {
+      service: Omit<AdminUsersService, "roles">;
+      getRoles: () => Promise<string[]>;
+    }
+);
+
+// The invite fields the form shows, so a field error for any other field goes in the toast.
+const INVITE_FIELDS = ["firstName", "lastName", "email", "role"];
 
 const fill = (text: string, values: Record<string, string>) =>
   text.replace(/\{(\w+)\}/g, (match, key: string) => values[key] ?? match);
@@ -26,10 +57,16 @@ const reason = (err: unknown, fallback: string) => (err instanceof Error && err.
 
 /**
  * The admin users page: every user with their roles, a toggle for deleted users, giving and taking
- * roles, deleting an account after a confirm, and inviting a user by email.
+ * roles, deleting an account after a confirm, and inviting a user by email. The API's refusals show
+ * in the app's language through `validation`, `errors` and `deleteErrors`.
  */
 export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin", strings }: AdminUsersPanelProps) {
-  const text = withDefaults(defaultAdminUsersPanelStrings, strings);
+  const { validation: validationOverrides, errors: errorOverrides, deleteErrors: deleteOverrides, ...textOverrides } = strings ?? {};
+  const text = withDefaults(defaultAdminUsersPanelStrings, textOverrides);
+  const validation = withDefaults(defaultAdminUsersPanelStrings.validation, validationOverrides);
+  const errors = withDefaults(defaultAdminUsersPanelStrings.errors, errorOverrides);
+  const deleteErrors = withDefaults(defaultAdminUsersPanelStrings.deleteErrors, deleteOverrides);
+  const roleErrorId = `${useId()}-role-error`;
   const [users, setUsers] = useState<AdminUser[]>([]);
   const [allRoles, setAllRoles] = useState<string[]>([]);
   const [includeDeleted, setIncludeDeleted] = useState(false);
@@ -39,7 +76,9 @@ export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin"
   const [roleLoading, setRoleLoading] = useState(false);
   const [invite, setInvite] = useState({ email: "", firstName: "", lastName: "", role: defaultInviteRole });
   const [inviting, setInviting] = useState(false);
-  // Bumped to fetch the list again after a change, through the same effect as every other load.
+  // The per-field texts from the last failed invite, keyed by field name.
+  const [inviteErrors, setInviteErrors] = useState<Record<string, string[]>>({});
+  // Bumping it fetches the list again after a change, through the same effect as every other load.
   const [reloads, setReloads] = useState(0);
   // The latest service, so an inline one does not fetch the list again on every render. The roles
   // load once, so the first getRoles is enough.
@@ -71,8 +110,9 @@ export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin"
   }, [includeDeleted, reloads, text.usersLoadFailed]);
 
   useEffect(() => {
-    getRolesRef
-      .current()
+    // Without getRoles the props carry a service with roles.
+    const roles = getRolesRef.current ?? (() => (serviceRef.current as AdminUsersService).roles());
+    roles()
       .then(setAllRoles)
       .catch(() => toast.error(text.rolesLoadFailed));
   }, [text.rolesLoadFailed]);
@@ -99,7 +139,7 @@ export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin"
       setAddRoleFor(null);
       setSelectedRole("");
     } catch (err) {
-      toast.error(reason(err, text.roleAssignFailed));
+      toast.error(errorText(err, errors, text.roleAssignFailed));
     } finally {
       setRoleLoading(false);
     }
@@ -111,7 +151,7 @@ export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin"
       setRoles(user.id, user.roles.filter((r) => r !== role));
       toast.success(fill(text.roleRemoved, { name: user.firstName, role }));
     } catch (err) {
-      toast.error(reason(err, text.roleRemoveFailed));
+      toast.error(errorText(err, errors, text.roleRemoveFailed));
     }
   };
 
@@ -123,7 +163,7 @@ export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin"
       toast.success(text.userDeleted);
       reload();
     } catch (err) {
-      toast.error(reason(err, text.userDeleteFailed));
+      toast.error(errorText(err, deleteErrors, text.userDeleteFailed));
     }
   };
 
@@ -134,12 +174,23 @@ export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin"
     }
     setInviting(true);
     try {
-      await serviceRef.current.invite(invite.email.trim(), invite.firstName.trim(), invite.lastName.trim(), invite.role);
+      await serviceRef.current.invite({
+        email: invite.email.trim(),
+        firstName: invite.firstName.trim(),
+        lastName: invite.lastName.trim(),
+        role: invite.role,
+      });
+      setInviteErrors({});
       toast.success(text.inviteSent);
       setInvite({ email: "", firstName: "", lastName: "", role: invite.role });
       reload();
     } catch (err) {
-      toast.error(reason(err, text.inviteFailed));
+      const texts = Object.entries(fieldErrorTexts(err, validation));
+      // Only the fields the form shows render their errors.
+      setInviteErrors(Object.fromEntries(texts));
+      // The toast names a field error the form cannot show first, then the first one it shows.
+      const first = (texts.find(([field]) => !INVITE_FIELDS.includes(field)) ?? texts[0])?.[1][0];
+      toast.error(first ?? errorText(err, errors, text.inviteFailed));
     } finally {
       setInviting(false);
     }
@@ -156,28 +207,33 @@ export function AdminUsersPanel({ service, getRoles, defaultInviteRole = "Admin"
         <h3 className="text-sm font-semibold text-gray-900">{text.inviteUser}</h3>
         <div className="flex flex-wrap items-end gap-2">
           <div className="w-40">
-            <TextInput label={text.firstName} value={invite.firstName} onChange={(e) => setInvite({ ...invite, firstName: e.target.value })} />
+            <TextInput label={text.firstName} error={inviteErrors.firstName?.join(" ")} value={invite.firstName} onChange={(e) => setInvite({ ...invite, firstName: e.target.value })} />
           </div>
           <div className="w-40">
-            <TextInput label={text.lastName} value={invite.lastName} onChange={(e) => setInvite({ ...invite, lastName: e.target.value })} />
+            <TextInput label={text.lastName} error={inviteErrors.lastName?.join(" ")} value={invite.lastName} onChange={(e) => setInvite({ ...invite, lastName: e.target.value })} />
           </div>
           <div className="flex-1 min-w-[14rem]">
-            <TextInput label={text.email} type="email" value={invite.email} onChange={(e) => setInvite({ ...invite, email: e.target.value })} />
+            <TextInput label={text.email} error={inviteErrors.email?.join(" ")} type="email" value={invite.email} onChange={(e) => setInvite({ ...invite, email: e.target.value })} />
+          </div>
+          <div>
+            <label className="text-xs text-gray-600">
+              {text.role}
+              <select
+                value={invite.role}
+                onChange={(e) => setInvite({ ...invite, role: e.target.value })}
+                aria-invalid={inviteErrors.role ? true : undefined}
+                aria-describedby={inviteErrors.role ? roleErrorId : undefined}
+                className="mt-1 block rounded-lg border border-gray-300 px-3 py-2 text-sm"
+              >
+                {allRoles.map((role) => (
+                  <option key={role} value={role}>
+                    {role}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <FieldError id={roleErrorId} error={inviteErrors.role?.join(" ")} />
           </div>
-          <label className="text-xs text-gray-600">
-            {text.role}
-            <select
-              value={invite.role}
-              onChange={(e) => setInvite({ ...invite, role: e.target.value })}
-              className="mt-1 block rounded-lg border border-gray-300 px-3 py-2 text-sm"
-            >
-              {allRoles.map((role) => (
-                <option key={role} value={role}>
-                  {role}
-                </option>
-              ))}
-            </select>
-          </label>
           <button
             onClick={sendInvite}
             disabled={inviting}

package/src/admin/CompanySettingsForm.tsx

@@ -1,18 +1,29 @@
 "use client";
 
 import { useEffect, useRef, useState, type FormEvent, type ReactNode } from "react";
+import { fieldErrorTexts } from "../api/fieldErrorText";
 import type { SiteSettings } from "../api/services";
 import { toast } from "../toast";
 import { TextInput } from "../ui/TextInput";
 import { Toggle } from "../ui/Toggle";
 import { withDefaults, type TextOverrides } from "../ui/withDefaults";
-import { defaultCompanySettingsFormStrings, type CompanySettingsFormStrings } from "./companySettingsFormStrings";
+import {
+  defaultCompanySettingsFormStrings,
+  type CompanySettingsFormStrings,
+  type CompanySettingsValidationStrings,
+} from "./companySettingsFormStrings";
 
+/** Props for `CompanySettingsForm`. */
 export interface CompanySettingsFormProps {
   /** The settings calls, such as `createSettingsService(api)`. */
   service: { get: () => Promise<SiteSettings>; update: (settings: SiteSettings) => Promise<SiteSettings> };
-  strings?: TextOverrides<CompanySettingsFormStrings> | undefined;
-  /** Shown below the form once the settings have loaded, such as the `BrandingManager`. */
+  /** The form's text. `validation` may name only some codes, the rest keep their defaults. */
+  strings?:
+    | (TextOverrides<Omit<CompanySettingsFormStrings, "validation">> & {
+        validation?: TextOverrides<CompanySettingsValidationStrings> | undefined;
+      })
+    | undefined;
+  /** The content shown below the form once the settings have loaded, such as the `BrandingManager`. */
   children?: ReactNode;
 }
 
@@ -35,11 +46,15 @@ const EMPTY: SiteSettings = {
  * number and VAT, the address in parts, and the public email and phone.
  */
 export function CompanySettingsForm({ service, strings, children }: CompanySettingsFormProps) {
-  const text = withDefaults(defaultCompanySettingsFormStrings, strings);
+  const { validation: validationOverrides, ...textOverrides } = strings ?? {};
+  const text = withDefaults(defaultCompanySettingsFormStrings, textOverrides);
+  const validation = withDefaults(defaultCompanySettingsFormStrings.validation, validationOverrides);
   const [settings, setSettings] = useState<SiteSettings>(EMPTY);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [failed, setFailed] = useState(false);
+  // The per-field texts from the last failed save, keyed by field name.
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string[]>>({});
   // The latest service, so an inline one does not load the settings again on every render.
   const serviceRef = useRef(service);
   useEffect(() => {
@@ -59,15 +74,20 @@ export function CompanySettingsForm({ service, strings, children }: CompanySetti
   }, [text.loadFailed]);
 
   const patch = (changes: Partial<SiteSettings>) => setSettings(prev => ({ ...prev, ...changes }));
+  const errorFor = (field: keyof SiteSettings) => fieldErrors[field]?.join(" ");
 
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setSaving(true);
     try {
       setSettings(await serviceRef.current.update(settings));
+      setFieldErrors({});
       toast.success(text.saved);
     } catch (err) {
-      toast.error(err instanceof Error && err.message ? err.message : text.saveFailed);
+      const texts = fieldErrorTexts(err, validation);
+      setFieldErrors(texts);
+      const first = Object.values(texts)[0]?.[0];
+      toast.error(first ?? (err instanceof Error && err.message ? err.message : text.saveFailed));
     } finally {
       setSaving(false);
     }
@@ -82,6 +102,7 @@ export function CompanySettingsForm({ service, strings, children }: CompanySetti
         <TextInput
           label={text.contactRecipient}
           name="contactRecipientEmail"
+          error={errorFor("contactRecipientEmail")}
           type="email"
           value={settings.contactRecipientEmail}
           onChange={e => patch({ contactRecipientEmail: e.target.value })}
@@ -89,23 +110,23 @@ export function CompanySettingsForm({ service, strings, children }: CompanySetti
         />
         <p className="text-xs text-gray-500">{text.contactRecipientHint}</p>
 
-        <TextInput label={text.companyName} name="companyName" value={settings.companyName} onChange={e => patch({ companyName: e.target.value })} required />
-        <TextInput label={text.legalName} name="companyLegalName" value={settings.companyLegalName} onChange={e => patch({ companyLegalName: e.target.value })} />
+        <TextInput label={text.companyName} name="companyName" error={errorFor("companyName")} value={settings.companyName} onChange={e => patch({ companyName: e.target.value })} required />
+        <TextInput label={text.legalName} name="companyLegalName" error={errorFor("companyLegalName")} value={settings.companyLegalName} onChange={e => patch({ companyLegalName: e.target.value })} />
         <p className="text-xs text-gray-500">{text.legalNameHint}</p>
 
-        <TextInput label={text.orgNumber} name="orgNumber" value={settings.orgNumber} onChange={e => patch({ orgNumber: e.target.value })} />
+        <TextInput label={text.orgNumber} name="orgNumber" error={errorFor("orgNumber")} value={settings.orgNumber} onChange={e => patch({ orgNumber: e.target.value })} />
         <Toggle label={text.vatRegistered} checked={settings.vatRegistered} onChange={v => patch({ vatRegistered: v })} />
         <p className="text-xs text-gray-500">{text.vatHint}</p>
 
-        <TextInput label={text.streetAddress} name="streetAddress" value={settings.streetAddress} onChange={e => patch({ streetAddress: e.target.value })} required />
+        <TextInput label={text.streetAddress} name="streetAddress" error={errorFor("streetAddress")} value={settings.streetAddress} onChange={e => patch({ streetAddress: e.target.value })} required />
         <div className="grid gap-4 sm:grid-cols-[8rem_1fr]">
-          <TextInput label={text.postalCode} name="postalCode" inputMode="numeric" value={settings.postalCode} onChange={e => patch({ postalCode: e.target.value })} />
-          <TextInput label={text.addressLocality} name="addressLocality" value={settings.addressLocality} onChange={e => patch({ addressLocality: e.target.value })} />
+          <TextInput label={text.postalCode} name="postalCode" error={errorFor("postalCode")} inputMode="numeric" value={settings.postalCode} onChange={e => patch({ postalCode: e.target.value })} />
+          <TextInput label={text.addressLocality} name="addressLocality" error={errorFor("addressLocality")} value={settings.addressLocality} onChange={e => patch({ addressLocality: e.target.value })} />
         </div>
-        <TextInput label={text.addressRegion} name="addressRegion" value={settings.addressRegion} onChange={e => patch({ addressRegion: e.target.value })} />
+        <TextInput label={text.addressRegion} name="addressRegion" error={errorFor("addressRegion")} value={settings.addressRegion} onChange={e => patch({ addressRegion: e.target.value })} />
         <p className="text-xs text-gray-500">{text.addressHint}</p>
-        <TextInput label={text.publicEmail} name="publicEmail" type="email" value={settings.publicEmail} onChange={e => patch({ publicEmail: e.target.value })} required />
-        <TextInput label={text.publicPhone} name="publicPhone" value={settings.publicPhone} onChange={e => patch({ publicPhone: e.target.value })} required />
+        <TextInput label={text.publicEmail} name="publicEmail" error={errorFor("publicEmail")} type="email" value={settings.publicEmail} onChange={e => patch({ publicEmail: e.target.value })} required />
+        <TextInput label={text.publicPhone} name="publicPhone" error={errorFor("publicPhone")} value={settings.publicPhone} onChange={e => patch({ publicPhone: e.target.value })} />
 
         <button
           type="submit"

package/src/admin/EmailStatsPanel.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { EmailStats } from "../api/services";
+import { withDefaults, type TextOverrides } from "../ui/withDefaults";
+import { defaultEmailStatsPanelStrings, type EmailStatsPanelStrings } from "./emailStatsPanelStrings";
+
+/** Props for `EmailStatsPanel`. */
+export interface EmailStatsPanelProps {
+  /** The email stats call, such as `createEmailStatsService(api)`. */
+  service: { get: (days?: number) => Promise<EmailStats> };
+  /** How many days back the stats go. Defaults to 30. */
+  days?: number | undefined;
+  strings?: TextOverrides<EmailStatsPanelStrings> | undefined;
+  /** The classes that replace the card's border and spacing, such as when the panel sits in the app's own card. */
+  className?: string | undefined;
+}
+
+type State = { status: "loading" } | { status: "failed" } | { status: "loaded"; stats: EmailStats };
+
+/**
+ * The admin card for the transactional email of the last days, from SjolystInnovation.AppKit.Email's
+ * stats endpoint: sent, delivered, bounces, and blocked or reported as spam. It says the stats are
+ * unavailable when they cannot load, without a toast, so the rest of the stats page stays calm.
+ */
+export function EmailStatsPanel({ service, days = 30, strings, className = "rounded-2xl border border-admin-border p-5" }: EmailStatsPanelProps) {
+  const text = withDefaults(defaultEmailStatsPanelStrings, strings);
+  const [state, setState] = useState<State>({ status: "loading" });
+  // The latest service, so an inline one does not load the stats again on every render.
+  const serviceRef = useRef(service);
+  useEffect(() => {
+    serviceRef.current = service;
+  }, [service]);
+
+  // An answer for an earlier `days` is ignored, so a slow one cannot replace the newer stats.
+  useEffect(() => {
+    let replaced = false;
+    serviceRef.current
+      .get(days)
+      .then((stats) => {
+        if (!replaced) setState({ status: "loaded", stats });
+      })
+      .catch(() => {
+        if (!replaced) setState({ status: "failed" });
+      });
+    return () => {
+      replaced = true;
+    };
+  }, [days]);
+
+  const shownDays = state.status === "loaded" ? state.stats.days : days;
+  const rows = (stats: EmailStats) => [
+    { label: text.sent, value: stats.requests },
+    { label: text.delivered, value: stats.delivered },
+    { label: text.bounces, value: stats.hardBounces + stats.softBounces },
+    { label: text.blocked, value: stats.blocked + stats.spamReports },
+  ];
+
+  return (
+    <section className={className}>
+      <h2 className="font-bold text-admin-title mb-3">{text.title.replaceAll("{days}", String(shownDays))}</h2>
+      {state.status === "loaded" ? (
+        <dl className="space-y-1.5 text-sm">
+          {rows(state.stats).map((row) => (
+            <div key={row.label} className="flex justify-between">
+              <dt className="text-admin-stat-label">{row.label}</dt>
+              <dd className="tabular-nums text-admin-stat-value">{row.value}</dd>
+            </div>
+          ))}
+        </dl>
+      ) : (
+        <p className="text-sm text-admin-stat-label">{state.status === "failed" ? text.unavailable : text.loading}</p>
+      )}
+    </section>
+  );
+}

package/src/admin/LegalPagesEditor.tsx

@@ -1,28 +1,39 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import type { LegalPage } from "../api/services";
+import { fieldErrorTexts } from "../api/fieldErrorText";
+import type { LegalPage } from "../api/legalPage";
+import { LEGAL_PAGE_KEYS } from "../legal/keys";
 import { toast } from "../toast";
+import { FieldError } from "../ui/field";
 import { TextInput } from "../ui/TextInput";
 import { withDefaults, type TextOverrides } from "../ui/withDefaults";
-import { defaultLegalPagesEditorStrings, type LegalPagesEditorStrings } from "./legalPagesEditorStrings";
+import { defaultLegalPageKeyLabels, defaultLegalPagesEditorStrings, type LegalPagesEditorStrings, type LegalPagesValidationStrings } from "./legalPagesEditorStrings";
 import { LocaleTabs } from "./LocaleTabs";
 
+/** Props for `LegalPagesEditor`. */
 export interface LegalPagesEditorProps<K extends string, L extends string> {
   /** The legal page calls, such as `createLegalService(api, publicApi)`. */
   service: {
+    /** The app's pages, as `createLegalService` gives them. */
+    keys?: readonly K[] | undefined;
     listAll: () => Promise<LegalPage<K>[]>;
-    save: (key: K, locale: L, title: string, bodyMarkdown: string) => Promise<unknown>;
+    save: (page: { key: K; locale: L; title: string; bodyMarkdown: string }) => Promise<unknown>;
   };
-  /** The pages, in tab order. The first opens. */
-  keys: readonly K[];
-  /** Each page's tab label, such as `Terms`. */
-  keyLabels: Record<K, string>;
-  /** The locales each page is written in. The first opens. */
+  /** The pages, in tab order. The editor opens on the first. Defaults to the service's `keys`, else `LEGAL_PAGE_KEYS`. */
+  keys?: readonly K[] | undefined;
+  /** Each page's tab label, such as `Terms`. A page left out uses `defaultLegalPageKeyLabels`, else its key. */
+  keyLabels?: Partial<Record<K, string>> | undefined;
+  /** The locales each page is written in. The editor opens on the first. */
   locales: readonly L[];
   /** Each locale's tab label, such as `Norsk`. */
   localeLabels: Record<L, string>;
-  strings?: TextOverrides<LegalPagesEditorStrings> | undefined;
+  /** The editor's text. `validation` may name only some codes, the rest keep their defaults. */
+  strings?:
+    | (TextOverrides<Omit<LegalPagesEditorStrings, "validation">> & {
+        validation?: TextOverrides<LegalPagesValidationStrings> | undefined;
+      })
+    | undefined;
 }
 
 type Draft = { title: string; bodyMarkdown: string };
@@ -30,14 +41,20 @@ type Draft = { title: string; bodyMarkdown: string };
 const emptyDraft: Draft = { title: "", bodyMarkdown: "" };
 
 /** The admin editor for the legal pages: one page and one locale at a time, with the title and the Markdown body. */
-export function LegalPagesEditor<K extends string, L extends string>({ service, keys, keyLabels, locales, localeLabels, strings }: LegalPagesEditorProps<K, L>) {
-  const text = withDefaults(defaultLegalPagesEditorStrings, strings);
+export function LegalPagesEditor<K extends string, L extends string>({ service, keys: keysProp, keyLabels, locales, localeLabels, strings }: LegalPagesEditorProps<K, L>) {
+  const keys = keysProp ?? service.keys ?? (LEGAL_PAGE_KEYS as readonly string[] as readonly K[]);
+  const labelOf = (key: K) => keyLabels?.[key] ?? (defaultLegalPageKeyLabels as Record<string, string | undefined>)[key] ?? key;
+  const { validation: validationOverrides, ...textOverrides } = strings ?? {};
+  const text = withDefaults(defaultLegalPagesEditorStrings, textOverrides);
+  const validation = withDefaults(defaultLegalPagesEditorStrings.validation, validationOverrides);
   const [drafts, setDrafts] = useState<Record<string, Draft>>({});
   const [activeKey, setActiveKey] = useState<K | undefined>(keys[0]);
   const [activeLocale, setActiveLocale] = useState<L | undefined>(locales[0]);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [failed, setFailed] = useState(false);
+  // The per-field texts from the last failed save, with the page and locale they belong to.
+  const [fieldErrors, setFieldErrors] = useState<{ slot: string; fields: Record<string, string[]> } | null>(null);
   // The latest service, so an inline one does not load the pages again on every render.
   const serviceRef = useRef(service);
   useEffect(() => {
@@ -60,20 +77,28 @@ export function LegalPagesEditor<K extends string, L extends string>({ service,
 
   const slot = `${activeKey}:${activeLocale}`;
   const draft = drafts[slot] ?? emptyDraft;
+  const errorFor = (field: keyof Draft) => (fieldErrors?.slot === slot ? fieldErrors.fields[field]?.join(" ") : undefined);
+  const bodyError = errorFor("bodyMarkdown");
 
   const patch = (changes: Partial<Draft>) => setDrafts(prev => ({ ...prev, [slot]: { ...(prev[slot] ?? emptyDraft), ...changes } }));
 
   const save = async () => {
-    if (draft.title.trim() === "" || draft.bodyMarkdown.trim() === "") {
+    const blank = (Object.keys(emptyDraft) as (keyof Draft)[]).filter(field => draft[field].trim() === "");
+    if (blank.length > 0) {
+      setFieldErrors({ slot, fields: Object.fromEntries(blank.map(field => [field, [validation.required]])) });
       toast.error(text.required);
       return;
     }
     setSaving(true);
     try {
-      await serviceRef.current.save(activeKey, activeLocale, draft.title.trim(), draft.bodyMarkdown);
+      await serviceRef.current.save({ key: activeKey, locale: activeLocale, title: draft.title.trim(), bodyMarkdown: draft.bodyMarkdown });
+      setFieldErrors(null);
       toast.success(text.saved);
     } catch (err) {
-      toast.error(err instanceof Error && err.message ? err.message : text.saveFailed);
+      const fields = fieldErrorTexts(err, validation);
+      setFieldErrors({ slot, fields });
+      const first = Object.values(fields)[0]?.[0];
+      toast.error(first ?? (err instanceof Error && err.message ? err.message : text.saveFailed));
     } finally {
       setSaving(false);
     }
@@ -105,14 +130,14 @@ export function LegalPagesEditor<K extends string, L extends string>({ service,
             aria-pressed={key === activeKey}
             className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${key === activeKey ? "bg-gray-900 text-white" : "text-gray-600 hover:bg-gray-100"}`}
           >
-            {keyLabels[key]}
+            {labelOf(key)}
           </button>
         ))}
       </div>
 
       <LocaleTabs locales={locales} labels={localeLabels} active={activeLocale} onChange={setActiveLocale} filled={filled} notFilled={text.notFilled} />
 
-      <TextInput label={text.title} value={draft.title} onChange={e => patch({ title: e.target.value })} />
+      <TextInput label={text.title} error={errorFor("title")} value={draft.title} onChange={e => patch({ title: e.target.value })} />
 
       <div>
         <label htmlFor="legal-body" className="block text-sm font-medium text-gray-700 mb-1">
@@ -123,8 +148,11 @@ export function LegalPagesEditor<K extends string, L extends string>({ service,
           rows={24}
           value={draft.bodyMarkdown}
           onChange={e => patch({ bodyMarkdown: e.target.value })}
-          className="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary"
+          aria-invalid={bodyError ? true : undefined}
+          aria-describedby={bodyError ? "legal-body-error" : undefined}
+          className={`w-full rounded-lg border ${bodyError ? "border-input-border-error" : "border-gray-300"} px-3 py-2 font-mono text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary`}
         />
+        <FieldError id="legal-body-error" error={bodyError} />
       </div>
     </div>
   );

package/src/admin/LocaleTabs.tsx

@@ -1,18 +1,19 @@
 "use client";
 
+/** Props for `LocaleTabs`. */
 export interface LocaleTabsProps<L extends string> {
   locales: readonly L[];
   /** Each locale's tab label, such as `Norsk`. */
   labels: Record<L, string>;
   active: L;
   onChange: (locale: L) => void;
-  /** Which locales have content. A locale marked false gets a dot titled `notFilled`. */
+  /** The locales that have content. A locale set to `false` gets a dot titled `notFilled`. */
   filled?: Partial<Record<L, boolean>> | undefined;
-  /** The dot's title, such as "Not filled in". */
+  /** The dot's title. Defaults to "Not filled in". */
   notFilled?: string | undefined;
 }
 
-/** Tabs for editing one translation at a time. */
+/** Renders tabs for editing one translation at a time. */
 export function LocaleTabs<L extends string>({ locales, labels, active, onChange, filled, notFilled = "Not filled in" }: LocaleTabsProps<L>) {
   return (
     <div className="flex items-center gap-1 border-b border-gray-200">