diff --git a/static/css/style.css b/static/css/style.css index e9aa7c4..e6451f6 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -61,6 +61,16 @@ .links a { color: white !important; } + .inoutdiv p { + color: white !important; + } + .inoutdiv a { + color: #969696 !important; + } + .inoutdiv input { + color: white; + background-color: #202124; + } } p, h1, h2, h3, h4, h5, h6 { @@ -363,7 +373,13 @@ body { margin-bottom: 10px; } +.sessionDiv { + max-height: 255px; + overflow-y: auto; +} + .sessionDiv div { + position: relative; background-color: var(--session-color); border-radius: 8px; margin-bottom: 5px; @@ -401,7 +417,7 @@ body { } .inoutdiv input { - width: calc(100% - 20px); + width: calc(100% - 120px); height: 30px; margin-bottom: 10px; padding-left: 10px; @@ -417,6 +433,7 @@ body { background-color: var(--theme-color); color: white; padding: 10px; + margin-right: 5px; padding-left: 20px; padding-right: 20px; @@ -432,7 +449,7 @@ body { } .hidden { - display: none; + display: none !important; } .w100 { diff --git a/static/js/login.js b/static/js/login.js index c6982dd..a25704d 100644 --- a/static/js/login.js +++ b/static/js/login.js @@ -13,81 +13,134 @@ let usernameBox = document.getElementById("usernameBox") let passwordBox = document.getElementById("passwordBox") let statusBox = document.getElementById("statusBox") let signupButton = document.getElementById("signupButton") +let inputNameBox = document.getElementById("inputNameBox") +let backButton = document.getElementById("backButton") + +usernameBox.classList.remove("hidden") +inputNameBox.innerText = "username:" + +let currentInputType = 0 + +function showInput(inputType) { + if (inputType == 0) { + usernameBox.classList.remove("hidden") + passwordBox.classList.add("hidden") + backButton.classList.add("hidden") + inputNameBox.innerText = "username:" + statusBox.innerText = "log in to your burgernotes account!" + currentInputType = 0 + } else if (inputType == 1) { + usernameBox.classList.add("hidden") + passwordBox.classList.remove("hidden") + backButton.classList.remove("hidden") + inputNameBox.innerText = "password:" + currentInputType = 1 + } else if (inputType == 2) { + usernameBox.classList.add("hidden") + passwordBox.classList.add("hidden") + signupButton.classList.add("hidden") + backButton.classList.add("hidden") + inputNameBox.classList.add("hidden") + inputNameBox.innerText = "password:" + currentInputType = 2 + } +} function showElements(yesorno) { if (!yesorno) { usernameBox.classList.add("hidden") passwordBox.classList.add("hidden") signupButton.classList.add("hidden") + backButton.classList.add("hidden") + inputNameBox.classList.add("hidden") + showInput(currentInputType) } else { usernameBox.classList.remove("hidden") passwordBox.classList.remove("hidden") signupButton.classList.remove("hidden") + backButton.classList.remove("hidden") + inputNameBox.classList.remove("hidden") + showInput(currentInputType) } } signupButton.addEventListener("click", (event) => { - async function doStuff() { - let username = usernameBox.value - let password = passwordBox.value - - if (username == "") { + if (passwordBox.classList.contains("hidden")) { + if (usernameBox.value == "") { statusBox.innerText = "username required" return + } else { + statusBox.innerText = "welcome back, " + usernameBox.value + "!" } - if (password == "") { - statusBox.innerText = "password required" - return - } + showInput(1) + } else { + async function doStuff() { + let username = usernameBox.value + let password = passwordBox.value - showElements(false) - statusBox.innerText = "welcome back!" - - async function hashpass(pass) { - const key = await hashwasm.argon2id({ - password: pass, - salt: await hashwasm.sha512(pass), - parallelism: 1, - iterations: 256, - memorySize: 512, - hashLength: 32, - outputType: "encoded" - }); - return key - }; - - fetch("/api/login", { - method: "POST", - body: JSON.stringify({ - username: username, - password: await hashpass(password) - }), - headers: { - "Content-type": "application/json; charset=UTF-8" + if (password == "") { + statusBox.innerText = "password required" + return } - }) - .then((response) => response) - .then((response) => { - async function doStuff() { - let responseData = await response.json() - if (response.status == 200) { - localStorage.setItem("DONOTSHARE-secretkey", responseData["key"]) - localStorage.setItem("DONOTSHARE-password", await hashwasm.sha512(password)) - window.location.href = "/app" - } - else if (response.status == 401) { - statusBox.innerText = "wrong username or password :(" - showElements(true) - } - else { - statusBox.innerText = "something went wrong! (error code: " + response.status + ")" - showElements(true) - } + showInput(2) + showElements(true) + statusBox.innerText = "signing in.." + + async function hashpass(pass) { + const key = await hashwasm.argon2id({ + password: pass, + salt: await hashwasm.sha512(pass), + parallelism: 1, + iterations: 256, + memorySize: 512, + hashLength: 32, + outputType: "encoded" + }); + return key + }; + + fetch("/api/login", { + method: "POST", + body: JSON.stringify({ + username: username, + password: await hashpass(password) + }), + headers: { + "Content-type": "application/json; charset=UTF-8" } - doStuff() - }); + }) + .then((response) => response) + .then((response) => { + async function doStuff() { + let responseData = await response.json() + if (response.status == 200) { + localStorage.setItem("DONOTSHARE-secretkey", responseData["key"]) + localStorage.setItem("DONOTSHARE-password", await hashwasm.sha512(password)) + + window.location.href = "/app" + } + else if (response.status == 401) { + statusBox.innerText = "wrong username or password :(" + showInput(1) + showElements(true) + } + else { + statusBox.innerText = "something went wrong! (error code: " + response.status + ")" + showInput(1) + showElements(true) + } + } + doStuff() + }); + } + doStuff() } - doStuff() -}); \ No newline at end of file +}); + +backButton.addEventListener("click", (event) => { + showInput(0) +}); + +showInput(0) \ No newline at end of file diff --git a/templates/login.html b/templates/login.html index 951eced..84f9c13 100644 --- a/templates/login.html +++ b/templates/login.html @@ -14,13 +14,13 @@

log in

-

log in to your burgernotes account!

- - -

+ + + +

don't have an account? if so, create one here!

- + \ No newline at end of file