@qaflo/forms-client 1.3.0 → 1.4.0

package/form.d.ts

@@ -19,6 +19,9 @@ export interface ContactFormConfig {
    * labelled line in the notification.
    */
   exclude?: string[]
+  /** Abort the request after this many ms. A hung request otherwise leaves
+   * the button on "Sending…" forever. */
+  timeout?: number
   onSuccess?: (values: Record<string, string>) => void
   /** Called on every failed submit, including an unsolved captcha. */
   onError?: (

package/form.js

@@ -95,6 +95,7 @@ export function useContactFormWith(widget, config = {}) {
     honeypotName = 'website',
     idPrefix = 'cf-',
     exclude = [],
+    timeout,
     onSuccess,
     onError,
   } = config
@@ -167,7 +168,16 @@ export function useContactFormWith(widget, config = {}) {
 
       const body = buildBody(values, { message, subject, honeypotName, exclude })
 
-      const result = await widget.submit(body)
+      // Without a deadline a hung request leaves the button on "Sending…"
+      // forever, with no way back except reloading the page.
+      let abort = null
+      let timer = null
+      if (timeout) {
+        abort = new AbortController()
+        timer = setTimeout(() => abort.abort(), timeout)
+      }
+      const result = await widget.submit(body, abort ? { signal: abort.signal } : undefined)
+      if (timer) clearTimeout(timer)
 
       if (result.ok) {
         setState('ok')
@@ -185,7 +195,7 @@ export function useContactFormWith(widget, config = {}) {
       // attempt looks like it did nothing at all.
       if (onError) onError(result, values)
     },
-    [fields, messages, compose, subject, honeypotName, idPrefix, exclude, onSuccess, onError, widget, fieldOrder],
+    [fields, messages, compose, subject, honeypotName, idPrefix, exclude, timeout, onSuccess, onError, widget, fieldOrder],
   )
 
   const invalid = useCallback((name) => (showErrors ? errors[name] : undefined), [showErrors, errors])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qaflo/forms-client",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Client half of the shared qaflo contact-form service: transport, Turnstile lifecycle and visitor-facing status messages.",
   "license": "MIT",
   "type": "module",

package/turnstile.d.ts

@@ -28,7 +28,7 @@ export interface TurnstileHandle {
   getToken: () => string
   reset: () => void
   /** Reads the token, refuses without one, posts, then resets this widget. */
-  submit: (body: SubmitBody) => Promise<SubmitResult>
+  submit: (body: SubmitBody, options?: { signal?: AbortSignal }) => Promise<SubmitResult>
   ready: boolean
 }
 

package/turnstile.js

@@ -159,7 +159,7 @@ export function useTurnstile(config) {
    * @param {Record<string, unknown>} body
    */
   const submit = useCallback(
-    async (body) => {
+    async (body, options = {}) => {
       const token = getToken()
       if (!token) {
         return { ok: false, status: 0, message: SECURITY_CHECK_PENDING }
@@ -169,6 +169,7 @@ export function useTurnstile(config) {
           token,
           messages: config.messages,
           fallbackEmail: config.fallbackEmail,
+          signal: options.signal,
         })
       } finally {
         reset()