@bygghammar/cms-platform 0.52.0 → 0.54.0

package/src/forms/FormRenderer.tsx

@@ -0,0 +1,438 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight } from "lucide-react";
+import { useT, useLocale } from "../i18n";
+import type { LocalizedString } from "../i18n";
+import { tripFieldOptions, resolveAutocomplete } from "./field-sets";
+import type { FormFieldDef, PublicForm, TripSource } from "./field-sets";
+import {
+  isFieldRequired,
+  isFieldVisible,
+  normalizeCheckbox,
+  validateAll,
+  validateField,
+} from "./conditions";
+import { renderLinkedText } from "./rich-text";
+import { useHostPublicFormFns, useHostTripSource } from "../host";
+
+const TOKEN_PREFIX = "form-draft-token:";
+
+/** Stable per-visitor, per-form token so a draft updates instead of piling up. */
+function draftToken(formKey: string): string {
+  if (typeof window === "undefined") return "";
+  const storageKey = TOKEN_PREFIX + formKey;
+  try {
+    const existing = window.localStorage.getItem(storageKey);
+    if (existing) return existing;
+    const token =
+      typeof crypto !== "undefined" && crypto.randomUUID
+        ? crypto.randomUUID()
+        : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    window.localStorage.setItem(storageKey, token);
+    return token;
+  } catch {
+    return "";
+  }
+}
+
+/**
+ * Renders a managed form from an already-resolved definition.
+ * `preview` runs every rule and validation but never contacts the server,
+ * which is what the backoffice preview uses.
+ */
+export function FormRenderer({
+  form,
+  dark = false,
+  className,
+  preview = false,
+}: {
+  form: PublicForm;
+  dark?: boolean;
+  className?: string;
+  preview?: boolean;
+}) {
+  const { t } = useT();
+  const locale = useLocale();
+  const { submitForm: send, savePartialSubmission: saveDraft } = useHostPublicFormFns();
+
+  const mountedAt = useRef(Date.now());
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [consent, setConsent] = useState(false);
+  const [hp, setHp] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    mountedAt.current = Date.now();
+  }, [form.key]);
+
+  const tripItems = useHostTripSource() as TripSource[] | undefined;
+
+  // "trip"/"course" fields are dropdowns whose choices come from the central
+  // trips source (single source of truth), resolved at render time.
+  const resolved = useMemo(() => {
+    const trips = (tripItems ?? []) as TripSource[];
+    return (form.fields ?? []).map((f) =>
+      f.type === "trip" || f.type === "course"
+        ? {
+            ...f,
+            type: "select" as const,
+            options: tripFieldOptions(trips, f.tripYear ?? f.courseYear),
+          }
+        : f,
+    );
+  }, [form, tripItems]);
+
+  const enabled = useMemo(() => resolved.filter((f) => f.enabled), [resolved]);
+  /** Fields whose show-conditions currently match. */
+  const fields = useMemo(() => enabled.filter((f) => isFieldVisible(f, values)), [enabled, values]);
+
+  // Save what the visitor typed even if they never submit (debounced).
+  const dirty = useRef(false);
+  useEffect(() => {
+    if (preview || !form.savePartials || done || !dirty.current) return;
+    const token = draftToken(form.key);
+    if (!token) return;
+    const snapshot = Object.fromEntries(fields.map((f) => [f.key, values[f.key] ?? ""]));
+    if (!Object.values(snapshot).some((v) => v.trim())) return;
+    const id = window.setTimeout(() => {
+      void Promise.resolve(
+        saveDraft({
+          key: form.key,
+          clientToken: token,
+          locale,
+          pagePath: window.location.pathname,
+          values: snapshot,
+        }),
+      ).catch(() => {});
+    }, 1500);
+    return () => window.clearTimeout(id);
+  }, [values, fields, form.key, form.savePartials, locale, done, preview, saveDraft]);
+
+  const setValue = (f: FormFieldDef, value: string) => {
+    dirty.current = true;
+    setValues((v) => {
+      const next = { ...v, [f.key]: value };
+      // Answers to fields that just became hidden must not be submitted.
+      for (const other of enabled) {
+        if (other.key !== f.key && !isFieldVisible(other, next)) delete next[other.key];
+      }
+      return next;
+    });
+    if (touched[f.key] || errors[f.key]) {
+      setErrors((e) => {
+        const next = { ...e };
+        const msg = validateField(f, { ...values, [f.key]: value }, locale);
+        if (msg) next[f.key] = msg;
+        else delete next[f.key];
+        return next;
+      });
+    }
+  };
+
+  const blurField = (f: FormFieldDef) => {
+    setTouched((t) => ({ ...t, [f.key]: true }));
+    const msg = validateField(f, values, locale);
+    setErrors((e) => {
+      const next = { ...e };
+      if (msg) next[f.key] = msg;
+      else delete next[f.key];
+      return next;
+    });
+  };
+
+  if (done) {
+    return (
+      <div
+        className={[
+          className ?? "",
+          dark
+            ? "bg-paper/5 backdrop-blur border border-paper/15"
+            : "border border-ink/10 bg-white",
+          "p-8 text-center",
+        ].join(" ")}
+      >
+        <p className="font-serif text-2xl whitespace-pre-line">
+          {t(form.thankyouMessage as LocalizedString)}
+        </p>
+        {preview ? (
+          <button
+            type="button"
+            onClick={() => {
+              setDone(false);
+              setValues({});
+              setConsent(false);
+              setErrors({});
+              setTouched({});
+            }}
+            className="mt-6 border border-current/20 px-4 py-2 text-[0.65rem] uppercase tracking-[0.2em]"
+          >
+            Reset preview
+          </button>
+        ) : null}
+      </div>
+    );
+  }
+
+  const inputCls = dark
+    ? "w-full bg-paper/10 border border-paper/25 px-4 pt-5 pb-2 text-paper placeholder-transparent focus:border-sea focus:bg-paper/15 focus:outline-none transition-colors"
+    : "w-full bg-white border border-ink/20 px-4 pt-5 pb-2 text-ink placeholder-transparent focus:border-sea focus:outline-none transition-colors";
+  const labelCls = dark
+    ? "pointer-events-none absolute left-4 top-1.5 text-[0.65rem] uppercase tracking-[0.2em] text-paper/75"
+    : "pointer-events-none absolute left-4 top-1.5 text-[0.65rem] uppercase tracking-[0.2em] text-ink/55";
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate everything that is currently visible before touching the server.
+    const found = validateAll(enabled, values, locale);
+    if (form.requireConsent && !consent) {
+      setError(
+        locale === "sv" ? "Du behöver godkänna villkoren." : "Please accept the terms to continue.",
+      );
+      if (!Object.keys(found).length) return;
+    }
+    if (Object.keys(found).length) {
+      setErrors(found);
+      setTouched(Object.fromEntries(Object.keys(found).map((k) => [k, true])));
+      const first = document.getElementById(`${form.key}-${Object.keys(found)[0]}`);
+      first?.focus();
+      first?.scrollIntoView({ behavior: "smooth", block: "center" });
+      return;
+    }
+
+    // Preview mode stops here: rules and validation ran, nothing is stored.
+    if (preview) {
+      setDone(true);
+      return;
+    }
+
+    setBusy(true);
+    setError(null);
+    try {
+      // Send only the answers to fields the visitor actually saw.
+      const visible = Object.fromEntries(fields.map((f) => [f.key, values[f.key] ?? ""]));
+      await send({
+        key: form.key,
+        locale,
+        pagePath: typeof window !== "undefined" ? window.location.pathname : undefined,
+        consent,
+        elapsedMs: Date.now() - mountedAt.current,
+        hp,
+        clientToken: form.savePartials ? draftToken(form.key) : undefined,
+        values: visible,
+      });
+      if (form.thankyouMode === "redirect" && form.thankyouRedirect) {
+        window.location.href = form.thankyouRedirect;
+        return;
+      }
+      setDone(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const renderField = (f: FormFieldDef) => {
+    const label = t(f.label as LocalizedString);
+    const help = f.help ? t(f.help as LocalizedString) : "";
+    const placeholder = f.placeholder ? t(f.placeholder as LocalizedString) : label;
+    const id = `${form.key}-${f.key}`;
+    const required = isFieldRequired(f, values);
+    const err = errors[f.key];
+    const errId = `${id}-error`;
+    const invalidCls = err ? " border-red-500" : "";
+
+    const Message = err ? (
+      <p id={errId} role="alert" className="mt-1 text-xs text-red-500 whitespace-pre-line">
+        {err}
+      </p>
+    ) : help ? (
+      <p className="mt-1 text-xs opacity-60 whitespace-pre-line">{help}</p>
+    ) : null;
+
+    if (f.type === "checkbox") {
+      return (
+        <div key={f.key} className="sm:col-span-2">
+          <label className="flex items-start gap-3 text-sm">
+            <input
+              id={id}
+              name={f.key}
+              type="checkbox"
+              autoComplete="off"
+              checked={normalizeCheckbox(values[f.key] ?? "") === "true"}
+              aria-invalid={err ? true : undefined}
+              aria-describedby={err ? errId : undefined}
+              onChange={(e) => setValue(f, e.target.checked ? "true" : "false")}
+              onBlur={() => blurField(f)}
+              className="mt-0.5 size-4 shrink-0 accent-sea"
+            />
+            <span>
+              {label}
+              {required ? " *" : ""}
+            </span>
+          </label>
+          {Message}
+        </div>
+      );
+    }
+
+    const auto = resolveAutocomplete(f);
+    const inputMode =
+      f.type === "tel"
+        ? ("tel" as const)
+        : f.type === "email"
+          ? ("email" as const)
+          : f.type === "number"
+            ? ("numeric" as const)
+            : undefined;
+
+    const common = {
+      id,
+      name: f.key,
+      autoComplete: auto,
+      placeholder,
+      maxLength: f.maxLength,
+      value: values[f.key] ?? "",
+      "aria-invalid": err ? true : undefined,
+      "aria-describedby": err ? errId : undefined,
+      onChange: (
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
+      ) => setValue(f, e.target.value),
+      onBlur: () => blurField(f),
+      className: inputCls + invalidCls,
+    };
+    return (
+      <div key={f.key} className={["relative", f.wide ? "sm:col-span-2" : ""].join(" ")}>
+        {f.type === "textarea" ? (
+          <textarea {...common} rows={4} />
+        ) : f.type === "select" ? (
+          <select {...common}>
+            <option value="">—</option>
+            {(f.options ?? []).map((o) => (
+              <option key={o.value} value={o.value}>
+                {t(o.label as LocalizedString)}
+              </option>
+            ))}
+          </select>
+        ) : (
+          <input
+            {...common}
+            inputMode={inputMode}
+            type={f.type}
+            min={f.type === "date" ? f.minDate : f.min}
+            max={f.type === "date" ? f.maxDate : f.max}
+          />
+        )}
+        <label htmlFor={id} className={labelCls}>
+          {label}
+          {required ? " *" : ""}
+        </label>
+        {Message}
+      </div>
+    );
+  };
+
+  return (
+    <form
+      id={`form-${form.key}`}
+      onSubmit={onSubmit}
+      noValidate
+      className={[
+        className ?? "",
+        dark ? "bg-paper/5 backdrop-blur border border-paper/15" : "border border-ink/10 bg-white",
+        "p-6 md:p-8 space-y-5",
+      ].join(" ")}
+    >
+      <div className="grid gap-4 sm:grid-cols-2">{fields.map(renderField)}</div>
+
+      {form.honeypot ? (
+        <div className="hidden" aria-hidden="true">
+          <label>
+            Company
+            <input
+              tabIndex={-1}
+              autoComplete="off"
+              value={hp}
+              onChange={(e) => setHp(e.target.value)}
+            />
+          </label>
+        </div>
+      ) : null}
+
+      {form.requireConsent ? (
+        <label
+          className={[
+            "flex items-start gap-3 text-xs",
+            dark ? "text-paper/85" : "text-ink/70",
+          ].join(" ")}
+        >
+          <input
+            type="checkbox"
+            required
+            checked={consent}
+            onChange={(e) => setConsent(e.target.checked)}
+            className={[
+              "mt-0.5 size-4 shrink-0 accent-sea bg-transparent border",
+              dark ? "border-paper/40" : "border-ink/30",
+            ].join(" ")}
+          />
+          <span>
+            {renderLinkedText(t(form.consentText as LocalizedString), {
+              privacyUrl: form.privacyPolicyUrl,
+            })}
+          </span>
+        </label>
+      ) : null}
+
+      {error ? <p className="text-xs text-red-500 whitespace-pre-line">{error}</p> : null}
+
+      <button
+        type="submit"
+        disabled={busy}
+        className={[
+          "group inline-flex w-full items-center justify-center gap-2 px-6 py-4 text-xs uppercase tracking-[0.22em] transition-all disabled:opacity-60",
+          dark ? "bg-paper text-ink hover:bg-sea" : "bg-ink text-paper hover:bg-sea hover:text-ink",
+        ].join(" ")}
+      >
+        {t(form.submitLabel as LocalizedString)}
+        <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+      </button>
+    </form>
+  );
+}
+
+/** Fetches a published form by key and renders it. */
+export function ManagedForm({
+  formKey,
+  dark = false,
+  className,
+}: {
+  formKey: string;
+  dark?: boolean;
+  className?: string;
+}) {
+  const { getPublicForm } = useHostPublicFormFns();
+  const { data: form, isLoading } = useQuery({
+    queryKey: ["public-form", formKey],
+    queryFn: () => getPublicForm(formKey) as Promise<PublicForm | null>,
+    staleTime: 60_000,
+  });
+
+  if (isLoading) {
+    return (
+      <div className={className}>
+        <div className="h-64 animate-pulse border border-current/15 bg-current/5" />
+      </div>
+    );
+  }
+  if (!form) return null;
+  return <FormRenderer form={form} dark={dark} className={className} />;
+}
+
+export type { PublicForm };

package/src/host/index.tsx

@@ -148,3 +148,78 @@ export function useHostMediaUpload(existing: HostMediaItem[] = []): HostMediaUpl
   if (!hook) missing("useMediaUpload");
   return hook(existing);
 }
+
+/* --------------------------- public form runtime --------------------------- */
+
+/** Answers keyed by field key, exactly as the visitor typed them. */
+export type HostFormValues = Record<string, string>;
+
+export type HostSubmitFormInput = {
+  key: string;
+  locale: string;
+  pagePath?: string;
+  consent?: boolean;
+  elapsedMs?: number;
+  hp?: string;
+  clientToken?: string;
+  values: HostFormValues;
+};
+
+export type HostSavePartialInput = {
+  key: string;
+  clientToken: string;
+  locale: string;
+  pagePath?: string;
+  values: HostFormValues;
+};
+
+/**
+ * Server functions behind the public form runtime. Each site wraps its own
+ * `createServerFn` declarations (they must live in the site bundle) and hands
+ * plain callables to the package.
+ */
+export type HostPublicFormFns = {
+  getPublicForm: (key: string) => Promise<unknown>;
+  submitForm: (input: HostSubmitFormInput) => Promise<unknown>;
+  savePartialSubmission: (input: HostSavePartialInput) => Promise<unknown>;
+};
+
+export type HostSiteAdapters = {
+  /** Hook returning the site's public form server functions. */
+  usePublicFormFns: () => HostPublicFormFns;
+  /**
+   * Hook returning the site's central trip/course source, used to fill
+   * `trip`/`course` dropdowns from a single source of truth.
+   */
+  useTripSource: () => unknown[];
+};
+
+let siteAdapters: Partial<HostSiteAdapters> = {};
+
+export function registerSiteAdapters(adapters: Partial<HostSiteAdapters>): void {
+  siteAdapters = { ...siteAdapters, ...adapters };
+}
+
+/** Register public-site adapters while constructing a value the site exports. */
+export function initializeSiteAdapters<T>(
+  adapters: Partial<HostSiteAdapters>,
+  initialize: () => T,
+): T {
+  registerSiteAdapters(adapters);
+  return initialize();
+}
+
+export function useHostPublicFormFns(): HostPublicFormFns {
+  const hook = siteAdapters.usePublicFormFns;
+  if (!hook) {
+    throw new Error(
+      '@bygghammar/cms-platform: site adapter "usePublicFormFns" is not registered. Call registerSiteAdapters() during site startup.',
+    );
+  }
+  return hook();
+}
+
+export function useHostTripSource(): unknown[] {
+  const hook = siteAdapters.useTripSource;
+  return hook ? hook() : [];
+}

package/src/server/admin-core.ts

@@ -15,6 +15,7 @@ import type { SupabaseClient } from "@supabase/supabase-js";
 
 import { writeAudit } from "./audit-core";
 import { actorEmail, assertRole, assertStaff, type PlatformAuthContext } from "./guards";
+import { logEmail } from "./email-log-core";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
@@ -111,6 +112,15 @@ export async function createUserCore(
       .from("user_roles")
       .insert(roles.map((role) => ({ user_id: uid, role })));
   }
+  if (!input.password) {
+    await logEmail(anyClient(admin), {
+      to: input.email,
+      subject: "Your new account",
+      provider: "Authentication service",
+      status: "sent",
+      purpose: "user_invite",
+    });
+  }
   await audit(deps, "user.create", "auth.users", uid, { email: input.email, roles });
   return { id: uid };
 }
@@ -153,6 +163,13 @@ export async function sendPasswordResetEmailCore(
     email: input.email,
   });
   if (error) throw new Error(error.message);
+  await logEmail(anyClient(admin), {
+    to: input.email,
+    subject: "Password reset",
+    provider: "Authentication service",
+    status: "sent",
+    purpose: "password_reset",
+  });
   await audit(deps, "user.send_reset", "auth.users", undefined, { email: input.email });
   return { ok: true };
 }
@@ -359,19 +376,18 @@ export async function sendTestEmailCore(
       )
     : ({ ok: false, error: "No from address configured for this provider or in the email settings." } as const);
 
-  await anyClient(admin)
-    .from("email_logs")
-    .insert({
-      to_address: input.to,
-      from_address: fromEmail,
-      reply_to: replyTo,
-      subject,
-      body_preview: text.slice(0, 200),
-      provider: provider.name,
-      status: result.ok ? "sent" : "failed",
-      error: result.ok ? null : result.error,
-      meta: { kind: provider.kind, provider_id: provider.id, test: true },
-    });
+  await logEmail(anyClient(admin), {
+    to: input.to,
+    from: fromEmail,
+    replyTo: replyTo,
+    subject,
+    bodyPreview: text,
+    provider: provider.name,
+    status: result.ok ? "sent" : "failed",
+    error: result.ok ? null : result.error,
+    purpose: "provider_test",
+    meta: { kind: provider.kind, provider_id: provider.id, test: true },
+  });
 
   await audit(deps, "email_provider.test_send", "email_providers", provider.id, {
     to: input.to,

package/src/server/audit-core.ts

@@ -2,19 +2,20 @@
  * Host-agnostic audit trail writer.
  *
  * Every platform core records what an editor did in the append-only
- * `audit_logs` table. The host passes a privileged client because the trail must
- * be written even when the acting user cannot read it back, and the entry always
- * carries the acting user's id and email so the log stays attributable.
+ * `audit_logs` table. Entries always carry the acting user's id and email, and
+ * always carry a plain-English sentence in `meta.summary` describing what
+ * happened, so the Audit view never has to show raw codes.
  *
  * Auditing is deliberately best-effort: a failed log entry never fails the
  * operation the editor asked for.
  */
+import { describeAudit } from "../admin/describe-log";
 import type { PlatformAuthContext } from "./guards";
 import { actorEmail } from "./guards";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-/** Minimal privileged-client shape the audit writer needs. */
+/** Minimal client shape the audit writer needs. */
 export type AuditClient = {
   from: (table: string) => { insert: (row: any) => PromiseLike<{ error: any }> };
 };
@@ -26,6 +27,9 @@ export type AuditEntry = {
   meta?: Record<string, unknown>;
 };
 
+/** Writer shape hosts can pass into cores that need auditing. */
+export type AuditWriter = (entry: AuditEntry) => Promise<void>;
+
 /** Write one audit entry. Never throws — logging must not break the action. */
 export async function writeAudit(
   admin: AuditClient,
@@ -33,13 +37,20 @@ export async function writeAudit(
   entry: AuditEntry,
 ): Promise<void> {
   try {
+    const meta = { ...(entry.meta ?? {}) } as Record<string, unknown>;
+    meta["summary"] = describeAudit({
+      action: entry.action,
+      entity: entry.entity ?? null,
+      entityId: entry.entityId ?? null,
+      meta,
+    });
     const { error } = await admin.from("audit_logs").insert({
       actor_id: context.userId,
       actor_email: actorEmail(context),
       action: entry.action,
       entity: entry.entity ?? null,
       entity_id: entry.entityId ?? null,
-      meta: (entry.meta ?? {}) as unknown,
+      meta: meta as unknown,
     });
     if (error) console.warn("audit failed", error.message);
   } catch (err) {
@@ -52,3 +63,17 @@ export function auditWriter(admin: AuditClient, context: PlatformAuthContext, en
   return (action: string, entityId: string, meta: Record<string, unknown> = {}) =>
     writeAudit(admin, context, { action, entity, entityId, meta });
 }
+
+/**
+ * Write one audit entry as the signed-in staff user.
+ *
+ * `audit_logs` accepts inserts from staff under row-level security, so cores
+ * that already ran a staff check can log through the ordinary request client
+ * without any privileged credential.
+ */
+export async function auditAs(
+  context: PlatformAuthContext & { supabase: unknown },
+  entry: AuditEntry,
+): Promise<void> {
+  await writeAudit(context.supabase as unknown as AuditClient, context, entry);
+}

package/src/server/content-sections-core.ts

@@ -10,6 +10,7 @@
 import type { Json } from "../i18n/json";
 import { stampManualEdits } from "../i18n/translation-meta";
 import { assertStaff, type PlatformAuthContext } from "./guards";
+import { auditAs } from "./audit-core";
 
 /** Structural subset of a Supabase-shaped client used by this core. */
 export type ContentClient = {
@@ -64,5 +65,12 @@ export async function saveContentSectionCore(
     .from("content_sections")
     .upsert({ key: input.key, data: stamped as Json }, { onConflict: "key" });
   if (error) throw new Error(error.message);
+
+  await auditAs(context as never, {
+    action: "content.section.save",
+    entity: "content_sections",
+    entityId: input.key,
+    meta: { key: input.key },
+  });
   return { ok: true, key: input.key };
 }