@podosoft/podokit 0.4.0 → 0.5.0

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(app)/admin/users/+page.svelte

@@ -8,7 +8,9 @@
   import * as Table from "$lib/components/ui/table";
   import * as Dialog from "$lib/components/ui/dialog";
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
-  import TablePagination from "$lib/components/table-pagination.svelte";
+  import * as Select from "$lib/components/ui/select";
+  import DataTable, { type DataTableColumn, type SortState, DEFAULT_PAGE_SIZE } from "$lib/components/data-table.svelte";
+  import TableToolbar, { type ToolbarFilter, type ToolbarSearchField } from "$lib/components/table-toolbar.svelte";
   import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
   import PlusIcon from "@lucide/svelte/icons/plus";
   import { toast } from "svelte-sonner";
@@ -18,27 +20,94 @@
 
   let { data }: { data: PageData } = $props();
   const i18n = getI18n();
+  const emailVerificationEnabled = $derived(data.capabilities.emailVerification);
+  // Assignable roles come from the server (access-control); label the known ones.
+  const roleNames = $derived(data.capabilities.roles ?? ["admin", "user"]);
+  const roleLabel = (r: string): string =>
+    ({ admin: i18n.t.users.roleAdmin, user: i18n.t.users.roleUser, moderator: i18n.t.users.roleModerator }) [r] ?? r;
 
-  type Row = { id: string; name: string; email: string; role?: string | null; banned?: boolean | null };
+  type Row = {
+    id: string;
+    name: string;
+    email: string;
+    role?: string | null;
+    banned?: boolean | null;
+    emailVerified?: boolean | null;
+    createdAt?: string | Date | null;
+    banReason?: string | null;
+    banExpires?: string | Date | null;
+  };
 
-  const PAGE_SIZE = 5;
+  const PAGE_SIZE = DEFAULT_PAGE_SIZE;
+  const LOAD_LIMIT = 500; // bounded client-side list; add server-side filtering for larger deployments
   let users = $state<Row[]>([]);
-  let total = $state(0);
   let page = $state(1);
-  let search = $state("");
+  let sort = $state<SortState | null>(null);
   let busy = $state(false);
 
+  // Toolbar: filters + search both commit on the Search button (nothing applies
+  // until then), so multiple filter/search conditions apply together.
+  let search = $state("");
+  let appliedSearch = $state("");
+  let searchField = $state("email");
+  let appliedSearchField = $state("email");
+  let filterValues = $state<Record<string, string>>({ role: "", status: "" });
+  let appliedFilters = $state<Record<string, string>>({ role: "", status: "" });
+
+  const columns: DataTableColumn<Row>[] = [
+    { key: "name", label: i18n.t.users.name, sortable: true },
+    { key: "email", label: i18n.t.users.email, sortable: true },
+    { key: "role", label: i18n.t.users.role, sortable: true },
+    { key: "status", label: i18n.t.users.status },
+    { key: "createdAt", label: i18n.t.users.joined, sortable: true, value: (u) => (u.createdAt ? new Date(u.createdAt).getTime() : 0) },
+    { key: "actions", label: "", class: "w-10" },
+  ];
+  const filters = $derived<ToolbarFilter[]>([
+    {
+      key: "role",
+      label: i18n.t.users.role,
+      options: [{ value: "", label: i18n.t.toolbar.all }, ...roleNames.map((r) => ({ value: r, label: roleLabel(r) }))],
+    },
+    {
+      key: "status",
+      label: i18n.t.users.status,
+      options: [
+        { value: "", label: i18n.t.toolbar.all },
+        { value: "active", label: i18n.t.users.active },
+        { value: "banned", label: i18n.t.users.banned },
+      ],
+    },
+  ]);
+  const searchFields: ToolbarSearchField[] = [
+    { value: "email", label: i18n.t.users.email },
+    { value: "name", label: i18n.t.users.name },
+  ];
+
+  const filtered = $derived(
+    users.filter((u) => {
+      if (appliedSearch) {
+        const hay = (appliedSearchField === "name" ? u.name : u.email).toLowerCase();
+        if (!hay.includes(appliedSearch.toLowerCase())) return false;
+      }
+      if (appliedFilters.role && (u.role ?? "user") !== appliedFilters.role) return false;
+      if (appliedFilters.status === "banned" && !u.banned) return false;
+      if (appliedFilters.status === "active" && u.banned) return false;
+      return true;
+    }),
+  );
+
   async function load(): Promise<void> {
-    const { data: res, error } = await api.auth.admin.listUsers({
-      query: {
-        limit: PAGE_SIZE,
-        offset: (page - 1) * PAGE_SIZE,
-        ...(search ? { searchField: "email", searchOperator: "contains", searchValue: search } : {}),
-      },
-    });
+    const { data: res, error } = await api.auth.admin.listUsers({ query: { limit: LOAD_LIMIT } });
     if (error) return void toast.error(error.message ?? i18n.t.users.loadFailed);
     users = (res?.users ?? []) as Row[];
-    total = res?.total ?? users.length;
+  }
+
+  async function applySearch(): Promise<void> {
+    await load(); // refresh from the server on explicit search, then filter client-side
+    appliedSearch = search;
+    appliedSearchField = searchField;
+    appliedFilters = { ...filterValues };
+    page = 1;
   }
 
   // Impersonate — become the user, then a banner offers "stop impersonating".
@@ -50,7 +119,7 @@
 
   // Create user
   let createOpen = $state(false);
-  let form = $state({ name: "", email: "", password: "", confirm: "", admin: false });
+  let form = $state({ name: "", email: "", password: "", confirm: "", role: "user", sendVerify: true });
   let createError = $state("");
   async function createUser(event: Event): Promise<void> {
     event.preventDefault();
@@ -64,13 +133,18 @@
       name: form.name,
       email: form.email,
       password: form.password,
-      role: form.admin ? "admin" : "user",
+      // Roles are server-driven (capabilities.roles); the typed client only knows
+      // the built-in ones, so assert at this boundary — the server validates it.
+      role: form.role as "admin" | "user",
     });
     busy = false;
     if (error) return void toast.error(error.message ?? i18n.t.users.actionFailed);
     toast.success(i18n.t.users.userCreated);
+    if (form.sendVerify && emailVerificationEnabled) {
+      await api.auth.sendVerificationEmail({ email: form.email, callbackURL: `${location.origin}/admin` });
+    }
     createOpen = false;
-    form = { name: "", email: "", password: "", confirm: "", admin: false };
+    form = { name: "", email: "", password: "", confirm: "", role: "user", sendVerify: true };
     page = 1;
     await load();
   }
@@ -85,7 +159,7 @@
   // profile
   let mName = $state("");
   let mEmail = $state("");
-  let mAdmin = $state(false);
+  let mRole = $state("user");
   // security
   let mNewPassword = $state("");
   let mConfirmPassword = $state("");
@@ -95,7 +169,13 @@
   // sessions
   let mSessions = $state<Session[]>([]);
   let mSessionsPage = $state(1);
-  const mPagedSessions = $derived(mSessions.slice((mSessionsPage - 1) * PAGE_SIZE, mSessionsPage * PAGE_SIZE));
+  let mSessionsSort = $state<SortState | null>(null);
+  const mSessionsColumns: DataTableColumn<Session>[] = [
+    { key: "userAgent", label: i18n.t.adminSessions.device, sortable: true },
+    { key: "ipAddress", label: i18n.t.adminSessions.ip, sortable: true },
+    { key: "createdAt", label: i18n.t.adminSessions.since, sortable: true, value: (s) => new Date(s.createdAt).getTime() },
+    { key: "actions", label: "", class: "w-10" },
+  ];
   // danger
   let mDeleteArmed = $state(false);
 
@@ -104,7 +184,7 @@
     mSection = "profile";
     mName = u.name;
     mEmail = u.email;
-    mAdmin = u.role === "admin";
+    mRole = u.role ?? "user";
     mNewPassword = "";
     mConfirmPassword = "";
     mPwError = "";
@@ -127,13 +207,25 @@
     event.preventDefault();
     if (!mUser) return;
     busy = true;
+    const nextRole = mRole;
+    // Profile fields go through updateUser; role changes go through the dedicated
+    // setRole endpoint (aligns with the admin plugin's access-control model).
     const { error } = await api.auth.admin.updateUser({
       userId: mUser.id,
-      data: { name: mName, email: mEmail, role: mAdmin ? "admin" : "user" },
+      data: { name: mName, email: mEmail },
     });
+    if (!error && nextRole !== (mUser.role ?? "user")) {
+      // Custom roles are valid at runtime (server-enforced); assert past the
+      // typed client, which only knows the built-in roles.
+      const { error: roleError } = await api.auth.admin.setRole({ userId: mUser.id, role: nextRole as "admin" | "user" });
+      if (roleError) {
+        busy = false;
+        return void toast.error(roleError.message ?? i18n.t.users.actionFailed);
+      }
+    }
     busy = false;
     if (error) return void toast.error(error.message ?? i18n.t.users.actionFailed);
-    mUser = { ...mUser, name: mName, email: mEmail, role: mAdmin ? "admin" : "user" };
+    mUser = { ...mUser, name: mName, email: mEmail, role: nextRole };
     toast.success(i18n.t.users.userUpdated);
     await load();
   }
@@ -155,6 +247,35 @@
     toast.success(i18n.t.users.passwordSet);
   }
 
+  async function resendVerification(): Promise<void> {
+    if (!mUser) return;
+    busy = true;
+    const { error } = await api.auth.sendVerificationEmail({ email: mUser.email, callbackURL: `${location.origin}/admin` });
+    busy = false;
+    if (error) return void toast.error(error.message ?? i18n.t.users.actionFailed);
+    toast.success(i18n.t.users.verificationSent);
+  }
+
+  async function markVerified(): Promise<void> {
+    if (!mUser) return;
+    busy = true;
+    const { error } = await api.auth.admin.updateUser({ userId: mUser.id, data: { emailVerified: true } });
+    busy = false;
+    if (error) return void toast.error(error.message ?? i18n.t.users.actionFailed);
+    mUser = { ...mUser, emailVerified: true };
+    toast.success(i18n.t.users.markedVerified);
+    await load();
+  }
+
+  async function sendResetEmail(): Promise<void> {
+    if (!mUser) return;
+    busy = true;
+    const { error } = await api.auth.requestPasswordReset({ email: mUser.email, redirectTo: `${location.origin}/reset-password` });
+    busy = false;
+    if (error) return void toast.error(error.message ?? i18n.t.users.actionFailed);
+    toast.success(i18n.t.users.resetEmailSent);
+  }
+
   async function ban(event: Event): Promise<void> {
     event.preventDefault();
     if (!mUser) return;
@@ -213,12 +334,6 @@
     await load();
   }
 
-  function searchInput(event: Event): void {
-    search = (event.target as HTMLInputElement).value;
-    page = 1;
-    void load();
-  }
-
   $effect(() => {
     void load();
   });
@@ -229,58 +344,58 @@
     <h1 class="text-2xl font-semibold">{i18n.t.users.title}</h1>
     <Button onclick={() => { createError = ""; createOpen = true; }}><PlusIcon class="size-4" />{i18n.t.users.addUser}</Button>
   </div>
-  <Input placeholder={i18n.t.users.search} value={search} oninput={searchInput} class="max-w-xs" />
-
-  <div class="rounded-md border">
-    <Table.Root>
-      <Table.Header>
-        <Table.Row>
-          <Table.Head>{i18n.t.users.name}</Table.Head>
-          <Table.Head>{i18n.t.users.email}</Table.Head>
-          <Table.Head>{i18n.t.users.role}</Table.Head>
-          <Table.Head>{i18n.t.users.status}</Table.Head>
-          <Table.Head class="w-10"></Table.Head>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {#each users as user (user.id)}
-          <Table.Row>
-            <Table.Cell class="font-medium">{user.name}</Table.Cell>
-            <Table.Cell class="text-muted-foreground">{user.email}</Table.Cell>
-            <Table.Cell><Badge variant={user.role === "admin" ? "default" : "secondary"}>{user.role ?? "user"}</Badge></Table.Cell>
-            <Table.Cell>
-              {#if user.banned}<Badge variant="destructive">{i18n.t.users.banned}</Badge>{:else}<Badge variant="outline">{i18n.t.users.active}</Badge>{/if}
-            </Table.Cell>
-            <Table.Cell>
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger>
-                  {#snippet child({ props })}
-                    <Button {...props} variant="ghost" size="icon"><EllipsisIcon class="size-4" /></Button>
-                  {/snippet}
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Content align="end">
-                  <DropdownMenu.Item onSelect={() => openManage(user)}>{i18n.t.users.manage}</DropdownMenu.Item>
-                  <DropdownMenu.Item disabled={user.id === data.currentUserId} onSelect={() => impersonate(user)}>
-                    {i18n.t.users.impersonate}
-                  </DropdownMenu.Item>
-                </DropdownMenu.Content>
-              </DropdownMenu.Root>
-            </Table.Cell>
-          </Table.Row>
-        {:else}
-          <Table.Row><Table.Cell colspan={5} class="text-muted-foreground py-8 text-center">{i18n.t.users.empty}</Table.Cell></Table.Row>
-        {/each}
-      </Table.Body>
-    </Table.Root>
-  </div>
+  <TableToolbar
+    {filters}
+    bind:filterValues
+    {searchFields}
+    bind:searchField
+    bind:search
+    filterHeading={i18n.t.toolbar.filter}
+    searchHeading={i18n.t.toolbar.search}
+    searchButton={i18n.t.toolbar.searchButton}
+    onSearch={applySearch}
+  />
 
-  <TablePagination
-    count={total}
-    perPage={PAGE_SIZE}
+  <DataTable
+    {columns}
+    rows={filtered}
+    getKey={(u) => u.id}
+    empty={i18n.t.users.empty}
+    bind:sort
     bind:page
-    label={fmt(i18n.t.users.total, { count: total })}
-    onPageChange={() => void load()}
-  />
+    perPage={PAGE_SIZE}
+    label={fmt(i18n.t.users.total, { count: filtered.length })}
+  >
+    {#snippet row(user)}
+      <Table.Cell class="font-medium">{user.name}</Table.Cell>
+      <Table.Cell class="text-muted-foreground">{user.email}</Table.Cell>
+      <Table.Cell><Badge variant={user.role === "admin" ? "default" : "secondary"}>{user.role ?? "user"}</Badge></Table.Cell>
+      <Table.Cell>
+        <div class="flex flex-wrap gap-1">
+          {#if user.banned}<Badge variant="destructive">{i18n.t.users.banned}</Badge>{:else}<Badge variant="outline">{i18n.t.users.active}</Badge>{/if}
+          {#if emailVerificationEnabled}
+            {#if user.emailVerified}<Badge variant="outline" class="text-green-600 dark:text-green-400">{i18n.t.users.verified}</Badge>{:else}<Badge variant="secondary">{i18n.t.users.unverified}</Badge>{/if}
+          {/if}
+        </div>
+      </Table.Cell>
+      <Table.Cell class="text-muted-foreground">{user.createdAt ? formatDateTime(user.createdAt) : "—"}</Table.Cell>
+      <Table.Cell>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            {#snippet child({ props })}
+              <Button {...props} variant="ghost" size="icon"><EllipsisIcon class="size-4" /></Button>
+            {/snippet}
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content align="end">
+            <DropdownMenu.Item onSelect={() => openManage(user)}>{i18n.t.users.manage}</DropdownMenu.Item>
+            <DropdownMenu.Item disabled={user.id === data.currentUserId} onSelect={() => impersonate(user)}>
+              {i18n.t.users.impersonate}
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </Table.Cell>
+    {/snippet}
+  </DataTable>
 </div>
 
 <!-- Create user -->
@@ -293,7 +408,18 @@
       <div class="flex flex-col gap-1"><Label for="c-password">{i18n.t.users.password}</Label><Input id="c-password" type="password" bind:value={form.password} required /></div>
       <div class="flex flex-col gap-1"><Label for="c-confirm">{i18n.t.users.confirmPassword}</Label><Input id="c-confirm" type="password" bind:value={form.confirm} required /></div>
       {#if createError}<p class="text-destructive text-sm">{createError}</p>{/if}
-      <Label class="flex items-center gap-2"><Checkbox bind:checked={form.admin} />{i18n.t.users.makeAdmin}</Label>
+      <div class="flex flex-col gap-1">
+        <Label for="c-role">{i18n.t.users.role}</Label>
+        <Select.Root type="single" bind:value={form.role}>
+          <Select.Trigger id="c-role" class="w-full">{roleLabel(form.role)}</Select.Trigger>
+          <Select.Content>
+            {#each roleNames as r (r)}<Select.Item value={r}>{roleLabel(r)}</Select.Item>{/each}
+          </Select.Content>
+        </Select.Root>
+      </div>
+      {#if emailVerificationEnabled}
+        <Label class="flex items-center gap-2"><Checkbox bind:checked={form.sendVerify} />{i18n.t.users.sendVerificationOnCreate}</Label>
+      {/if}
       <Dialog.Footer>
         <Button type="button" variant="outline" onclick={() => (createOpen = false)}>{i18n.t.users.cancel}</Button>
         <Button type="submit" disabled={busy}>{i18n.t.users.create}</Button>
@@ -309,14 +435,14 @@
     <div class="flex flex-col gap-4 sm:flex-row">
       <nav class="flex shrink-0 flex-wrap gap-1 sm:w-40 sm:flex-col">
         {#each sections as key (key)}
-          <button
-            type="button"
+          <Button
+            variant="ghost"
             onclick={() => (mSection = key)}
             aria-current={mSection === key ? "page" : undefined}
-            class="hover:bg-muted rounded-md px-3 py-2 text-left text-sm font-medium transition-colors {mSection === key ? 'bg-muted' : 'text-muted-foreground'}"
+            class="h-auto justify-start px-3 py-2 text-sm font-medium {mSection === key ? 'bg-muted' : 'text-muted-foreground'}"
           >
             {i18n.t.account.nav[key]}
-          </button>
+          </Button>
         {/each}
       </nav>
 
@@ -325,8 +451,26 @@
           <form class="flex flex-col gap-3" onsubmit={saveProfile}>
             <div class="flex flex-col gap-1"><Label for="m-name">{i18n.t.users.name}</Label><Input id="m-name" bind:value={mName} required /></div>
             <div class="flex flex-col gap-1"><Label for="m-email">{i18n.t.users.email}</Label><Input id="m-email" type="email" bind:value={mEmail} required /></div>
-            <Label class="flex items-center gap-2"><Checkbox bind:checked={mAdmin} />{i18n.t.users.makeAdmin}</Label>
+            <div class="flex flex-col gap-1">
+              <Label for="m-role">{i18n.t.users.role}</Label>
+              <Select.Root type="single" bind:value={mRole}>
+                <Select.Trigger id="m-role" class="w-full">{roleLabel(mRole)}</Select.Trigger>
+                <Select.Content>
+                  {#each roleNames as r (r)}<Select.Item value={r}>{roleLabel(r)}</Select.Item>{/each}
+                </Select.Content>
+              </Select.Root>
+            </div>
             {#if mUser?.banned}<Badge variant="destructive" class="w-fit">{i18n.t.users.banned}</Badge>{/if}
+            {#if emailVerificationEnabled}
+              <div class="flex items-center gap-2">
+                {#if mUser?.emailVerified}<Badge variant="outline" class="text-green-600 dark:text-green-400">{i18n.t.users.verified}</Badge>
+                {:else}
+                  <Badge variant="secondary">{i18n.t.users.unverified}</Badge>
+                  <Button type="button" variant="outline" size="sm" disabled={busy} onclick={resendVerification}>{i18n.t.users.sendVerification}</Button>
+                  <Button type="button" variant="outline" size="sm" disabled={busy} onclick={markVerified}>{i18n.t.users.markVerified}</Button>
+                {/if}
+              </div>
+            {/if}
             <Button type="submit" class="w-fit" disabled={busy}>{i18n.t.users.save}</Button>
           </form>
         {:else if mSection === "security"}
@@ -337,8 +481,15 @@
               {#if mPwError}<p class="text-destructive text-sm">{mPwError}</p>{/if}
               <Button type="submit" class="w-fit" disabled={busy}>{i18n.t.users.setPassword}</Button>
             </form>
+            <div class="border-t pt-4">
+              <Button type="button" variant="outline" disabled={busy} onclick={sendResetEmail}>{i18n.t.users.sendResetEmail}</Button>
+            </div>
             <div class="border-t pt-4">
               {#if mUser?.banned}
+                <div class="mb-3 flex flex-col gap-1 text-sm">
+                  {#if mUser.banReason}<p><span class="text-muted-foreground">{i18n.t.users.banReason}:</span> {mUser.banReason}</p>{/if}
+                  {#if mUser.banExpires}<p><span class="text-muted-foreground">{i18n.t.users.banExpiry}:</span> {formatDateTime(mUser.banExpires)}</p>{:else}<p class="text-muted-foreground">{i18n.t.users.banPermanent}</p>{/if}
+                </div>
                 <Button variant="outline" disabled={busy} onclick={unban}>{i18n.t.users.unban}</Button>
               {:else}
                 <form class="flex flex-col gap-3" onsubmit={ban}>
@@ -354,31 +505,23 @@
             <div class="flex justify-end">
               <Button variant="outline" size="sm" disabled={busy || mSessions.length === 0} onclick={revokeAllSessions}>{i18n.t.adminSessions.revokeAll}</Button>
             </div>
-            <div class="rounded-md border">
-              <Table.Root>
-                <Table.Header>
-                  <Table.Row>
-                    <Table.Head>{i18n.t.adminSessions.device}</Table.Head>
-                    <Table.Head>{i18n.t.adminSessions.ip}</Table.Head>
-                    <Table.Head>{i18n.t.adminSessions.since}</Table.Head>
-                    <Table.Head class="w-10"></Table.Head>
-                  </Table.Row>
-                </Table.Header>
-                <Table.Body>
-                  {#each mPagedSessions as s (s.id)}
-                    <Table.Row>
-                      <Table.Cell class="max-w-40 truncate">{s.userAgent ?? i18n.t.adminSessions.unknown}</Table.Cell>
-                      <Table.Cell class="text-muted-foreground">{s.ipAddress ?? "—"}</Table.Cell>
-                      <Table.Cell class="text-muted-foreground">{formatDateTime(s.createdAt)}</Table.Cell>
-                      <Table.Cell><Button variant="ghost" size="sm" disabled={busy} onclick={() => revokeSession(s.token)}>{i18n.t.users.revokeSession}</Button></Table.Cell>
-                    </Table.Row>
-                  {:else}
-                    <Table.Row><Table.Cell colspan={4} class="text-muted-foreground py-8 text-center">{i18n.t.adminSessions.empty}</Table.Cell></Table.Row>
-                  {/each}
-                </Table.Body>
-              </Table.Root>
-            </div>
-            <TablePagination count={mSessions.length} perPage={PAGE_SIZE} bind:page={mSessionsPage} />
+            <DataTable
+              columns={mSessionsColumns}
+              rows={mSessions}
+              getKey={(s) => s.id}
+              bind:sort={mSessionsSort}
+              bind:page={mSessionsPage}
+              perPage={PAGE_SIZE}
+              label={fmt(i18n.t.adminSessions.total, { count: mSessions.length })}
+              empty={i18n.t.adminSessions.empty}
+            >
+              {#snippet row(s)}
+                <Table.Cell class="max-w-40 truncate">{s.userAgent ?? i18n.t.adminSessions.unknown}</Table.Cell>
+                <Table.Cell class="text-muted-foreground">{s.ipAddress ?? "—"}</Table.Cell>
+                <Table.Cell class="text-muted-foreground">{formatDateTime(s.createdAt)}</Table.Cell>
+                <Table.Cell><Button variant="ghost" size="sm" disabled={busy} onclick={() => revokeSession(s.token)}>{i18n.t.users.revokeSession}</Button></Table.Cell>
+              {/snippet}
+            </DataTable>
           </div>
         {:else if mSection === "danger"}
           <div class="border-destructive/50 flex flex-col gap-3 rounded-md border p-4">
@@ -402,5 +545,8 @@
         {/if}
       </div>
     </div>
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (manageOpen = false)}>{i18n.t.users.close}</Button>
+    </Dialog.Footer>
   </Dialog.Content>
 </Dialog.Root>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(auth)/forgot-password/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { page } from "$app/state";
   import { Button } from "$lib/components/ui/button";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
@@ -17,7 +18,13 @@
     event.preventDefault();
     loading = true;
     error = null;
-    const { error: authError } = await api.auth.requestPasswordReset({ email, redirectTo: "/reset-password" });
+    // Absolute URL: the emailed link hits the API to validate, then redirects
+    // here (the web app) with a valid token — a relative path would resolve
+    // against the API origin.
+    const { error: authError } = await api.auth.requestPasswordReset({
+      email,
+      redirectTo: `${page.url.origin}/reset-password`,
+    });
     loading = false;
     if (authError) {
       error = authError.message ?? i18n.t.auth.requestFailed;

package/dist/templates/modules/admin-dashboard/files/apps/web/src/routes/(auth)/login/+page.server.ts

@@ -0,0 +1,14 @@
+import type { PageServerLoad } from "./$types";
+import type { Capabilities } from "@podosoft/podokit-api-client";
+
+// Capabilities is public so the login page can offer whichever sign-in methods
+// (magic link, ...) the server actually enabled.
+export const load: PageServerLoad = async ({ fetch }) => {
+  try {
+    const res = await fetch("/api/account/capabilities");
+    if (res.ok) return { capabilities: (await res.json()) as Capabilities };
+  } catch {
+    /* fall through to defaults */
+  }
+  return { capabilities: null };
+};