fse-theme-default 0.3.0

package/src/pages/settings.astro

@@ -0,0 +1,188 @@
+---
+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 Input from "../components/Input.astro";
+import Modal from "../components/Modal.astro";
+import type { SettingsPage } from "../types/pages";
+
+const {
+  t,
+  current_email,
+  first_name,
+  last_name,
+  success,
+  error,
+  email_success,
+  email_error,
+} = ssr<SettingsPage>();
+
+const messages = t.messages as Record<string, string>;
+const errors = t.errors as Record<string, string>;
+---
+
+<Layout title={t.settings.title}>
+  <main class="max-w-2xl mx-auto">
+    <Header>{t.settings.title}</Header>
+
+    <Card>
+      <div class="flex flex-col divide-y divide-secondary-100">
+
+        <!-- Name -->
+        {(first_name || last_name) && (
+        <div class="pb-6">
+          <h3 class="text-base font-semibold text-secondary-900">
+            {t.settings.name}
+          </h3>
+          <div class="mt-3 px-4 py-3 rounded-lg bg-secondary-50 border border-secondary-100">
+            <span class="text-sm font-medium text-secondary-900">
+              {first_name} {last_name}
+            </span>
+          </div>
+        </div>
+        )}
+
+        <!-- Email Setting -->
+        <div class="py-6 first:pt-0">
+          <div class="flex items-start justify-between mb-3 flex-wrap gap-2">
+            <div>
+              <h3 class="text-base font-semibold text-secondary-900">
+                {t.settings.email_address}
+              </h3>
+              <p class="text-sm text-secondary-500 mt-0.5">
+                {t.settings.email_desc}
+              </p>
+            </div>
+            <button type="button" id="change-email-btn" class="btn-secondary shrink-0">
+              {t.settings.change_email}
+            </button>
+          </div>
+          <div class="px-4 py-3 rounded-lg bg-secondary-50 border border-secondary-100">
+            <span class="text-sm font-medium text-secondary-900">
+              {current_email}
+            </span>
+          </div>
+        </div>
+
+        <!-- Password Setting -->
+        <div class="py-6">
+          <div class="mb-4">
+            <h3 class="text-base font-semibold text-secondary-900">
+              {t.settings.account_security}
+            </h3>
+          </div>
+          <form action="/settings/password-reset" method="POST" data-astro-reload>
+            <button type="submit" class="btn-secondary">
+              {t.settings.send_reset}
+            </button>
+          </form>
+          {success && (
+            <div class="mt-4 px-4 py-3 rounded-lg bg-primary-50 border border-primary-200">
+              <p class="text-sm font-medium text-primary-700">{messages[success] ?? success}</p>
+            </div>
+          )}
+          {error && (
+            <div class="mt-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200">
+              <p class="text-sm font-medium text-red-700">{errors[error] ?? error}</p>
+            </div>
+          )}
+        </div>
+
+        <!-- Danger Zone -->
+        <div class="pt-6">
+          <div class="flex items-start justify-between flex-wrap gap-3">
+            <div>
+              <h3 class="text-base font-semibold text-red-600">
+                {t.settings.delete_account}
+              </h3>
+              <p class="text-sm text-secondary-500 mt-0.5">
+                {t.settings.delete_account_desc}
+              </p>
+            </div>
+            <button type="button" id="delete-account-btn" class="btn-danger shrink-0">
+              {t.settings.delete_account}
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </Card>
+  </main>
+
+  <!-- Change Email Modal -->
+  <Modal id="change-email-modal" title={t.settings.update_email_title}>
+    <form id="change-email-form" action="/settings/change-email" method="POST" data-astro-reload class="flex flex-col gap-5">
+      <div class="flex flex-col gap-2">
+        <label for="new_email" class="text-sm font-medium text-secondary-700">
+          {t.settings.new_email}
+        </label>
+        <Input id="new_email" type="email" placeholder="e.g. name@example.com" required={true} />
+      </div>
+      <div class="flex flex-col gap-2">
+        <button type="submit" class="w-full btn-primary">
+          {t.settings.update_email_btn}
+        </button>
+        <button type="button" id="cancel-email-change-btn" class="w-full btn-secondary">
+          {t.settings.cancel}
+        </button>
+      </div>
+      <div id="modal-messages">
+        {email_success && (
+          <div class="px-4 py-3 rounded-lg bg-primary-50 border border-primary-200">
+            <p class="text-sm font-medium text-primary-700">{messages[email_success] ?? email_success}</p>
+          </div>
+        )}
+        {email_error && (
+          <div class="px-4 py-3 rounded-lg bg-red-50 border border-red-200">
+            <p class="text-sm font-medium text-red-700">{errors[email_error] ?? email_error}</p>
+          </div>
+        )}
+      </div>
+    </form>
+  </Modal>
+
+  <!-- Delete Account Modal -->
+  <Modal id="delete-account-modal" title={t.settings.delete_account_title}>
+    <p class="text-sm text-secondary-600 mb-5">
+      {t.settings.delete_account_confirm}
+    </p>
+    <div class="flex flex-col gap-2">
+      <form action="/settings/delete-account" method="POST" data-astro-reload>
+        <button type="submit" class="w-full px-4 py-2 inline-flex items-center justify-center text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors">
+          {t.settings.delete_account_btn}
+        </button>
+      </form>
+      <button type="button" id="cancel-delete-account-btn" class="w-full btn-secondary">
+        {t.settings.cancel}
+      </button>
+    </div>
+  </Modal>
+
+  <script>
+    function setupSettings() {
+      const modal = document.getElementById("change-email-modal") as HTMLDialogElement;
+      const openBtn = document.getElementById("change-email-btn");
+      const closeBtn = document.getElementById("cancel-email-change-btn");
+      openBtn?.addEventListener("click", () => {
+        if (modal && !modal.open) modal.showModal();
+      });
+      closeBtn?.addEventListener("click", () => modal?.close());
+
+      const messages = document.getElementById("modal-messages");
+      if (messages && (messages.textContent?.trim().length ?? 0) > 0 && modal && !modal.open) {
+        modal.showModal();
+      }
+
+      const deleteAccountModal = document.getElementById("delete-account-modal") as HTMLDialogElement;
+      document.getElementById("delete-account-btn")?.addEventListener("click", () => {
+        if (deleteAccountModal && !deleteAccountModal.open) deleteAccountModal.showModal();
+      });
+      document.getElementById("cancel-delete-account-btn")?.addEventListener("click", () => deleteAccountModal?.close());
+    }
+
+    // `astro:page-load` replaces DOMContentLoaded, which does not fire on
+    // client-side navigation. It also fires on the initial load.
+    document.addEventListener("astro:page-load", setupSettings);
+  </script>
+</Layout>

package/src/pages/user.astro

@@ -0,0 +1,65 @@
+---
+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 { UserPage } from "../types/pages";
+
+const { t, id, email, role, roles } = ssr<UserPage>();
+const roleLabels = t.roles as Record<string, string>;
+---
+
+<Layout title={t.users.edit}>
+  <main class="max-w-2xl mx-auto w-full">
+    <Header backlink="/users">{t.users.edit_title}</Header>
+    <Card>
+      <form action={`/users/${id}`} method="POST" data-astro-reload class="flex flex-col gap-6">
+        <!-- Email (read-only) -->
+        <div>
+          <label class="block text-sm font-medium text-secondary-700 mb-2">
+            {t.users.email}
+          </label>
+          <div class="px-4 py-2.5 rounded-lg bg-secondary-50 border border-secondary-100">
+            <span class="text-sm font-medium text-secondary-900">
+              {email}
+            </span>
+          </div>
+        </div>
+
+        <!-- Role -->
+        <div class="relative w-full">
+          <select
+            id="role"
+            name="role"
+            required
+            class="relative w-full h-10 px-3.5 text-sm transition-all bg-white border border-secondary-300 rounded-lg outline-hidden appearance-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 peer text-secondary-900"
+          >
+            {
+              roles.map((r) => (
+                <option value={r.value} selected={r.value === role}>
+                  {roleLabels[r.value] ?? r.label}
+                </option>
+              ))
+            }
+          </select>
+          <label
+            for="role"
+            class="pointer-events-none absolute top-2.5 left-2 z-1 px-1.5 text-sm text-secondary-500 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-valid:-top-2 peer-valid:text-xs peer-focus:-top-2 peer-focus:text-xs peer-focus:text-primary-600"
+          >
+            {t.users.role}
+          </label>
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-secondary-400">
+            <path d="m6 9 6 6 6-6"></path>
+          </svg>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex sm:justify-end pt-5 border-t border-secondary-100">
+          <button type="submit" class="btn-primary w-full sm:w-auto">
+            <span>{t.common.save}</span>
+          </button>
+        </div>
+      </form>
+    </Card>
+  </main>
+</Layout>

package/src/pages/users.astro

@@ -0,0 +1,52 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import Card from "../components/Card.astro";
+import Layout from "../layouts/Layout.astro";
+import Table from "../components/Table.astro";
+import Header from "../components/Header.astro";
+import TableFilters from "../components/TableFilters.astro";
+import Pagination from "../components/Pagination.astro";
+import type { TableHeader, UsersPage } from "../types/pages";
+
+const { t, rows, filter_role, roles } = ssr<UsersPage>();
+
+const headers: TableHeader[] = [
+  { title: "ID", key: "id" },
+  { title: "Email", key: "email" },
+  { title: "Role", key: "role" },
+  { title: "Date", key: "created_at" },
+  { title: "Actions", key: "id", format: "delete" },
+];
+
+const roleLabels = t.roles as Record<string, string>;
+---
+
+<Layout title={t.users.title}>
+  <main>
+    <Header>{t.users.title}</Header>
+    <Card padding={false}>
+      <TableFilters searchPlaceholder={t.filters.search_users ?? "Search by email..."}>
+        <div class="relative">
+          <select
+            name="filter_role"
+            class="h-9 pl-3 pr-8 text-sm border border-secondary-200 rounded-lg bg-white focus:border-primary-500 focus:ring-1 focus:ring-primary-500 outline-hidden text-secondary-700 appearance-none"
+          >
+            <option value="">{t.filters.all_roles ?? "All roles"}</option>
+            {
+              roles.map((role) => (
+                <option value={role.value} selected={filter_role === role.value}>
+                  {roleLabels[role.value] ?? role.label}
+                </option>
+              ))
+            }
+          </select>
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-secondary-400">
+            <path d="m6 9 6 6 6-6"></path>
+          </svg>
+        </div>
+      </TableFilters>
+      <Table headers={headers} rows={rows} />
+      <Pagination />
+    </Card>
+  </main>
+</Layout>

package/src/styles/global.css

@@ -0,0 +1,11 @@
+/*
+  The theme's Tailwind root, imported by the layout. A child theme replaces
+  this whole file by creating its own src/styles/global.css — typically:
+
+    @import "tailwindcss";
+    @import "fse-theme-default/src/styles/theme.css";
+    @source "../";
+    @theme { --color-primary-600: #1d4ed8; }   (overrides)
+*/
+@import "tailwindcss";
+@import "./theme.css";