510 lines
No EOL
18 KiB
HTML
510 lines
No EOL
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>Miarven - Login</title>
|
|
<link rel="stylesheet" href="../style.css">
|
|
<link rel="icon" type="image/svg+xml" href="../favicon.svg">
|
|
<script src="../crypto-pq.js"></script>
|
|
<style>
|
|
html {
|
|
font-size: max(17px, calc(100vw / 100));
|
|
}
|
|
|
|
body, main {
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: var(--main-bg-color);
|
|
display: flex;
|
|
height: 100dvh;
|
|
margin: 0;
|
|
}
|
|
|
|
.auth-card {
|
|
background-color: rgba(255, 255, 255, 0.015);
|
|
border: var(--border-width) solid var(--light-border-color);
|
|
border-radius: 1.2rem;
|
|
width: 100%;
|
|
max-width: 24rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.auth-container {
|
|
display: flex;
|
|
width: 300%;
|
|
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
|
|
}
|
|
|
|
.auth-box {
|
|
width: 33.333%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 2.5rem 2rem;
|
|
}
|
|
|
|
.show-register {
|
|
transform: translateX(-33.333%);
|
|
}
|
|
|
|
.show-captcha {
|
|
transform: translateX(-66.666%);
|
|
}
|
|
|
|
.captcha-img {
|
|
width: 100%;
|
|
background-color: #222;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: var(--border-width) solid var(--light-border-color);
|
|
border-radius: 1.2rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.captcha-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.auth-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.auth-header h1 {
|
|
font-size: 2.4rem;
|
|
font-weight: 800;
|
|
margin-bottom: 0.3rem;
|
|
letter-spacing: -0.05rem;
|
|
}
|
|
|
|
.auth-header p {
|
|
opacity: 0.5;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.1rem;
|
|
}
|
|
|
|
|
|
|
|
input {
|
|
width: 100%;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
|
|
.submit-button {
|
|
margin: 1.5rem 0 0 0 !important;
|
|
width: 100%;
|
|
justify-content: center;
|
|
background-color: var(--text-color);
|
|
color: var(--main-bg-color);
|
|
font-weight: 800;
|
|
border: none;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
|
|
|
|
.footer-links {
|
|
text-align: center;
|
|
margin-top: 2rem;
|
|
font-size: 0.9rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.footer-link-toggle {
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
transition: opacity 0.2s ease;
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.footer-link-toggle:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.footer-link-toggle strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.footer-link-toggle:hover strong {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<loading>
|
|
<div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
|
|
<img src="../favicon.svg" style="width: 6rem">
|
|
<p id="loadingstatus"></p>
|
|
</div>
|
|
</loading>
|
|
<main style="display: none;">
|
|
<div class="auth-card">
|
|
<div class="auth-container" id="auth-container">
|
|
|
|
<div class="auth-box" id="login-box">
|
|
<div class="auth-header">
|
|
<h1>Larpix</h1>
|
|
<p><blah>title.sign.in.to</blah></p>
|
|
</div>
|
|
|
|
<form id="form-login">
|
|
<div class="input-group">
|
|
<label for="login-host"><blah>title.server.host</blah></label>
|
|
<input type="text" id="login-host" placeholder="example.com" autocomplete="url" onchange="loginHostChanged()">
|
|
<p class="mininote serverstatus"><blah>loading.connecting</blah></p>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="login-username"><blah>title.username</blah></label>
|
|
<input type="text" id="login-username" placeholder="{blah(placeholder.username)}" autocomplete="username">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="login-password"><blah>title.password</blah></label>
|
|
<input type="password" id="login-password" placeholder="••••••••" autocomplete="current-password">
|
|
</div>
|
|
|
|
<button type="submit" class="submit-button blah">title.sign.in</button>
|
|
</form>
|
|
|
|
<div class="footer-links">
|
|
<span class="footer-link-toggle" id="to-register">
|
|
<blah>title.new.here.?</blah> <strong class="blah">title.create.an.account</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="auth-box" id="register-box">
|
|
<div class="auth-header">
|
|
<h1><blah>join.larpix</blah></h1>
|
|
<p><blah>title.create.new.account</blah></p>
|
|
</div>
|
|
|
|
<form id="form-register">
|
|
<div class="input-group">
|
|
<label for="reg-host"><blah>title.server.host</blah></label>
|
|
<input type="text" id="reg-host" placeholder="example.com" autocomplete="url" onchange="regHostChanged()">
|
|
<p class="mininote serverstatus"><blah>loading.connecting</blah></p>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="reg-username"><blah>title.username</blah></label>
|
|
<input type="text" id="reg-username" placeholder="{blah(placeholder.username)}" autocomplete="username">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="reg-password"><blah>title.password</blah></label>
|
|
<input type="password" id="reg-password" placeholder="••••••••" autocomplete="new-password">
|
|
<p class="red mininote"><blah>notice.use.strong.pass</blah></p>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="reg-confirm"><blah>title.confirm.password</blah></label>
|
|
<input type="password" id="reg-confirm" placeholder="••••••••" autocomplete="new-password">
|
|
</div>
|
|
|
|
<button type="submit" class="submit-button blah" id="register-button">title.sign.up</button>
|
|
</form>
|
|
|
|
<div class="footer-links">
|
|
<span class="footer-link-toggle" id="to-login">
|
|
<blah>title.already.registered.?</blah> <strong class="blah">title.back.to.login</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="auth-box" id="captcha-box">
|
|
<div class="auth-header">
|
|
<h1><blah>title.verify</blah></h1>
|
|
<p><blah>title.captcha.desc</blah></p>
|
|
</div>
|
|
<div class="captcha-img">
|
|
<img src="" alt="Captcha" id="captcha-image">
|
|
</div>
|
|
<form id="form-captcha">
|
|
<div class="input-group">
|
|
<label for="captcha-input"><blah>title.captcha.code</blah></label>
|
|
<input type="text" id="captcha-input" placeholder="{blah(placeholder.captcha.code)}" autocomplete="off">
|
|
|
|
</div>
|
|
<div class="input-group" id="regkey-group">
|
|
<label for="regkey-input"><blah>title.invitation.code</blah></label>
|
|
<input type="text" id="regkey-input" placeholder="{blah(placeholder.invitation.code)}" autocomplete="off">
|
|
</div>
|
|
<button type="submit" class="submit-button blah">title.verify</button>
|
|
</form>
|
|
<div class="footer-links">
|
|
<span class="footer-link-toggle" id="back-to-reg">
|
|
<strong class="blah">title.back.to.register</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
<script src="../main.js"></script>
|
|
<script>
|
|
|
|
const container = document.getElementById('auth-container');
|
|
|
|
|
|
const toRegister = document.getElementById('to-register');
|
|
const toLogin = document.getElementById('to-login');
|
|
const backToReg = document.getElementById('back-to-reg');
|
|
|
|
|
|
const formLogin = document.getElementById('form-login');
|
|
const formRegister = document.getElementById('form-register');
|
|
const formCaptcha = document.getElementById('form-captcha');
|
|
|
|
const registerHost = document.getElementById("reg-host");
|
|
const registerUsername = document.getElementById("reg-username");
|
|
const registerPassword = document.getElementById("reg-password");
|
|
const registerPasswordConfirm = document.getElementById("reg-password");
|
|
const loginHost = document.getElementById("login-host");
|
|
const loginUsername = document.getElementById("login-username");
|
|
const loginPassword = document.getElementById("login-password");
|
|
const captchaCode = document.getElementById("captcha-input");
|
|
const regKeyInput = document.getElementById("regkey-input");
|
|
|
|
const registerButton = document.getElementById("register-button");
|
|
const regKeyGroup = document.getElementById("regkey-group");
|
|
|
|
|
|
async function start() {
|
|
updateLoadingStatus("loading.loading");
|
|
//
|
|
updateLoadingStatus("loading.done");
|
|
await loadingFadeOut();
|
|
}
|
|
|
|
|
|
|
|
toRegister.addEventListener('click', () => {
|
|
container.className = 'auth-container show-register';
|
|
});
|
|
|
|
toLogin.addEventListener('click', () => {
|
|
container.className = 'auth-container';
|
|
});
|
|
|
|
backToReg.addEventListener('click', () => {
|
|
container.className = 'auth-container show-register';
|
|
});
|
|
|
|
|
|
formLogin.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await updateProtocolAndUrl(loginHost.value);
|
|
let res = await Auth(loginUsername.value, loginPassword.value);
|
|
|
|
if (res.startsWith("success:"))
|
|
{
|
|
let parts = res.split("|");
|
|
showBlahNotification(parts[0]);
|
|
await delay(800);
|
|
localStorage.setItem("username", loginUsername.value);
|
|
localStorage.setItem("password", loginPassword.value);
|
|
localStorage.setItem("host", loginHost.value);
|
|
if (parts.length > 1) {
|
|
localStorage.setItem("id", parts[1]);
|
|
}
|
|
|
|
await loadingFadeIn();
|
|
|
|
window.location.href = "../";
|
|
}
|
|
else
|
|
{
|
|
showBlahNotification(res);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.log(error);
|
|
showBlahNotification("error:something.wrong.mayb.pass");
|
|
container.className = 'auth-container';
|
|
}
|
|
});
|
|
|
|
formRegister.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
captchaCode.value = "";
|
|
regKeyInput.value = "";
|
|
|
|
|
|
|
|
if (!registerUsername.value || registerUsername.value.trim() === '') {
|
|
showBlahNotification("error:username.cant.empty");
|
|
container.className = 'auth-container show-register';
|
|
return;
|
|
}
|
|
if (!registerPassword.value || registerPassword.value.trim() === '') {
|
|
showBlahNotification("error:password.cant.empty");
|
|
container.className = 'auth-container show-register';
|
|
return;
|
|
}
|
|
if (registerPassword.value != registerPasswordConfirm.value) {
|
|
showBlahNotification("error:passwords.not.match");
|
|
container.className = 'auth-container show-register';
|
|
return;
|
|
}
|
|
|
|
await updateProtocolAndUrl(registerHost.value);
|
|
|
|
let dataarray = keyDataFromServerJson(await fetchAsync(`${url}/createaccount?step=init`));
|
|
var sharedkey = await calcHybridSharedKeyClient(dataarray[0], dataarray[1]);
|
|
sharedpvkey = sharedkey[2];
|
|
createId = dataarray[2];
|
|
const captchaimage = await fetch(`${url}/createaccount?step=register`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
pubX25519: sharedkey[0],
|
|
ciphertextMlKem: sharedkey[1],
|
|
idKey: createId,
|
|
username: await encrypt(registerUsername.value, sharedpvkey),
|
|
password: await encrypt(await hashSHA3_512(registerPassword.value), sharedpvkey)
|
|
})
|
|
});
|
|
const clone = captchaimage.clone();
|
|
const res = await captchaimage.text();
|
|
try {
|
|
const imageBlob = await clone.blob();
|
|
if (!imageBlob.type.startsWith("image/")) {
|
|
throw new Error();
|
|
}
|
|
const imageObjectURL = URL.createObjectURL(imageBlob);
|
|
document.getElementById('captcha-image').src = imageObjectURL;
|
|
container.className = 'auth-container show-captcha';
|
|
} catch (error) {
|
|
console.log(error);
|
|
if (res.length > 64 || res.length <= 1) {
|
|
throw new Error();
|
|
}
|
|
showBlahNotification(res);
|
|
container.className = 'auth-container show-register';
|
|
}
|
|
|
|
} catch (error) {
|
|
console.log(error);
|
|
showBlahNotification("error:something.wrong");
|
|
container.className = 'auth-container show-register';
|
|
}
|
|
});
|
|
|
|
formCaptcha.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
|
|
|
|
const captchaValue = captchaCode.value;
|
|
if (captchaValue) {
|
|
let res = await fetchPost(`${url}/createaccount?step=finish`, JSON.stringify({
|
|
idKey: createId,
|
|
captcha: captchaValue,
|
|
regKey: regKeyInput.value
|
|
}));
|
|
if (res.length > 64 || res.length <= 1) {
|
|
throw new Error();
|
|
}
|
|
if (res.startsWith("success")) {
|
|
showBlahNotification(res);
|
|
await delay(1000);
|
|
|
|
let resolvedId = await fetchAsync(`${url}/nametoid?u=${registerUsername.value}`);
|
|
if (resolvedId && !resolvedId.startsWith("error:")) {
|
|
localStorage.setItem("id", resolvedId.split(":")[0]);
|
|
}
|
|
|
|
localStorage.setItem("username", registerUsername.value);
|
|
localStorage.setItem("password", registerPassword.value);
|
|
localStorage.setItem("host", registerHost.value);
|
|
|
|
window.location.href = "../";
|
|
|
|
} else {
|
|
showBlahNotification(res);
|
|
container.className = 'auth-container show-register';
|
|
}
|
|
}
|
|
} catch (error) {
|
|
showBlahNotification("error:something.wrong");
|
|
container.className = 'auth-container show-register';
|
|
}
|
|
});
|
|
|
|
async function regHostChanged()
|
|
{
|
|
loginHost.value = registerHost.value;
|
|
await updateLoginForm(registerHost.value);
|
|
}
|
|
async function loginHostChanged()
|
|
{
|
|
registerHost.value = loginHost.value;
|
|
await updateLoginForm(loginHost.value);
|
|
}
|
|
async function updateLoginForm(host)
|
|
{
|
|
try {
|
|
await updateProtocolAndUrl(host);
|
|
let serverInfo = await getServerInfo(host);
|
|
if (serverInfo["registration"] == "disabled")
|
|
{
|
|
registerButton.innerHTML = "Registration disabled";
|
|
}
|
|
else if (serverInfo["registration"] == "enabled")
|
|
{
|
|
registerButton.innerHTML = "Sign up";
|
|
regKeyGroup.style.display = "";
|
|
}
|
|
else if (serverInfo["registration"] == "code")
|
|
{
|
|
regKeyGroup.style.display = "none";
|
|
}
|
|
setServerStatus("Server pinged", "green");
|
|
}
|
|
catch(error)
|
|
{
|
|
console.log(error);
|
|
setServerStatus("Can't ping this server", "red");
|
|
}
|
|
}
|
|
|
|
function setServerStatus(status, color)
|
|
{
|
|
let elements = document.getElementsByClassName("serverstatus");
|
|
for (let i = 0;i < elements.length;i++) {
|
|
elements[i].className = `mininote serverstatus ${status} ${color}`;
|
|
elements[i].innerHTML = status;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<script src="../userscript.js"></script> |