@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/settings/index.stx

@@ -0,0 +1,256 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+interface ConfigFile {
+  name: string
+  title: string
+  size: number
+}
+
+interface ConfigField {
+  key: string
+  value: string | number | boolean | null | unknown[] | Record<string, unknown>
+  type: string
+  editable: boolean
+  reason?: string
+}
+
+const files = state<ConfigFile[]>([])
+const fields = state<ConfigField[]>([])
+const drafts = state<Record<string, string | number | boolean>>({})
+const selected = state('')
+const query = state('')
+const loading = state(true)
+const saving = state(false)
+const message = state('')
+const error = state('')
+
+const filteredFiles = derived(() => {
+  const needle = query().trim().toLowerCase()
+  if (!needle)
+    return files()
+
+  return files().filter(file => file.name.includes(needle) || file.title.toLowerCase().includes(needle))
+})
+
+const selectedFile = derived(() => files().find(file => file.name === selected()))
+const editableCount = derived(() => fields().filter(field => field.editable).length)
+
+function displayValue(field: ConfigField): string | number {
+  if (field.editable)
+    return drafts()[field.key] as string | number
+  if (field.type === 'object' || field.type === 'array')
+    return JSON.stringify(field.value)
+  return String(field.value ?? '')
+}
+
+function setDraft(key: string, value: string | number | boolean): void {
+  drafts.set({ ...drafts(), [key]: value })
+}
+
+async function loadFiles(): Promise<void> {
+  loading.set(true)
+  error.set('')
+  try {
+    const response = await fetch('/api/config/list')
+    const body = await response.json()
+    if (!response.ok || !body.ok)
+      throw new Error(body.error || 'Unable to list configuration files')
+
+    files.set(body.files)
+    const first = body.files[0]?.name
+    if (first)
+      await selectFile(first)
+  }
+  catch (cause) {
+    error.set(cause instanceof Error ? cause.message : 'Unable to load configuration')
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+async function selectFile(name: string): Promise<void> {
+  selected.set(name)
+  fields.set([])
+  message.set('')
+  error.set('')
+  loading.set(true)
+  try {
+    const response = await fetch(`/api/config/read?name=${encodeURIComponent(name)}`)
+    const body = await response.json()
+    if (!response.ok || !body.ok)
+      throw new Error(body.error || `Unable to read config/${name}.ts`)
+
+    fields.set(body.fields)
+    drafts.set(Object.fromEntries(
+      body.fields
+        .filter((field: ConfigField) => field.editable)
+        .map((field: ConfigField) => [field.key, field.value]),
+    ))
+  }
+  catch (cause) {
+    error.set(cause instanceof Error ? cause.message : `Unable to read config/${name}.ts`)
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+async function save(): Promise<void> {
+  const file = selected()
+  if (!file || saving())
+    return
+
+  saving.set(true)
+  message.set('')
+  error.set('')
+  try {
+    const updates = fields()
+      .filter(field => field.editable)
+      .map(field => ({ key: field.key, value: drafts()[field.key] }))
+    const response = await fetch('/api/config/update', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ file, updates }),
+    })
+    const body = await response.json()
+    if (!response.ok || !body.ok) {
+      const failed = body.results?.filter((result: { ok: boolean }) => !result.ok)
+      throw new Error(failed?.map((result: { error?: string }) => result.error).filter(Boolean).join(', ') || body.error || 'Unable to save configuration')
+    }
+
+    message.set(`Saved config/${file}.ts`)
+    await selectFile(file)
+    message.set(`Saved config/${file}.ts`)
+  }
+  catch (cause) {
+    error.set(cause instanceof Error ? cause.message : 'Unable to save configuration')
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+void loadFiles()
+</script>
+
+<div class="mx-auto pb-12 pt-6 px-6 space-y-6 max-w-7xl">
+  <PageHeader
+    title="Settings"
+    description="Review and edit project configuration without losing comments or environment bindings"
+  />
+
+  <div class="grid gap-6 lg:grid-cols-[17rem_minmax(0,1fr)]">
+    <Card variant="default" padding="none">
+      <div class="p-4 border-b border-neutral-200/60 dark:border-white/5">
+        <label for="config-search" class="sr-only">Search configuration</label>
+        <div class="relative">
+          <span class="absolute left-3 top-1/2 h-4 w-4 text-neutral-400 pointer-events-none -translate-y-1/2 i-hugeicons-search-01"></span>
+          <input
+            id="config-search"
+            type="search"
+            placeholder="Search config"
+            :value="query()"
+            @input="query.set($event.target.value)"
+            class="block pl-9 pr-3 py-2 w-full text-neutral-900 text-sm dark:text-white placeholder:text-neutral-400 bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/40"
+          >
+        </div>
+      </div>
+
+      <nav class="overflow-y-auto p-2 max-h-[68vh]" aria-label="Configuration files">
+        <template :for="file in filteredFiles">
+          <button
+            type="button"
+            :class="selected() === file.name ? 'flex items-center gap-3 px-3 py-2.5 w-full text-left text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-500/10 rounded-lg' : 'flex items-center gap-3 px-3 py-2.5 w-full text-left text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-white/5 rounded-lg'"
+            @click="selectFile(file.name)"
+          >
+            <span class="flex-none h-4 w-4 i-hugeicons-settings-02"></span>
+            <span class="flex-1 font-medium text-sm truncate">{{ file.title }}</span>
+            <span class="text-[10px] text-neutral-400">{{ file.size < 1024 ? file.size + ' B' : Math.round(file.size / 1024) + ' KB' }}</span>
+          </button>
+        </template>
+      </nav>
+    </Card>
+
+    <Card variant="default" padding="none">
+      @if(loading())
+        <div class="flex items-center justify-center min-h-80 text-neutral-500 dark:text-neutral-400">
+          <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
+          Loading configuration
+        </div>
+      @elseif(error() && !selectedFile())
+        <div class="p-8 text-center">
+          <span class="inline-block h-8 w-8 text-red-500 i-hugeicons-alert-02"></span>
+          <p class="mt-3 font-medium text-neutral-900 dark:text-white">Configuration unavailable</p>
+          <p class="mt-1 text-red-600 text-sm dark:text-red-400">{{ error() }}</p>
+        </div>
+      @elseif(selectedFile())
+        <div class="flex flex-wrap gap-4 items-center justify-between px-6 py-5 border-b border-neutral-200/60 dark:border-white/5">
+          <div>
+            <h2 class="font-semibold text-lg text-neutral-900 dark:text-white">{{ selectedFile().title }}</h2>
+            <p class="mt-1 font-mono text-neutral-500 text-xs dark:text-neutral-400">config/{{ selectedFile().name }}.ts</p>
+          </div>
+          <div class="flex gap-2 items-center">
+            <Badge variant="default" size="sm">{{ editableCount() }} editable</Badge>
+            <Button variant="primary" size="sm" :disabled="saving() || editableCount() === 0" @click="save()">
+              {{ saving() ? 'Saving...' : 'Save changes' }}
+            </Button>
+          </div>
+        </div>
+
+        @if(message())
+          <div class="mt-5 mx-6 px-4 py-3 text-green-700 text-sm dark:text-green-300 bg-green-50 dark:bg-green-500/10 border border-green-200 rounded-lg dark:border-green-500/20">
+            {{ message() }}
+          </div>
+        @endif
+        @if(error())
+          <div class="mt-5 mx-6 px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-500/10 border border-red-200 rounded-lg dark:border-red-500/20">
+            {{ error() }}
+          </div>
+        @endif
+
+        <form class="divide-neutral-200/60 divide-y dark:divide-white/5" @submit.prevent="save()">
+          <template :for="field in fields">
+            <div class="grid gap-3 sm:grid-cols-[minmax(10rem,0.8fr)_minmax(0,1.2fr)] sm:items-start px-6 py-5">
+              <div>
+                <label :for="'config-' + field.key" class="font-medium text-neutral-900 text-sm dark:text-white">{{ field.key }}</label>
+                <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">{{ field.type }}</p>
+              </div>
+
+              <div>
+                @if(field.type === 'boolean' && field.editable)
+                  <label class="inline-flex gap-3 items-center cursor-pointer">
+                    <input
+                      :id="'config-' + field.key"
+                      type="checkbox"
+                      :checked="drafts()[field.key] === true"
+                      @change="setDraft(field.key, $event.target.checked)"
+                      class="h-4 w-4 text-blue-600 border-neutral-300 rounded focus:ring-blue-500"
+                    >
+                    <span class="text-neutral-700 text-sm dark:text-neutral-300">{{ drafts()[field.key] ? 'Enabled' : 'Disabled' }}</span>
+                  </label>
+                @elseif(field.editable)
+                  <input
+                    :id="'config-' + field.key"
+                    :type="field.type === 'number' ? 'number' : 'text'"
+                    :value="displayValue(field)"
+                    @input="setDraft(field.key, field.type === 'number' ? Number($event.target.value) : $event.target.value)"
+                    class="block px-3 py-2 w-full text-neutral-900 text-sm dark:text-white bg-white dark:bg-white/5 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-500/50 focus:outline-none focus:ring-2 focus:ring-blue-500/40"
+                  >
+                @else
+                  <div class="px-3 py-2 break-all font-mono text-neutral-500 text-xs dark:text-neutral-400 bg-neutral-50 dark:bg-white/[0.03] border border-neutral-200 rounded-lg dark:border-white/10">
+                    {{ displayValue(field) }}
+                  </div>
+                  <p class="mt-1.5 text-amber-700 text-xs dark:text-amber-300">{{ field.reason }}</p>
+                @endif
+              </div>
+            </div>
+          </template>
+        </form>
+      @endif
+    </Card>
+  </div>
+</div>
+@endsection

package/views/dashboard/settings/mail.stx

@@ -0,0 +1,252 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+// State-signal + directive style (matches the rest of the dashboard). The
+// previous version used a Vue-style ref() composable, which stx's template
+// runtime does not unwrap, so every binding on the page rendered empty; it
+// also imported functions/api, whose auth chain runs useStorage() at module
+// load and throws in the client bundle, killing the whole scope. So this
+// talks to /api/settings/mail with a plain fetch, like the blog page.
+const endpoint = '/api/settings/mail'
+
+// CSRF header for writes, read from the cookie the GET on load seeds.
+function writeHeaders() {
+  const headers = { 'Content-Type': 'application/json' }
+  const match = document.cookie.match(/(?:^|;\s*)X-CSRF-Token=([^;]*)/)
+  if (match)
+    headers['X-CSRF-Token'] = decodeURIComponent(match[1])
+  return headers
+}
+
+const from = state('')
+const to = state('')
+const driver = state('SMTP')
+const host = state('')
+const port = state(587)
+const username = state('')
+const password = state('')
+const isSaving = state(false)
+const error = state('')
+const success = state('')
+
+async function load() {
+  try {
+    const res = await fetch(endpoint, { headers: { Accept: 'application/json' } })
+    if (!res.ok)
+      return
+    const json = await res.json()
+    const d = json && json.data ? json.data : json
+    if (d) {
+      from.set(d.from ?? '')
+      to.set(d.to ?? '')
+      driver.set(d.driver ?? 'SMTP')
+      host.set(d.host ?? '')
+      port.set(d.port ?? 587)
+      username.set(d.username ?? '')
+      password.set(d.password ?? '')
+    }
+  }
+  catch (e) {
+    // Keep the defaults when the settings endpoint isn't available yet.
+  }
+}
+
+async function save() {
+  isSaving.set(true)
+  error.set('')
+  success.set('')
+  try {
+    const res = await fetch(endpoint, {
+      method: 'PUT',
+      headers: writeHeaders(),
+      body: JSON.stringify({
+        from: from(),
+        to: to(),
+        driver: driver(),
+        host: host(),
+        port: port(),
+        username: username(),
+        password: password(),
+      }),
+    })
+    if (!res.ok)
+      throw new Error(`Save failed (${res.status})`)
+    success.set('Mail settings saved successfully.')
+  }
+  catch (e) {
+    error.set(e instanceof Error ? e.message : 'Failed to save mail settings.')
+  }
+  finally {
+    isSaving.set(false)
+  }
+}
+
+onMount(() => {
+  load()
+})
+</script>
+
+<!-- Plain container instead of a component wrapper: a component slot severs the
+     page reactive scope from the markup, leaving every field binding empty. The
+     sibling settings pages avoid the wrapper for the same reason. -->
+<div class="mx-auto pb-12 pt-6 px-6 space-y-6 max-w-7xl">
+  <PageHeader title="Email Settings" description="Configure how your application sends mail." />
+
+  <!-- Settings forms -->
+  <div class="divide-white/5 divide-y">
+    <div class="grid gap-x-8 gap-y-10 grid-cols-1 md:grid-cols-3 px-4 py-16 sm:px-6 lg:px-8 max-w-7xl">
+      <div>
+        <h2 class="font-semibold leading-7 text-base text-gray-900 dark:text-neutral-100">
+          Main Config
+        </h2>
+        <p class="mt-1 leading-6 text-gray-600 text-sm">
+          Update mail settings.
+        </p>
+      </div>
+
+      <form class="md:col-span-2" @submit.prevent="save()">
+        <!-- Success message -->
+        <div x-show="success()" class="mb-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-md">
+          <p class="text-green-700 text-sm dark:text-green-400">{{ success() }}</p>
+        </div>
+
+        <!-- Error message -->
+        <div x-show="error()" class="mb-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-md">
+          <p class="text-red-700 text-sm dark:text-red-400">{{ error() }}</p>
+        </div>
+
+        <div class="grid gap-x-6 gap-y-8 grid-cols-1 sm:grid-cols-6 sm:max-w-xl">
+          <div class="sm:col-span-full">
+            <label
+              for="mail-from"
+              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
+            >Mail From</label>
+            <div class="mt-2">
+              <input
+                id="mail-from"
+                type="email"
+                x-model="from"
+                placeholder="no-reply@example.com"
+                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
+              >
+            </div>
+          </div>
+
+          <div class="sm:col-span-full">
+            <label
+              for="mail-to"
+              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
+            >Mail To</label>
+            <div class="mt-2">
+              <input
+                id="mail-to"
+                type="email"
+                x-model="to"
+                placeholder="admin@example.com"
+                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
+              >
+            </div>
+          </div>
+
+          <div class="sm:col-span-full">
+            <label
+              for="mail-driver"
+              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
+            >Driver</label>
+            <div class="mt-2">
+              <select
+                id="mail-driver"
+                x-model="driver"
+                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
+              >
+                <option value="SMTP">SMTP</option>
+                <option value="ses">Amazon SES</option>
+                <option value="sendgrid">SendGrid</option>
+                <option value="mailgun">Mailgun</option>
+                <option value="mailtrap">Mailtrap</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="sm:col-span-3">
+            <label
+              for="mail-host"
+              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
+            >Host</label>
+            <div class="mt-2">
+              <input
+                id="mail-host"
+                type="text"
+                x-model="host"
+                placeholder="smtp.example.com"
+                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
+              >
+            </div>
+          </div>
+
+          <div class="sm:col-span-3">
+            <label
+              for="mail-port"
+              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
+            >Port</label>
+            <div class="mt-2">
+              <input
+                id="mail-port"
+                type="number"
+                x-model.number="port"
+                placeholder="587"
+                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
+              >
+            </div>
+          </div>
+
+          <div class="sm:col-span-3">
+            <label
+              for="mail-username"
+              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
+            >Username</label>
+            <div class="mt-2">
+              <input
+                id="mail-username"
+                type="text"
+                x-model="username"
+                placeholder="your-username"
+                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
+              >
+            </div>
+          </div>
+
+          <div class="sm:col-span-3">
+            <label
+              for="mail-password"
+              class="block font-medium leading-6 text-gray-900 text-sm dark:text-neutral-100"
+            >Password</label>
+            <div class="mt-2">
+              <input
+                id="mail-password"
+                type="password"
+                x-model="password"
+                autocomplete="off"
+                placeholder="••••••••"
+                class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
+              >
+            </div>
+          </div>
+        </div>
+
+        <div class="flex mt-8">
+          <button
+            type="submit"
+            :disabled="isSaving()"
+            class="px-3 py-2 font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {{ isSaving() ? 'Saving...' : 'Save Settings' }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+@endsection

package/views/dashboard/stores/auth.ts

@@ -0,0 +1,123 @@
+import { defineStore, derived, registerStoresClient, state } from '@stacksjs/stx'
+
+/**
+ * Dashboard auth/identity store — single source of truth for "who is
+ * looking at the dashboard right now and what can they see?".
+ *
+ * Backs the `useRole()` composable
+ * (stacksjs/stacks#1843, plumbing landed for #1844). Fetches from
+ * `/api/dashboard/auth/me` on first use; subsequent consumers hit the
+ * cached signal.
+ *
+ * Auth modes the store is designed to handle:
+ *
+ *   1. **Local dev dashboard, no auth** — `/api/dashboard/auth/me`
+ *      returns `{ user: null, roles: [], unauthenticated: true }`.
+ *      We treat that as "dev mode" so dev-only surfaces (CI tracking,
+ *      runner alerts, query inspector) stay visible without forcing
+ *      anyone to authenticate against their own dev DB.
+ *   2. **Authenticated** — the endpoint returns the real user + their
+ *      RBAC role names from the `user_roles` pivot. The role-derived
+ *      flags (`isAdmin`, `isDev`, `isClient`) reflect that membership.
+ *   3. **Fetch failed** — network down, route 404, server error.
+ *      `error` is set, but the role flags still default to "permissive
+ *      dev" so a broken endpoint doesn't lock the dashboard.
+ */
+export const authStore = defineStore('auth', () => {
+  const userId = state<number | null>(null)
+  const userName = state<string | null>(null)
+  const userEmail = state<string | null>(null)
+  const roles = state<string[]>([])
+  const unauthenticated = state(true)
+  const loading = state(false)
+  const error = state<string | null>(null)
+  const loaded = state(false)
+
+  // Permissive-dev defaults: when nobody is signed in (or the endpoint
+  // failed), assume the viewer is a dev. The alternative — hiding every
+  // gated surface until auth is wired — would make the dashboard look
+  // broken on a fresh project.
+  const isAdmin = derived(() => {
+    if (unauthenticated()) return true
+    return roles().includes('admin')
+  })
+  const isDev = derived(() => {
+    if (unauthenticated()) return true
+    return roles().includes('admin') || roles().includes('dev')
+  })
+  const isClient = derived(() => {
+    if (unauthenticated()) return false
+    return roles().includes('client')
+  })
+
+  async function load(): Promise<void> {
+    if (loading() || loaded()) return
+    loading.set(true)
+    error.set(null)
+    try {
+      const res = await fetch('/api/dashboard/auth/me', { headers: { accept: 'application/json' } })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json() as {
+        user: { id: number, name: string | null, email: string | null } | null
+        roles: string[]
+        unauthenticated?: true
+      }
+      if (data.user) {
+        userId.set(data.user.id)
+        userName.set(data.user.name)
+        userEmail.set(data.user.email)
+      }
+      else {
+        userId.set(null)
+        userName.set(null)
+        userEmail.set(null)
+      }
+      roles.set(data.roles ?? [])
+      unauthenticated.set(Boolean(data.unauthenticated))
+      loaded.set(true)
+    }
+    catch (e) {
+      error.set(e instanceof Error ? e.message : String(e))
+      // Keep the permissive defaults: don't mark `loaded` so a later
+      // explicit `refresh()` can retry.
+    }
+    finally {
+      loading.set(false)
+    }
+  }
+
+  async function refresh(): Promise<void> {
+    loaded.set(false)
+    await load()
+  }
+
+  return {
+    userId,
+    userName,
+    userEmail,
+    roles,
+    unauthenticated,
+    loading,
+    error,
+    loaded,
+    isAdmin,
+    isDev,
+    isClient,
+    load,
+    refresh,
+  }
+}, {
+  persist: {
+    storage: 'sessionStorage',
+    key: 'stacks-dashboard-auth',
+    // Don't persist `loaded` — every fresh tab should re-fetch identity
+    // (the user may have been assigned a new role, or signed out, since
+    // the last visit). Roles + user info ride along as a soft cache so
+    // the dashboard renders against last-known state before the
+    // round-trip resolves.
+    pick: ['userId', 'userName', 'userEmail', 'roles', 'unauthenticated'],
+  },
+})
+
+if (typeof window !== 'undefined')
+  registerStoresClient({ authStore })