From f4746023991a68c1a909e5e5cf57ae007e85c81d Mon Sep 17 00:00:00 2001
From: Vitalii Pikozh <wisart@gmail.com>
Date: Tue, 1 Jul 2025 19:12:59 +0300
Subject: [PATCH 1/3] enhancement form validation

---
 .../@apostrophecms/form-widget/index.js       |   5 +
 .../form-widget/views/widget.html             |  35 +---
 .../modules/asset/ui/src/js/formValidation.js | 178 +++++++++++++++---
 .../asset/ui/src/js/formValidation.test.js    |  51 ++++-
 website/modules/asset/ui/src/scss/_form.scss  |  10 +-
 5 files changed, 219 insertions(+), 60 deletions(-)

diff --git a/website/modules/@apostrophecms/form-widget/index.js b/website/modules/@apostrophecms/form-widget/index.js
index 2a371331..cf0b945c 100644
--- a/website/modules/@apostrophecms/form-widget/index.js
+++ b/website/modules/@apostrophecms/form-widget/index.js
@@ -14,5 +14,10 @@ module.exports = {
         },
       },
     },
+    /*
+     * Assets: {
+     *   scripts: ['module:asset/ui/src/index.js'],
+     * },
+     */
   },
 };
diff --git a/website/modules/@apostrophecms/form-widget/views/widget.html b/website/modules/@apostrophecms/form-widget/views/widget.html
index cb49b876..9c4a0815 100644
--- a/website/modules/@apostrophecms/form-widget/views/widget.html
+++ b/website/modules/@apostrophecms/form-widget/views/widget.html
@@ -14,33 +14,11 @@
   param.key + ',' %} {% endif %} {% endfor %} {% endif %}
 
   <form
-    data-apos-form-form="{{ form._id }}"
     class="sf-form {{ prependIfPrefix('__form') }}"
     autocomplete="off"
-    {%
-    if
-    form.enableQueryParams
-    %}
-    data-apos-form-params="{{params}}"
-    {%
-    endif
-    %}
-    {%
-    if
-    recaptchaReady
-    %}
-    data-apos-recaptcha-sitekey="{{ recaptchaSite }}"
-    {%
-    endif
-    %}
-    {%
-    if
-    onSubmitSuccess
-    %}
-    onsubmit="runSubmitSuccess(event)"
-    {%
-    endif
-    %}
+    novalidate
+    method="post"
+    action="/api/v1/@apostrophecms/form/submit"
   >
     {% area form, 'contents' %} {% if recaptchaReady %}
     <noscript>
@@ -51,13 +29,10 @@
     <button
       type="submit"
       class="sf-button"
-      data-apos-form-submit
       {%
       if
       recaptchaReady
-      %}
-      disabled
-      {%
+      %}disabled{%
       endif
       %}
     >
@@ -102,7 +77,7 @@ <h3>{{ form.thankYouHeading or __t('aposForm:defaultThankYou') }}</h3>
     {% if not apos.area.isEmpty(form, 'thankYouBody') %} {% area form,
     'thankYouBody' %} {% endif %} {% if onSubmitSuccess %}
     <script>
-      alert("Thanks!"); // {{ onSubmitSuccess | safe }}
+      alert('Thanks!');
     </script>
     {% endif %}
   </div>
diff --git a/website/modules/asset/ui/src/js/formValidation.js b/website/modules/asset/ui/src/js/formValidation.js
index c6389540..e594252c 100644
--- a/website/modules/asset/ui/src/js/formValidation.js
+++ b/website/modules/asset/ui/src/js/formValidation.js
@@ -59,37 +59,23 @@ const addFieldValidationHandlers = (field, validateFieldFn) => {
   });
 };
 
-const handleFormSubmit = (form, validateFieldFn) => async (event) => {
-  const isValid = await validateForm(form, validateFieldFn);
-
-  if (!isValid) {
-    event.preventDefault();
-    return;
-  }
-
-  // Don't call form.submit() in test environment
-  if (typeof jest === 'undefined') {
-    form.submit();
-  }
-};
-
 const validateForm = async (form, validateFieldFn) => {
-  const fields = form.querySelectorAll('input, textarea, select');
+  const fields = form.querySelectorAll(
+    'input:not([type="submit"]):not([type="button"]):not([type="hidden"]), textarea, select',
+  );
 
   fields.forEach((field) => {
     clearValidationErrorFn(field);
   });
 
   const validationResults = await Promise.all(
-    Array.from(fields)
-      .filter((field) => !['submit', 'button', 'hidden'].includes(field.type))
-      .map(async (field) => {
-        const result = await validateFieldFn(field);
-        if (!result.isValid) {
-          showValidationErrorFn(field, result.message);
-        }
-        return result.isValid;
-      }),
+    Array.from(fields).map(async (field) => {
+      const result = await validateFieldFn(field);
+      if (!result.isValid) {
+        showValidationErrorFn(field, result.message);
+      }
+      return result.isValid;
+    }),
   );
 
   return validationResults.every(Boolean);
@@ -110,12 +96,150 @@ const initFormValidation = (form, validateFieldFn) => {
   }
 };
 
-const initFormWithValidation = (form, validateFieldFn) => {
-  form.addEventListener('submit', handleFormSubmit(form, validateFieldFn));
+const collectFormData = (form) => new FormData(form);
 
-  // Initialize validation for all fields in the form
+const scrollToFirstInvalidField = (form) => {
   const fields = form.querySelectorAll('input, textarea, select');
+  for (const field of fields) {
+    const errorText = field
+      .closest('.sf-field')
+      ?.querySelector('.validation-error')
+      ?.textContent?.trim();
+
+    if (errorText) {
+      field.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      field.focus();
+      break;
+    }
+  }
+};
+
+const onValidateForm = (isValid, form, validateFieldFn) => {
+  if (!isValid) {
+    scrollToFirstInvalidField(form);
+    return null;
+  }
+  const formData = collectFormData(form);
+  return sendFormData(form, formData)
+    .then((response) => onSendFormDataResponse(response, form))
+    .catch(() => {
+      const errorMessage = form.querySelector('.error-message');
+      if (errorMessage) {
+        errorMessage.textContent =
+          'Failed to submit form. Please try again later.';
+      }
+      return null;
+    });
+};
+
+const onSendFormDataResponse = (response, form) => {
+  return handleServerResponse(response, form).then((ok) => {
+    if (!ok) {
+      showValidationErrorFn(
+        form,
+        'Submission failed. Please check the form and try again.',
+      );
+    }
+    return ok;
+  });
+};
+
+const onHandleServerResponse = (data, form) => {
+  if (data && (data.success || data.ok)) {
+    form.reset();
+    const thankYou = document.querySelector('[data-apos-form-thank-you]');
+    if (thankYou) {
+      thankYou.style.display = 'block';
+    }
+    form.style.display = 'none';
+    return true;
+  }
+  // Show server validation errors if they exist
+  if (data?.errors) {
+    showValidationErrorFn(form, data.errors.join(', '));
+  } else {
+    showValidationErrorFn(form, 'Submission failed. Please try again.');
+  }
+  return false;
+};
+
+const handleServerResponse = (response, form) => {
+  if (!response.ok) {
+    return response
+      .json()
+      .then((data) => {
+        showValidationErrorFn(
+          form,
+          data.message || 'Submission failed. Please try again.',
+        );
+        return false;
+      })
+      .catch(() => {
+        showValidationErrorFn(form, 'Submission failed. Please try again.');
+        return false;
+      });
+  }
+  return response.json().then((data) => onHandleServerResponse(data, form));
+};
+
+const sendFormData = (form, formData) => {
+  // Convert FormData to a plain object for the server
+  const data = {};
+  for (const [key, value] of formData.entries()) {
+    if (key in data) {
+      data[key] = [].concat(data[key], value);
+    } else {
+      data[key] = value;
+    }
+  }
+
+  return fetch(form.action, {
+    method: 'POST',
+    body: JSON.stringify({ data }),
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/json',
+      'CSRF-Token':
+        document
+          .querySelector('meta[name="csrf-token"]')
+          ?.getAttribute('content') || '',
+    },
+    credentials: 'same-origin',
+  });
+};
+
+const handleFormSubmit = (event, form, validateFieldFn) => {
+  event.preventDefault();
+  // Disable submit button(s) to prevent multiple submissions
+  const submitButtons = form.querySelectorAll(
+    'button[type="submit"], input[type="submit"]',
+  );
+  submitButtons.forEach((btn) => (btn.disabled = true));
+
+  validateForm(form, validateFieldFn)
+    .then((isValid) => onValidateForm(isValid, form, validateFieldFn))
+    .finally(() => {
+      // Re-enable submit button(s) after processing
+      submitButtons.forEach((btn) => (btn.disabled = false));
+    })
+    .catch(() => false);
+};
+
+const initFormWithValidation = (form, validateFieldFn) => {
+  // Initialize validation for all fields in the form
+  const fields = form.querySelectorAll(
+    'input:not([type="submit"]):not([type="button"]):not([type="hidden"]), textarea, select',
+  );
   fields.forEach((field) => addFieldValidationHandlers(field, validateFieldFn));
+
+  // Add validation before form submission
+  form.addEventListener(
+    'submit',
+    function (event) {
+      handleFormSubmit(event, form, validateFieldFn);
+    },
+    true,
+  );
 };
 
 module.exports = { initFormValidation };
diff --git a/website/modules/asset/ui/src/js/formValidation.test.js b/website/modules/asset/ui/src/js/formValidation.test.js
index 4a0c5b29..5002c6c4 100644
--- a/website/modules/asset/ui/src/js/formValidation.test.js
+++ b/website/modules/asset/ui/src/js/formValidation.test.js
@@ -1,5 +1,21 @@
 import { initFormValidation } from './formValidation';
 
+if (!global.fetch) {
+  global.fetch = jest.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({ success: true }),
+    }),
+  );
+}
+
+const createDelayedFetchPromise = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ ok: true, json: () => Promise.resolve({ success: true }) });
+    }, 50);
+  });
+};
+
 describe('Form Validation', () => {
   let form = null;
   let fullNameInput = null;
@@ -80,7 +96,6 @@ describe('Form Validation', () => {
     await waitForDomUpdate();
 
     expect(validateField).toHaveBeenCalledWith(fullNameInput);
-    expect(submitEvent.defaultPrevented).toBe(false);
   }, 10000);
 
   test('prevents form submission when validation fails', async () => {
@@ -95,4 +110,38 @@ describe('Form Validation', () => {
     expect(validateField).toHaveBeenCalledWith(fullNameInput);
     expect(submitEvent.defaultPrevented).toBe(true);
   }, 10000);
+
+  test('submit button is disabled during form submission and prevents multiple submits', async () => {
+    // Додаємо кнопку submit у форму
+    const submitButton = document.createElement('button');
+    submitButton.type = 'submit';
+    submitButton.textContent = 'Send';
+    form.appendChild(submitButton);
+
+    // Мокаємо валідацію: завжди валідно
+    validateField.mockImplementation(() => Promise.resolve({ isValid: true }));
+
+    // Мокаємо fetch з затримкою
+    const fetchPromise = createDelayedFetchPromise();
+    global.fetch = jest.fn(() => fetchPromise);
+
+    // Сабмітимо форму кілька разів поспіль
+    const submitEvent1 = new SubmitEvent('submit', { cancelable: true });
+    form.dispatchEvent(submitEvent1);
+    // Кнопка має бути disabled одразу після сабміту
+    expect(submitButton.disabled).toBe(true);
+
+    // Поки проміс не завершився, ще раз сабмітимо
+    const submitEvent2 = new SubmitEvent('submit', { cancelable: true });
+    form.dispatchEvent(submitEvent2);
+    // Кнопка все ще має бути disabled
+    expect(submitButton.disabled).toBe(true);
+
+    // Чекаємо завершення промісу
+    await fetchPromise;
+    // Дочекаємось оновлення DOM
+    await waitForDomUpdate();
+    // Кнопка має знову стати enabled
+    expect(submitButton.disabled).toBe(false);
+  }, 10000);
 });
diff --git a/website/modules/asset/ui/src/scss/_form.scss b/website/modules/asset/ui/src/scss/_form.scss
index c90ac14a..fd34a95c 100644
--- a/website/modules/asset/ui/src/scss/_form.scss
+++ b/website/modules/asset/ui/src/scss/_form.scss
@@ -40,18 +40,24 @@
   }
 }
 
+.sf-input {
+  height: 37px;
+
+  @include breakpoint-medium {
+    height: 53px;
+  }
+}
+
 .sf-textarea,
 .sf-input {
   box-sizing: border-box;
   border-radius: 0;
   border: 1px solid $whisper;
   padding: 8px 16px;
-  height: 37px;
   line-height: 140%;
   margin-bottom: 24px;
 
   @include breakpoint-medium {
-    height: 53px;
     padding: 16px 25px;
   }
 

From 68293623876e136e1b4cd4a1d05dc70eb7f55d75 Mon Sep 17 00:00:00 2001
From: Vitalii Pikozh <wisart@gmail.com>
Date: Tue, 1 Jul 2025 20:01:59 +0300
Subject: [PATCH 2/3] remove commented code

---
 website/modules/@apostrophecms/form-widget/index.js    |  5 -----
 website/modules/asset/ui/src/js/formValidation.test.js | 10 ----------
 2 files changed, 15 deletions(-)

diff --git a/website/modules/@apostrophecms/form-widget/index.js b/website/modules/@apostrophecms/form-widget/index.js
index cf0b945c..2a371331 100644
--- a/website/modules/@apostrophecms/form-widget/index.js
+++ b/website/modules/@apostrophecms/form-widget/index.js
@@ -14,10 +14,5 @@ module.exports = {
         },
       },
     },
-    /*
-     * Assets: {
-     *   scripts: ['module:asset/ui/src/index.js'],
-     * },
-     */
   },
 };
diff --git a/website/modules/asset/ui/src/js/formValidation.test.js b/website/modules/asset/ui/src/js/formValidation.test.js
index 5002c6c4..56d5ee7b 100644
--- a/website/modules/asset/ui/src/js/formValidation.test.js
+++ b/website/modules/asset/ui/src/js/formValidation.test.js
@@ -112,36 +112,26 @@ describe('Form Validation', () => {
   }, 10000);
 
   test('submit button is disabled during form submission and prevents multiple submits', async () => {
-    // Додаємо кнопку submit у форму
     const submitButton = document.createElement('button');
     submitButton.type = 'submit';
     submitButton.textContent = 'Send';
     form.appendChild(submitButton);
 
-    // Мокаємо валідацію: завжди валідно
     validateField.mockImplementation(() => Promise.resolve({ isValid: true }));
 
-    // Мокаємо fetch з затримкою
     const fetchPromise = createDelayedFetchPromise();
     global.fetch = jest.fn(() => fetchPromise);
 
-    // Сабмітимо форму кілька разів поспіль
     const submitEvent1 = new SubmitEvent('submit', { cancelable: true });
     form.dispatchEvent(submitEvent1);
-    // Кнопка має бути disabled одразу після сабміту
     expect(submitButton.disabled).toBe(true);
 
-    // Поки проміс не завершився, ще раз сабмітимо
     const submitEvent2 = new SubmitEvent('submit', { cancelable: true });
     form.dispatchEvent(submitEvent2);
-    // Кнопка все ще має бути disabled
     expect(submitButton.disabled).toBe(true);
 
-    // Чекаємо завершення промісу
     await fetchPromise;
-    // Дочекаємось оновлення DOM
     await waitForDomUpdate();
-    // Кнопка має знову стати enabled
     expect(submitButton.disabled).toBe(false);
   }, 10000);
 });

From 6102d9009bd8659bb78d2f7950542d31b7fdc6dc Mon Sep 17 00:00:00 2001
From: Vitalii Pikozh <wisart@gmail.com>
Date: Wed, 2 Jul 2025 13:15:46 +0300
Subject: [PATCH 3/3] remove thanks alert

---
 .../modules/@apostrophecms/form-widget/views/widget.html    | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/website/modules/@apostrophecms/form-widget/views/widget.html b/website/modules/@apostrophecms/form-widget/views/widget.html
index 9c4a0815..0274bf23 100644
--- a/website/modules/@apostrophecms/form-widget/views/widget.html
+++ b/website/modules/@apostrophecms/form-widget/views/widget.html
@@ -75,11 +75,7 @@
     <h3>{{ form.thankYouHeading or __t('aposForm:defaultThankYou') }}</h3>
 
     {% if not apos.area.isEmpty(form, 'thankYouBody') %} {% area form,
-    'thankYouBody' %} {% endif %} {% if onSubmitSuccess %}
-    <script>
-      alert('Thanks!');
-    </script>
-    {% endif %}
+    'thankYouBody' %} {% endif %} {% if onSubmitSuccess %} {% endif %}
   </div>
   {% endif %}
 </div>