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,36 +13,80 @@ 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) => {
+    if (passwordBox.classList.contains("hidden")) {
+        if (usernameBox.value == "") {
+            statusBox.innerText = "username required"
+            return
+        } else {
+            statusBox.innerText = "welcome back, " + usernameBox.value + "!"
+        }
+        showInput(1)
+    } else {
         async function doStuff() {
             let username = usernameBox.value
             let password = passwordBox.value
 
-        if (username == "") {
-            statusBox.innerText = "username required"
-            return
-        }
             if (password == "") {
                 statusBox.innerText = "password required"
                 return
             }
 
-        showElements(false)
-        statusBox.innerText = "welcome back!"
+            showInput(2)
+            showElements(true)
+            statusBox.innerText = "signing in.."
 
             async function hashpass(pass) {
                 const key = await hashwasm.argon2id({
@@ -79,10 +123,12 @@ signupButton.addEventListener("click", (event) => {
                         }
                         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)
                         }
                     }
@@ -90,4 +136,11 @@ signupButton.addEventListener("click", (event) => {
                 });
         }
         doStuff()
+    }
 });
+
+backButton.addEventListener("click", (event) => {
+    showInput(0)
+});
+
+showInput(0)

templates/login.html

@@ -14,11 +14,11 @@
 <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">
-        <input id="passwordBox" type="password" placeholder="Password">
-        <button id="signupButton">log in</button><br><br>
+        <span id="inputNameBox" style="margin-right: 10px;"></span><input id="usernameBox" class="hidden" type="text" placeholder="Enter your username">
+        <input id="passwordBox" class="hidden" type="password" placeholder="Enter your password">
+        <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>