1 files changed, 59 insertions, 52 deletions
diff --git a/jakob/dynamic/capabilities/comment-form.scm b/jakob/dynamic/capabilities/comment-form.scm
index 958e9dc..5ce4008 100644
--- a/jakob/dynamic/capabilities/comment-form.scm
+++ b/jakob/dynamic/capabilities/comment-form.scm
@@ -34,40 +34,57 @@
             get-comment-form))
 
 (define (render-comment-field)
-  `(fieldset (@ (id "comment-content"))
-    (legend "Comment")
-    (label (@ (for "name") (class "required")) "Name:")
-    (input (@ (type "text") (id "name") (name "name") (required #t)))
-    (label (@ (for "email")) "Email:")
-    (input (@ (type "text") (id "email") (name "email")))
-    (label (@ (for "url")) "Webpage URL:")
-    (input (@ (type "text") (id "url") (name "url")))
-    (label (@ (for "subject")) "Subject:")
-    (input (@ (type "text") (id "subject") (name "subject")))
-    (label (@ (for "comment") (class "required")) "Comment :")
-    (textarea (@ (id "coment") (name "comment")))
-    (p "(*) Indicates a required field.")))
+  `((div (@ (class "form-row"))
+      (input (@ (type "text")
+                (id "name")
+                (name "name")
+                (required #t)
+                (aria-label "Name")
+                (placeholder "Name")))
+      (input (@ (type "text")
+                (id "subject")
+                (name "subject")
+                (aria-label "Subject")
+                (placeholder "Subject (Optional)"))))
+    (div (@ (class "form-row"))
+         (input (@ (type "text")
+                   (id "url")
+                   (name "url")
+                   (aria-label "Website URL")
+                   (placeholder "Website (https://...)"))))
+    (textarea (@ (id "coment")
+                 (name "comment")
+                 (placeholder "Write your comment here...")
+                 (rows "4")
+                 (required "")
+                 (aria-label "Comment body")))))
 
 (define* (render-comment-captcha-field #:optional (captcha-id "") captcha-image
                                        #:key hidden)
-  `(fieldset ,(if hidden
-                  '(@ (id "comment-captcha") (hidden "#t"))
-                  '(@ (id "comment-captcha")))
-    (legend "Captcha")
-    (div (@ (id "captcha-challenge-primary"))
-     (label (@ (for "captcha")) "Please evaluate the following definite integral:")
-     (img (@ (id "captcha-image")
-             (src ,(if captcha-image
-                       (format #f "data:image/jpeg;charset=utf-8;base64,~a"
-                               (base64-encode captcha-image))
-                       ""))))
-     (input (@ (type "text") (id "captcha") (name "captcha") (size 24))))
-    (button (@ (id "pow-trigger") (hidden #t))
-            "Too hard? (Or unable to see the challenge?) Click here.")
-    (input (@ (autocomplete "off") (type "text") (id "captcha-id") (name "captcha-id") (hidden #t) (value ,captcha-id)))
-    (input (@ (autocomplete "off") (type "text") (id "captcha-alt") (name "captcha-alt") (hidden #t)))
-    (input (@ (autocomplete "off") (type "text") (id "captcha-alt-id") (name "captcha-alt-id") (hidden #t)))
-    (input (@ (type "submit") (id "submit-form") (value "Submit")))))
+  `((div (@ (id "captcha-container"))
+      (div (@ (id "captcha-image-wrapper")))
+      (div (@ (id "captcha-input-wrapper"))
+        (input (@ (type "text")
+                  (id "captcha-solution")
+                  (name "captcha")
+                  (required "true")))
+        (button (@ (id "captcha-challenge-trigger")
+                 (type "button"))
+          "Fetch Captcha"))
+      (input (@ (autocomplete "off") (type "text") (hidden #t)
+                (id "captcha-id") (name "captcha-id") (value ,captcha-id)))
+      (input (@ (autocomplete "off") (type "text") (hidden #t)
+                (id "captcha-alt") (name "captcha-alt")))
+      (input (@ (autocomplete "off") (type "text") (hidden #t)
+                (id "captcha-alt-id") (name "captcha-alt-id")))
+      (div (@ (id "captcha-alternative-wrapper")
+              (hidden "true"))
+        (p "If you can't solve this integral, click this button to run an
+alternative proof-of-work captcha.")
+        (button (@ (type "button")
+                   (id "proof-of-work-trigger")
+                   (aria-label "Automatic Captcha Button"))
+          "Calculate Proof-of-Work For Me")))))
 
 (define (render-static-comment-form slug captcha-id captcha-image)
   `(div (@ (id "comment-form"))
@@ -79,27 +96,17 @@
      ,(script "proof-of-work.js")))
 
 (define (render-dynamic-comment-form slug)
-  `(div (@ (id "comment-form"))
-     (h3 (@ (id "comment-form-header")) "Comment form")
-     (form (@ (id "comment-input") (action "/api/comment") (method "post"))
-       (input (@ (autocomplete "off")
-                 (type "text")
-                 (name "slug")
-                 (hidden #t)
-                 (value ,slug)))
-       (input (@ (autocomplete "off")
-                 (type "text")
-                 (name "reply-to")
-                 (id "reply-to")
-                 (hidden #t)
-                 (value "")))
-       ,(render-comment-field)
-       (fieldset (@ (id "captcha-trigger-block"))
-        (legend "Captcha")
-        (label "You need to complete a captcha to write a comment.")
-        (button (@ (id "captcha-challenge-trigger"))
-                "Click here to generate a captcha challenge"))
-       ,(render-comment-captcha-field #:hidden #t))
+  `(form (@ (id "comment-form") (action "/api/comment")
+            (method "post") (hidden "true"))
+     ;; Hidden fields.
+     (input (@ (autocomplete "off") (type "text") (hidden #t)
+               (name "slug") (value ,slug)))
+     (input (@ (autocomplete "off") (type "text") (hidden #t)
+               (name "reply-to") (id "reply-to") (value "")))
+     ,@(render-comment-field)
+     ,@(render-comment-captcha-field)
+     (button (@ (type "submit") (style "margin-top: 10px;"))
+             "Submit Comment")
      ,(script "dynamic-comment-form.js")
      ,(script "proof-of-work.js")))