@stacksjs/defaults 0.72.49 → 0.72.50

package/resources/views/auth/magic/[token].stx

@@ -0,0 +1,24 @@
+<script server>
+import { config } from '@stacksjs/config'
+
+/**
+ * Where a magic sign-in link lands, at `/auth/magic/{token}`.
+ *
+ * The logic sits in the component, like every other auth page here.
+ *
+ * It used to sit in a page-level `<script client>` that read a `useRef` from
+ * inside a top-level `effect`, and that combination left the page inert: the
+ * setup registered, no directive bound, and the page rendered perfectly while
+ * its button did nothing. The cause was in stx - `useRef()` returned an object
+ * rather than a callable, so `shell()` threw out of the effect and out of the
+ * setup function, taking every binding with it. Fixed upstream in stx 0.2.217;
+ * the ref is also gone from here, because a template ref is not reactive and
+ * reading one during setup only ever answers null.
+ *
+ * `autoConsume` is passed as an attribute because it is a server decision a
+ * client script cannot read.
+ */
+const autoConsume = config.auth.magicLink?.confirmInteraction !== true
+</script>
+
+<MagicLink autoConsume="{{ autoConsume }}" />

package/resources/views/errors/404.stx

@@ -0,0 +1,36 @@
+<script server>
+// The frontend's not-found page. When no view matches a URL, stx-serve looks
+// for a route at `/404` or `/errors/404` first. Without this file it falls
+// through to its own generic page, which carries none of the app's design
+// (and, on the server `stx build` produces, to the bare string "Not Found").
+//
+// Same split as the framework's production error page in
+// @stacksjs/error-handling, so a 404 looks the same whether the router or the
+// views server answered it. The scene is Laravel 5.7's 404 illustration (MIT),
+// served from public/svgs.
+</script>
+
+<div class="flex flex-col md:flex-row min-h-screen bg-neutral-50 dark:bg-neutral-900">
+  <div class="overflow-hidden md:order-2 h-56 sm:h-72 md:h-auto md:w-1/2 bg-neutral-200 dark:bg-neutral-800">
+    <img src="/svgs/404.svg" alt="" class="object-cover h-full w-full">
+  </div>
+
+  <section class="flex md:order-1 flex-1 flex-col items-start justify-center md:flex-none px-8 py-12 md:px-16 md:w-1/2">
+    <div class="font-extrabold text-6xl text-neutral-950 tracking-tight md:text-8xl dark:text-white">404</div>
+
+    <div class="my-6 h-1 w-14 bg-blue-600 dark:bg-blue-500 rounded-full"></div>
+
+    <h1 class="mb-2 font-semibold text-2xl text-neutral-950 dark:text-white">Page not found</h1>
+
+    <p class="mb-8 max-w-md text-neutral-500 dark:text-neutral-400">
+      The page you are looking for does not exist, or it has moved.
+    </p>
+
+    <a
+      href="/"
+      class="inline-block px-5 py-2.5 font-medium text-neutral-950 text-sm dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-700"
+    >
+      Back to home
+    </a>
+  </section>
+</div>

package/resources/views/forgot-password.stx

@@ -0,0 +1,13 @@
+<script server>
+/**
+ * The site's forgot-password page, at `/forgot-password` - the address the
+ * sign-in card's "Forgot password?" link has always pointed at, and which
+ * had nothing behind it outside the dashboard.
+ *
+ * The container posts to `/password/forgot`, which answers the same neutral
+ * 202 whether or not the address has an account, so this page must never
+ * report back whether it matched.
+ */
+</script>
+
+<ForgotPasswordDashboard />

package/resources/views/login.stx

@@ -0,0 +1,68 @@
+<script server>
+/**
+ * The site's sign-in page, at `/login`.
+ *
+ * It lived at `defaults/views/auth/login.stx` and was one line mounting the
+ * presentational `Login` component, from a directory no server serves. That
+ * component only emits `submit`, so even reachable it would have rendered a
+ * form that swallowed every sign-in. The container below is what listens: it
+ * calls `useAuth().login`, surfaces the error, and honours `?redirect=`. Its
+ * name is where the auth components happen to live, not where it can run.
+ *
+ * `POST /login` reaches the API without a proxy rule of its own, because the
+ * views server forwards every mutating verb to bun-router (DEFAULT_API_METHODS
+ * in core/server/src/proxy.ts). GET `/login` is this page.
+ *
+ * The social buttons go in through the card's `social` slot rather than after
+ * it, so they sit with the credentials instead of below the sign-up line.
+ * `configuredSocialProviders()` knows each provider's own required config, so
+ * a provider missing credentials never reaches a visitor as a button that
+ * fails at the redirect. Adding credentials to `config/services.ts` is the
+ * whole of what turns one on. Icons come from hugeicons, the collection Stacks
+ * defaults to; swap the map if your app standardises on another.
+ */
+import { configuredSocialProviders } from '@stacksjs/socials'
+
+const PROVIDER_ICONS = {
+  apple: 'i-hugeicons-apple',
+  facebook: 'i-hugeicons-facebook-01',
+  github: 'i-hugeicons-github',
+  google: 'i-hugeicons-google',
+  twitter: 'i-hugeicons-new-twitter',
+}
+
+const socialSignIn = configuredSocialProviders().map(provider => ({
+  label: provider.label,
+  href: `/auth/${provider.name}/redirect`,
+  icon: PROVIDER_ICONS[provider.name] ?? 'i-hugeicons-user-circle',
+}))
+</script>
+
+<LoginDashboard>
+  <template #social>
+    @if (socialSignIn.length)
+      <div class="mt-6">
+        <div class="relative">
+          <div class="flex absolute inset-0 items-center" aria-hidden="true">
+            <div class="w-full border-neutral-200 border-t dark:border-neutral-700"></div>
+          </div>
+          <div class="flex relative justify-center text-sm">
+            <span class="px-4 text-neutral-500 dark:text-neutral-400 bg-white dark:bg-neutral-800">Or continue with</span>
+          </div>
+        </div>
+
+        <div class="grid gap-3 mt-6 {{ socialSignIn.length > 1 ? 'grid-cols-2' : 'grid-cols-1' }}">
+          @foreach (socialSignIn as provider)
+            <a
+              href="{{ provider.href }}"
+              class="flex gap-2 items-center justify-center px-3 py-2 font-medium text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-300 rounded-lg dark:border-neutral-600"
+            >
+              <i class="h-5 w-5 {{ provider.icon }}" aria-hidden="true"></i>
+              <span>{{ provider.label }}</span>
+            </a>
+          @endforeach
+        </div>
+      </div>
+    @endif
+  </template>
+</LoginDashboard>

package/resources/views/password/reset/[token].stx

@@ -0,0 +1,18 @@
+<script server>
+/**
+ * Where a mailed password-reset link lands, at `/password/reset/{token}`.
+ *
+ * The framework has been sending people here for as long as it has had a
+ * reset mailer - `core/auth/src/password/reset.ts` builds the link from
+ * `config.auth.passwordReset.url`, whose default is
+ * `/password/reset/{token}?email={email}` - and nothing has ever served the
+ * address. Every reset email ended at a 404, which made the whole flow
+ * (the send endpoint, the token store, the reset action, the mail template)
+ * unreachable from a browser.
+ *
+ * An app that points `config.auth.passwordReset.url` somewhere else is free
+ * to keep its own page; this is the page the default link needs.
+ */
+</script>
+
+<ResetPasswordDashboard />

package/resources/views/register.stx

@@ -0,0 +1,64 @@
+<script server>
+/**
+ * The site's sign-up page, at `/register`.
+ *
+ * It lived at `defaults/views/auth/signup.stx`, in a directory no server
+ * serves, and carried its own hand-written form whose `action="#"` posted
+ * nowhere. It also declared `id="password"` twice and named the confirmation
+ * field `password` as well, so the two inputs collided. The container below is
+ * what actually registers: it calls `useAuth().register`, surfaces the error,
+ * and honours `?redirect=`. Its name is where the auth components happen to
+ * live, not where it can run.
+ *
+ * The social block is what that page did get right, kept here and moved inside
+ * the card through its `social` slot. `configuredSocialProviders()` knows each
+ * provider's own required config (Apple has no clientSecret and is validated
+ * on its signing key instead), so what renders is exactly the set that will
+ * complete a sign-in. Adding credentials to `config/services.ts` is the whole
+ * of what turns one on.
+ */
+import { configuredSocialProviders } from '@stacksjs/socials'
+
+const PROVIDER_ICONS = {
+  apple: 'i-hugeicons-apple',
+  facebook: 'i-hugeicons-facebook-01',
+  github: 'i-hugeicons-github',
+  google: 'i-hugeicons-google',
+  twitter: 'i-hugeicons-new-twitter',
+}
+
+const socialSignUp = configuredSocialProviders().map(provider => ({
+  label: provider.label,
+  href: `/auth/${provider.name}/redirect`,
+  icon: PROVIDER_ICONS[provider.name] ?? 'i-hugeicons-user-circle',
+}))
+</script>
+
+<RegisterDashboard>
+  <template #social>
+    @if (socialSignUp.length)
+      <div class="mt-6">
+        <div class="relative">
+          <div class="flex absolute inset-0 items-center" aria-hidden="true">
+            <div class="w-full border-neutral-200 border-t dark:border-neutral-700"></div>
+          </div>
+          <div class="flex relative justify-center text-sm">
+            <span class="px-4 text-neutral-500 dark:text-neutral-400 bg-white dark:bg-neutral-800">Or continue with</span>
+          </div>
+        </div>
+
+        <div class="grid gap-3 mt-6 {{ socialSignUp.length > 1 ? 'grid-cols-2' : 'grid-cols-1' }}">
+          @foreach (socialSignUp as provider)
+            <a
+              href="{{ provider.href }}"
+              class="flex gap-2 items-center justify-center px-3 py-2 font-medium text-neutral-900 text-sm dark:text-white bg-white dark:bg-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-700 border border-neutral-300 rounded-lg dark:border-neutral-600"
+            >
+              <i class="h-5 w-5 {{ provider.icon }}" aria-hidden="true"></i>
+              <span>{{ provider.label }}</span>
+            </a>
+          @endforeach
+        </div>
+      </div>
+    @endif
+  </template>
+</RegisterDashboard>

package/views/[...all].stx

@@ -1,7 +0,0 @@
-<script>
-const { t } = useI18n()
-</script>
-
-<div>
-  {{ t('not-found') }}
-</div>

package/views/about.md

@@ -1,3 +0,0 @@
----
-title: About
----

package/views/auth/login.stx

@@ -1 +0,0 @@
-<Login />

package/views/auth/magic/[token].stx

@@ -1,88 +0,0 @@
-<script server>
-import { config } from '@stacksjs/config'
-
-/**
- * The magic-link interstitial. The email's GET lands here and this page
- * POSTs the token to the consume endpoint - a GET must never consume,
- * because mail-security scanners prefetch links and would burn the
- * single-use token before the person ever taps it.
- *
- * `confirmInteraction` renders a button instead of auto-submitting, for
- * environments whose scanners execute page scripts too.
- */
-const autoConsume = config.auth.magicLink?.confirmInteraction !== true
-</script>
-
-<script client>
-const route = useRoute()
-const status = state('ready') // ready | working | done | failed
-const message = state('')
-const shell = useRef('shell')
-
-async function consume() {
-  if (status() === 'working' || status() === 'done')
-    return
-
-  status.set('working')
-  try {
-    const reply = await fetch('/auth/magic-link/consume', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      credentials: 'same-origin',
-      body: JSON.stringify({ token: String(route.params.token || '') }),
-    })
-    const body = await reply.json().catch(() => ({}))
-
-    if (!reply.ok) {
-      status.set('failed')
-      message.set(body.message || body.error || 'That sign-in link is not valid.')
-      return
-    }
-
-    status.set('done')
-    const redirect = String(body.redirect_to || '/')
-    navigate(redirect.startsWith('/') && !redirect.startsWith('//') ? redirect : '/')
-  }
-  catch {
-    status.set('failed')
-    message.set('Something went wrong. Request a new link and try again.')
-  }
-}
-
-effect(() => {
-  // Auto-consume only when the server said so - the flag rides a data
-  // attribute because client scripts cannot read server config directly.
-  if (shell() && shell().dataset.autoConsume === 'true')
-    consume()
-})
-</script>
-
-<template>
-  <main ref="shell" data-auto-consume="{{ autoConsume }}" class="min-h-[100dvh] flex items-center justify-center px-6">
-    <div class="w-full max-w-sm text-center">
-      <div :if="status() === 'failed'">
-        <div class="mx-auto h-12 w-12 rounded-full bg-red-50 flex items-center justify-center">
-          <span class="h-6 w-6 text-red-500 i-hugeicons-alert-02"></span>
-        </div>
-        <h1 class="mt-5 text-xl font-semibold tracking-tight">Sign-in link problem</h1>
-        <p class="mt-2 text-[15px] text-gray-600">{{ message() }}</p>
-        <a href="/login" class="mt-6 inline-block rounded-lg px-5 py-2.5 font-medium bg-gray-900 text-white">Back to sign in</a>
-      </div>
-      <div :else-if="status() === 'working' || status() === 'done'">
-        <div class="mx-auto h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center">
-          <span class="h-6 w-6 text-gray-500 animate-spin i-hugeicons-loading-03"></span>
-        </div>
-        <h1 class="mt-5 text-xl font-semibold tracking-tight">Signing you in</h1>
-        <p class="mt-2 text-[15px] text-gray-600">One moment.</p>
-      </div>
-      <div :else>
-        <div class="mx-auto h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center">
-          <span class="h-6 w-6 text-gray-600 i-hugeicons-mail-open-01"></span>
-        </div>
-        <h1 class="mt-5 text-xl font-semibold tracking-tight">Continue to sign in</h1>
-        <p class="mt-2 text-[15px] text-gray-600">Tap below to finish signing in with your emailed link.</p>
-        <button type="button" @click="consume" class="mt-6 rounded-lg px-6 py-3 font-medium bg-gray-900 text-white transition-transform active:scale-[0.98]">Continue</button>
-      </div>
-    </div>
-  </main>
-</template>

package/views/auth/signup.stx

@@ -1,120 +0,0 @@
-<script server>
-/**
- * The providers whose buttons are worth rendering.
- *
- * `configuredSocialProviders()` knows each provider's own required config,
- * so a provider missing credentials never reaches a visitor as a button
- * that fails at the redirect. Adding credentials to `config/services.ts`
- * is the whole of what turns one on.
- *
- * Icons come from hugeicons, the collection Stacks defaults to. Swap the
- * map if your app standardises on another one.
- */
-import { configuredSocialProviders } from '@stacksjs/socials'
-
-const PROVIDER_ICONS = {
-  apple: 'i-hugeicons-apple',
-  facebook: 'i-hugeicons-facebook-01',
-  github: 'i-hugeicons-github',
-  google: 'i-hugeicons-google',
-  twitter: 'i-hugeicons-new-twitter',
-}
-
-const socialSignIn = configuredSocialProviders().map(provider => ({
-  label: provider.label,
-  href: `/auth/${provider.name}/redirect`,
-  icon: PROVIDER_ICONS[provider.name] ?? 'i-hugeicons-user-circle',
-}))
-</script>
-
-<div class="flex flex-col justify-center py-12 sm:px-6 lg:px-8 min-h-full">
-  <div class="sm:mx-auto sm:max-w-md sm:w-full">
-    <Logo class="mx-auto h-11 w-auto" />
-    <h2 class="mt-6 font-bold leading-9 text-2xl text-center text-gray-900 tracking-tight">
-      Sign up to your account
-    </h2>
-  </div>
-
-  <div class="mt-10 sm:mx-auto sm:max-w-[480px] sm:w-full">
-    <div class="px-6 py-12 sm:px-12 bg-white sm:rounded-lg shadow">
-      <form class="space-y-6" action="#" method="POST">
-        <div>
-          <label for="name" class="block font-medium leading-6 text-gray-900 text-sm">Name</label>
-          <div class="mt-2">
-            <input id="name" name="name" type="text" autocomplete="name" required class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
-          </div>
-        </div>
-
-        <div>
-          <label for="email" class="block font-medium leading-6 text-gray-900 text-sm">Email address</label>
-          <div class="mt-2">
-            <input id="email" name="email" type="email" autocomplete="email" required class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
-          </div>
-        </div>
-
-        <div>
-          <label for="password" class="block font-medium leading-6 text-gray-900 text-sm">Password</label>
-          <div class="mt-2">
-            <input id="password" name="password" type="password" autocomplete="current-password" required class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
-          </div>
-        </div>
-
-        <div>
-          <label for="password" class="block font-medium leading-6 text-gray-900 text-sm">Confirm Password</label>
-          <div class="mt-2">
-            <input id="password" name="password" type="password" autocomplete="current-password" required class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm placeholder:text-gray-400 border-0 ring-1 ring-gray-300 ring-inset rounded-md focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm">
-          </div>
-        </div>
-
-        <div>
-          <div>
-            <button type="submit" class="flex justify-center px-3 py-1.5 w-full font-semibold leading-6 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">
-              Sign up
-            </button>
-          </div>
-        </div>
-      </form>
-
-      {{--
-        Social sign-in, driven by which providers are actually configured.
-
-        This block used to be two hardcoded buttons pointing at `href="#"`,
-        so a scaffolded app shipped a Google and a GitHub button that both
-        did nothing, and offered them whether or not either provider had
-        credentials. `configuredSocialProviders()` answers that per
-        provider on each provider's own terms (Apple has no clientSecret
-        and is validated on its signing key instead), so what renders here
-        is exactly the set that will complete a sign-in.
-      --}}
-      @if (socialSignIn.length)
-        <div>
-          <div class="relative mt-10">
-            <div class="flex absolute inset-0 items-center" aria-hidden="true">
-              <div class="w-full border-gray-200 border-t"></div>
-            </div>
-            <div class="flex relative justify-center font-medium leading-6 text-sm">
-              <span class="px-6 text-gray-900 bg-white">Or continue with</span>
-            </div>
-          </div>
-
-          <div class="grid gap-4 mt-6 {{ socialSignIn.length > 1 ? 'grid-cols-2' : 'grid-cols-1' }}">
-            @foreach (socialSignIn as provider)
-              <a
-                href="{{ provider.href }}"
-                class="flex gap-3 items-center justify-center px-3 py-2 w-full font-semibold text-gray-900 text-sm bg-white hover:bg-gray-50 ring-1 ring-gray-300 ring-inset rounded-md focus-visible:ring-transparent shadow-sm"
-              >
-                <i class="h-5 w-5 {{ provider.icon }}" aria-hidden="true"></i>
-                <span class="font-semibold leading-6 text-sm">{{ provider.label }}</span>
-              </a>
-            @endforeach
-          </div>
-        </div>
-      @endif
-    </div>
-
-    <p class="mt-10 text-center text-gray-500 text-sm">
-      Already have an account?
-      <a href="/login" class="font-semibold leading-6 text-blue-600 hover:text-blue-500">Sign in</a>
-    </p>
-  </div>
-</div>

package/views/forum/category.stx

@@ -1,92 +0,0 @@
-<script server>
-const category = ''
-const subcategory = ''
-const filter = ''
-</script>
-<ForumLayout :route="routeType">
-  <div class="grid gap-8 grid-cols-1 lg:grid-cols-3">
-    <div class="lg:col-span-2">
-      <ForumBreadcrumb :items="breadcrumbItems" />
-
-      <div class="mb-6">
-        <div class="flex items-center justify-between px-4 py-3 bg-gray-100 rounded-t-md">
-          <div>
-            <h1 class="font-bold text-xl">{{ categoryTitle }}</h1>
-            <p class="mt-1 text-gray-600 text-sm">{{ categoryDescription }}</p>
-          </div>
-
-          <div>
-            <a href="/forum/new-topic" class="px-4 py-2 text-white bg-primary rounded-md hover:opacity-90">New Topic</a>
-          </div>
-        </div>
-      </div>
-
-      <ForumTopicList :title="listTitle">
-        @foreach (topic in topics)
-          <ForumTopicItem
-            :key="topic.id"
-            :title="topic.title"
-            :link="topic.link"
-            :authorName="topic.authorName"
-            :authorAvatar="topic.authorAvatar"
-            :createdAt="topic.createdAt"
-            :viewCount="topic.viewCount"
-            :replyCount="topic.replyCount"
-            :likeCount="topic.likeCount"
-            :category="topic.category"
-            :categoryLink="topic.categoryLink"
-            :excerpt="topic.excerpt || ''"
-            :isPinned="!!topic.isPinned"
-            :isSolved="!!topic.isSolved"
-            :lastReplyAuthorName="topic.lastReplyAuthorName || ''"
-            :lastReplyAuthorAvatar="topic.lastReplyAuthorAvatar || ''"
-            :lastReplyAt="topic.lastReplyAt || ''"
-          />
-        @endforeach
-      </ForumTopicList>
-
-      <ForumPagination :currentPage="1" :totalPages="5" />
-    </div>
-
-    <div class="lg:col-span-1">
-      <ForumSidebar
-        :stats="{
-          topics: 540,
-          posts: 3287,
-          members: 1245,
-          newestMember: 'NewUser123'
-        }"
-        :popularTopics="[
-          {
-            id: 1,
-            title: 'How to implement authentication in a new Stacks.js project?',
-            link: '/forum/topic/1',
-            replyCount: 3,
-            viewCount: 45
-          },
-          {
-            id: 2,
-            title: 'Best practices for database migrations in Stacks.js',
-            link: '/forum/topic/3',
-            replyCount: 15,
-            viewCount: 128
-          },
-          {
-            id: 3,
-            title: 'Introducing myself to the community!',
-            link: '/forum/topic/2',
-            replyCount: 8,
-            viewCount: 32
-          }
-        ]"
-        :onlineUsers="[
-          { id: 1, name: 'JohnDoe', avatar: '/images/avatars/default.png' },
-          { id: 2, name: 'DatabaseGuru', avatar: '/images/avatars/default.png' },
-          { id: 3, name: 'NewUser123', avatar: '/images/avatars/default.png' },
-          { id: 4, name: 'ExpertUser', avatar: '/images/avatars/default.png' },
-          { id: 5, name: 'StacksMaster', avatar: '/images/avatars/default.png' }
-        ]"
-      />
-    </div>
-  </div>
-</ForumLayout>