From e4178a1273a5d854911869b28f96dfd6c99625a6 Mon Sep 17 00:00:00 2001
From: Pavel Kvach <pavel.kvach@gmail.com>
Date: Thu, 22 Feb 2024 10:34:26 +0200
Subject: [PATCH] js: isso.js: Disable Postbox submit button on click, enable
 after response

Disable the submit button in Postbox to prevent double posting upon click. Enable the button after receiving a response from the API endpoint.

Fixes https://github.com/posativ/isso/issues/913
---
 CHANGES.rst                                   |  2 +
 isso/js/app/isso.js                           | 60 ++++++++++++-------
 isso/js/tests/integration/puppet.test.js      | 36 ++++++++++-
 isso/js/tests/screenshots/screenshots.test.js |  1 +
 4 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/CHANGES.rst b/CHANGES.rst
index 718368a99..77d731a82 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -27,6 +27,7 @@ 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
@@ -34,6 +35,7 @@ Bugfixes & Improvements
 .. _#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)
 ------------------------
diff --git a/isso/js/app/isso.js b/isso/js/app/isso.js
index fbf958a3d..46cb30d0f 100644
--- 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
index e77070be1..4975c6cd0 100644
--- 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');
 
@@ -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);
+});
\ No newline at end of file
diff --git a/isso/js/tests/screenshots/screenshots.test.js b/isso/js/tests/screenshots/screenshots.test.js
index f447938ec..2a51dc138 100644
--- a/isso/js/tests/screenshots/screenshots.test.js
+++ b/isso/js/tests/screenshots/screenshots.test.js
@@ -83,6 +83,7 @@ test('Screenshot with inserted comment', async () => {
   });
 
   // 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');