diff --git a/login/index.html b/login/index.html index 488c2b8a..1cc1fdbe 100644 --- a/login/index.html +++ b/login/index.html @@ -176,7 +176,8 @@
- + +

Connecting...

@@ -210,7 +211,8 @@
- + +

Connecting...

@@ -229,7 +231,7 @@
- @@ -255,7 +257,7 @@
-
+
@@ -299,6 +301,9 @@ 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"); toRegister.addEventListener('click', () => { container.className = 'auth-container show-register'; @@ -345,6 +350,9 @@ formRegister.addEventListener('submit', async (e) => { e.preventDefault(); try { + captchaCode.value = ""; + regKeyInput.value = ""; + url = `${window.location.protocol}//${registerHost.value}/_larpix`; if (!registerUsername.value || registerUsername.value.trim() === '') { @@ -357,6 +365,11 @@ container.className = 'auth-container show-register'; return; } + if (registerPassword.value != registerPasswordConfirm.value) { + showNotification("Passwords do not match", "error"); + container.className = 'auth-container show-register'; + return; + } let dataarray = keyDataFromServerJson(await fetchAsync(`${url}/createaccount?step=init`)); var sharedkey = await calcCommunicationKeyClient(dataarray[0], dataarray[1], dataarray[2]); sharedpvkey = sharedkey[1]; @@ -401,7 +414,7 @@ try { - const captchaValue = document.getElementById('captcha-input').value; + const captchaValue = captchaCode.value; if (captchaValue) { let res = await fetchPost(`${url}/createaccount?step=finish`, JSON.stringify({ idKey: createId, @@ -433,6 +446,53 @@ 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 { + 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; + } + } + + loginHostChanged(); \ No newline at end of file diff --git a/main.js b/main.js index fc6032b9..2427ad3e 100644 --- a/main.js +++ b/main.js @@ -26,7 +26,7 @@ async function getNonce(username, key) { let nonce; let fetchRes = await (await fetch(`${url}/nextnonce?u=${username}`)).text(); - console.log(key, fetchRes); + try { nonce = await decryptString(fetchRes, key); } @@ -229,20 +229,34 @@ async function fetchPostEnc(url, value) { async function fetchAsync(url) { let response = await fetch(url, { method: "GET", - credentials: "omit", - headers: { - "secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash)) - } + credentials: "omit" }); let data = await response.text(); return data; } +async function fetchAsyncWAuth(url) { + let response = await fetch(url, { + method: "GET", + credentials: "omit", + headers: { + "secret": await encryptWithNonce(passwordHash, passwordHash, await getNonce(username, passwordHash)) + } + }); + + let data = await response.text(); + return data; +} + +async function getServerInfo(host){ + console.log(`${window.location.protocol}//${host}/_larpix/serverinfo`) + return JSON.parse(await fetchAsync(`${window.location.protocol}//${host}/_larpix/serverinfo`)); +} + async function Auth(username, password) { let passwordHash = await hashSHA3_512(password); - console.log(username, password, passwordHash); let response = await fetch(`${url}/auth?u=${username}`, { method: "GET", credentials: "omit", diff --git a/style.css b/style.css index da5d921d..b9a5c896 100644 --- a/style.css +++ b/style.css @@ -20,8 +20,12 @@ .red { color: var(--big-red); } +.green { + color: var(--big-green); +} .mininote { font-size: 80%; + padding: 0 0.5rem; } html { font-size: max(16px, calc(100vw / 120)); @@ -162,35 +166,41 @@ hr { } - #notification-container { position: fixed; - top: 2vw; + top: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 1500; display: flex; flex-direction: column; - gap: 1vw; + gap: 0.8rem; pointer-events: none; align-items: center; } .notification { - background: rgba(10, 10, 14, 0.7); - backdrop-filter: blur(1rem); - -webkit-backdrop-filter: blur(1rem); - border: 0.1rem solid var(--light-border-color); - border-radius: 0.8rem; - padding: 1rem 2rem; + background: rgba(255, 255, 255, 0.015); + backdrop-filter: blur(1.2rem); + -webkit-backdrop-filter: blur(1.2rem); + + border: var(--border-width) solid var(--light-border-color); + border-radius: 0.9rem; + + padding: 0.8rem 1.3rem; color: var(--text-color); - font-size: 1.1rem; + font-size: 1rem; + font-weight: 500; text-align: center; - box-shadow: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.5); + + box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4); opacity: 0; - transform: translateY(-5vw); - transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + transform: translateY(-1rem); + transition: + opacity 0.3s ease, + transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), + background-color 0.2s ease; } .notification.show {