@stacksjs/defaults 0.74.63 → 0.74.64

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.74.63",
+  "version": "0.74.64",
   "description": "A modern Stacks development environment.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.74.63",
+  "version": "0.74.64",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.27",
-    "@stacksjs/mobile": "^0.74.63",
+    "@stacksjs/mobile": "^0.74.64",
     "@stacksjs/sanitizer": "^0.2.113",
     "ts-qr-codes": "^0.1.8"
   }

package/resources/views/cms/blocks/form.stx

@@ -2,7 +2,8 @@
   Form block: renders a @stacksjs/forms form inline on a CMS page.
   `props.formUuid` names the form; the client script fetches the public
   definition (same-origin), renders the fields, evaluates conditions live,
-  and submits with the CSRF header the page response seeded.
+  and submits through useMutation, which repeats the page's CSRF cookie in
+  the header the submit route checks.
 --}}
 <div class="cms-form mx-auto max-w-xl px-6 py-8" data-form-uuid="{{ props.formUuid }}">
   <script client>
@@ -84,24 +85,24 @@
       payload.append('field', field.name)
       payload.append('file', file)
 
-      const reply = await fetch(`/api/forms/${uuid}/uploads`, {
-        method: 'POST',
-        credentials: 'same-origin',
-        body: payload,
-      })
-      const body = await reply.json().catch(() => ({}))
-
-      if (!reply.ok) {
+      // Through the data layer rather than a bare fetch(): it is what echoes
+      // the CSRF cookie the submit routes require, and it passes FormData
+      // through untouched.
+      let body: { path?: string }
+      try {
+        body = await useMutation(`/api/forms/${uuid}/uploads`).mutate(payload)
+      }
+      catch (failure) {
         // Clear the input as well as the value: leaving a rejected file
         // showing next to its own error message reads as though it was taken.
         input.value = ''
         delete values[field.name]
         delete attached[field.name]
-        errors.set({ ...errors(), [field.name]: body.message ?? 'That file could not be uploaded.' })
+        errors.set({ ...errors(), [field.name]: (failure as { data?: { message?: string } }).data?.message ?? 'That file could not be uploaded.' })
         return
       }
 
-      values[field.name] = body.path
+      values[field.name] = body.path ?? ''
       attached[field.name] = file.name
     }
     catch {
@@ -144,20 +145,19 @@
 
     try {
       const uuid = host()?.dataset.formUuid
-      const reply = await fetch(`/api/forms/${uuid}/submissions`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        credentials: 'same-origin',
-        body: JSON.stringify({ ...values, _renderedMs: Date.now() - openedAt }),
-      })
-      const body = await reply.json().catch(() => ({}))
-
-      if (reply.status === 422) {
-        errors.set(body.errors ?? {})
-        return
+      // useMutation, not fetch(): the submit route is CSRF-protected and the
+      // data layer is what repeats the cookie in the header. A bare fetch got
+      // 403 "CSRF token mismatch" on every submission.
+      let body: { message?: string, redirect?: string }
+      try {
+        body = await useMutation(`/api/forms/${uuid}/submissions`).mutate({ ...values, _renderedMs: Date.now() - openedAt })
       }
-      if (!reply.ok) {
-        errors.set({ _form: body.message ?? 'Something went wrong. Please try again.' })
+      catch (failure) {
+        const { status, data } = failure as { status?: number, data?: { errors?: FormErrors, message?: string } }
+        if (status === 422)
+          errors.set(data?.errors ?? {})
+        else
+          errors.set({ _form: data?.message ?? 'Something went wrong. Please try again.' })
         return
       }
       if (body.redirect) {

package/routes/forms.ts

@@ -82,7 +82,7 @@ route.post('/api/forms/{uuid}/uploads', async (request: any) => {
 }).rateLimit(20, 'minute')
 
 route.post('/api/forms/{uuid}/submissions', async (request: any) => {
-  const { dispatchSubmissionNotifications, loadFormByUuid, submitForm } = await import('@stacksjs/forms')
+  const { dispatchSubmissionNotifications, loadFormByUuid, submissionIdentity, submitForm } = await import('@stacksjs/forms')
 
   const form = await loadFormByUuid(String(request.params?.uuid ?? request.param?.('uuid') ?? ''), await siteIdForRequest(request))
   if (!form)
@@ -105,10 +105,14 @@ route.post('/api/forms/{uuid}/submissions', async (request: any) => {
 
   // Fire-and-forget AFTER the write: a slow mail transport must not hold a
   // parent's phone on a spinner, and a failed one must not undo the answers.
+  // The identity lookup belongs inside that chain too. It used to be awaited
+  // in the handler, so when it threw - and it always did, selecting a
+  // `values` column that has never existed - the visitor got a 500 for an
+  // answer that was already saved, and every retry saved another copy.
   if (result.submissionId > 0) {
-    void dispatchSubmissionNotifications(form, result, {
-      ...await submissionIdentity(result.submissionId),
-    }).catch(() => {})
+    void submissionIdentity(result.submissionId)
+      .then(identity => dispatchSubmissionNotifications(form, result, identity))
+      .catch(() => {})
   }
 
   return response.json({
@@ -119,38 +123,3 @@ route.post('/api/forms/{uuid}/submissions', async (request: any) => {
     redirect: result.redirect,
   }, { status: 201 })
 }).rateLimit(10, 'minute')
-
-async function submissionIdentity(submissionId: number): Promise<{ email: string | null, name: string | null, values: Record<string, unknown> }> {
-  const { db } = await import('@stacksjs/database')
-  const row = await db
-    .selectFrom('form_submissions')
-    .where('id', '=', submissionId)
-    .select(['email', 'name', 'values'])
-    .executeTakeFirst() as { email: string | null, name: string | null, values: string | null } | undefined
-
-  let values: Record<string, unknown> = {}
-  try {
-    values = row?.values ? JSON.parse(row.values) as Record<string, unknown> : {}
-  }
-  catch {
-    // unreadable values only degrade the notification summary
-  }
-  return { email: row?.email ?? null, name: row?.name ?? null, values }
-}
-
-/** Admin CSV export. Auth'd; site scoping rides the form lookup. */
-route.get('/api/admin/forms/{uuid}/submissions.csv', async (request: any) => {
-  const { exportSubmissionsCsv, loadFormByUuid } = await import('@stacksjs/forms')
-
-  const form = await loadFormByUuid(String(request.params?.uuid ?? request.param?.('uuid') ?? ''), await siteIdForRequest(request))
-  if (!form)
-    return response.notFound('Form not found')
-
-  const csv = await exportSubmissionsCsv(form)
-  return new Response(csv, {
-    headers: {
-      'Content-Type': 'text/csv; charset=utf-8',
-      'Content-Disposition': `attachment; filename="${form.handle}-submissions.csv"`,
-    },
-  })
-}).middleware('auth')