@bygghammar/cms-platform 0.23.1 → 0.25.0

package/src/backoffice/UsersView.tsx

@@ -0,0 +1,348 @@
+import { useState } from "react";
+import { toast } from "sonner";
+
+/** One account row as shown in the users table. */
+export type PlatformUserRow = {
+  id: string;
+  email: string;
+  roles: string[];
+  email_confirmed_at?: string | null;
+  last_sign_in_at?: string | null;
+};
+
+/** Host-provided account administration. */
+export type UsersDeps = {
+  users: PlatformUserRow[];
+  myRoles: string[];
+  allRoles: readonly string[];
+  createUser: (input: {
+    data: { email: string; password?: string; roles: string[] };
+  }) => Promise<unknown>;
+  deleteUser: (input: { data: { userId: string } }) => Promise<unknown>;
+  setUserPassword: (input: { data: { userId: string; password: string } }) => Promise<unknown>;
+  sendPasswordResetEmail: (input: { data: { email: string } }) => Promise<unknown>;
+  setUserRoles: (input: { data: { userId: string; roles: string[] } }) => Promise<unknown>;
+  refresh: () => Promise<unknown> | void;
+};
+
+/**
+ * Host-agnostic user administration screen: create accounts, assign roles,
+ * set or reset passwords and delete accounts. Only superadmins get write
+ * controls; everyone else sees a read-only table.
+ */
+export function UsersView({ deps }: { deps: UsersDeps }) {
+  const {
+    users,
+    myRoles,
+    allRoles,
+    createUser,
+    deleteUser,
+    setUserPassword,
+    sendPasswordResetEmail,
+    setUserRoles,
+    refresh,
+  } = deps;
+  const isSuper = myRoles.includes("superadmin");
+
+  const [showNew, setShowNew] = useState(false);
+  const [newEmail, setNewEmail] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [newRoles, setNewRoles] = useState<string[]>(["user"]);
+  const [busy, setBusy] = useState(false);
+
+  // `prompt()` is unavailable in sandboxed preview iframes, so the password
+  // flow lives in the page itself.
+  const [pwTarget, setPwTarget] = useState<{ id: string; email: string } | null>(null);
+  const [pwValue, setPwValue] = useState("");
+  const [pwConfirm, setPwConfirm] = useState("");
+  const [pwBusy, setPwBusy] = useState(false);
+
+  const onCreate = async () => {
+    setBusy(true);
+    try {
+      await createUser({
+        data: { email: newEmail, password: newPassword || undefined, roles: newRoles },
+      });
+      toast.success("User created");
+      setShowNew(false);
+      setNewEmail("");
+      setNewPassword("");
+      setNewRoles(["user"]);
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onDelete = async (id: string, email: string) => {
+    if (!confirm(`Delete ${email}? This cannot be undone.`)) return;
+    try {
+      await deleteUser({ data: { userId: id } });
+      toast.success("User deleted");
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  const submitPassword = async () => {
+    if (!pwTarget) return;
+    if (pwValue.length < 8) {
+      toast.error("Password must be at least 8 characters");
+      return;
+    }
+    if (pwValue !== pwConfirm) {
+      toast.error("Passwords do not match");
+      return;
+    }
+    setPwBusy(true);
+    try {
+      await setUserPassword({ data: { userId: pwTarget.id, password: pwValue } });
+      toast.success(`Password updated for ${pwTarget.email}`);
+      setPwTarget(null);
+      setPwValue("");
+      setPwConfirm("");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    } finally {
+      setPwBusy(false);
+    }
+  };
+
+  const onSendReset = async (email: string) => {
+    try {
+      await sendPasswordResetEmail({ data: { email } });
+      toast.success("Reset link generated");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  const onToggleRole = async (userId: string, current: string[], role: string, on: boolean) => {
+    const next = on ? Array.from(new Set([...current, role])) : current.filter((r) => r !== role);
+    try {
+      await setUserRoles({ data: { userId, roles: next } });
+      toast.success("Roles updated");
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Failed");
+    }
+  };
+
+  return (
+    <div className="p-8 md:p-12">
+      <div className="flex items-center justify-between">
+        <h2 className="font-serif text-xl">Users</h2>
+        {isSuper && (
+          <button
+            onClick={() => setShowNew((v) => !v)}
+            className="border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea"
+          >
+            {showNew ? "Cancel" : "New user"}
+          </button>
+        )}
+      </div>
+
+      {showNew && isSuper && (
+        <div className="mt-6 border border-ink/10 bg-white p-6 max-w-2xl">
+          <div className="grid gap-4 md:grid-cols-2">
+            <label className="block">
+              <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">Email</span>
+              <input
+                type="email"
+                value={newEmail}
+                onChange={(e) => setNewEmail(e.target.value)}
+                className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="block">
+              <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                Password (optional; leave blank to send reset)
+              </span>
+              <input
+                type="text"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+              />
+            </label>
+          </div>
+          <div className="mt-4">
+            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">Roles</div>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {allRoles.map((r) => (
+                <label
+                  key={r}
+                  className="inline-flex items-center gap-2 border border-ink/15 px-3 py-1.5 text-xs"
+                >
+                  <input
+                    type="checkbox"
+                    checked={newRoles.includes(r)}
+                    onChange={(e) =>
+                      setNewRoles((prev) =>
+                        e.target.checked ? [...prev, r] : prev.filter((x) => x !== r),
+                      )
+                    }
+                  />
+                  {r}
+                </label>
+              ))}
+            </div>
+          </div>
+          <button
+            disabled={busy || !newEmail}
+            onClick={() => void onCreate()}
+            className="mt-6 border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-50"
+          >
+            {busy ? "Creating…" : "Create user"}
+          </button>
+        </div>
+      )}
+
+      <div className="mt-8 border border-ink/10 bg-white overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead className="bg-ink/5 text-[0.65rem] uppercase tracking-[0.22em] text-ink/60">
+            <tr>
+              <th className="text-left p-3">Email</th>
+              <th className="text-left p-3">Roles</th>
+              <th className="text-left p-3">Last sign-in</th>
+              <th className="text-right p-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map((u) => (
+              <tr key={u.id} className="border-t border-ink/10">
+                <td className="p-3">
+                  <div className="text-ink">{u.email}</div>
+                  {!u.email_confirmed_at && (
+                    <div className="text-[0.65rem] uppercase tracking-[0.22em] text-amber-600">
+                      Unverified
+                    </div>
+                  )}
+                </td>
+                <td className="p-3">
+                  <div className="flex flex-wrap gap-1">
+                    {allRoles.map((r) => {
+                      const has = u.roles.includes(r);
+                      return (
+                        <button
+                          key={r}
+                          disabled={!isSuper}
+                          onClick={() => void onToggleRole(u.id, u.roles, r, !has)}
+                          className={[
+                            "px-2 py-1 text-[0.65rem] uppercase tracking-[0.15em] border",
+                            has
+                              ? "bg-ink text-white border-ink"
+                              : "border-ink/20 text-ink/50 hover:text-ink",
+                            !isSuper ? "opacity-50 cursor-not-allowed" : "",
+                          ].join(" ")}
+                        >
+                          {r}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </td>
+                <td className="p-3 text-ink/60">
+                  {u.last_sign_in_at ? new Date(u.last_sign_in_at).toLocaleString() : "—"}
+                </td>
+                <td className="p-3 text-right space-x-2">
+                  {isSuper && (
+                    <>
+                      <button
+                        onClick={() => {
+                          setPwTarget({ id: u.id, email: u.email });
+                          setPwValue("");
+                          setPwConfirm("");
+                        }}
+                        className="text-xs uppercase tracking-[0.18em] text-ink/70 hover:text-ink"
+                      >
+                        Set password
+                      </button>
+                      <button
+                        onClick={() => void onSendReset(u.email)}
+                        className="text-xs uppercase tracking-[0.18em] text-ink/70 hover:text-ink"
+                      >
+                        Send reset
+                      </button>
+                      <button
+                        onClick={() => void onDelete(u.id, u.email)}
+                        className="text-xs uppercase tracking-[0.18em] text-red-600 hover:text-red-800"
+                      >
+                        Delete
+                      </button>
+                    </>
+                  )}
+                </td>
+              </tr>
+            ))}
+            {users.length === 0 && (
+              <tr>
+                <td colSpan={4} className="p-6 text-center text-ink/50">
+                  No users
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      {!isSuper && (
+        <p className="mt-4 text-xs text-ink/55">
+          Read-only view. Only superadministrators can create, delete or change roles.
+        </p>
+      )}
+
+      {pwTarget && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/50 p-4">
+          <div className="w-full max-w-md border border-ink/10 bg-white p-6">
+            <h3 className="font-serif text-lg">Change password</h3>
+            <p className="mt-1 text-xs text-ink/60">{pwTarget.email}</p>
+            <label className="mt-5 block">
+              <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                New password (min 8 characters)
+              </span>
+              <input
+                type="text"
+                autoFocus
+                value={pwValue}
+                onChange={(e) => setPwValue(e.target.value)}
+                className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+              />
+            </label>
+            <label className="mt-4 block">
+              <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                Repeat password
+              </span>
+              <input
+                type="text"
+                value={pwConfirm}
+                onChange={(e) => setPwConfirm(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") void submitPassword();
+                }}
+                className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+              />
+            </label>
+            <div className="mt-6 flex justify-end gap-3">
+              <button
+                onClick={() => setPwTarget(null)}
+                className="border border-ink/20 px-4 py-2 text-xs uppercase tracking-[0.22em] text-ink/70 hover:text-ink"
+              >
+                Cancel
+              </button>
+              <button
+                disabled={pwBusy || pwValue.length < 8 || pwValue !== pwConfirm}
+                onClick={() => void submitPassword()}
+                className="border border-ink bg-ink px-4 py-2 text-xs uppercase tracking-[0.22em] text-white hover:bg-sea hover:border-sea disabled:opacity-50"
+              >
+                {pwBusy ? "Saving…" : "Save password"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/backoffice/VersionView.tsx

@@ -0,0 +1,109 @@
+import { Package } from "lucide-react";
+
+/** Build metadata injected at compile time by the host. */
+export type PlatformBuildInfo = {
+  appVersion?: string | null;
+  buildTime?: string | null;
+  platformVersion?: string | null;
+  platformRange?: string | null;
+};
+
+/** One published platform release. */
+export type PlatformRelease = {
+  version: string;
+  publishedAt: string | null;
+  current?: boolean;
+};
+
+/** Host-provided data for the version screen. */
+export type VersionDeps = {
+  build: PlatformBuildInfo | undefined;
+  releases: PlatformRelease[];
+  loading?: boolean;
+  /** Package name shown in the release history copy. */
+  packageName?: string;
+};
+
+function fmt(value: string | null | undefined) {
+  if (!value) return "—";
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return value;
+  return d.toLocaleString("sv-SE", { timeZone: "UTC", hour12: false }) + " UTC";
+}
+
+/** Host-agnostic CMS & platform version screen. */
+export function VersionView({ deps }: { deps: VersionDeps }) {
+  const { build, releases, loading, packageName = "@bygghammar/cms-platform" } = deps;
+
+  return (
+    <div className="p-8 md:p-12 w-full max-w-4xl">
+      <div className="flex items-center gap-3">
+        <Package className="size-5 text-ink/70" />
+        <h2 className="font-serif text-xl text-ink">CMS &amp; platform version</h2>
+      </div>
+      <p className="mt-2 text-sm text-ink/60">
+        Which build of this site is live and which release of the shared CMS platform package it
+        runs on.
+      </p>
+
+      {loading ? (
+        <p className="mt-8 text-sm text-ink/50">Loading…</p>
+      ) : (
+        <>
+          <dl className="mt-8 grid gap-4 sm:grid-cols-2">
+            {[
+              { label: "CMS build", value: build?.appVersion ?? "—" },
+              { label: "Built at", value: fmt(build?.buildTime) },
+              { label: "Platform package", value: build?.platformVersion ?? "—" },
+              { label: "Declared range", value: build?.platformRange ?? "—" },
+            ].map((row) => (
+              <div key={row.label} className="border border-ink/10 bg-white p-5">
+                <dt className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/50">
+                  {row.label}
+                </dt>
+                <dd className="mt-2 font-mono text-sm text-ink">{row.value}</dd>
+              </div>
+            ))}
+          </dl>
+
+          <h3 className="mt-12 font-serif text-lg text-ink">Latest platform releases</h3>
+          <p className="mt-1 text-sm text-ink/60">
+            The three most recent published versions of {packageName} with their publish dates.
+          </p>
+          <div className="mt-4 border border-ink/10 bg-white">
+            {releases.length === 0 ? (
+              <p className="p-5 text-sm text-ink/50">Release history unavailable right now.</p>
+            ) : (
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-ink/10 text-left text-[0.7rem] uppercase tracking-[0.18em] text-ink/50">
+                    <th className="px-5 py-3">Version</th>
+                    <th className="px-5 py-3">Published</th>
+                    <th className="px-5 py-3">Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {releases.map((r) => (
+                    <tr key={r.version} className="border-b border-ink/5 last:border-0">
+                      <td className="px-5 py-3 font-mono text-ink">{r.version}</td>
+                      <td className="px-5 py-3 text-ink/70">{fmt(r.publishedAt)}</td>
+                      <td className="px-5 py-3">
+                        {r.current ? (
+                          <span className="inline-flex items-center rounded-full bg-sea/10 px-3 py-1 text-[0.7rem] uppercase tracking-[0.16em] text-sea">
+                            In use
+                          </span>
+                        ) : (
+                          <span className="text-ink/40">—</span>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}