fix dark mode + changes to login page

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 {

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() {
+    if (passwordBox.classList.contains("hidden")) {
-        let username = usernameBox.value
+        if (usernameBox.value == "") {
-        let password = passwordBox.value
-
-        if (username == "") {
             statusBox.innerText = "username required"
             return
+        } else {
+            statusBox.innerText = "welcome back, " + usernameBox.value + "!"
         }
-        if (password == "") {
+        showInput(1)
-            statusBox.innerText = "password required"
+    } else {
-            return
+        async function doStuff() {
-        }
+            let username = usernameBox.value
+            let password = passwordBox.value
 
-        showElements(false)
+            if (password == "") {
-        statusBox.innerText = "welcome back!"
+                statusBox.innerText = "password required"
-
+                return
-        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"
             }
-        })
-            .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"
+            showInput(2)
-                    }
+            showElements(true)
-                    else if (response.status == 401) {
+            statusBox.innerText = "signing in.."
-                        statusBox.innerText = "wrong username or password :("
+
-                        showElements(true)
+            async function hashpass(pass) {
-                    }
+                const key = await hashwasm.argon2id({
-                    else {
+                    password: pass,
-                        statusBox.innerText = "something went wrong! (error code: " + response.status + ")"
+                    salt: await hashwasm.sha512(pass),
-                        showElements(true)
+                    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()
+});
-});
+
+backButton.addEventListener("click", (event) => {
+    showInput(0)
+});
+
+showInput(0)

templates/login.html

@@ -14,13 +14,13 @@
 <body>
     <div class="inoutdiv">
         <h2 class="w300">log in</h2>
-        <p>log in to your burgernotes account!</p>
         <p id="statusBox"></p>
-        <input id="usernameBox" type="text" placeholder="Username">
+        <span id="inputNameBox" style="margin-right: 10px;"></span><input id="usernameBox" class="hidden" type="text" placeholder="Enter your username">
-        <input id="passwordBox" type="password" placeholder="Password">
+        <input id="passwordBox" class="hidden" type="password" placeholder="Enter your password">
-        <button id="signupButton">log in</button><br><br>
+        <button id="signupButton">next</button>
+        <button id="backButton" class="hidden">back</button><br><br>
         <p>don't have an account? if so, <a href="/signup">create one here!</a></p>
     </div>
-    
+
     <script type="text/javascript" src="/static/js/login.js"></script>
 </body>