3 files changed, 75 insertions, 22 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 3328f8c..442af67 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -278,7 +278,7 @@ a:hover {
     border-color: #2e8b57
 }
 
-.comment-form textarea,.form-row input,.search-module input {
+#comment-form textarea,.form-row input,.search-module input {
     flex: 1;
     font-size: 9px;
     border: 1px solid #ccc;
@@ -286,7 +286,7 @@ a:hover {
     font-family: inherit
 }
 
-.comment-form button,.search-module button {
+#comment-form button,.search-module button {
     text-transform: uppercase;
     font-size: 9px;
     cursor: pointer
@@ -392,20 +392,21 @@ hr {
     border: 1px solid #ccc
 }
 
-.comment-form {
+#comment-form {
+    display: flex;
     flex-direction: column
 }
 
-.comment-form,.form-row,.legacy-warning {
+#comment-form,.form-row,.legacy-warning {
     display: flex;
     gap: 8px
 }
 
-.comment-form textarea,.form-row input {
+#comment-form textarea,.form-row input {
     padding: 5px
 }
 
-.comment-form button {
+#comment-form button {
     align-self: flex-start;
     background: #333;
     color: #fff;
@@ -413,10 +414,60 @@ hr {
     padding: 5px 15px
 }
 
-.comment-form button:hover {
+#comment-form button:hover {
     background: #2e8b57
 }
 
+#captcha-image-wrapper img {
+    border: 1px solid #ccc;
+    background: #fff;
+    display: block;
+    max-width: 100%
+}
+
+#captcha-input-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 8px;
+    margin-top: 12px
+}
+
+#captcha-input-wrapper input {
+    flex: 1;
+    font-size: 9px;
+    border: 1px solid #ccc;
+    padding: 5px
+}
+
+#captcha-challenge-trigger {
+    height: 23px;
+    padding: 0 10px;
+    font-size: 9px;
+    text-transform: uppercase;
+    cursor: pointer;
+    background: #eee;
+    border: 1px solid #ccc
+}
+
+#captcha-alternative-wrapper {
+    align-items: center;
+    gap: 10px;
+}
+
+#captcha-alternative-wrapper button {
+    background: #eee;
+    border: 1px solid #ccc;
+    color: #333;
+    font-size: 9px
+}
+
+#captcha-alternative-wrapper p {
+    font-size: 9px;
+    margin: 0;
+    color: #999
+}
+
 .legacy-warning {
     background: linear-gradient(to bottom,#fff3e0 0,#ffe0b2 100%);
     border: 1px dotted #fb8c00;
diff --git a/static/js/dynamic-comment-form.js b/static/js/dynamic-comment-form.js
index ff5f875..809a755 100644
--- a/static/js/dynamic-comment-form.js
+++ b/static/js/dynamic-comment-form.js
@@ -42,19 +42,15 @@ function makeRequest (method, url) {
 }
 
 window.addEventListener("load", () => {
-  let primaryDisplay = document.getElementById("comment-form-primary");
+  let primaryDisplay = document.getElementById("comment-form");
   primaryDisplay.removeAttribute("hidden");
 
-  let altDisplay = document.getElementById("comment-form-alt");
-  altDisplay.remove();
+  const altDisplay = document.getElementById("captcha-alternative-wrapper");
 
   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");
+    let wrapper = document.getElementById("captcha-image-wrapper");
 
     trigger.innerHTML = "Please wait...";
     trigger.disabled = true;
@@ -65,13 +61,17 @@ window.addEventListener("load", () => {
           // Update form with parsed values.
           let challengeData = JSON.parse(data);
           captchaId.value = challengeData["challenge-id"];
-          captchaImage.src = challengeData["image"];
 
-          // Unhide fieldset.
-          captchaField.removeAttribute("hidden");
+          const img = document.createElement('img');
+          img.src = challengeData["image"];
+          // img.src = `data:image/png;base64,${base64Data}`;
+          wrapper.innerHTML = '';
+          wrapper.appendChild(img);
+
+          trigger.hidden = true;
 
-          // Hide initial trigger.
-          triggerBlock.remove();
+          // Unhide fieldset.
+          altDisplay.removeAttribute("hidden");
         })
         .catch(console.err);
     }
@@ -80,7 +80,6 @@ window.addEventListener("load", () => {
   });
 });
 
-
 window.addEventListener("load", () => {
   // Unhide additional comment actions if Javascript is enabled.
   let additionalActionsRows = document.querySelectorAll(".comment-additional-actions");
diff --git a/static/js/proof-of-work.js b/static/js/proof-of-work.js
index b4b5c57..f2f0484 100644
--- a/static/js/proof-of-work.js
+++ b/static/js/proof-of-work.js
@@ -81,7 +81,7 @@ function raceEndpoint() {
 }
 
 window.addEventListener("load", () => {
-  let trigger = document.getElementById("pow-trigger");
+  let trigger = document.getElementById("proof-of-work-trigger");
   trigger.removeAttribute("hidden");
   trigger.addEventListener("click", (e) => {
     trigger.innerHTML = "Please wait...";
@@ -96,8 +96,11 @@ window.addEventListener("load", () => {
         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");
+        let primaryChallenge = document.getElementById("captcha-image-wrapper");
         primaryChallenge.hidden = true;
+        let solutionInput = document.getElementById("captcha-solution");
+        solutionInput.hidden = true;
+        solutionInput.removeAttribute("required");
       })
       .catch((err) => {
         console.log(err);