js: isso.js: Disable Postbox submit button on click, enable after res…

…ponse Disable the submit button in Postbox to prevent double posting upon click. Enable the button after receiving a response from the API endpoint. Fixes isso-comments#913
pkvach · Feb 22, 2024 · 833f68e · 833f68e
1 parent 9755fe6
commit 833f68e
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 22 deletions.
diff --git a/isso/js/app/isso.js b/isso/js/app/isso.js
@@ -92,34 +92,50 @@ var Postbox = function(parent) {
 
     // submit form, initialize optional fields with `null` and reset form.
     // If replied to a comment, remove form completely.
-    $("[type=submit]", el).on("click", function() {
+    $("[type=submit]", el).on("click", function(event) {
         edit();
         if (! el.validate()) {
             return;
         }
 
+        const submitButton = event.target;
+        submitButton.disabled = true; // Disable the submit button to prevent double posting
+
         var author = $("[name=author]", el).value || null,
-            email = $("[name=email]", el).value || null,
-            website = $("[name=website]", el).value || null;
-
-        localStorage.setItem("isso-author", JSON.stringify(author));
-        localStorage.setItem("isso-email", JSON.stringify(email));
-        localStorage.setItem("isso-website", JSON.stringify(website));
-
-        api.create($("#isso-thread").getAttribute("data-isso-id"), {
-            author: author, email: email, website: website,
-            text: $(".isso-textarea", el).value,
-            parent: parent || null,
-            title: $("#isso-thread").getAttribute("data-title") || null,
-            notification: $("[name=notification]", el).checked() ? 1 : 0,
-        }).then(function(comment) {
-            $(".isso-textarea", el).value = "";
-            insert(comment, true);
-
-            if (parent !== null) {
-                el.onsuccess();
-            }
-        });
+        email = $("[name=email]", el).value || null,
+        website = $("[name=website]", el).value || null;
+
+        try {
+            localStorage.setItem("isso-author", JSON.stringify(author));
+            localStorage.setItem("isso-email", JSON.stringify(email));
+            localStorage.setItem("isso-website", JSON.stringify(website));
+
+            api.create($("#isso-thread").getAttribute("data-isso-id"), {
+                author: author, email: email, website: website,
+                text: $(".isso-textarea", el).value,
+                parent: parent || null,
+                title: $("#isso-thread").getAttribute("data-title") || null,
+                notification: $("[name=notification]", el).checked() ? 1 : 0,
+            }).then(
+                function(comment) {
+                    $(".isso-textarea", el).value = "";
+                    insert(comment, true);
+
+                    if (parent !== null) {
+                        el.onsuccess();
+                    }
+
+                    submitButton.disabled = false;
+                },
+                function(err) {
+                    console.error(err);
+                    submitButton.disabled = false;
+                }
+            );
+        } catch (err) {
+            console.error(err);
+            submitButton.disabled = false;
+        }
     });
 
     return el;

diff --git a/isso/js/tests/integration/puppet.test.js b/isso/js/tests/integration/puppet.test.js
@@ -147,6 +147,8 @@ test("should fill Postbox with valid data and receive 201 reply", async () => {
   const elm = await thread.evaluate((node) => node.innerHTML);
   await expect(elm.replace(/<time.*?>/, '<time>'))
     .toMatchSnapshot();
+
+  await expect(page).not.toMatchElement('.isso-post-action > [type=submit]:disabled');
 
   await page.waitForSelector('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-edit');
 
@@ -264,3 +266,32 @@ test("should execute GET/PUT/POST/DELETE requests correctly", async () => {
     { text: 'New comment body' },
   );
 });
+
+test("Postbox submit button should be disabled on submit click and enabled after response", async () => {
+  // Fill the textarea with the comment
+  await expect(page).toFill(
+      '.isso-textarea',
+      'A comment with *italics* and [a link](http://link.com)'
+  );
+
+  // Intercept the request to the ISSO endpoint
+  await page.setRequestInterception(true);
+  const submitButtonSelector = '.isso-post-action > [type=submit]';
+  let createHandler = async (request) => {
+    if (request.url().startsWith(ISSO_ENDPOINT + '/new')) {
+      await expect(page).toMatchElement(submitButtonSelector + ":disabled");
+      request.abort();
+      await expect(page).not.toMatchElement(submitButtonSelector + ":disabled");
+    } else {
+      request.continue();
+    }
+  };
+  await page.on('request', createHandler);
+
+  // Click the submit button
+  await expect(page).toClick(submitButtonSelector);
+
+  // Disable request interception and remove the request handler
+  page.setRequestInterception(false);
+  page.off('request', createHandler);
+});