fse-theme-default 0.3.0

package/src/pages/fse/public-detail.astro

@@ -0,0 +1,29 @@
+---
+/**
+ * Generic public detail page for models with `public_read`: the row's title
+ * plus a definition list of its visible columns.
+ */
+import { ssr } from "fse-ssr/ssr";
+import Layout from "../../layouts/Layout.astro";
+import type { ModelDetailPage } from "../../types";
+
+const { t, lang_prefix, meta, row } = ssr<ModelDetailPage>();
+---
+
+<Layout title={row[meta.title_field] ?? meta.table}>
+  <main class="max-w-2xl">
+    <a class="btn-ghost mb-4" href={`${lang_prefix}/${meta.table}`}>{t.model_ui.back ?? "Back"}</a>
+    <h1 class="section-title mb-6">{row[meta.title_field]}</h1>
+
+    <dl class="bg-white border border-secondary-200 rounded-xl p-6 grid grid-cols-[auto_1fr] gap-x-6 gap-y-3 text-sm">
+      {meta.list_columns.map((col) => (
+        <>
+          <dt class="font-medium text-secondary-500">
+            {t.models[meta.table].fields[col.name] ?? col.name}
+          </dt>
+          <dd>{row[col.name]}</dd>
+        </>
+      ))}
+    </dl>
+  </main>
+</Layout>

package/src/pages/fse/public-list.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * Generic public catalog page for models with `public_read` — a card grid
+ * linking each row to its public detail page by the public-read column.
+ */
+import { ssr } from "fse-ssr/ssr";
+import Layout from "../../layouts/Layout.astro";
+import type { ModelListPage } from "../../types";
+
+const { t, lang_prefix, meta, rows, page, total_pages, has_prev, has_next, prev_page, next_page, search } =
+  ssr<ModelListPage>();
+const title = t.models[meta.table].title ?? meta.table;
+---
+
+<Layout title={title}>
+  <main>
+    <h1 class="section-title mb-6">{title}</h1>
+
+    <form method="get" class="mb-6">
+      <input
+        type="search"
+        name="search"
+        value={search ?? ""}
+        placeholder={t.model_ui.search ?? "Search..."}
+        class="w-full max-w-md px-3 py-2 text-sm border border-secondary-200 rounded-lg bg-white focus:outline-hidden focus:ring-2 focus:ring-primary-500"
+      />
+    </form>
+
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {rows.map((row) => (
+        <a
+          href={`${lang_prefix}/${meta.table}/${row[meta.public_read]}`}
+          class="block bg-white border border-secondary-200 rounded-xl p-5 hover:border-primary-400 transition-colors"
+        >
+          <h2 class="font-semibold text-secondary-900">{row[meta.title_field]}</h2>
+        </a>
+      ))}
+    </div>
+
+    <div class="mt-8 flex items-center justify-center gap-3 text-sm text-secondary-500">
+      {has_prev && (
+        <a class="btn-ghost" href={`?page=${prev_page}&search=${search ?? ""}`}>
+          {t.model_ui.prev ?? "Previous"}
+        </a>
+      )}
+      <span>{page} / {total_pages}</span>
+      {has_next && (
+        <a class="btn-ghost" href={`?page=${next_page}&search=${search ?? ""}`}>
+          {t.model_ui.next ?? "Next"}
+        </a>
+      )}
+    </div>
+  </main>
+</Layout>

package/src/pages/index.astro

@@ -0,0 +1,41 @@
+---
+/**
+ * Default home page: a dashboard linking every model the user may manage.
+ * Apps usually replace it (a child theme's own src/pages/index.astro).
+ */
+import { ssr } from "fse-ssr/ssr";
+import Card from "../components/Card.astro";
+import Header from "../components/Header.astro";
+import Layout from "../layouts/Layout.astro";
+import type { ShellContext } from "../types";
+
+const { t, nav, user, lang_prefix } = ssr<ShellContext>();
+---
+
+<Layout title={t.nav.home ?? "Home"}>
+  <main class="w-full max-w-5xl">
+    <Header>{t.nav.home ?? "Home"}</Header>
+
+    {!user && (
+      <Card>
+        <p class="text-sm text-secondary-600">{t.dashboard.signed_out ?? "Sign in to manage your data."}</p>
+        <div>
+          <a class="btn-primary" href={`${lang_prefix}/login`}>{t.nav.login ?? "Login"}</a>
+        </div>
+      </Card>
+    )}
+
+    {user && (
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {nav.map((item) => (
+          <a href={`${lang_prefix}${item.href}`}>
+            <Card accent="primary" hover>
+              <h2 class="text-lg font-bold text-secondary-900">{t.models[item.table].title ?? item.table}</h2>
+              <p class="text-sm text-secondary-500">{t.dashboard.manage ?? "Manage entries"}</p>
+            </Card>
+          </a>
+        ))}
+      </div>
+    )}
+  </main>
+</Layout>

package/src/pages/login.astro

@@ -0,0 +1,88 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import Input from "../components/Input.astro";
+import Logo from "../components/Logo.astro";
+import Layout from "../layouts/Layout.astro";
+
+const { t, error, success } = ssr<{ error?: string; success?: string }>();
+const errorLogin = t.login as Record<string, string>;
+const errors = t.errors as Record<string, string>;
+const messages = t.messages as Record<string, string>;
+---
+
+<Layout title={t.login.title} 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-sm">
+      <!-- Logo -->
+      <div class="flex justify-center mb-8">
+        <a href="/">
+          <Logo class="h-12 w-auto" />
+        </a>
+      </div>
+
+      <!-- Card -->
+      <div class="bg-white border border-secondary-200 rounded-xl overflow-hidden">
+        <div class="px-6 pt-6 pb-2">
+          <h1 class="text-lg font-semibold text-secondary-900 mb-1">
+            {t.login.title}
+          </h1>
+        </div>
+
+        <form action="/login" method="POST" data-astro-reload>
+          <div class="px-6 py-4 flex flex-col gap-4">
+            <Input
+              id="email"
+              type="email"
+              placeholder={t.login.email}
+              required={true}
+            />
+            <Input
+              id="password"
+              type="password"
+              placeholder={t.login.password}
+              required={true}
+            />
+            <div class="flex justify-end -mt-1">
+              <a href="/forgot-password" class="text-xs text-secondary-500 hover:text-primary-600 hover:underline transition-colors">
+                {t.login.forgot_password}
+              </a>
+            </div>
+          </div>
+
+          <div class="px-6 pb-5">
+            <button
+              class="btn-primary w-full h-10 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <span>{t.login.submit}</span>
+            </button>
+          </div>
+
+          {error && (
+            <div class="px-6 pb-4">
+              <div class="w-full px-4 py-3 text-sm text-red-600 border border-red-200 rounded-lg bg-red-50" role="alert">
+                <p>{errors[error] ?? errorLogin[error] ?? error}</p>
+              </div>
+            </div>
+          )}
+
+          {success && (
+            <div class="px-6 pb-4">
+              <div class="w-full px-4 py-3 text-sm text-primary-700 border border-primary-200 rounded-lg bg-primary-50" role="alert">
+                <p>{messages[success] ?? success}</p>
+              </div>
+            </div>
+          )}
+        </form>
+
+        <div class="px-6 py-4 border-t border-secondary-100 text-center">
+          <p class="text-sm text-secondary-500">
+            {t.login.no_account}
+            <a href="/register" class="text-primary-600 hover:text-primary-700 font-medium hover:underline ml-1">
+              {t.login.register}
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </main>
+</Layout>

package/src/pages/public/error.astro

@@ -0,0 +1,29 @@
+---
+/** Error page for visitors who aren't signed in (the framework renders `public/error`). */
+import { ssr } from "fse-ssr/ssr";
+import Layout from "../../layouts/Layout.astro";
+import type { ErrorPage } from "../../types/pages";
+
+const { t, error, status, lang_prefix } = ssr<ErrorPage & { status: number; lang_prefix: string }>();
+---
+
+<Layout title={t.common.error ?? "Error"} sidebar={false}>
+  <main class="min-h-screen grid place-items-center bg-secondary-50 px-4">
+    <div class="w-full max-w-md text-center flex flex-col items-center gap-5">
+      <div class="w-12 h-12 rounded-full bg-red-50 border border-red-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-red-500">
+          <circle cx="12" cy="12" r="10"></circle><path d="M12 8v4m0 4h.01"></path>
+        </svg>
+      </div>
+      <div>
+        <p class="text-xs font-semibold text-secondary-400 mb-1">{status}</p>
+        <h1 class="text-base font-semibold text-secondary-900 mb-1">{t.common.error ?? "Error"}</h1>
+        <p class="text-sm text-secondary-500">{error}</p>
+      </div>
+      <div class="flex gap-2">
+        <a href={`${lang_prefix}/`} class="btn-secondary">{t.common.back_home ?? "Back to home"}</a>
+        <a href={`${lang_prefix}/login`} class="btn-primary">{t.nav.login ?? "Login"}</a>
+      </div>
+    </div>
+  </main>
+</Layout>

package/src/pages/register-success.astro

@@ -0,0 +1,31 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import Layout from "../layouts/Layout.astro";
+
+const { t } = ssr();
+---
+
+<Layout title={t.register_success.title} sidebar={false}>
+  <main class="grid w-screen h-screen place-items-center">
+    <div class="overflow-hidden w-[400px] bg-white rounded-xl border border-secondary-200 text-secondary-500">
+      <div class="p-6">
+        <header class="mb-4 text-center">
+          <h3 class="text-xl font-medium text-black">{t.register_success.header}</h3>
+        </header>
+        <div class="flex flex-col gap-4 mt-8 text-center text-sm">
+          <p>
+            {t.register_success.success}
+          </p>
+          <p>
+            {t.register_success.desc}
+          </p>
+        </div>
+      </div>
+      <div class="flex justify-end p-6 border-t border-secondary-100">
+        <a href="/login" class="inline-flex items-center justify-center w-full h-10 gap-2 whitespace-nowrap btn-primary">
+          <span>{t.register_success.return}</span>
+        </a>
+      </div>
+    </div>
+  </main>
+</Layout>

package/src/pages/register.astro

@@ -0,0 +1,99 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import Input from "../components/Input.astro";
+import Logo from "../components/Logo.astro";
+import Layout from "../layouts/Layout.astro";
+
+const { t, error } = ssr<{ error?: string }>();
+const errors = t.errors as Record<string, string>;
+---
+
+<Layout title={t.register.title} 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-sm">
+      <!-- Logo -->
+      <div class="flex justify-center mb-8">
+        <a href="/">
+          <Logo class="h-12 w-auto" />
+        </a>
+      </div>
+
+      <!-- Card -->
+      <div class="bg-white border border-secondary-200 rounded-xl overflow-hidden">
+        <div class="px-6 pt-6 pb-2">
+          <h1 class="text-lg font-semibold text-secondary-900 mb-1">
+            {t.register.title}
+          </h1>
+        </div>
+
+        <form id="login-form" action="/register" method="POST" data-astro-reload enctype="multipart/form-data">
+          <div class="px-6 py-4 flex flex-col gap-4">
+            <div class="grid grid-cols-2 gap-4">
+              <Input id="first_name" type="text" placeholder={t.register.first_name} required={true} />
+              <Input id="last_name" type="text" placeholder={t.register.last_name} required={true} />
+            </div>
+            <Input id="email" type="email" placeholder={t.register.email} required={true} />
+            <Input id="password" type="password" placeholder={t.register.password} required={true} />
+            <Input id="repeat_password" type="password" placeholder={t.register.repeat_password} required={true} />
+          </div>
+
+          <div class="px-6 pb-5 pt-1">
+            <button
+              id="submit-btn"
+              type="submit"
+              class="btn-primary w-full h-10 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <span>{t.register.submit}</span>
+            </button>
+          </div>
+
+          {error && (
+            <div class="px-6 pb-4">
+              <div class="w-full px-4 py-3 text-sm text-red-600 border border-red-200 rounded-lg bg-red-50" role="alert">
+                <p>{errors[error] ?? error}</p>
+              </div>
+            </div>
+          )}
+        </form>
+
+        <div class="px-6 py-4 border-t border-secondary-100 text-center">
+          <p class="text-sm text-secondary-500">
+            {t.register.has_account}
+            <a href="/login" class="text-primary-600 hover:text-primary-700 font-medium hover:underline ml-1">
+              {t.register.login}
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script>
+    import { pageProps } from "fse-ssr/client";
+
+    function setupRegisterForm() {
+      const form = document.getElementById("login-form") as HTMLFormElement;
+      const password = document.getElementById("password") as HTMLInputElement;
+      const repeatPassword = document.getElementById("repeat_password") as HTMLInputElement;
+      const submitBtn = document.getElementById("submit-btn") as HTMLButtonElement;
+
+      if (form && password && repeatPassword && submitBtn) {
+        form.addEventListener("submit", (e) => {
+          if (password.value !== repeatPassword.value) {
+            e.preventDefault();
+            const { t } = pageProps<{ t: { register: { passwords_mismatch?: string } } }>();
+            alert(t.register.passwords_mismatch ?? "Passwords do not match");
+          }
+        });
+
+        function checkPasswords() {
+          submitBtn.disabled = password.value !== repeatPassword.value;
+        }
+        password.addEventListener("input", checkPasswords);
+        repeatPassword.addEventListener("input", checkPasswords);
+      }
+    }
+
+    document.addEventListener("astro:page-load", setupRegisterForm);
+  </script>
+</Layout>

package/src/pages/reset-password.astro

@@ -0,0 +1,117 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import Input from "../components/Input.astro";
+import Layout from "../layouts/Layout.astro";
+
+const { t, token, error, success } = ssr<{
+  token: string;
+  error?: string;
+  success?: string;
+}>();
+const errors = t.errors as Record<string, string>;
+---
+
+<Layout title={t.reset_password.title} sidebar={false}>
+  <main class="grid w-screen h-screen place-items-center">
+    <form
+      id="reset-form"
+      class="overflow-hidden w-[400px] bg-white rounded-xl border border-secondary-200 text-secondary-500"
+      action="/reset-password"
+      method="POST" data-astro-reload
+    >
+      <input type="hidden" name="token" value={token} />
+      <div class="p-6">
+        <header class="mb-4 text-center">
+          <h3 class="text-xl font-medium text-black">
+            {t.reset_password.title}
+          </h3>
+        </header>
+        <div class="flex flex-col gap-4 mt-12">
+          <Input
+            id="password"
+            type="password"
+            placeholder={t.reset_password.new_password}
+            required={true}
+          />
+          <Input
+            id="repeat_password"
+            type="password"
+            placeholder={t.reset_password.repeat_new_password}
+            required={true}
+          />
+        </div>
+      </div>
+      <div class="flex justify-end p-6">
+        <button
+          id="submit-btn"
+          type="submit"
+          class="inline-flex items-center justify-center w-full h-10 gap-2 whitespace-nowrap btn-primary disabled:cursor-not-allowed disabled:border-primary-300 disabled:bg-primary-300 disabled:shadow-none"
+        >
+          <span>{t.reset_password.submit}</span>
+        </button>
+      </div>
+      {error && (
+        <div class="px-6 py-3">
+          <div
+            class="w-full px-4 py-3 mb-4 text-sm text-pink-500 border border-pink-100 rounded-sm bg-pink-50"
+            role="alert"
+          >
+            <p>{errors[error] ?? error}</p>
+          </div>
+        </div>
+      )}
+
+      {success && (
+        <div class="px-6 py-3">
+          <div
+            class="w-full px-4 py-3 mb-4 text-sm text-green-600 border border-green-100 rounded-sm bg-green-50"
+            role="alert"
+          >
+            <p>{success}</p>
+          </div>
+        </div>
+      )}
+    </form>
+  </main>
+
+  <script>
+    import { pageProps } from "fse-ssr/client";
+
+    function setupResetForm() {
+      const form = document.getElementById("reset-form");
+      const password = document.getElementById("password") as HTMLInputElement;
+      const repeatPassword = document.getElementById(
+        "repeat_password",
+      ) as HTMLInputElement;
+      const submitBtn = document.getElementById(
+        "submit-btn",
+      ) as HTMLButtonElement;
+
+      if (form && password && repeatPassword && submitBtn) {
+        form.addEventListener("submit", (e) => {
+          if (password.value !== repeatPassword.value) {
+            e.preventDefault();
+            const { t } = pageProps<{ t: { register: { passwords_mismatch?: string } } }>();
+            alert(t.register.passwords_mismatch ?? "Passwords do not match");
+            submitBtn.disabled = true;
+          } else {
+            submitBtn.disabled = false;
+          }
+        });
+
+        password.addEventListener("input", checkPasswords);
+        repeatPassword.addEventListener("input", checkPasswords);
+
+        function checkPasswords() {
+          if (password.value === repeatPassword.value) {
+            submitBtn.disabled = false;
+          } else {
+            submitBtn.disabled = true;
+          }
+        }
+      }
+    }
+
+    document.addEventListener("astro:page-load", setupResetForm);
+  </script>
+</Layout>