fse-theme-default 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fse-theme-default",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Default theme for full_stack_engine apps \u2014 a complete Astro project: app shell, design system, auth pages, emails and the generic metadata-driven CRUD pages. Extend it with a child theme.",
   "type": "module",
   "license": "MIT OR Apache-2.0",

package/src/components/AdminSettingsSections.astro

@@ -0,0 +1,14 @@
+---
+/**
+ * Extension point: the app's and modules' own sections of the admin
+ * settings page, rendered below maintenance mode. Filled through the
+ * `admin-settings-sections` slot: every
+ * `src/slots/admin-settings-sections/*.astro` of a child theme or a module.
+ * Their data comes through `page_context("admin/settings", ...)`, their
+ * forms post to the app's or module's own routes. Overriding this file
+ * replaces every contribution.
+ */
+import Slot from "fse-ssr/Slot.astro";
+---
+
+<Slot name="admin-settings-sections" />

package/src/components/Sidebar.astro

@@ -116,6 +116,14 @@ const { t, nav_groups, user, lang_prefix } = ssr<ShellContext>();
       </NavLink>
     )}
 
+    {user && user.can_admin_settings && (
+      <NavLink href={`${lang_prefix}/admin/settings`} label={t.nav.admin_settings ?? "Admin settings"}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+        </svg>
+      </NavLink>
+    )}
+
     {user && (
       <NavLink href={`${lang_prefix}/settings`} label={t.nav.settings ?? "Settings"}>
         <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">

package/src/layouts/Layout.astro

@@ -12,6 +12,7 @@ import type { SsrValue } from "fse-ssr/ssr";
 import Head from "../components/Head.astro";
 import Logo from "../components/Logo.astro";
 import Sidebar from "../components/Sidebar.astro";
+import type { ShellContext } from "../types";
 
 interface Props {
   title: string | SsrValue<string>;
@@ -19,7 +20,7 @@ interface Props {
 }
 
 const { title, sidebar = true } = Astro.props;
-const { lang } = ssr();
+const { t, lang, lang_prefix, user, maintenance_mode } = ssr<ShellContext>();
 ---
 
 <!doctype html>
@@ -54,6 +55,16 @@ const { lang } = ssr();
     </script>
   </head>
   <body class="bg-secondary-50 text-secondary-900">
+    {maintenance_mode && (
+      <div role="status" class="relative z-50 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 px-4 py-2 text-sm font-medium text-amber-900 bg-amber-50 border-b border-amber-200 dark:border-amber-900">
+        <span>{t.admin_settings.banner}</span>
+        {user && user.can_admin_settings && (
+          <a href={`${lang_prefix}/admin/settings`} class="underline underline-offset-4 hover:text-amber-700">
+            {t.nav.admin_settings}
+          </a>
+        )}
+      </div>
+    )}
     <div class="relative flex min-h-screen">
       {sidebar && <Sidebar />}
       <div

package/src/pages/admin/settings.astro

@@ -0,0 +1,105 @@
+---
+/**
+ * `/admin/settings` (framework `settings` module): operator switches,
+ * maintenance mode first, then the AdminSettingsSections extension point.
+ */
+import { ssr } from "fse-ssr/ssr";
+import Layout from "../../layouts/Layout.astro";
+import Card from "../../components/Card.astro";
+import Header from "../../components/Header.astro";
+import Modal from "../../components/Modal.astro";
+import AdminSettingsSections from "../../components/AdminSettingsSections.astro";
+import type { AdminSettingsPage } from "../../types/pages";
+
+const { t, lang_prefix, maintenance_enabled, can_write } =
+  ssr<AdminSettingsPage & { lang_prefix: string }>();
+---
+
+<Layout title={t.nav.admin_settings}>
+  <main class="max-w-2xl mx-auto">
+    <Header>{t.nav.admin_settings}</Header>
+
+    <Card>
+      <div class="flex flex-col divide-y divide-secondary-100">
+
+        <!-- Maintenance mode -->
+        <div class="py-6 first:pt-0 last:pb-0">
+          <div class="flex items-start justify-between flex-wrap gap-3">
+            <div class="flex-1 min-w-60">
+              <div class="flex items-center gap-2">
+                <h3 class="text-base font-semibold text-secondary-900">
+                  {t.admin_settings.maintenance_title}
+                </h3>
+                {maintenance_enabled && (
+                  <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-amber-50 text-amber-800 border border-amber-200 dark:border-amber-900">
+                    {t.admin_settings.status_on}
+                  </span>
+                )}
+                {!maintenance_enabled && (
+                  <span class="px-2 py-0.5 text-xs font-medium rounded-full bg-secondary-100 text-secondary-600 border border-secondary-200">
+                    {t.admin_settings.status_off}
+                  </span>
+                )}
+              </div>
+              <p class="text-sm text-secondary-500 mt-1">
+                {t.admin_settings.maintenance_desc}
+              </p>
+            </div>
+            {can_write && maintenance_enabled && (
+              <button type="button" class="btn-primary shrink-0" data-open-modal="maintenance-modal">
+                {t.admin_settings.disable}
+              </button>
+            )}
+            {can_write && !maintenance_enabled && (
+              <button type="button" class="btn-danger shrink-0" data-open-modal="maintenance-modal">
+                {t.admin_settings.enable}
+              </button>
+            )}
+          </div>
+        </div>
+
+        <AdminSettingsSections />
+
+      </div>
+    </Card>
+  </main>
+
+  {maintenance_enabled && (
+    <Modal id="maintenance-modal" title={t.admin_settings.disable}>
+      <p class="text-sm text-secondary-600 mb-5">{t.admin_settings.disable_confirm}</p>
+      <form action={`${lang_prefix}/admin/settings/maintenance`} method="POST" data-astro-reload class="flex flex-col gap-2">
+        <input type="hidden" name="enabled" value="0" />
+        <button type="submit" class="w-full btn-primary">{t.admin_settings.disable}</button>
+        <button type="button" class="w-full btn-secondary modal-close-btn" data-modal-id="maintenance-modal">
+          {t.settings.cancel}
+        </button>
+      </form>
+    </Modal>
+  )}
+  {!maintenance_enabled && (
+    <Modal id="maintenance-modal" title={t.admin_settings.enable}>
+      <p class="text-sm text-secondary-600 mb-5">{t.admin_settings.enable_confirm}</p>
+      <form action={`${lang_prefix}/admin/settings/maintenance`} method="POST" data-astro-reload class="flex flex-col gap-2">
+        <input type="hidden" name="enabled" value="1" />
+        <button type="submit" class="w-full btn-danger">{t.admin_settings.enable}</button>
+        <button type="button" class="w-full btn-secondary modal-close-btn" data-modal-id="maintenance-modal">
+          {t.settings.cancel}
+        </button>
+      </form>
+    </Modal>
+  )}
+
+  <script>
+    document.addEventListener("astro:page-load", () => {
+      document.querySelectorAll<HTMLElement>("[data-open-modal]").forEach((button) => {
+        if (button.dataset.bound) return;
+        button.dataset.bound = "1";
+        button.addEventListener("click", () => {
+          const id = button.dataset.openModal;
+          const modal = id ? (document.getElementById(id) as HTMLDialogElement | null) : null;
+          if (modal && !modal.open) modal.showModal();
+        });
+      });
+    });
+  </script>
+</Layout>

package/src/pages/maintenance.astro

@@ -0,0 +1,32 @@
+---
+/**
+ * What visitors get while maintenance mode is on (the framework answers
+ * 503 with this page; see framework/src/maintenance.rs). Signing in still
+ * works, so an administrator can get past it.
+ */
+import { ssr } from "fse-ssr/ssr";
+import Logo from "../components/Logo.astro";
+import Layout from "../layouts/Layout.astro";
+
+const { t, lang_prefix } = ssr<{ lang_prefix: string }>();
+---
+
+<Layout title={t.maintenance.heading} sidebar={false}>
+  <main class="min-h-screen w-full grid place-items-center bg-secondary-50 px-4 py-12">
+    <div class="w-full max-w-md text-center flex flex-col items-center gap-6">
+      <Logo variant="auth" />
+      <div class="w-12 h-12 rounded-full bg-primary-50 border border-primary-200 flex items-center justify-center">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary-600">
+          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
+        </svg>
+      </div>
+      <div>
+        <h1 class="text-lg font-semibold text-secondary-900 mb-2">{t.maintenance.heading}</h1>
+        <p class="text-sm text-secondary-500">{t.maintenance.text}</p>
+      </div>
+      <a href={`${lang_prefix}/login`} class="text-sm text-secondary-500 hover:text-secondary-800 underline underline-offset-4">
+        {t.maintenance.admin_login}
+      </a>
+    </div>
+  </main>
+</Layout>

package/src/types/pages.ts

@@ -53,6 +53,13 @@ export interface SettingsPage {
   email_error?: string;
 }
 
+/** `/admin/settings` (framework `settings` module). */
+export interface AdminSettingsPage {
+  maintenance_enabled: boolean;
+  /** Holds `admin_settings.write`: may change settings. */
+  can_write: boolean;
+}
+
 export interface ErrorPage {
   error: string;
 }

package/src/types.ts

@@ -179,6 +179,8 @@ export interface SessionUser {
   role: string;
   is_admin: boolean;
   can_read_users: boolean;
+  /** Holds `admin_settings.read`: may open `/admin/settings`. */
+  can_admin_settings: boolean;
 }
 
 /** Context keys every page receives, whatever renders it. */
@@ -187,4 +189,7 @@ export interface ShellContext {
   nav_groups: NavGroup[];
   user?: SessionUser;
   lang_prefix: string;
+  /** Present (true) only while maintenance mode is on — on pages an
+   * admin sees, and on the login page. */
+  maintenance_mode?: boolean;
 }

package/theme.json

@@ -1,5 +1,5 @@
 {
   "name": "fse-theme-default",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Default full_stack_engine theme: app shell, design system, auth pages, emails and the generic model CRUD pages."
 }