@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/src/backoffice/routes/index.tsx

@@ -18,6 +18,7 @@ import {
   Menu,
   Package,
   ScrollText,
+  Languages,
   Shield,
   Signpost,
   SlidersHorizontal,
@@ -25,9 +26,12 @@ import {
   Users,
 } from "lucide-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useRef } from "react";
 import { useServerFn } from "@tanstack/react-start";
 
+import { MISSING_CREATED_ID } from "../../tracking/injections";
 import type { SiteSettingOverrides } from "../../config/site-config";
+import type { SiteTypography } from "../../config/typography";
 import { AuditView } from "../AuditView";
 import { BackupView } from "../BackupView";
 import { DomainsView } from "../DomainsView";
@@ -42,10 +46,16 @@ import { RedirectsView } from "../RedirectsView";
 import { RolesView } from "../RolesView";
 import { SitemapView, type SitemapCheck } from "../SitemapView";
 import { SiteSettingsView } from "../SiteSettingsView";
-import { TrackingView } from "../TrackingView";
+import { TrackingView, type TrackingDeps } from "../TrackingView";
 import { UsersView } from "../UsersView";
 import { VersionView } from "../VersionView";
-import { useFeatureGate } from "../shell/use-resolved-config";
+import { parseEffectiveAdminHost } from "../../site/locale-domains";
+import {
+  useFeatureEnabled,
+  useFeatureGate,
+  useModuleGate,
+  useMyRoles,
+} from "../shell/use-resolved-config";
 import { backofficeHost, backofficePaths } from "./host";
 
 export * from "./host";
@@ -200,13 +210,54 @@ function TrackingRouteInner() {
   const q = useQuery({ queryKey: ["admin", "injections"], queryFn: () => list() });
   const domainsQ = useQuery({ queryKey: ["admin", "locale-domains"], queryFn: () => domains() });
 
+  /*
+   * A create whose answer carried no id, if one has happened.
+   *
+   * The insert may well have succeeded — what is missing is the identity of
+   * the row it wrote, not evidence that it wrote none. Sending the same draft
+   * again would therefore be as likely to create a second profile as to retry
+   * the first, and the screen has no way to tell which. So no further create
+   * is attempted at all until a reload has reconciled the list with what the
+   * server actually holds. Updates carry their own id and are unaffected.
+   */
+  const createUnresolved = useRef(false);
+
+  const saveInjection = useCallback<TrackingDeps["saveInjection"]>(
+    async (input) => {
+      const isCreate = !input.data.id;
+      if (isCreate && createUnresolved.current) throw new Error(MISSING_CREATED_ID);
+      let result: { id?: unknown } | null | undefined;
+      try {
+        result = (await save(input as never)) as { id?: unknown } | null | undefined;
+      } catch (err) {
+        /*
+         * The server refuses an insert it cannot identify, and that refusal is
+         * indeterminate in exactly the way the check below is: the row may have
+         * landed. Any other failure is a plain no, so only this one closes
+         * creates — a rejected create is otherwise still worth another try.
+         */
+        if (isCreate && err instanceof Error && err.message === MISSING_CREATED_ID) {
+          createUnresolved.current = true;
+        }
+        throw err;
+      }
+      const id = typeof result?.id === "string" ? result.id.trim() : "";
+      if (isCreate && !id) {
+        createUnresolved.current = true;
+        throw new Error(MISSING_CREATED_ID);
+      }
+      return { id };
+    },
+    [save],
+  );
+
   return (
     <TrackingView
       deps={{
         profiles: q.data ?? [],
         domains: domainsQ.data ?? [],
         locales: locales as never,
-        saveInjection: (input) => save(input as never),
+        saveInjection,
         deleteInjection: (input) => remove(input),
         refresh: () => q.refetch(),
       }}
@@ -245,6 +296,9 @@ function FormSettingsRouteInner() {
   const load = useServerFn(fns.getFormDefaults);
   const save = useServerFn(fns.saveFormDefaults);
   const purge = useServerFn(fns.purgeOldSubmissions);
+  // Optional: a host that never registered the forms group still renders here.
+  const testSheetFn = host.forms?.fns.testSheetConnection;
+  const pingSheet = useServerFn(testSheetFn ?? (async () => ({ ok: false })));
   const formsPath = backofficePaths(host).forms;
   const { data, isLoading } = useQuery({ queryKey: ["form-defaults"], queryFn: () => load() });
 
@@ -255,6 +309,7 @@ function FormSettingsRouteInner() {
         isLoading,
         saveDefaults: (input) => save(input as never),
         purgeOldSubmissions: (input) => purge(input),
+        ...(testSheetFn ? { testSheetConnection: (input) => pingSheet(input as never) } : {}),
         previewLocale: host.previewLocale ?? host.siteConfig.defaultLocale,
         BackLink: ({ className, children }) => (
           <Link to={formsPath} className={className}>
@@ -308,9 +363,20 @@ export function AdminLayoutRoute() {
 export function AdminOverviewRoute() {
   const host = backofficeHost();
   const paths = backofficePaths(host);
-  const fetchRoles = useServerFn(host.fns.getMyRoles);
-  const rolesQ = useQuery({ queryKey: ["admin", "my-roles"], queryFn: () => fetchRoles() });
-  const isSuper = ((rolesQ.data ?? []) as string[]).includes("superadmin");
+  const { roles } = useMyRoles();
+  const isSuper = roles.includes("superadmin");
+  // Both screens write through server functions that ask `has_role(user,
+  // 'admin')`, so a card offered to anyone else is an invitation to a screen
+  // whose every save comes back refused. The role is read from the list the
+  // host returns; holding `superadmin` is not the same grant.
+  const isAdmin = roles.includes("admin");
+  // The live flags, not the compiled ones. Both route gates already read the
+  // live value, so a card driven by the compiled default disagrees with the
+  // screen behind it: an override that switched a module on leaves its card
+  // missing, and one that switched a module off leaves a card that opens
+  // straight into a no-access screen.
+  const domainsEnabled = useFeatureEnabled("domains") === true;
+  const trackingEnabled = useFeatureEnabled("tracking") === true;
 
   const cards = [
     {
@@ -360,7 +426,7 @@ export function AdminOverviewRoute() {
       body: "Company address, org. number, email and phone.",
       icon: Building2,
     },
-    ...(host.siteConfig.features.tracking
+    ...(isAdmin && trackingEnabled
       ? [
           {
             to: paths.tracking,
@@ -370,6 +436,16 @@ export function AdminOverviewRoute() {
           },
         ]
       : []),
+    ...(isAdmin && domainsEnabled
+      ? [
+          {
+            to: paths.domains,
+            title: "Languages & domains",
+            body: "One domain per language, the default fallback and the hostname the backoffice is served from.",
+            icon: Languages,
+          },
+        ]
+      : []),
     {
       to: paths.redirects,
       title: "Redirects",
@@ -545,6 +621,15 @@ export function NavigationRoute() {
   const site = host.content.useSite();
   const overrides = host.content.useOverrides();
   const save = useServerFn(host.fns.saveContentSection);
+  // Menu and footer fonts live in `site_settings`, not in the section content,
+  // so this screen reads and writes them through the settings functions.
+  const loadSettings = useServerFn(host.fns.getSiteSettings);
+  const saveSettings = useServerFn(host.fns.saveSiteSettings);
+  const settingsQ = useQuery({
+    queryKey: ["admin", "site-settings"],
+    queryFn: () => loadSettings(),
+  });
+  const settingOverrides = (settingsQ.data?.overrides ?? {}) as SiteSettingOverrides;
 
   return (
     <NavigationView
@@ -555,11 +640,30 @@ export function NavigationRoute() {
         SectionForm: host.components.SectionForm,
         saveSection: (input) => save(input as never),
         refresh: () => qc.invalidateQueries({ queryKey: host.content.overridesQueryKey }),
+        typography: {
+          value:
+            (settingsQ.data?.config?.typography as SiteTypography | undefined) ??
+            settingOverrides.typography ??
+            host.siteConfig.typography ??
+            {},
+          overrides: settingOverrides.typography,
+          save: (typography) => saveSettings({ data: { typography } } as never),
+          refresh: () => settingsQ.refetch(),
+        },
       }}
     />
   );
 }
 
+/**
+ * Stand-in for the optional effective-admin-host function.
+ *
+ * `useServerFn` is a hook and cannot be called conditionally, so an
+ * unregistered function still needs something to hand it. This one is never
+ * invoked: the query that would call it stays disabled.
+ */
+const noEffectiveAdminHost = async () => null;
+
 /** Per-locale domain mapping. */
 function DomainsRouteInner() {
   const host = backofficeHost();
@@ -568,19 +672,40 @@ function DomainsRouteInner() {
   const list = useServerFn(host.fns.getLocaleDomains);
   const save = useServerFn(host.fns.saveLocaleDomain);
   const del = useServerFn(host.fns.deleteLocaleDomain);
-  const q = useQuery({ queryKey: ["locale-domains"], queryFn: () => list() });
+  const q = useQuery({ queryKey: ["admin", "locale-domains"], queryFn: () => list() });
+
+  // Where the backoffice is actually served is server knowledge — `SITE_URL`
+  // and the request that arrived. A host that has not registered the function
+  // gets no statement about it at all, which is the honest answer: the editor
+  // keeps working, it just stops explaining a hostname it cannot know.
+  const getAdminHost = useServerFn(host.fns.getEffectiveAdminHost ?? noEffectiveAdminHost);
+  const adminHostQuery = useQuery({
+    queryKey: ["admin", "effective-admin-host"],
+    queryFn: () => getAdminHost(),
+    enabled: Boolean(host.fns.getEffectiveAdminHost),
+  });
+
+  const domains = q.data ?? [];
 
   return (
     <DomainsView
       deps={{
-        domains: q.data ?? [],
+        domains,
         locales: host.siteConfig.locales,
         defaultLocale: host.siteConfig.defaultLocale,
-        backPath: paths.base,
+        backPath: paths.admin,
         domainPlaceholder: host.placeholders?.domain ?? "",
+        adminHost: parseEffectiveAdminHost(adminHostQuery.data) ?? undefined,
+        backofficePath: paths.base,
         saveDomain: (input) => save(input as never),
         deleteDomain: (input) => del(input as never),
-        refresh: () => qc.invalidateQueries({ queryKey: ["locale-domains"] }),
+        // A saved or deleted mapping can move the backoffice itself, and the
+        // banner above the table states where that is. Refreshing only the
+        // table leaves it stating the hostname from before the change.
+        refresh: async () => {
+          await qc.invalidateQueries({ queryKey: ["admin", "locale-domains"] });
+          await qc.invalidateQueries({ queryKey: ["admin", "effective-admin-host"] });
+        },
       }}
     />
   );
@@ -659,16 +784,16 @@ export function ReviewsRoute() {
   return <ReviewsRouteInner />;
 }
 
-/** DomainsRoute guarded by the "domains" module switch. */
+/** DomainsRoute guarded by the "domains" module switch and its admin role. */
 export function DomainsRoute() {
-  const gate = useFeatureGate("domains", "Domains");
+  const gate = useModuleGate("domains", "Languages & domains");
   if (gate) return <>{gate}</>;
   return <DomainsRouteInner />;
 }
 
-/** TrackingRoute guarded by the "tracking" module switch. */
+/** TrackingRoute guarded by the "tracking" module switch and its admin role. */
 export function TrackingRoute() {
-  const gate = useFeatureGate("tracking", "Code & tracking");
+  const gate = useModuleGate("tracking", "Code & tracking");
   if (gate) return <>{gate}</>;
   return <TrackingRouteInner />;
 }

package/src/backoffice/routes/media-forms.tsx

@@ -20,6 +20,7 @@ import { FormEditorView } from "../FormEditorView";
 import { FormSubmissionsView, SUBMISSIONS_PAGE_SIZE } from "../FormSubmissionsView";
 import { FormDeliveriesView, type DeliveryChannel } from "../FormDeliveriesView";
 import { backofficeHost, backofficePaths, requireHostGroup } from "./host";
+import { siteConfig } from "../../config/site-config";
 
 /** Router-agnostic link that forwards loose `to`/`params`/`search` values. */
 function HostLink({
@@ -90,6 +91,7 @@ export function MediaRoute() {
       trashLoading: trashQ.isLoading,
       usage: usageQ.data as MediaLibraryDeps["usage"],
       isSuperadmin: ((rolesQ.data ?? []) as string[]).includes("superadmin"),
+      timezone: siteConfig().timezone,
       metaMap,
       deleteMedia: (input) => del(input as never),
       restoreMedia: (input) => restore(input as never),
@@ -170,6 +172,8 @@ function FormEditorRouteInner() {
   const sync = useServerFn(forms.fns.syncSubmissionsToSheet);
   const dup = useServerFn(forms.fns.duplicateForm);
   const pingWebhook = useServerFn(forms.fns.testWebhook);
+  const testSheetFn = forms.fns.testSheetConnection;
+  const pingSheet = useServerFn(testSheetFn ?? (async () => ({ ok: false })));
   const loadDefaults = useServerFn(fns.getFormDefaults);
 
   const { data: rows, isLoading } = useQuery({
@@ -196,6 +200,7 @@ function FormEditorRouteInner() {
         duplicateForm: (input) => dup(input as never),
         syncSubmissions: (input) => sync(input as never),
         testWebhook: (input) => pingWebhook(input as never),
+        ...(testSheetFn ? { testSheetConnection: (input) => pingSheet(input as never) } : {}),
         LinkComponent: HostLink as never,
         FieldEditorComponent: C.FieldEditor,
         FormPreviewComponent: C.FormPreview,

package/src/backoffice/seo/PageSeoPanelView.tsx

@@ -38,7 +38,21 @@ export type PageSeoPanelViewProps = {
   pageKey?: string | null;
   /** Current registry route for a locale, shown in the preview panel. */
   registryRoute: (locale: string) => string;
-  /** Public origin used to build the canonical preview URL. */
+  /**
+   * The public hostname this locale is published on, or `""` when there is
+   * none.
+   *
+   * Since m7.10 a deployment's locale-to-domain table is explicit: a locale
+   * absent from it has no public site. `""` is that answer — NO PUBLIC URL
+   * EXISTS — and it must never be read as "use a relative URL", "use whatever
+   * hostname the backoffice is open at", or "borrow another locale's domain".
+   * Each of those states an address the page is not served at, under the one
+   * heading a search engine is asked to believe.
+   *
+   * A host in single-origin mode — no mappings at all, every language under a
+   * locale prefix on one hostname — answers with that hostname, so the
+   * canonical stays absolute there.
+   */
   originForLocale: (locale: string) => string;
   /** Images found on this page, for the "use hero / pick from page" buttons. */
   pageImages: readonly PageSeoImageCandidate[];
@@ -171,10 +185,13 @@ export function PageSeoPanelView({
     locale: activeLocale,
     defaultLocale,
   });
-  const previewCanonical = pageSeoPreviewCanonical({
-    path: previewPath,
-    origin: originForLocale(activeLocale),
-  });
+  const previewOrigin = originForLocale(activeLocale);
+  // No hostname, no canonical. The path alone is not a fallback: printed here
+  // it reads as a URL on the hostname this screen is being served from, and an
+  // unmapped locale has no public hostname at all.
+  const previewCanonical = previewOrigin
+    ? pageSeoPreviewCanonical({ path: previewPath, origin: previewOrigin })
+    : null;
 
   return (
     <div>
@@ -344,7 +361,15 @@ export function PageSeoPanelView({
           <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">Preview</div>
           <dl className="mt-4 grid grid-cols-1 md:grid-cols-[140px_1fr] gap-x-6 gap-y-2 text-sm">
             <dt className="text-ink/50">Canonical</dt>
-            <dd className="font-mono text-ink/80 break-all">{previewCanonical}</dd>
+            <dd className="text-ink/80 break-all">
+              {previewCanonical ? (
+                <span className="font-mono">{previewCanonical}</span>
+              ) : (
+                <span className="text-ink/55">
+                  No public URL — no domain configured for this language
+                </span>
+              )}
+            </dd>
             <dt className="text-ink/50">Route</dt>
             <dd className="font-mono text-ink/80">
               {previewPath} (current registry: {registryRoute(activeLocale)})

package/src/backoffice/seo/page-seo-form.ts

@@ -210,7 +210,17 @@ export function pageSeoPreviewPath(args: {
   return slug === "" ? `/${args.locale}` : `/${args.locale}/${slug}`;
 }
 
-/** Absolute canonical preview URL; falls back to the path when no domain is known. */
+/**
+ * Absolute canonical preview URL for a page path on a known public origin.
+ *
+ * With no origin there is no URL to build, and the bare path returned instead
+ * is not one either: shown under a heading like "Canonical" it reads as an
+ * address on whatever hostname is being browsed — which, for a locale with no
+ * configured domain, is the backoffice rather than a public site. Deciding what
+ * an empty origin means belongs to the caller; `PageSeoPanelView` asks first
+ * and says so in words rather than printing this. The fallback is kept for
+ * callers that already depend on it.
+ */
 export function pageSeoPreviewCanonical(args: { path: string; origin?: string | null }): string {
   return args.origin ? `https://${args.origin}${args.path}` : args.path;
 }

package/src/backoffice/shell/domain-guard.ts

@@ -3,25 +3,25 @@
  *
  * Returns the host the backoffice should be served from, or null when the
  * current host is fine (local dev, Lovable preview, or already the admin host).
+ *
+ * This is canonical-host routing, not an authorization boundary — roles are.
+ * So every uncertain case returns null and stays put: a missing, blank or
+ * malformed admin domain must not bounce an administrator to a hostname that
+ * serves nothing, which is a lockout with no way back in.
  */
-const DEV_HOST_SUFFIXES = [".lovable.app", ".lovableproject.com"];
+import { isValidCanonicalDomain, normalizeCanonicalDomain } from "../../site/host";
 
-function normalizeHost(value: string): string {
-  return value
-    .replace(/^https?:\/\//, "")
-    .replace(/\/+$/, "")
-    .replace(/^www\./, "")
-    .toLowerCase();
-}
+const DEV_HOST_SUFFIXES = [".lovable.app", ".lovableproject.com"];
 
 /** True for hosts where the admin-domain guard must not apply. */
 export function isDevelopmentHost(host: string): boolean {
-  const h = normalizeHost(host);
+  const h = normalizeCanonicalDomain(host);
   return (
     DEV_HOST_SUFFIXES.some((suffix) => h.endsWith(suffix)) ||
     h === "localhost" ||
-    h.startsWith("localhost:") ||
-    h.startsWith("127.0.0.1")
+    h.endsWith(".localhost") ||
+    h === "127.0.0.1" ||
+    h === "[::1]"
   );
 }
 
@@ -31,8 +31,21 @@ export function backofficeRedirectHost(
   adminDomain: string | null | undefined,
 ): string | null {
   if (!currentHost || isDevelopmentHost(currentHost)) return null;
-  const current = normalizeHost(currentHost);
-  const admin = normalizeHost(adminDomain ?? "");
-  if (!admin || current === admin) return null;
+
+  // The stored form is the destination — `www.` included when configured —
+  // and the comparison is against that exact hostname, not against an alias
+  // key. Apex and `www.` are aliases for *finding* the row; they are two
+  // different addresses to serve from, and the configured one is the answer.
+  // Folding them together here is what left `voyara.se` sitting on a
+  // deployment that had chosen `www.voyara.se`, cookies and all.
+  // Validated before normalizing, not after: normalizing strips the scheme, so
+  // `ftp://voyara.se` checked afterwards is the valid `voyara.se`.
+  const admin = isValidCanonicalDomain(adminDomain) ? normalizeCanonicalDomain(adminDomain ?? "") : "";
+  if (!admin) return null;
+  // A development host is never a destination either. `localhost` is what an
+  // unconfigured install resolves to, and sending a public request there is
+  // the lockout this guard exists to avoid.
+  if (isDevelopmentHost(admin)) return null;
+  if (normalizeCanonicalDomain(currentHost) === admin) return null;
   return admin;
 }

package/src/backoffice/shell/index.ts

@@ -9,9 +9,14 @@ export type { BackofficeNavItem, BackofficeNavKey, BackofficeNavOptions } from "
 export { backofficeRedirectHost, isDevelopmentHost } from "./domain-guard";
 export {
   FeatureDisabledNotice,
+  ModuleRoleNotice,
+  MY_ROLES_QUERY_KEY,
   SITE_SETTINGS_QUERY_KEY,
   useBackofficeNav,
   useFeatureEnabled,
   useFeatureGate,
+  useModuleGate,
+  useModuleRoleAllowed,
+  useMyRoles,
   useResolvedSiteConfig,
 } from "./use-resolved-config";

package/src/backoffice/shell/use-resolved-config.tsx

@@ -12,6 +12,7 @@ import type { ReactNode } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useServerFn } from "@tanstack/react-start";
 
+import { findCmsModule, moduleRoleSatisfied } from "../../config/modules";
 import type { SiteConfig, SiteFeatureFlags } from "../../config/site-config";
 import { resolveSiteConfig } from "../../config/site-config";
 import { backofficeHost } from "../routes/host";
@@ -82,3 +83,69 @@ export function useFeatureGate(flag: keyof SiteFeatureFlags, label?: string): Re
   if (enabled) return null;
   return <FeatureDisabledNotice label={label} />;
 }
+
+/** Query key shared by every screen that asks what the signed-in user holds. */
+export const MY_ROLES_QUERY_KEY = ["admin", "my-roles"] as const;
+
+/**
+ * Platform roles of the signed-in viewer.
+ *
+ * Non-string entries are dropped rather than trusted: this list decides what a
+ * screen offers, and a host that answers with something other than an array of
+ * role names should grant nothing, not everything.
+ */
+export function useMyRoles(): { roles: string[]; isLoading: boolean } {
+  const host = backofficeHost();
+  const load = useServerFn(host.fns.getMyRoles);
+  const q = useQuery({ queryKey: MY_ROLES_QUERY_KEY, queryFn: () => load() as Promise<unknown> });
+  const roles = Array.isArray(q.data)
+    ? q.data.filter((role): role is string => typeof role === "string")
+    : [];
+  return { roles, isLoading: q.isLoading };
+}
+
+/**
+ * Whether the viewer's roles reach a module's screens. `undefined` while they
+ * are still being read, so a caller can wait rather than deny access to
+ * somebody who in fact holds the role.
+ */
+export function useModuleRoleAllowed(flag: keyof SiteFeatureFlags): boolean | undefined {
+  const { roles, isLoading } = useMyRoles();
+  if (isLoading) return undefined;
+  return moduleRoleSatisfied(findCmsModule(flag)?.requiresRole, roles);
+}
+
+/** Notice shown instead of a screen the viewer's roles do not reach. */
+export function ModuleRoleNotice({ label, role }: { label?: string; role: string }) {
+  return (
+    <div className="p-8 md:p-12">
+      <h1 className="font-serif text-2xl text-ink">
+        {label ? `${label} needs the ${role} role` : `This screen needs the ${role} role`}
+      </h1>
+      <p className="mt-3 max-w-md text-sm text-ink/65">
+        Your account does not hold it, so this screen is read-only to you — every save here would be
+        refused by the server. A superadministrator can grant the role under Admin → User roles.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Guard for a module screen that also has a role requirement.
+ *
+ * Both gates apply, and the module switch is answered first: a module that is
+ * turned off is off for an administrator too, and saying "you need a role" for
+ * a screen nobody can reach would be a lie about why it is unavailable.
+ */
+export function useModuleGate(flag: keyof SiteFeatureFlags, label?: string): ReactNode | null {
+  const featureGate = useFeatureGate(flag, label);
+  const allowed = useModuleRoleAllowed(flag);
+  if (featureGate) return featureGate;
+  // Worded differently from the settings wait above on purpose: the two are
+  // waiting on different answers, and only this one is a wait that must never
+  // be mistaken for a refusal.
+  if (allowed === undefined)
+    return <div className="p-8 text-sm text-ink/50">Checking your access…</div>;
+  if (allowed) return null;
+  return <ModuleRoleNotice label={label} role={findCmsModule(flag)?.requiresRole ?? "admin"} />;
+}