From 400082d07b64673abcfed61e79c84451db7c8361 Mon Sep 17 00:00:00 2001
From: Tiago <70700766+tiagorangel1@users.noreply.github.com>
Date: Sat, 10 May 2025 09:50:31 +0100
Subject: [PATCH] small improvements and fixes to standalone mode

---
 standalone/public/index.html | 22 ++++-----
 standalone/public/lock.html  | 96 ++++++++++++++++--------------------
 standalone/public/test.html  | 36 ++++++--------
 standalone/src/index.js      |  1 +
 4 files changed, 70 insertions(+), 85 deletions(-)

diff --git a/standalone/public/index.html b/standalone/public/index.html
index 3e856a5..4426bbc 100644
--- a/standalone/public/index.html
+++ b/standalone/public/index.html
@@ -7,9 +7,9 @@
     <link rel="icon" href="./public/logo.png" />
     <style>
       * {
-        font-family: system, -apple-system, "BlinkMacSystemFont",
-          ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI",
-          "Helvetica Neue", "Lucida Grande", "Ubuntu", "arial", sans-serif;
+        font-family: system, -apple-system, "BlinkMacSystemFont", ".SFNSText-Regular",
+          "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", "Ubuntu",
+          "arial", sans-serif;
         box-sizing: border-box;
       }
 
@@ -78,7 +78,7 @@
         border-radius: 6px;
         border: none;
         color: white;
-        background: #0076D8;
+        background: #0076d8;
         background-origin: border-box;
         user-select: none;
         -webkit-user-select: none;
@@ -91,8 +91,7 @@
 
       button.btn:focus {
         box-shadow: inset 0px 0.8px 0px -0.25px rgba(0, 118, 216, 0.2),
-          0px 0.5px 1.5px rgba(54, 122, 246, 0.25),
-          0px 0px 0px 3.5px rgba(0, 118, 216, 0.5);
+          0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(0, 118, 216, 0.5);
         outline: 0;
       }
 
@@ -132,9 +131,9 @@
         padding: 20px;
         position: relative;
         animation: dialog-in 0.2s;
-        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
-          rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
-          rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px,
+          rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px,
+          rgba(0, 0, 0, 0.09) 0px -3px 5px;
       }
 
       @keyframes dialog-in {
@@ -228,8 +227,7 @@
 
       .keys .copy-key:focus {
         box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2),
-          0px 0.5px 1.5px rgba(54, 122, 246, 0.25),
-          0px 0px 0px 3.5px rgba(255, 255, 255, 0.1);
+          0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(255, 255, 255, 0.1);
         outline: 0;
       }
 
@@ -294,7 +292,7 @@
     <nav>
       <img src="./public/logo.png" alt="Cap logo" class="logo" />
       <h1>Cap</h1>
-      <a href="/internal/auth/logout" class="logout"> Logout </a>
+      <a href="/internal/auth/logout" class="logout">Logout</a>
     </nav>
 
     <div class="title">
diff --git a/standalone/public/lock.html b/standalone/public/lock.html
index a7d2aa7..0d86ce4 100644
--- a/standalone/public/lock.html
+++ b/standalone/public/lock.html
@@ -8,8 +8,8 @@
     <style>
       * {
         box-sizing: border-box;
-        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-          Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
+          Cantarell, Helvetica Neue, sans-serif;
       }
       body {
         text-align: center;
@@ -104,8 +104,7 @@
 
       .submit:focus {
         box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2),
-          0px 0.5px 1.5px rgba(54, 122, 246, 0.25),
-          0px 0px 0px 3.5px rgba(255, 255, 255, 0.5);
+          0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(255, 255, 255, 0.5);
         outline: 0;
       }
 
@@ -156,12 +155,7 @@
       </div>
       <label for="key">Admin key</label>
       <div class="password-wrapper">
-        <input
-          type="password"
-          name="password"
-          placeholder="••••••••••••••"
-          class="password"
-        />
+        <input type="password" name="password" placeholder="••••••••••••••" class="password" />
         <button title="Show/hide password" class="showhide-password" type="button">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -193,55 +187,51 @@
   <script>
     document.querySelector("input").focus();
 
-    document
-      .querySelector("form")
-      .addEventListener("submit", async function (e) {
-        e.preventDefault();
+    document.querySelector("form").addEventListener("submit", async function (e) {
+      e.preventDefault();
 
-        const password = document.querySelector("input[name=password]").value;
+      const password = document.querySelector("input[name=password]").value;
 
-        document.querySelector("button[type=submit]").disabled = true;
+      document.querySelector("button[type=submit]").disabled = true;
 
-        const { success } = await (
-          await fetch("/internal/auth", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              password,
-            }),
-          })
-        ).json();
+      const { success } = await (
+        await fetch("/internal/auth", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            password,
+          }),
+        })
+      ).json();
 
-        if (success) {
-          document.querySelector("p.err").style.display = "none";
-          window.location.href = "/";
-          return;
-        }
+      if (success) {
+        document.querySelector("p.err").style.display = "none";
+        window.location.href = "/";
+        return;
+      }
 
-        document.querySelector("p.err").style.display = "block";
-        document.querySelector("p.err").innerText =
-          "Incorrect admin key. Please try again.";
-        document.querySelector("input[name=password]").value = "";
-      });
+      document.querySelector("button[type=submit]").disabled = false;
+      document.querySelector("p.err").style.display = "block";
+      document.querySelector("p.err").innerText = "Incorrect admin key. Please try again.";
+      document.querySelector("input[name=password]").value = "";
+    });
 
-    document
-      .querySelector(".showhide-password")
-      .addEventListener("click", () => {
-        const passwordInput = document.querySelector("input[name=password]");
-        const showhideButton = document.querySelector(".showhide-password");
-        passwordInput.classList.toggle("show-password");
+    document.querySelector(".showhide-password").addEventListener("click", () => {
+      const passwordInput = document.querySelector("input[name=password]");
+      const showhideButton = document.querySelector(".showhide-password");
+      passwordInput.classList.toggle("show-password");
 
-        if (passwordInput.type === "password") {
-          passwordInput.type = "text";
-          passwordInput.placeholder = "";
-          showhideButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`;
-        } else {
-          passwordInput.type = "password";
-          passwordInput.placeholder = "••••••••••••••";
-          showhideButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`;
-        }
-      });
+      if (passwordInput.type === "password") {
+        passwordInput.type = "text";
+        passwordInput.placeholder = "";
+        showhideButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`;
+      } else {
+        passwordInput.type = "password";
+        passwordInput.placeholder = "••••••••••••••";
+        showhideButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`;
+      }
+    });
   </script>
 </html>
diff --git a/standalone/public/test.html b/standalone/public/test.html
index c1634f7..19bbb6f 100644
--- a/standalone/public/test.html
+++ b/standalone/public/test.html
@@ -3,12 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Challenge Tester (Visual Input)</title>
+    <title>Challenge tester</title>
     <style>
       * {
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-          Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-          sans-serif;
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+          Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
       }
       body {
         font-family: sans-serif;
@@ -81,18 +80,13 @@
   <body>
     <div id="inputArea">
       <label for="keyIdInput">Key ID:</label>
-      <input
-        type="text"
-        id="keyIdInput"
-        placeholder="Enter your Key ID"
-        required
-      />
+      <input type="text" id="keyIdInput" placeholder="e.g. 363908a53261" required />
 
-      <label for="secretKeyInput">Secret Key:</label>
+      <label for="secretKeyInput">Secret key:</label>
       <input
         type="password"
         id="secretKeyInput"
-        placeholder="Enter your Secret Key"
+        placeholder="e.g. 5dcddeaba58972b52c7afe750..."
         required
       />
 
@@ -177,14 +171,16 @@
       async function validateToken(keyId, secretKey, token) {
         log(`Solved successfully, validating token...`);
 
-        const { success } = await (await fetch(`/${keyId}/siteverify`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            secret: secretKey,
-            response: token,
-          }),
-        })).json();
+        const { success } = await (
+          await fetch(`/${keyId}/siteverify`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              secret: secretKey,
+              response: token,
+            }),
+          })
+        ).json();
         log(`Token: ${token}`);
         log(`Token validation response: ${success}`);
       }
diff --git a/standalone/src/index.js b/standalone/src/index.js
index 286000f..c62b693 100644
--- a/standalone/src/index.js
+++ b/standalone/src/index.js
@@ -334,4 +334,5 @@ new Elysia()
   })
   .listen(3000);
 
+console.log(`Cap standalone running on http://localhost:3000`);
 init();