@bygghammar/cms-platform 0.39.0 → 0.40.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.40.0
+
+- New `backoffice/shell`: shared `BackofficeShell` (auth gate, no-access screen,
+  sidebar, sign-in form), a feature-flag driven `backofficeNav(siteConfig)` model
+  and `backofficeRedirectHost` for the admin-domain guard. A site's backoffice
+  layout route is now a thin adapter that supplies its auth client and admin check.
+
 ## 0.39.0
 
 - New `server/backup-core`: superadmin verification, dataset counting, archive build, analysis and restore (database + media) now live in the package. Hosts pass a service-role client factory.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -154,7 +154,8 @@
     "./server/email-send-core": "./src/server/email-send-core.ts",
     "./server/forms-delivery-core": "./src/server/forms-delivery-core.ts",
     "./server/forms-submissions-core": "./src/server/forms-submissions-core.ts",
-    "./server/backup-core": "./src/server/backup-core.ts"
+    "./server/backup-core": "./src/server/backup-core.ts",
+    "./backoffice/shell": "./src/backoffice/shell/index.ts"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/shell/BackofficeShell.tsx

@@ -0,0 +1,311 @@
+/**
+ * Shared backoffice shell: auth gate, no-access screen, sidebar and content slot.
+ *
+ * A host route supplies its auth client, an admin check and the nav model; the
+ * layout, states and sign-in form are identical for every site.
+ */
+import { Link, useNavigate, useRouterState } from "@tanstack/react-router";
+import { ExternalLink, LogOut } from "lucide-react";
+import { useEffect, useState, type FormEvent, type ReactNode } from "react";
+import { toast } from "sonner";
+
+import { isBackofficeNavigationActive } from "../../navigation";
+import type { BackofficeNavItem } from "./nav-model";
+
+export type ShellAuthUser = { email?: string | null } | null;
+
+export type ShellAuthAdapter = {
+  /** Current session user, or null when signed out. */
+  getUser: () => Promise<ShellAuthUser>;
+  /** Subscribe to session changes; returns an unsubscribe function. */
+  onUserChange: (handler: (user: ShellAuthUser) => void) => () => void;
+  signIn: (email: string, password: string) => Promise<{ error?: string | null }>;
+  signOut: () => Promise<unknown>;
+  /** True only for a genuine hosted misconfiguration (not "signed out"). */
+  isConfigBroken?: () => boolean;
+};
+
+export type BackofficeShellProps = {
+  /** Site name shown in the sidebar header. */
+  siteName: string;
+  /** Backoffice base path, e.g. `/kontoret`. */
+  backofficePath: string;
+  nav: BackofficeNavItem[];
+  auth: ShellAuthAdapter;
+  /** Resolves whether the signed-in user may use the backoffice. */
+  checkIsAdmin: () => Promise<boolean>;
+  /** localStorage key for the "remember me" email. */
+  rememberKey?: string;
+  /** Route content — normally `<Outlet />`. */
+  children: ReactNode;
+};
+
+type State =
+  | { kind: "loading" }
+  | { kind: "signed-out" }
+  | { kind: "config-error" }
+  | { kind: "not-admin"; email: string }
+  | { kind: "admin"; email: string };
+
+export function BackofficeShell(props: BackofficeShellProps) {
+  const { auth, checkIsAdmin } = props;
+  const [state, setState] = useState<State>({ kind: "loading" });
+
+  useEffect(() => {
+    let alive = true;
+
+    const resolve = async (user: ShellAuthUser) => {
+      if (!alive) return;
+      if (!user) {
+        setState(auth.isConfigBroken?.() ? { kind: "config-error" } : { kind: "signed-out" });
+        return;
+      }
+      try {
+        const ok = await checkIsAdmin();
+        if (!alive) return;
+        setState(
+          ok
+            ? { kind: "admin", email: user.email ?? "" }
+            : { kind: "not-admin", email: user.email ?? "" },
+        );
+      } catch {
+        if (alive) setState({ kind: "signed-out" });
+      }
+    };
+
+    void auth.getUser().then(resolve);
+    const unsubscribe = auth.onUserChange(resolve);
+
+    return () => {
+      alive = false;
+      unsubscribe();
+    };
+  }, [auth, checkIsAdmin]);
+
+  if (state.kind === "loading") {
+    return (
+      <main className="min-h-screen bg-ink text-paper grid place-items-center">
+        <div className="text-sm uppercase tracking-[0.22em] text-paper/60">Loading…</div>
+      </main>
+    );
+  }
+
+  if (state.kind === "config-error") {
+    return (
+      <main className="min-h-screen bg-ink text-paper grid place-items-center px-6">
+        <div className="max-w-md text-center">
+          <h1 className="font-serif text-3xl">Authentication unavailable</h1>
+          <p className="mt-4 text-paper/70">
+            The backend configuration for this environment is missing or invalid, so the backoffice
+            cannot verify your account. The public website is unaffected. Check the deployment
+            configuration and reload this page.
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  if (state.kind === "signed-out") {
+    return <AuthGate auth={auth} rememberKey={props.rememberKey ?? "cms.backoffice.remember"} />;
+  }
+
+  if (state.kind === "not-admin") {
+    return (
+      <main className="min-h-screen bg-ink text-paper grid place-items-center px-6">
+        <div className="max-w-md text-center">
+          <h1 className="font-serif text-3xl">No access</h1>
+          <p className="mt-4 text-paper/70">
+            The account <span className="text-paper">{state.email}</span> does not have
+            administrator access to the backoffice.
+          </p>
+          <button
+            className="mt-8 inline-flex items-center border border-paper px-6 py-3 text-xs uppercase tracking-[0.22em] hover:bg-paper hover:text-ink transition-colors"
+            onClick={() => void auth.signOut()}
+          >
+            Sign out
+          </button>
+        </div>
+      </main>
+    );
+  }
+
+  return <Shell {...props} email={state.email} />;
+}
+
+function Shell({
+  siteName,
+  nav,
+  auth,
+  children,
+}: BackofficeShellProps & { email: string }) {
+  const pathname = useRouterState({ select: (r) => r.location.pathname });
+
+  return (
+    <div className="min-h-screen bg-muted text-ink grid grid-cols-1 md:grid-cols-[240px_1fr]">
+      <aside className="bg-ink text-paper md:min-h-screen flex md:flex-col">
+        <div className="p-6 border-b border-paper/10">
+          <div className="text-[0.7rem] uppercase tracking-[0.22em] text-paper/60">Backoffice</div>
+          <div className="mt-1 font-serif text-lg">{siteName} Backoffice</div>
+        </div>
+        <nav className="flex md:flex-col overflow-x-auto md:overflow-visible p-2 md:p-4 gap-1 flex-1">
+          {nav.map((n) => (
+            <Link
+              key={n.to}
+              to={n.to}
+              className={[
+                "flex items-center gap-3 px-4 py-2.5 text-sm transition-colors whitespace-nowrap",
+                isBackofficeNavigationActive(pathname, { to: n.to, exact: n.exact })
+                  ? "bg-paper text-ink"
+                  : "text-paper/75 hover:text-paper hover:bg-paper/10",
+              ].join(" ")}
+            >
+              <n.icon className="size-4" />
+              {n.label}
+            </Link>
+          ))}
+          <a
+            href="/"
+            target="_blank"
+            rel="noreferrer"
+            className="mt-2 md:mt-3 md:border-t md:border-paper/10 md:pt-3 flex items-center gap-3 px-4 py-2.5 text-sm whitespace-nowrap text-paper/75 transition-colors hover:text-paper hover:bg-paper/10"
+          >
+            <ExternalLink className="size-4" />
+            View website
+          </a>
+        </nav>
+        <SignedInPanel auth={auth} />
+      </aside>
+      <div className="flex-1 min-w-0">{children}</div>
+    </div>
+  );
+}
+
+function SignedInPanel({ auth }: { auth: ShellAuthAdapter }) {
+  const [email, setEmail] = useState("");
+
+  useEffect(() => {
+    let alive = true;
+    void auth.getUser().then((user) => {
+      if (alive) setEmail(user?.email ?? "");
+    });
+    return () => {
+      alive = false;
+    };
+  }, [auth]);
+
+  return (
+    <div className="p-4 border-t border-paper/10 hidden md:block">
+      <div className="text-[0.65rem] uppercase tracking-[0.22em] text-paper/50">Signed in</div>
+      <div className="mt-1 text-sm text-paper truncate" title={email}>
+        {email}
+      </div>
+      <button
+        className="mt-4 inline-flex items-center gap-2 text-xs uppercase tracking-[0.22em] text-paper/70 hover:text-paper"
+        onClick={async () => {
+          await auth.signOut();
+          toast.success("Signed out");
+        }}
+      >
+        <LogOut className="size-3.5" />
+        Sign out
+      </button>
+    </div>
+  );
+}
+
+function AuthGate({ auth, rememberKey }: { auth: ShellAuthAdapter; rememberKey: string }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [remember, setRemember] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const saved = window.localStorage.getItem(rememberKey);
+    if (saved) {
+      setEmail(saved);
+      setRemember(true);
+    }
+  }, [rememberKey]);
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    try {
+      const { error } = await auth.signIn(email, password);
+      if (error) throw new Error(error);
+      if (remember) window.localStorage.setItem(rememberKey, email);
+      else window.localStorage.removeItem(rememberKey);
+      toast.success("Signed in");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-ink text-paper grid place-items-center px-6 py-16">
+      <div className="w-full max-w-sm">
+        <div className="text-[0.7rem] uppercase tracking-[0.22em] text-paper/60">Backoffice</div>
+        <h1 className="mt-3 font-serif text-3xl">Sign in</h1>
+        <p className="mt-3 text-sm text-paper/60">
+          Only authorized administrators can access the backoffice.
+        </p>
+
+        <form onSubmit={submit} className="mt-8 space-y-4">
+          <label className="block">
+            <span className="text-[0.65rem] uppercase tracking-[0.22em] text-paper/60">Email</span>
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="mt-2 w-full bg-transparent border border-paper/25 px-4 py-3 text-paper placeholder:text-paper/40 focus:border-sea focus:outline-none"
+              autoComplete="email"
+            />
+          </label>
+          <label className="block">
+            <span className="text-[0.65rem] uppercase tracking-[0.22em] text-paper/60">
+              Password
+            </span>
+            <input
+              type="password"
+              required
+              minLength={8}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="mt-2 w-full bg-transparent border border-paper/25 px-4 py-3 text-paper placeholder:text-paper/40 focus:border-sea focus:outline-none"
+              autoComplete="current-password"
+            />
+          </label>
+          <label className="flex items-center gap-3 text-xs text-paper/70 select-none cursor-pointer">
+            <input
+              type="checkbox"
+              checked={remember}
+              onChange={(e) => setRemember(e.target.checked)}
+              className="size-4 accent-sea bg-transparent border border-paper/25"
+            />
+            Remember me
+          </label>
+          <button
+            type="submit"
+            disabled={busy}
+            className="mt-2 w-full inline-flex items-center justify-center border border-paper bg-paper text-ink px-6 py-3 text-xs uppercase tracking-[0.22em] hover:bg-transparent hover:text-paper transition-colors disabled:opacity-60"
+          >
+            {busy ? "Working…" : "Sign in"}
+          </button>
+        </form>
+
+        <div className="mt-10 text-center">
+          <button
+            onClick={() => navigate({ to: "/" })}
+            className="text-xs uppercase tracking-[0.22em] text-paper/50 hover:text-paper"
+          >
+            ← Back to website
+          </button>
+        </div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Admin-domain guard for the backoffice route.
+ *
+ * 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).
+ */
+const DEV_HOST_SUFFIXES = [".lovable.app", ".lovableproject.com"];
+
+function normalizeHost(value: string): string {
+  return value
+    .replace(/^https?:\/\//, "")
+    .replace(/\/+$/, "")
+    .replace(/^www\./, "")
+    .toLowerCase();
+}
+
+/** True for hosts where the admin-domain guard must not apply. */
+export function isDevelopmentHost(host: string): boolean {
+  const h = normalizeHost(host);
+  return (
+    DEV_HOST_SUFFIXES.some((suffix) => h.endsWith(suffix)) ||
+    h === "localhost" ||
+    h.startsWith("localhost:") ||
+    h.startsWith("127.0.0.1")
+  );
+}
+
+/** Resolve the admin host to redirect to, or null to stay put. */
+export function backofficeRedirectHost(
+  currentHost: string,
+  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;
+  return admin;
+}

package/src/backoffice/shell/index.ts

@@ -0,0 +1,9 @@
+export { BackofficeShell } from "./BackofficeShell";
+export type {
+  BackofficeShellProps,
+  ShellAuthAdapter,
+  ShellAuthUser,
+} from "./BackofficeShell";
+export { backofficeNav } from "./nav-model";
+export type { BackofficeNavItem, BackofficeNavKey, BackofficeNavOptions } from "./nav-model";
+export { backofficeRedirectHost, isDevelopmentHost } from "./domain-guard";

package/src/backoffice/shell/nav-model.ts

@@ -0,0 +1,102 @@
+/**
+ * Backoffice navigation model.
+ *
+ * The nav is derived from `SiteConfig` (backoffice base path + feature flags)
+ * so every site gets the same sidebar without copying a list of links.
+ * A host may override labels or drop/add items through `options`.
+ */
+import type { LucideProps } from "lucide-react";
+import {
+  Blocks,
+  Calendar,
+  ClipboardList,
+  FileText,
+  Globe,
+  GraduationCap,
+  ImageIcon,
+  Layers,
+  LayoutDashboard,
+  LayoutList,
+  MessageSquareQuote,
+  ShieldCheck,
+} from "lucide-react";
+
+import type { SiteConfig } from "../../config/site-config";
+import type { BackofficeNavigationItem } from "../../navigation";
+
+export type BackofficeNavKey =
+  | "dashboard"
+  | "pages"
+  | "global-sections"
+  | "blocks"
+  | "sections"
+  | "media"
+  | "seo"
+  | "domains"
+  | "trips"
+  | "courses"
+  | "forms"
+  | "reviews"
+  | "admin";
+
+export type BackofficeNavItem = BackofficeNavigationItem<LucideProps>;
+
+type Definition = {
+  key: BackofficeNavKey;
+  path: string;
+  label: string;
+  icon: BackofficeNavItem["icon"];
+  exact?: boolean;
+  /** Feature flag that has to be enabled for the item to appear. */
+  feature?: keyof SiteConfig["features"];
+};
+
+const DEFINITIONS: readonly Definition[] = [
+  { key: "dashboard", path: "", label: "Dashboard", icon: LayoutDashboard, exact: true },
+  { key: "pages", path: "/pages-builder", label: "Page builder", icon: Blocks },
+  { key: "global-sections", path: "/global-sections", label: "Global Sections", icon: Layers },
+  { key: "blocks", path: "/blocks", label: "Block library", icon: Blocks },
+  { key: "sections", path: "/sections", label: "Shared content", icon: LayoutList },
+  { key: "media", path: "/media", label: "Media", icon: ImageIcon },
+  { key: "seo", path: "/seo", label: "SEO", icon: FileText },
+  { key: "domains", path: "/domains", label: "Domains", icon: Globe, feature: "domains" },
+  { key: "trips", path: "/trips", label: "Trips", icon: Calendar, feature: "trips" },
+  { key: "courses", path: "/kurser", label: "Courses", icon: GraduationCap, feature: "courses" },
+  { key: "forms", path: "/forms", label: "Forms", icon: ClipboardList, feature: "forms" },
+  {
+    key: "reviews",
+    path: "/recensioner",
+    label: "Reviews",
+    icon: MessageSquareQuote,
+    feature: "reviews",
+  },
+  { key: "admin", path: "/admin", label: "Admin", icon: ShieldCheck },
+];
+
+export type BackofficeNavOptions = {
+  /** Per-key label overrides, e.g. `{ trips: "Cruises" }`. */
+  labels?: Partial<Record<BackofficeNavKey, string>>;
+  /** Keys to hide regardless of feature flags. */
+  hide?: readonly BackofficeNavKey[];
+};
+
+/** Build the sidebar model for a site. */
+export function backofficeNav(
+  config: SiteConfig,
+  options: BackofficeNavOptions = {},
+): BackofficeNavItem[] {
+  const base = config.backofficePath.replace(/\/+$/, "");
+  const hidden = new Set(options.hide ?? []);
+
+  return DEFINITIONS.filter((d) => {
+    if (hidden.has(d.key)) return false;
+    if (d.feature && config.features[d.feature] !== true) return false;
+    return true;
+  }).map((d) => ({
+    key: d.key,
+    to: `${base}${d.path}` || "/",
+    label: options.labels?.[d.key] ?? d.label,
+    icon: d.icon,
+    exact: d.exact === true,
+  }));
+}