Files
backend/html/register.html

102 lines
4.1 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="en">
<head>
<!-- initialize theme vars
https://coolors.co/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff -->
<!-- initialize externals -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js "></script>
<!-- initialize my stuff -->
<script src="/js/all.min.js"></script>
<script src="/js/main.js"></script>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/pages.css" />
<!-- seo + other things -->
<title>Login | Selenite</title>
<link rel="icon" href="/favicon.ico" />
<script>
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("close").addEventListener("click", () => {
document.getElementById("popup").style.display = "none";
if (document.getElementById("title").innerText == "Registered successfully") {
location.href = "/login";
}
});
document.getElementById("register").addEventListener("click", async () => {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let captcha = document.getElementById("hcaptcha").firstChild.dataset.hcaptchaResponse;
if (!document.getElementById("hcaptcha").firstChild.dataset.hcaptchaResponse) {
document.getElementById("title").innerText = "Failed to register";
document.getElementById("reason").innerText = "You have not done the CAPTCHA. Please complete the CAPTCHA before continuing.";
document.getElementById("popup").style.display = "flex";
return;
}
if (username.length < 17 && username.length > 2 && !/[^a-zA-Z0-9._-]/.test(username)) {
} else {
document.getElementById("title").innerText = "Failed to register";
document.getElementById("reason").innerText = "Your username is invalid. Please make your username within the limits described.";
document.getElementById("popup").style.display = "flex";
return;
}
if (!/^((?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9]).{5,})\S$/.test(password)) {
document.getElementById("title").innerText = "Failed to register";
document.getElementById("reason").innerText = "Your password is invalid. Please make your password within the limits described.";
document.getElementById("popup").style.display = "flex";
return;
}
let data = await (
await fetch("/register", {
method: "POST",
body: JSON.stringify({
username: username,
password: password,
"h-captcha-response": captcha,
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
).json();
console.log(data);
if (data.success) {
document.getElementById("title").innerText = "Registered successfully";
document.getElementById("reason").innerText = `Please save the following, this is required to reset your password.\n\n${data.key}\n\nExit to continue`;
} else {
console.log("Error: ", data.reason);
document.getElementById("title").innerText = "Failed to register";
document.getElementById("reason").innerText = data.reason;
}
document.getElementById("popup").style.display = "flex";
});
});
</script>
</head>
<alerts> </alerts>
<body>
<h2>register..</h2>
<div>
<input type="text" id="username" placeholder="username" />
<p>3-16 characters<br />capital, lowercase, numbers, dash, underscore, and dots allowed</p>
<input type="password" id="password" placeholder="password" />
<p>6+ characters<br />one uppercase, lowercase, and number at least</p>
<div class="h-captcha" id="hcaptcha" data-sitekey="1774ec96-39be-4fb0-9e82-f4c62354b8fa"></div>
<p><a href="/login">already have an account? login here.</a></p>
<button type="submit" value="Submit" id="register">create an account</button>
</div>
<popups>
<div id="popup" style="display: none">
<h1 id="title"></h1>
<p id="reason"></p>
<button id="close">X</button>
</div>
</popups>
</body>
</html>