[BUGFIX] Fix endless loader in validation form on failed requests

Resources/Private/Language/de.locallang.xlf

@@ -717,6 +717,14 @@
                 <source><![CDATA[validate]]></source>
                 <target><![CDATA[Validieren]]></target>
             </trans-unit>
+            <trans-unit id="validation.form.error.generic" approved="yes">
+                <source><![CDATA[The validation request could not be completed. Please check the URL and try again.]]></source>
+                <target><![CDATA[Die Validierungsanfrage konnte nicht abgeschlossen werden. Bitte prüfen Sie die URL und versuchen Sie es erneut.]]></target>
+            </trans-unit>
+            <trans-unit id="validation.form.error.timeout" approved="yes">
+                <source><![CDATA[The validation request timed out. Please try again.]]></source>
+                <target><![CDATA[Die Validierungsanfrage ist abgelaufen. Bitte versuchen Sie es erneut.]]></target>
+            </trans-unit>
         </body>
     </file>
 </xliff>

Resources/Private/Language/locallang.xlf

@@ -536,6 +536,12 @@
             <trans-unit id="validation.form.validate">
                 <source><![CDATA[validate]]></source>
             </trans-unit>
+            <trans-unit id="validation.form.error.generic">
+                <source><![CDATA[The validation request could not be completed. Please check the URL and try again.]]></source>
+            </trans-unit>
+            <trans-unit id="validation.form.error.timeout">
+                <source><![CDATA[The validation request timed out. Please try again.]]></source>
+            </trans-unit>
         </body>
     </file>
 </xliff>

Resources/Private/Templates/Validation/Main.html

@@ -21,6 +21,8 @@
           data-i18n-headline-notice="<f:translate key='validation.form.headline.notice' extensionName='dlf' />"
           data-i18n-headline-success="<f:translate key='validation.form.headline.success' extensionName='dlf' />"
           data-i18n-headline-warning="<f:translate key='validation.form.headline.warning' extensionName='dlf'/>"
+          data-i18n-error="<f:translate key='validation.form.error.generic' extensionName='dlf'/>"
+          data-i18n-timeout="<f:translate key='validation.form.error.timeout' extensionName='dlf'/>"
     >
         <input type="hidden" name="validationType" value="{settings.type}">
         <label>

Resources/Public/JavaScript/Validation/Validation.js

@@ -8,6 +8,10 @@
  * LICENSE.txt file that was distributed with this source code.
  */
 
+// Abort the validation request if the server does not answer within this
+// time (in milliseconds), so the user is not left with a spinner forever.
+const dlfValidationRequestTimeout = 60000;
+
 const dlfValidationForms = document.querySelectorAll('.tx-dlf-validation form');
 
 /**
@@ -151,33 +155,77 @@
       return entryContainer;
     }
 
-    const loader = buildLoader(event.target);
     const form = event.target.parentElement;
+    const submitButton = event.target.querySelector('.submit');
+
+    /**
+     * Show the given error message below the form.
+     *
+     * @param {string} message The message to show
+     */
+    function showError(message) {
+      let validation = form.querySelector('.validation');
+      if (validation) {
+        form.removeChild(validation);
+      }
+      validation = document.createElement('div');
+      validation.classList.add("validation");
+      validation.appendChild(createMessagesContainer('error', [message], validationForm.dataset.i18nHeadlineError));
+      form.appendChild(validation);
+    }
+
+    // a new request aborts a pending one so the requests do not stack
+    let controller = new AbortController();
+    const abortTimer = window.setTimeout(() => controller.abort(), dlfValidationRequestTimeout);
+    // lock the form so repeated clicks do not start parallel requests
+    if (submitButton) {
+      submitButton.disabled = true;
+    }
 
     let dataUrl = this.action + '&validationType=' + encodeURIComponent(data.validationType) + '&url=' + encodeURIComponent(data.url);
     if (data.enableValidator && Array.isArray(data.enableValidator)) {
       dataUrl += '&enableValidators=' + encodeURIComponent(data.enableValidator.join(','));
     }
 
-    fetch(dataUrl)
+    const loader = buildLoader(event.target);
+
+    fetch(dataUrl, {signal: controller.signal})
         .then(response => {
-          response.json().then(data => {
-            let validation = form.querySelector('.validation');
-            if (validation) {
-              form.removeChild(validation);
-            }
-            validation = document.createElement('div');
-            validation.classList.add("validation");
-            if (response.ok) {
-              data.forEach(item => {
-                validation.appendChild(createValidationEntry(item));
-              });
-            } else {
-              validation.appendChild(createMessagesContainer('error', [data], validationForm.dataset.i18nHeadlineError));
-            }
-            form.appendChild(validation);
-            loader.remove();
-          });
+          return response.json().catch(() => {
+            // a non-JSON response (e.g. an HTML error page) must not leave
+            // the loader running: report it like a plain error
+            throw new TypeError('The server did not respond with JSON (status ' + response.status + ').');
+          }).then(data => ({ok: response.ok, data: data}));
+        })
+        .then(({ok, data}) => {
+          let validation = form.querySelector('.validation');
+          if (validation) {
+            form.removeChild(validation);
+          }
+          validation = document.createElement('div');
+          validation.classList.add("validation");
+          if (ok) {
+            data.forEach(item => {
+              validation.appendChild(createValidationEntry(item));
+            });
+          } else {
+            validation.appendChild(createMessagesContainer('error', [data], validationForm.dataset.i18nHeadlineError));
+          }
+          form.appendChild(validation);
+        })
+        .catch(error => {
+          if (error && error.name === 'AbortError') {
+            showError(validationForm.dataset.i18nTimeout);
+          } else {
+            showError(validationForm.dataset.i18nError);
+          }
+        })
+        .finally(() => {
+          window.clearTimeout(abortTimer);
+          if (submitButton) {
+            submitButton.disabled = false;
+          }
+          loader.remove();
         });
   });
 });