webspresso 0.0.109 → 0.0.111

package/core/client/forms.js

@@ -1,5 +1,8 @@
 'use strict';
 
+const { defaultStorage } = require('./storage');
+const { isArray, setElementBusyState } = require('./utils');
+
 /**
  * Webspresso Native HTML Form Layer & Typed Form Handle
  *
@@ -13,6 +16,40 @@
  * - Mutation success vs refresh failure separation: a refresh failure never puts a succeeded form into validation error state
  */
 
+/**
+ * Validate that a redirect URL uses a safe protocol (http/https) or relative path
+ * to prevent DOM-based XSS (e.g. javascript: URIs) and protocol injection.
+ *
+ * @param {string} target
+ * @returns {boolean}
+ */
+function isSafeRedirectUrl(target) {
+  if (!target || typeof target !== 'string') return false;
+  const trimmed = target.trim();
+  if (!trimmed) return false;
+
+  // Block control characters
+  if (/[\u0000-\u001F\u007F-\u009F]/.test(trimmed)) return false;
+
+  // Block protocol-relative URLs (//example.com) and backslash traversal (/\ or \\)
+  if (trimmed.startsWith('//') || trimmed.startsWith('/\\') || trimmed.startsWith('\\')) {
+    return false;
+  }
+
+  // Relative path starting with single slash (e.g. /dashboard)
+  if (trimmed.startsWith('/')) {
+    return true;
+  }
+
+  // Absolute URL: MUST explicitly parse as http: or https:
+  try {
+    const parsed = new URL(trimmed);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+
 let errorIdSeq = 0;
 
 /**
@@ -166,12 +203,12 @@ function parseFormElement(formEl, submitterOrOptions = null) {
   function appendValue(normName, val, forceArray) {
     if (val === undefined) return;
     if (forceArray) {
-      if (!Array.isArray(data[normName])) {
+      if (!isArray(data[normName])) {
         data[normName] = [];
       }
       data[normName].push(val);
     } else if (normName in data) {
-      if (!Array.isArray(data[normName])) {
+      if (!isArray(data[normName])) {
         data[normName] = [data[normName]];
       }
       data[normName].push(val);
@@ -290,7 +327,7 @@ function parseFormElement(formEl, submitterOrOptions = null) {
     formData = new FormData();
     for (const [key, val] of Object.entries(data)) {
       if (val === undefined) continue;
-      if (Array.isArray(val)) {
+      if (isArray(val)) {
         for (const item of val) {
           if (item === undefined) continue;
           if (typeof Blob !== 'undefined' && item instanceof Blob) {
@@ -380,11 +417,15 @@ function computeFormDirty(formEl, initialSnapshot) {
  */
 function createFormHandle(formEl, options = {}) {
   if (formEl && formEl.__wFormHandle) {
+    if (options.services && typeof formEl.__wFormHandle.__setServices === 'function') {
+      formEl.__wFormHandle.__setServices(options.services);
+    }
     return formEl.__wFormHandle;
   }
 
   const api = options.api;
   const debug = options.debug || null;
+  let services = options.services || null;
   const formName =
     (formEl && formEl.getAttribute && formEl.getAttribute('data-w-form')) ||
     (formEl && formEl.getAttribute && formEl.getAttribute('name')) ||
@@ -401,6 +442,89 @@ function createFormHandle(formEl, options = {}) {
   const errorListeners = new Set();
   const stateListeners = new Set();
 
+  // Form draft persistence setup (sessionStorage by default, or localStorage)
+  const rawDraftAttr = formEl
+    ? formEl.getAttribute('data-w-persist-draft') || formEl.getAttribute('data-w-draft')
+    : null;
+  const isDraftEnabled =
+    options.persistDraft !== undefined
+      ? Boolean(options.persistDraft)
+      : rawDraftAttr !== null && rawDraftAttr !== 'false';
+
+  let draftStorageType = 'session';
+  if (typeof options.persistDraft === 'string') {
+    draftStorageType = options.persistDraft.toLowerCase() === 'local' ? 'local' : 'session';
+  } else if (rawDraftAttr && rawDraftAttr.toLowerCase() === 'local') {
+    draftStorageType = 'local';
+  }
+
+  const draftKey =
+    options.draftKey ||
+    (formEl && (formEl.getAttribute('data-w-draft-key') || formEl.getAttribute('data-w-persist-key'))) ||
+    `form_draft:${formName || 'anon'}`;
+
+  const draftStorage =
+    (options.storage && options.storage[draftStorageType]) ||
+    (draftStorageType === 'local' ? defaultStorage.local : defaultStorage.session);
+
+  function extractDraftValues(el) {
+    if (!el || typeof el.querySelectorAll !== 'function') return {};
+    const { data } = parseFormElement(el);
+    const safeData = {};
+    for (const [key, val] of Object.entries(data)) {
+      const ctrl = el.querySelector(`[name="${key}"], [name="${key}[]"]`);
+      if (!ctrl) {
+        safeData[key] = val;
+        continue;
+      }
+      const type = (ctrl.type || '').toLowerCase();
+      if (type === 'password' || type === 'file') continue;
+      if (ctrl.hasAttribute('data-w-no-draft') || ctrl.getAttribute('data-w-persist') === 'false') continue;
+      safeData[key] = val;
+    }
+    return safeData;
+  }
+
+  function saveDraft() {
+    if (!formEl || !isDraftEnabled) return false;
+    const draftPayload = extractDraftValues(formEl);
+    return draftStorage.set(draftKey, draftPayload);
+  }
+
+  function restoreDraft() {
+    if (!formEl || !isDraftEnabled) return false;
+    const saved = draftStorage.get(draftKey, null);
+    if (saved && typeof saved === 'object' && Object.keys(saved).length > 0) {
+      fill(saved, { baseline: false });
+      if (typeof formEl.dispatchEvent === 'function') {
+        const CustomEventCtor =
+          (formEl.ownerDocument && formEl.ownerDocument.defaultView && formEl.ownerDocument.defaultView.CustomEvent) ||
+          (typeof CustomEvent !== 'undefined' ? CustomEvent : null);
+        if (CustomEventCtor) {
+          formEl.dispatchEvent(
+            new CustomEventCtor('w-form:draft-restored', {
+              bubbles: true,
+              cancelable: true,
+              detail: { form: handle, draft: saved, key: draftKey },
+            })
+          );
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+
+  function clearDraft() {
+    if (!isDraftEnabled) return false;
+    return draftStorage.remove(draftKey);
+  }
+
+  function hasDraft() {
+    if (!isDraftEnabled) return false;
+    return draftStorage.has(draftKey);
+  }
+
   function notifyStateChange() {
     for (const fn of stateListeners) {
       try {
@@ -496,32 +620,32 @@ function createFormHandle(formEl, options = {}) {
    * Toggle pending state on the form and submit buttons to prevent double submissions.
    */
   function setPendingState(nextPending, activeSubmitter = null) {
-    pending = Boolean(nextPending);
+    const next = Boolean(nextPending);
+    if (pending === next) return;
+    pending = next;
     if (!formEl) return;
 
     if (pending) {
       formEl.setAttribute('aria-busy', 'true');
       formEl.setAttribute('data-w-pending', 'true');
+      formEl.setAttribute('data-w-busy', 'true');
     } else {
       formEl.removeAttribute('aria-busy');
       formEl.removeAttribute('data-w-pending');
+      formEl.removeAttribute('data-w-busy');
     }
 
     const submitButtons = formEl.querySelectorAll
       ? formEl.querySelectorAll('button[type="submit"], button:not([type]), input[type="submit"]')
       : [];
+    let submitterHandled = false;
     for (let i = 0; i < submitButtons.length; i++) {
       const btn = submitButtons[i];
-      if (btn.hasAttribute('data-w-disabled')) continue; // Managed by controller binding
-      if (pending) {
-        btn.__wWasDisabled = Boolean(btn.disabled);
-        btn.disabled = true;
-      } else if (!btn.__wWasDisabled) {
-        btn.disabled = false;
-      }
+      if (btn === activeSubmitter) submitterHandled = true;
+      setElementBusyState(btn, pending);
     }
-    if (activeSubmitter && !activeSubmitter.hasAttribute('data-w-disabled')) {
-      activeSubmitter.disabled = pending;
+    if (activeSubmitter && !submitterHandled) {
+      setElementBusyState(activeSubmitter, pending);
     }
     notifyStateChange();
   }
@@ -615,7 +739,7 @@ function createFormHandle(formEl, options = {}) {
         if (type === 'file') continue; // Browser security prevents setting file input value
 
         if (type === 'checkbox') {
-          if (Array.isArray(val)) {
+          if (isArray(val)) {
             ctrl.checked = val.map(String).includes(String(ctrl.value));
           } else {
             ctrl.checked = Boolean(val);
@@ -624,7 +748,7 @@ function createFormHandle(formEl, options = {}) {
           ctrl.checked = String(val) === String(ctrl.value);
         } else if (ctrl.tagName === 'SELECT') {
           if (ctrl.multiple) {
-            const arr = Array.isArray(val) ? val.map(String) : [String(val)];
+            const arr = isArray(val) ? val.map(String) : [String(val)];
             const opts = ctrl.options || [];
             for (let j = 0; j < opts.length; j++) {
               opts[j].selected = arr.includes(String(opts[j].value));
@@ -799,10 +923,23 @@ function createFormHandle(formEl, options = {}) {
         initialSnapshot = captureInitialFormSnapshot(formEl);
       }
 
+      if (isDraftEnabled) {
+        clearDraft();
+      }
+
       // Invoke registered success hooks. Note: Any background fragment refresh failure
-      // is handled by the fragment coordinator and NEVER puts this form into validation error state!
+      // or side-effect service error in onSuccess NEVER puts a succeeded form into validation error
+      // state or makes the completed mutation appear rolled back!
+      let hookError = null;
       for (const listener of successListeners) {
-        await listener(responseData, { values: payloadData, form: handle });
+        try {
+          await listener(responseData, { values: payloadData, form: handle, services });
+        } catch (listenerErr) {
+          if (!hookError) hookError = listenerErr;
+          if (debug && typeof debug.trackCleanupError === 'function') {
+            debug.trackCleanupError(`form_${formName}`, formName, 'form:onSuccess', listenerErr);
+          }
+        }
       }
 
       // Explicit redirect behavior
@@ -810,7 +947,7 @@ function createFormHandle(formEl, options = {}) {
         submitOptions.redirectOnSuccess ||
         (formEl && formEl.getAttribute('data-w-redirect')) ||
         null;
-      if (redirectTarget) {
+      if (redirectTarget && isSafeRedirectUrl(redirectTarget)) {
         if (typeof options.navigate === 'function') {
           options.navigate(redirectTarget);
         } else if (typeof window !== 'undefined' && window.location) {
@@ -828,7 +965,7 @@ function createFormHandle(formEl, options = {}) {
         }
       }
 
-      return { ok: true, submitted: true, data: responseData, refreshOk, refreshError };
+      return { ok: true, submitted: true, data: responseData, refreshOk, refreshError, hookError };
     } catch (err) {
       if (err && err.kind === 'validation') {
         fieldErrors = { ...(err.fieldErrors || {}) };
@@ -843,7 +980,7 @@ function createFormHandle(formEl, options = {}) {
 
       for (const listener of errorListeners) {
         try {
-          await listener(err, { values: payloadData, form: handle });
+          await listener(err, { values: payloadData, form: handle, services });
         } catch (_e) {
           // Ignore
         }
@@ -859,6 +996,7 @@ function createFormHandle(formEl, options = {}) {
   }
 
   // Listen to native submit and input/change events on `formEl`
+  let draftDebounceTimer = null;
   const onDomInput = (evt) => {
     dirty = computeFormDirty(formEl, initialSnapshot);
     const target = evt && evt.target;
@@ -873,6 +1011,12 @@ function createFormHandle(formEl, options = {}) {
         }
       }
     }
+    if (isDraftEnabled) {
+      if (draftDebounceTimer) clearTimeout(draftDebounceTimer);
+      draftDebounceTimer = setTimeout(() => {
+        saveDraft();
+      }, 150);
+    }
     notifyStateChange();
   };
 
@@ -900,9 +1044,17 @@ function createFormHandle(formEl, options = {}) {
   // Initialize hidden state on empty error placeholders
   syncErrorsToDom(false);
 
-  const handle = {
+  let handle = null;
+
+  handle = {
     name: formName,
     el: formEl,
+    get services() {
+      return services;
+    },
+    __setServices(nextServices) {
+      if (nextServices) services = nextServices;
+    },
     get pending() {
       return pending;
     },
@@ -938,6 +1090,12 @@ function createFormHandle(formEl, options = {}) {
       return parseFormElement(formEl, submitter).data;
     },
     fill,
+    saveDraft,
+    restoreDraft,
+    clearDraft,
+    get hasDraft() {
+      return hasDraft();
+    },
     setAction,
     setRouteParams,
     setDisabled,
@@ -1009,6 +1167,10 @@ function createFormHandle(formEl, options = {}) {
     debug.recordEvent('form:bind', { name: formName });
   }
 
+  if (isDraftEnabled) {
+    restoreDraft();
+  }
+
   return handle;
 }
 
@@ -1017,5 +1179,6 @@ module.exports = {
   isControlDisabled,
   coerceScalarControlValue,
   createFormHandle,
+  isSafeRedirectUrl,
 };