@bygghammar/cms-platform 0.3.1 → 0.5.0

package/src/backoffice/forms/RuleSimulator.tsx

@@ -0,0 +1,163 @@
+import { useMemo, useState } from "react";
+import { Eye, EyeOff, RotateCcw } from "lucide-react";
+import { tripFieldOptions, type TripSource, type FormFieldDef } from "../../forms/field-sets";
+import {
+  fieldLabel,
+  hasRule,
+  isFieldRequired,
+  isFieldVisible,
+  normalizeCheckbox,
+  validateField,
+} from "../../forms/conditions";
+
+/**
+ * Rule simulation: type example answers and immediately see which fields
+ * show, which become required and which validation messages a visitor
+ * would get — all before publishing.
+ */
+export function RuleSimulator({
+  fields,
+  locale = "sv",
+  trips,
+}: {
+  fields: FormFieldDef[];
+  locale?: string;
+  /** Trip/course rows used to expand trip fields into selectable options. */
+  trips?: TripSource[];
+}) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const tripItems = trips;
+  const resolved = useMemo(() => {
+    const trips = (tripItems ?? []) as TripSource[];
+    return fields.map((f) =>
+      f.type === "trip" || f.type === "course"
+        ? {
+            ...f,
+            type: "select" as const,
+            options: tripFieldOptions(trips, f.tripYear ?? f.courseYear),
+          }
+        : f,
+    );
+  }, [fields, tripItems]);
+  const enabled = useMemo(() => resolved.filter((f) => f.enabled), [resolved]);
+
+  const rows = enabled.map((f) => {
+    const visible = isFieldVisible(f, values);
+    return {
+      field: f,
+      visible,
+      required: isFieldRequired(f, values),
+      error: visible ? validateField(f, values, locale) : null,
+      conditional: hasRule(f.showWhen) || hasRule(f.requireWhen),
+    };
+  });
+
+  const errors = rows.filter((r) => r.error).length;
+  const hidden = rows.filter((r) => !r.visible).length;
+
+  const set = (key: string, v: string) => setValues((p) => ({ ...p, [key]: v }));
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h3 className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Rule simulation</h3>
+          <p className="mt-1 text-xs text-ink/45">
+            Example answers only — nothing is saved or sent.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setValues({})}
+          className="inline-flex items-center gap-2 border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea"
+        >
+          <RotateCcw className="size-3.5" />
+          Reset
+        </button>
+      </div>
+
+      <div className="flex flex-wrap gap-3 text-[0.65rem] uppercase tracking-[0.18em] text-ink/55">
+        <span>{rows.length - hidden} visible</span>
+        <span>{hidden} hidden</span>
+        <span>{rows.filter((r) => r.required).length} required</span>
+        <span className={errors ? "text-red-500" : ""}>{errors} error(s)</span>
+      </div>
+
+      {enabled.length === 0 ? (
+        <p className="text-xs text-ink/45">No active fields to simulate.</p>
+      ) : null}
+
+      <div className="space-y-2">
+        {rows.map(({ field: f, visible, required, error, conditional }) => (
+          <div
+            key={f.key}
+            className={`grid gap-2 border p-3 sm:grid-cols-[1fr_1fr] ${
+              visible ? "border-ink/10" : "border-dashed border-ink/15 bg-ink/[0.02]"
+            }`}
+          >
+            <div className="min-w-0">
+              <div className="flex items-center gap-2 text-xs text-ink">
+                {visible ? (
+                  <Eye className="size-3.5 text-sea" />
+                ) : (
+                  <EyeOff className="size-3.5 text-ink/35" />
+                )}
+                <span className="truncate">{fieldLabel(f, locale)}</span>
+                {required ? (
+                  <span className="text-[0.6rem] uppercase tracking-[0.16em] text-sea">
+                    required
+                  </span>
+                ) : null}
+                {conditional ? (
+                  <span className="text-[0.6rem] uppercase tracking-[0.16em] text-ink/35">
+                    conditional
+                  </span>
+                ) : null}
+              </div>
+              <div className="mt-0.5 text-[0.6rem] uppercase tracking-[0.16em] text-ink/35">
+                {f.key} · {f.type}
+              </div>
+              {error ? <p className="mt-1 text-xs text-red-500">{error}</p> : null}
+            </div>
+
+            <div>
+              {f.type === "checkbox" ? (
+                <label className="flex items-center gap-2 text-xs text-ink/70">
+                  <input
+                    type="checkbox"
+                    checked={normalizeCheckbox(values[f.key] ?? "") === "true"}
+                    onChange={(e) => set(f.key, e.target.checked ? "true" : "false")}
+                    className="size-4 accent-sea"
+                  />
+                  Checked
+                </label>
+              ) : f.type === "select" ? (
+                <select
+                  value={values[f.key] ?? ""}
+                  onChange={(e) => set(f.key, e.target.value)}
+                  className="w-full border border-ink/15 px-2 py-1 text-xs"
+                >
+                  <option value="">—</option>
+                  {(f.options ?? []).map((o) => (
+                    <option key={o.value} value={o.value}>
+                      {o.label?.sv || o.label?.en || o.value}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  type={f.type === "textarea" ? "text" : f.type}
+                  value={values[f.key] ?? ""}
+                  onChange={(e) => set(f.key, e.target.value)}
+                  placeholder="Example answer"
+                  className="w-full border border-ink/15 px-2 py-1 text-xs"
+                  disabled={!visible}
+                />
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/backoffice/forms/SmartTags.tsx

@@ -0,0 +1,181 @@
+import { useMemo, useRef, useState } from "react";
+import { Tag } from "lucide-react";
+import { LocalizedField, TextField } from "../inspectors/fields";
+import { fieldLabel } from "../../forms/conditions";
+import type { FormFieldDef } from "../../forms/field-sets";
+import type { LocalizedString } from "../../i18n";
+import { SUPPORTED_LOCALES, LOCALE_LABELS, type Locale } from "../../i18n";
+
+export type SmartTag = { tag: string; label: string };
+
+/** System tags available in every notification and autoreply template. */
+const SYSTEM_TAGS: SmartTag[] = [
+  { tag: "all_fields", label: "All submitted answers (table)" },
+  { tag: "form_name", label: "Form name" },
+  { tag: "form_key", label: "Form key" },
+  { tag: "submission_id", label: "Submission ID" },
+  { tag: "date", label: "Date and time" },
+  { tag: "locale", label: "Language" },
+  { tag: "page", label: "Page path" },
+  { tag: "page_url", label: "Page URL" },
+  { tag: "admin_url", label: "Link to the submission in the backoffice" },
+  { tag: "ip", label: "Visitor IP address" },
+  { tag: "user_agent", label: "Browser / user agent" },
+  { tag: "referrer", label: "Referring URL" },
+];
+
+/** Field answer tags for the given form, followed by the system tags. */
+export function smartTagGroups(fields: FormFieldDef[]): { title: string; tags: SmartTag[] }[] {
+  const answers = fields
+    .filter((f) => f.enabled)
+    .map((f) => ({ tag: f.key, label: fieldLabel(f, "sv") || f.key }));
+  return [
+    ...(answers.length ? [{ title: "Field answers", tags: answers }] : []),
+    { title: "Submission info", tags: SYSTEM_TAGS },
+  ];
+}
+
+/** Dropdown that inserts a {{smart_tag}} into the field it belongs to. */
+export function SmartTags({
+  fields,
+  onInsert,
+  right,
+}: {
+  fields: FormFieldDef[];
+  onInsert: (token: string) => void;
+  right?: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const groups = useMemo(() => smartTagGroups(fields), [fields]);
+  const wrap = useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={wrap} className="relative flex items-center gap-2">
+      {right}
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="inline-flex items-center gap-1.5 border border-ink/15 px-2 py-1 text-[0.6rem] uppercase tracking-[0.18em] text-ink/60 hover:border-sea hover:text-ink"
+      >
+        <Tag className="size-3" />
+        Smart tags
+      </button>
+      {open ? (
+        <>
+          <button
+            type="button"
+            aria-label="Close smart tags"
+            className="fixed inset-0 z-40 cursor-default"
+            onClick={() => setOpen(false)}
+          />
+          <div className="absolute right-0 top-full z-50 mt-1 max-h-72 w-72 overflow-auto border border-ink/15 bg-white p-2 shadow-lg">
+            {groups.map((g) => (
+              <div key={g.title} className="mb-2 last:mb-0">
+                <div className="px-1 py-1 text-[0.6rem] uppercase tracking-[0.18em] text-ink/40">
+                  {g.title}
+                </div>
+                {g.tags.map((t) => (
+                  <button
+                    key={t.tag}
+                    type="button"
+                    onClick={() => {
+                      onInsert(`{{${t.tag}}}`);
+                      setOpen(false);
+                    }}
+                    className="flex w-full items-baseline justify-between gap-2 px-1 py-1 text-left text-xs hover:bg-ice/60"
+                  >
+                    <span className="text-ink/80">{t.label}</span>
+                    <span className="shrink-0 font-mono text-[0.65rem] text-ink/45">
+                      {`{{${t.tag}}}`}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            ))}
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+/** Plain text field (sender name, reply-to…) with a smart tag picker. */
+export function SmartTagTextField({
+  label,
+  value,
+  onChange,
+  fields,
+  placeholder,
+}: {
+  label: string;
+  value: string | undefined;
+  onChange: (v: string) => void;
+  fields: FormFieldDef[];
+  placeholder?: string;
+}) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-end justify-between gap-2">
+        <div className="flex-1">
+          <TextField label={label} value={value} onChange={onChange} placeholder={placeholder} />
+        </div>
+      </div>
+      <div className="flex justify-end">
+        <SmartTags
+          fields={fields}
+          onInsert={(token) => onChange(`${(value ?? "").trim()} ${token}`.trim())}
+        />
+      </div>
+    </div>
+  );
+}
+
+/** Localized subject/body field with a smart tag picker per language. */
+export function SmartTagLocalizedField({
+  label,
+  value,
+  onChange,
+  fields,
+  multiline,
+}: {
+  label: string;
+  value: Partial<LocalizedString> | undefined;
+  onChange: (next: Partial<LocalizedString>) => void;
+  fields: FormFieldDef[];
+  multiline?: boolean;
+}) {
+  const [target, setTarget] = useState<Locale>(SUPPORTED_LOCALES[0] as Locale);
+  const v = (value ?? {}) as Record<string, string>;
+
+  return (
+    <div className="space-y-1">
+      <LocalizedField label={label} value={value} onChange={onChange} multiline={multiline} />
+      <div className="flex justify-end">
+        <SmartTags
+          fields={fields}
+          right={
+            SUPPORTED_LOCALES.length > 1 ? (
+              <select
+                value={target}
+                onChange={(e) => setTarget(e.target.value as Locale)}
+                className="border border-ink/15 bg-white px-1 py-1 text-[0.6rem] uppercase tracking-[0.18em] text-ink/60"
+              >
+                {SUPPORTED_LOCALES.map((loc) => (
+                  <option key={loc} value={loc}>
+                    {LOCALE_LABELS[loc] ?? loc}
+                  </option>
+                ))}
+              </select>
+            ) : null
+          }
+          onInsert={(token) =>
+            onChange({
+              ...v,
+              [target]: `${v[target] ?? ""}${(v[target] ?? "").endsWith(" ") || !v[target] ? "" : " "}${token}`,
+            } as Partial<LocalizedString>)
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/src/backup/datasets.ts

@@ -0,0 +1,249 @@
+/**
+ * Client-safe description of what a backup archive can contain.
+ *
+ * Used by both the backoffice UI and the server-side export/import engine so
+ * the two can never drift apart.
+ */
+
+/**
+ * Archive layout version. Format 2 adds accounts, email configuration,
+ * verified media and secret sanitising. Format 1 archives are rejected.
+ */
+export const ARCHIVE_FORMAT_VERSION = 2;
+/** Bump when the database schema changes in a way that breaks old archives. */
+export const SCHEMA_VERSION = 2;
+
+export {
+  ALLOWED_MEDIA_EXTENSIONS,
+  isAllowedMediaFile,
+  hasAllowedMediaExtension,
+  verifyMediaFile,
+  isSafeArchivePath,
+  sanitizeSecrets,
+  rewriteMediaUrls,
+  neutralizeInjection,
+} from "./safety";
+
+export type TableSpec = {
+  table: string;
+  /** Primary key column(s) used for upserts. */
+  pk: string;
+  /**
+   * Conflict target for upserts. Defaults to `pk`, but tables that carry a
+   * business key (pages.key, forms.key, …) must conflict on that instead, or
+   * archives with different UUIDs collide on the unique index.
+   */
+  conflict?: string;
+  /**
+   * Columns that reference rows created later in the import order.
+   * They are stripped on the first pass and written in a second pass.
+   */
+  deferred?: string[];
+  /** Tables that must have imported cleanly before this one is attempted. */
+  requires?: string[];
+  /** Credential-like values in these JSON columns are stripped on export. */
+  sanitize?: string[];
+  /**
+   * Nullable foreign keys checked against the archive itself. A non-null value
+   * whose parent row is absent fails analysis before anything is restored.
+   */
+  references?: { column: string; table: string; pk?: string }[];
+};
+
+/** Business keys used to detect that an archive comes from another database. */
+export const LINEAGE_KEYS: Record<string, string> = {
+  pages: "key",
+  global_sections: "key",
+  forms: "key",
+  content_sections: "key",
+  page_seo: "page_key",
+  redirects: "from_path",
+  locale_domains: "locale",
+};
+
+export type DatasetGroup = {
+  id: string;
+  label: string;
+  description: string;
+  tables: TableSpec[];
+  /** Rows are only ever inserted — never updated or deleted. */
+  insertOnly?: boolean;
+  /** Special payloads that are not plain tables. */
+  special?: "mediaFiles" | "authUsers";
+  /** Not selected when the user picks "recommended". */
+  heavy?: boolean;
+};
+
+export const DATASET_GROUPS: DatasetGroup[] = [
+  {
+    id: "content",
+    label: "Content & pages",
+    description:
+      "Pages, page versions, publications, sections, global sections and block templates.",
+    tables: [
+      { table: "pages", pk: "id", conflict: "key", deferred: ["current_version_id"] },
+      { table: "page_versions", pk: "id", conflict: "page_id,version_no", requires: ["pages"] },
+      { table: "page_publications", pk: "id", requires: ["pages", "page_versions"] },
+      { table: "content_sections", pk: "key", conflict: "key" },
+      { table: "global_sections", pk: "id", conflict: "key", deferred: ["current_version_id"] },
+      {
+        table: "global_section_versions",
+        pk: "id",
+        conflict: "section_id,version_no",
+        requires: ["global_sections"],
+      },
+      { table: "block_templates", pk: "id" },
+    ],
+  },
+  {
+    id: "seo",
+    label: "SEO & routing",
+    description: "Page SEO, redirects, language domains and tracking/code injections.",
+    tables: [
+      { table: "page_seo", pk: "page_key", conflict: "page_key" },
+      { table: "redirects", pk: "id", conflict: "from_path" },
+      { table: "locale_domains", pk: "locale", conflict: "locale" },
+      { table: "site_injections", pk: "id" },
+    ],
+  },
+  {
+    id: "forms",
+    label: "Forms",
+    description: "Form definitions, their version history and global form settings.",
+    tables: [
+      { table: "forms", pk: "id", conflict: "key" },
+      { table: "form_versions", pk: "id", conflict: "form_key,version_no", requires: ["forms"] },
+      { table: "form_settings", pk: "id" },
+    ],
+  },
+
+  {
+    id: "customer",
+    label: "Customer data",
+    description:
+      "Form submissions, partial submissions and delivery attempts. Always insert-only — never overwritten or deleted.",
+    insertOnly: true,
+    tables: [
+      { table: "form_submissions", pk: "id", requires: ["forms"] },
+      { table: "form_partials", pk: "id", conflict: "form_key,client_token", requires: ["forms"] },
+      {
+        table: "form_delivery_attempts",
+        pk: "id",
+        requires: ["forms", "form_submissions"],
+      },
+    ],
+  },
+
+  {
+    id: "mediaMeta",
+    label: "Media metadata",
+    description: "Alt texts, titles, descriptions, focus points and the media bin index.",
+    tables: [
+      { table: "media_meta", pk: "path" },
+      { table: "media_focus", pk: "path" },
+      { table: "media_trash", pk: "id" },
+    ],
+  },
+  {
+    id: "mediaFiles",
+    label: "Media files",
+    description: "The actual images and videos. This is by far the largest part of an archive.",
+    special: "mediaFiles",
+    heavy: true,
+    tables: [],
+  },
+  {
+    id: "users",
+    label: "Users & roles",
+    description:
+      "Accounts and their role assignments. Passwords can never be exported — restored users must reset theirs.",
+    special: "authUsers",
+    tables: [
+      { table: "app_users", pk: "id" },
+      { table: "user_roles", pk: "id", conflict: "user_id,role", requires: ["app_users"] },
+    ],
+  },
+  {
+    id: "email",
+    label: "Email configuration",
+    description:
+      "Sending providers and global email settings. Only the names of secrets are stored — never their values.",
+    tables: [
+      { table: "email_providers", pk: "id", sanitize: ["config", "notes"] },
+      {
+        table: "email_settings",
+        pk: "id",
+        requires: ["email_providers"],
+        sanitize: ["*"],
+        references: [
+          { column: "default_provider_id", table: "email_providers" },
+          { column: "fallback_provider_id", table: "email_providers" },
+        ],
+      },
+    ],
+  },
+  {
+    id: "logs",
+    label: "Logs",
+    description: "Audit log and outgoing email history.",
+    insertOnly: true,
+    heavy: true,
+    tables: [
+      { table: "audit_logs", pk: "id" },
+      { table: "email_logs", pk: "id" },
+    ],
+  },
+];
+
+export const ALL_GROUP_IDS = DATASET_GROUPS.map((g) => g.id);
+export const DEFAULT_GROUP_IDS = DATASET_GROUPS.filter((g) => !g.heavy).map((g) => g.id);
+
+export function groupById(id: string): DatasetGroup | undefined {
+  return DATASET_GROUPS.find((g) => g.id === id);
+}
+
+/** Import order across all groups, respecting foreign keys. */
+export const IMPORT_ORDER: string[] = [
+  "app_users",
+  "user_roles",
+  "pages",
+  "page_versions",
+  "page_publications",
+  "global_sections",
+  "global_section_versions",
+  "content_sections",
+  "block_templates",
+  "page_seo",
+  "redirects",
+  "locale_domains",
+  "site_injections",
+  "email_providers",
+  "email_settings",
+  "forms",
+  "form_versions",
+  "form_settings",
+  "form_submissions",
+  "form_partials",
+  "form_delivery_attempts",
+  "media_meta",
+  "media_focus",
+  "media_trash",
+  "audit_logs",
+  "email_logs",
+];
+
+export type ArchiveManifest = {
+  format: number;
+  schemaVersion: number;
+  createdAt: string;
+  createdBy: string | null;
+  site: string | null;
+  groups: string[];
+  counts: Record<string, number>;
+  mediaFiles: number;
+  mediaBytes: number;
+  /** Files found in the library but excluded because they are not media. */
+  quarantinedMedia?: string[];
+};
+
+export type ImportMode = "merge" | "replace";