small improvements and fixes to standalone mode
This commit is contained in:
Tiago
@@ -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">
|
||||
|
||||
+43
-53
@@ -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>
|
||||
|
||||
+16
-20
@@ -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}`);
|
||||
}
|
||||
|
||||
@@ -334,4 +334,5 @@ new Elysia()
|
||||
})
|
||||
.listen(3000);
|
||||
|
||||
console.log(`Cap standalone running on http://localhost:3000`);
|
||||
init();
|
||||
|
||||
Reference in New Issue
Block a user