3 files changed, 111 insertions, 21 deletions
diff --git a/haunt/static/css/style.css b/haunt/static/css/style.css
index 82bd8da..15af437 100644
--- a/haunt/static/css/style.css
+++ b/haunt/static/css/style.css
@@ -259,6 +259,10 @@ ul#webmention-container .comment .comment-source-identifier {
     clear: left;
 }
 
+#comment-form #captcha-trigger-block label {
+    display: block;
+}
+
 #comment-form label,
 #comment-form input,
 #comment-form button {
diff --git a/haunt/static/js/dynamic-comment-form.js b/haunt/static/js/dynamic-comment-form.js
new file mode 100644
index 0000000..30253bb
--- /dev/null
+++ b/haunt/static/js/dynamic-comment-form.js
@@ -0,0 +1,81 @@
+/*
+ * dynamic-comment-form.js -- Captcha challenge loader
+ * Copyright © 2022 Jakob L. Kreuze <zerodaysfordays@sdf.org>
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+function makeRequest (method, url) {
+  return new Promise(function (resolve, reject) {
+    var xhr = new XMLHttpRequest();
+    xhr.open(method, url);
+    xhr.onload = function () {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(xhr.response);
+      } else {
+        reject({
+          status: xhr.status,
+          statusText: xhr.statusText
+        });
+      }
+    };
+    xhr.onerror = function () {
+      reject({
+        status: xhr.status,
+        statusText: xhr.statusText
+      });
+    };
+    xhr.send();
+  });
+}
+
+window.addEventListener("load", () => {
+  let primaryDisplay = document.getElementById("comment-form-primary");
+  primaryDisplay.removeAttribute("hidden");
+
+  let altDisplay = document.getElementById("comment-form-alt");
+  altDisplay.remove();
+
+  let trigger = document.getElementById("captcha-challenge-trigger");
+  let triggerBlock = document.getElementById("captcha-trigger-block");
+  trigger.addEventListener("click", (event) => {
+    let captchaField = document.getElementById("comment-captcha");
+
+    let captchaId = document.getElementById("captcha-id");
+    let captchaImage = document.getElementById("captcha-image");
+
+    trigger.innerHTML = "Please wait...";
+    trigger.disabled = true;
+
+    if (captchaId.value === "") {
+      makeRequest("GET", "/api/challenge/captcha")
+        .then(function (data) {
+          // Update form with parsed values.
+          let challengeData = JSON.parse(data);
+          captchaId.value = challengeData["challenge-id"];
+          captchaImage.src = challengeData["image"];
+
+          // Unhide fieldset.
+          captchaField.removeAttribute("hidden");
+
+          // Hide initial trigger.
+          triggerBlock.remove();
+        })
+        .catch(console.err);
+    }
+
+    event.preventDefault();
+  });
+});
diff --git a/haunt/static/js/proof-of-work.js b/haunt/static/js/proof-of-work.js
index 5dedb66..f2439dd 100644
--- a/haunt/static/js/proof-of-work.js
+++ b/haunt/static/js/proof-of-work.js
@@ -80,25 +80,30 @@ function raceEndpoint() {
   });
 }
 
-let trigger = document.getElementById("pow-trigger");
-trigger.hidden = false;
-trigger.addEventListener("click", (e) => {
-  trigger.innerHTML = "Please wait...";
-  trigger.disabled = true;
-  raceEndpoint()
-    .then((result) => {
-      let resultField = document.getElementById("captcha-alt");
-      let challengeIdField = document.getElementById("captcha-alt-id");
-      resultField.value = result[0];
-      challengeIdField.value = result[1];
-      trigger.innerHTML = "Proof-of-Work completed successfully!";
-      trigger.disabled = true;
-    })
-    .catch((err) => {
-      console.log(err);
-      trigger.innerHTML = "Proof-of-Work failed!";
-      trigger.disabled = true;
-    });
-  e.preventDefault();
-})
+window.addEventListener("load", () => {
+  let trigger = document.getElementById("pow-trigger");
+  trigger.removeAttribute("hidden");
+  trigger.addEventListener("click", (e) => {
+    trigger.innerHTML = "Please wait...";
+    trigger.disabled = true;
+    raceEndpoint()
+      .then((result) => {
+        let resultField = document.getElementById("captcha-alt");
+        let challengeIdField = document.getElementById("captcha-alt-id");
+        resultField.value = result[0];
+        challengeIdField.value = result[1];
+        trigger.innerHTML = "Proof-of-Work completed successfully!";
+        trigger.disabled = true;
 
+        // Hide the primary captcha, too, to make it clear that it isn't necessary to complete.
+        let primaryChallenge = document.getElementById("captcha-challenge-primary");
+        primaryChallenge.hidden = true;
+      })
+      .catch((err) => {
+        console.log(err);
+        trigger.innerHTML = "Proof-of-Work failed!";
+        trigger.disabled = true;
+      });
+    e.preventDefault();
+  })
+});