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

CHANGES.rst

@@ -27,13 +27,15 @@ Bugfixes & Improvements
 - Prevent auto creation of invalid links in comments (`#995`_, pkvach)
 - Fix W3C Validation issues (`#999`_, pkvach)
 - Handle deleted comments in Disqus migration (`#994`_, pkvach)
+- Disable Postbox submit button on click, enable after response (`#993`_, pkvach)
 
 .. _#951: https://github.com/posativ/isso/pull/951
 .. _#967: https://github.com/posativ/isso/pull/967
 .. _#983: https://github.com/posativ/isso/pull/983
 .. _#995: https://github.com/isso-comments/isso/pull/995
 .. _#999: https://github.com/isso-comments/isso/pull/999
 .. _#994: https://github.com/isso-comments/isso/pull/994
+.. _#993: https://github.com/isso-comments/isso/pull/993
 
 0.13.1.dev0 (2023-02-05)
 ------------------------

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();
-            }
-        });
+        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;

isso/js/tests/integration/puppet.test.js

@@ -148,6 +148,8 @@ test("should fill Postbox with valid data and receive 201 reply", async () => {
   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');
 
   // Edit comment
@@ -238,7 +240,10 @@ test("should execute GET/PUT/POST/DELETE requests correctly", async () => {
 
   await expect(page).toMatchElement(
     '#isso-1 .isso-text',
-    { text: 'New comment body' },
+    {
+      text: 'New comment body',
+      timeout: 1000,
+    },
   );
 
   // Delete comment via DELETE
@@ -264,3 +269,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);
+});

isso/js/tests/screenshots/screenshots.test.js

@@ -40,6 +40,7 @@ test('Screenshot Postbox', async () => {
   await expect(await page.evaluate(
     () => localStorage.getItem("isso-author")))
     .toBe(null);
+  await page.waitForSelector('#isso-thread');
   const thread = await page.$('#isso-thread');
   await thread.screenshot({
     path: SCREENSHOTS_PATH + '/postbox.png'
@@ -72,17 +73,20 @@ test('Screenshot with inserted comment', async () => {
     expect(page).toClick('.isso-post-action > input[type=submit]'),
   ]);
 
+  await page.waitForSelector('#isso-1');
   const rendered_comment = await page.$('#isso-1');
   await rendered_comment.screenshot({
     path: SCREENSHOTS_PATH + '/comment.png'
   });
 
+  await page.waitForSelector('#isso-thread');
   const thread = await page.$('#isso-thread');
   await thread.screenshot({
     path: SCREENSHOTS_PATH + '/thread.png'
   });
 
   // Delete comment again
+  await page.waitForSelector('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-delete');
   await expect(page).toClick('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-delete');
   // Need to click once to surface "confirm" and then again to confirm
   await expect(page).toClick('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-delete');