Refine join captcha layout

kkkmeet-server.el

@@ -135,7 +135,7 @@
 
 (defun kkkmeet-server--captcha-accepted-p (value)
   "Return non-nil when VALUE matches the configured captcha passphrase."
-  (equal (or value "") (kkkmeet-server--captcha-passphrase)))
+  (string-equal-ignore-case (or value "") (kkkmeet-server--captcha-passphrase)))
 
 (defun kkkmeet-server--captcha-svg ()
   "Return an SVG captcha image for the configured passphrase."

public/index.html

@@ -150,15 +150,16 @@
     <dialog id="name-dialog" class="name-dialog">
       <form id="initial-name-form" class="initial-name-form">
         <h2 id="name-dialog-title">Choose your name</h2>
-        <div class="join-fields">
-          <input
-            id="initial-name-input"
-            autocomplete="name"
-            maxlength="48"
-            placeholder="Your name"
-            required
-          />
-          <div id="captcha-control" class="captcha-control">
+        <input
+          id="initial-name-input"
+          autocomplete="name"
+          maxlength="48"
+          placeholder="Your name"
+          required
+        />
+        <div id="captcha-control" class="captcha-control">
+          <span class="captcha-label">Prove that you are not a bot</span>
+          <div class="captcha-row">
             <canvas id="captcha-canvas" width="160" height="42" aria-label="Captcha passphrase"></canvas>
             <input
               id="captcha-input"

public/styles.css

@@ -98,33 +98,34 @@ h1 {
   letter-spacing: 0;
 }
 
+.initial-name-form input,
 .initial-name-form textarea,
 .initial-name-form button {
   width: 100%;
 }
 
-.join-fields {
-  display: grid;
-  grid-template-columns: minmax(160px, 1fr) minmax(240px, 1fr);
-  gap: 12px;
-  align-items: stretch;
-}
-
-.join-fields > input {
-  width: 100%;
-}
-
 .captcha-control {
   display: grid;
-  grid-template-columns: 160px minmax(0, 1fr);
-  gap: 8px;
-  align-items: stretch;
+  gap: 7px;
 }
 
 .captcha-control[hidden] {
   display: none;
 }
 
+.captcha-label {
+  color: #d5dbe3;
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.captcha-row {
+  display: grid;
+  grid-template-columns: 160px minmax(0, 1fr);
+  gap: 8px;
+  align-items: stretch;
+}
+
 .captcha-control canvas {
   width: 160px;
   height: 42px;
@@ -148,8 +149,7 @@ h1 {
 }
 
 @media (max-width: 620px) {
-  .join-fields,
-  .captcha-control {
+  .captcha-row {
     grid-template-columns: 1fr;
   }
 

server.js

@@ -90,7 +90,7 @@ function normalizeClientId(value) {
 }
 
 function captchaAccepted(value) {
-  return String(value || "") === captchaPassphrase;
+  return String(value || "").toLowerCase() === captchaPassphrase.toLowerCase();
 }
 
 function captchaSvg() {