=EmailManager.php refactor, Turnstile properly integrated with form submiss...

Jake Vanderwerf

2025-12-23 25be5747a6e462a3d09fc6607b3639b79e4d9374

 src/forms/view.js

@@ -1,4 +1,5 @@
/**
 * view.js
 * Frontend JavaScript for the Form Block
 * Handles form validation and submission
 */
@@ -7,7 +8,7 @@
      this.controller = new window.jvbForm();

      document.querySelectorAll('.jvb-form-block form').forEach(form => {
         this.controller.registerForm(form);
         this.controller.registerForm(form, {autosave: true,autoUpload: false});
      });

      this.controller.subscribe((event, data) => {
@@ -18,69 +19,94 @@
   }

   async handleFormSubmission(data) {
      let [
         formId,
         formConfig,
         formData
      ] = [
         data.formId,
         data.config,
         data.data
      ];
      let formId = data.formId;
      let formConfig = data.config;
      let formData = data.fullData;
      let form = formConfig.element;

      // Create FormData instead of JSON
      const submitData = new FormData();

      // Add all regular form fields
      for (const [key, value] of Object.entries(formData)) {
         // Skip the nonce field - we don't need it for REST API with __return_true
         if (key === '_wpnonce' || key === '_wp_http_referer') {
            continue;
         }
         if (Array.isArray(value)) {
            value.forEach(v => submitData.append(`${key}[]`, v));
         } else if (typeof value === 'object' && value !== null) {
            // For nested objects, you might want to JSON.stringify them
            submitData.append(key, JSON.stringify(value));
         } else {
            submitData.append(key, value);
         }
      }

      // Get uploaded files from UploadManager
      if (window.jvbUploads) {
         const files = await window.jvbUploads.getFilesForForm(form);

         // Append files with their field names
         files.forEach(({file, fieldName, uploadId, meta}) => {
            // Use fieldName[] for multiple files per field
            submitData.append(`${fieldName}[]`, file);
         });
      }


      let headers = {
         'X-WP-Nonce': jvbSettings.nonce,
         'Content-Type': 'application/json'
         // 'X-WP-Nonce': window.auth.getNonce()
      };

      data['form_type'] = formId;
      data['form_id'] = form.id;
      let block = form.closest('.jvb-form-block');
      this.controller.showFormStatus(formId, 'uploading');

      try {
         const response = await fetch (`${jvbSettings.api}forms`,
            {
               method: 'POST',
               headers,
               body: JSON.stringify(formData)
            });
         const response = await fetch(`${jvbSettings.api}forms`, {
            method: 'POST',
            credentials: 'same-origin',
            headers,
            body: submitData // Send FormData instead of JSON
         });
         const result = await response.json();

         if (!response.ok) {
            this.controller.showFormStatus(formId, 'error');
            const errorData = await response.json().catch(() => ({}));
            throw new Error(errorData.message|| `Request failed with status ${response.status}`);
            this.controller.handleFormError(form, result); // ✓ Show error to user
            return; // Stop processing
         }

         this.controller.showFormStatus(formId, 'submitted');

         this.controller.showSummary(formId, '.jvb-form-block');
         this.controller.store.delete(formId);

      } catch (error) {
         throw error;
      }
   }

   updateUI(response, block) {

      let summary = window.getTemplate('formSummary');
      summary.querySelector('h2').textContent = 'Success!';
      console.log('Form Response: ', response);
      console.log(summary);
      for (let [key, value] of Object.entries(response)) {
         let item = summary.querySelector(`#${key}`);
         if (item) {
            let title = item.querySelector('h4');
            if (title.innerText.includes('%s')) {
               title.innerHTML = title.replace('%s', '<b>'+value+'</b>');
            } else {
               item.querySelector('div').innerHTML = value;
         // Clean up uploaded files from IndexedDB after successful submission
         if (window.jvbUploads) {
            const uploadFields = form.querySelectorAll('[data-upload-field]');
            for (const field of uploadFields) {
               const fieldId = window.jvbUploads.determineFieldId(field);
               await window.jvbUploads.clearFieldFromStores(fieldId);
            }
         }
      } catch (error) {
         console.error('Form submission error:', error);
         this.controller.showFormStatus(formId, 'error');

         // Show user-friendly network error - IMPROVED
         this.controller.handleFormError(form, {
            message: 'Network error. Please check your connection and try again.',
            code: 'network_error'
         });
      } finally {
         this.controller.store.delete(formId);
      }
      block.append(summary);
   }
}

document.addEventListener('DOMContentLoaded', function() {
   new FormBlock();
document.addEventListener('DOMContentLoaded', async function() {
   window.auth.subscribe(event => {
      if (event === 'auth-loaded') {
         new FormBlock();
      }
   });
});