From 4893836149f2d228d8e230dbac6f7edb41e9039f Mon Sep 17 00:00:00 2001
From: Arzumify <jliwin98@hectabit.org>
Date: Sat, 22 Jun 2024 20:37:56 +0100
Subject: [PATCH] A few more design changesg

---
 app/index.html          |  65 ++++++-------
 static/css/style.css    |  42 +++++++--
 static/js/login.js.save | 198 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 265 insertions(+), 40 deletions(-)
 create mode 100644 static/js/login.js.save
diff --git a/app/index.html b/app/index.html
index bd9cddd..070c9ac 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1,66 +1,64 @@
 <!DOCTYPE html>
-<html lang="en">
-
-<head>
+<html lang="en"><head>
     <title>Burgernotes</title>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/style.css" media="">
     <script type="text/javascript" src="/static/js/crypto-js.js"></script>
     <script type="text/javascript" src="/static/js/marked.js"></script>
     <link rel="icon" href="/static/svg/favicon.svg">
 </head>
 
-<noscript>
+<body><noscript>
     <head>
         <meta http-equiv="refresh" content="0; url=/login"/>
     </head>
 </noscript>
 
-<body>
+
     <div class="topBar">
         <p tabindex="0" class="logo" id="burgerButton"></p>
         <button tabindex="0" class="logo hidden" style="font-size: 17px;margin-left: 0;" onclick="handleGesture()" id="backButton"><img src="/static/svg/arrow-back.svg"></button>
         <div class="modernToolbar">
-            <button class="count" id="wordCountBox">0 words</button>
+            <button class="count" id="wordCountBox">6 words</button>
             <button onclick="toggleMarkdown()" class="usernameBox"><div class="vcenter"><img src="/static/svg/markdown.svg"></div></button>
-            <button id="usernameBox" class="usernameBox"><div class="vcenter"><img src="/static/svg/acct-settings.svg"></div></button>
+            <button id="usernameBox" class="usernameBox settings"><div class="vcenter"><img src="/static/svg/acct-settings.svg"></div></button>
         </div>
     </div>
 
     <div id="notesBar" class="notesBar">
-        <button id="newNote" class="newNote" style="margin-left: 5px;">
+    <div class="toolBar">
+        <button id="newNote" class="newNote" style="">
             <div class="vcenter"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/add.svg"></div>
         </button>
-        <button class="newNote" style="margin-left: 37.5px; background-color: var(--bar) !important;">
-    
-        </button>
-        <button id="removeBox" class="newNote">
+        <button id="removeBox" class="newNote deleteNote
+                           ">
             <div class="vcenter"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/delete.svg"></div>
         </button>
+    </div>
         <div id="notesDiv" class="notesDiv">
-            <button class="loadingStuff" id="loadingStuff"></button>
-        </div>
+            
+        <button class="noteButton selected" id="273">The bloody mass..</button><button class="noteButton" id="275">Deadline June 2..</button><button class="noteButton" id="274">Making a point</button><button class="noteButton" id="229">&lt;link rel="styl..</button><button class="noteButton" id="271">Results</button><button class="noteButton" id="22">SSH Keys</button><button class="noteButton" id="249">import os</button><button class="noteButton" id="268">Reminders </button><button class="noteButton" id="224"># Hello</button><button class="noteButton" id="243">Script:</button><button class="noteButton" id="239">; Zonefile for ..</button><button class="noteButton" id="234">Element thing</button><button class="noteButton" id="228">Hoi!!!</button><button class="noteButton" id="217">monero key</button><button class="noteButton" id="203">hi</button><button class="noteButton" id="199">Mirrorbot</button><button class="noteButton" id="183">SuperList</button><button class="noteButton" id="126">NewLine</button><button class="noteButton" id="13">Bank details</button></div>
     </div>
 
-    <div id="optionsCoverDiv" class="optionsCoverDiv hidden">
-        <div id="optionsDiv" class="optionsDiv hidden">
+    <div id="optionsCoverDiv" class="optionsCoverDiv">
+        <div id="optionsDiv" class="optionsDiv">
             <button class="exit" id="exitThing">X</button>
             <h3 class="w300">Your account</h3>
-            <p id="usernameThing">Cannot connect to the server</p>
+            <p id="usernameThing">Username: arzumify</p>
             <div class="section"></div>
             <p>Device settings</p>
             <div class="fontManipulator">
-                <span>Font size</span>
-                <button class="textMinusBox" id="textMinusBox">-</button>
-                <button class="textSizeBox" style="background-color: var(--nonimporant-theme-color) !important;" id="textSizeBox">16px</button>
-                <button class="textPlusBox" id="textPlusBox">+</button>
+  <div class="vAlign"><text>Font size</text></div>
+                <div class="vAlign textMinusBox"><button id="textMinusBox">-</button></div>
+                <div class="vAlign"><text class="textSizeBox" style="" id="textSizeBox">16px</text></div>
+                <div class="vAlign"><button class="textPlusBox" id="textPlusBox">+</button></div>
             </div>
             <div class="section"></div>
             <p>Storage</p>
-            <progress id="storageProgressThing" value="0" max="100"></progress><br>
-            <p id="storageThing">Cannot connect to the server</p>
+            <progress id="storageProgressThing" value="44652" max="25000000"></progress><br>
+            <p id="storageThing">You've used 44.65 KB out of 25 MB</p>
             <div class="section"></div>
             <p>Account managment</p>
             <button id="deleteMyAccountButton"><img src="/static/svg/delete_forever.svg" alt="">Delete account</button>
@@ -85,7 +83,11 @@
             <form><input type="file" id="importFile" style="border: 0;"></form>
         </div>
         <div id="errorDiv" class="optionsDiv hidden">
-            <p id="errorMessageThing"></p>
+            <p id="errorMessageThing">What's new in Burgernotes 2.0?
+Restyled client
+Added changing passwords
+Migrated to OAuth2
+Added importing notes</p>
             <input class="hidden" id="errorInput" type="text" placeholder=""><br>
             <button class="normalButton" id="closeErrorButton">Ok</button>
             <button class="normalButton hidden" id="cancelErrorButton">Cancel</button>
@@ -93,8 +95,8 @@
     </div>
 
     <div class="noteBox" id="noteBoxDiv">
-        <textarea id="noteBox" class="noteBoxText"></textarea>
-        <iframe id="markdown" style="display: none;" sandbox="allow-scripts"></iframe>
+        <textarea id="noteBox" class="noteBoxText" style="font-size: 16px;" placeholder="Type something!"></textarea>
+        <iframe id="markdown" style="display: none;" sandbox="allow-scripts" srcdoc="<!DOCTYPE html><html lang='en'><style>html { height: 100% } pre { white-space: pre-wrap; overflow-wrap: break-word; } body { white-space: pre-wrap; overflow-wrap: break-word; font-family: 'Inter', sans-serif; height: 100%; color: #000000; font-size: 16px; }</style></html>"></iframe>
     </div>
 
     <script type="text/javascript" src="/static/js/main.js"></script>
@@ -104,6 +106,7 @@
         }
         loadingStuff.remove()
     </script>
-</body>
 
-</html>
+
+
+</body><style type="text/css"></style><style type="text/css"></style></html>
diff --git a/static/css/style.css b/static/css/style.css
index 2cc7bcf..3da73d7 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -221,8 +221,8 @@ body {
 }
 
 .topBar .modernToolbar {
-    margin-left: auto;
-    margin-right: 5px;
+    display: flex;
+    width: 100%
 }
 
 .topBar .modernToolbar .count {
@@ -230,7 +230,10 @@ body {
     background-color: rgba(0, 0, 0, 0);
     border: none;
     font-size: 15px;
-    transform: translateY(-5px);
+}
+
+.topBar .modernToolbar .settings {
+    margin-left: auto;
 }
 
 .topBar .modernToolbar .textmod {
@@ -291,10 +294,12 @@ body {
     border-color: var(--border-color);
     border-width: 0;
     border-right-width: 1px;
+    display: flex;
+    flex-direction: column-reverse;
 }
 
 .notesDiv {
-    height: calc(100% - 50px);
+    height: 100%;
     overflow-y: auto;
 }
 
@@ -309,7 +314,7 @@ body {
     color: var(--unselected-note-button-text-color);
     border-radius: 8px;
 
-    border: none;
+    border: dashed;
     border-color: var(--border-color);
     border-width: 1px;
     font-size: 15px;
@@ -347,7 +352,7 @@ body {
 
 .notesBar .selected {
     background-color: var(--note-theme-color) !important;
-    border: none;
+    border-style: solid;
     color: var(--note-button-text-color);
 }
 
@@ -355,6 +360,11 @@ body {
     background-color: var(--note-theme-color) !important;
 }
 
+.notesBar .toolBar {
+    display: flex;
+    border-top: 1px var(--border-color) solid;
+}
+
 .notesBar .newNote {
     height: 41px;
     width: 41px;
@@ -362,13 +372,16 @@ body {
     text-align: left;
     font-size: 16px;
     cursor: pointer;
-    margin-top: 5px;
     background-color: var(--bar);
     border-radius: 8px;
     border: none;
     transition: 0.125s;
 }
 
+.notesBar .deleteNote {
+    margin-left: auto;
+}
+
 .notesBar .newNote:hover {
     background-color: var(--icon-button-hover);
 }
@@ -387,7 +400,7 @@ body {
     color: var(--text-color);
     background-color: rgba(0, 0, 0, 0);
     width: calc(100% - 200px);
-    height: calc(100% - 50px - 30px);
+    height: calc(100% - 50px);
     font-family: "Inter", sans-serif;
     display: flex;
     flex-direction: row;
@@ -555,11 +568,17 @@ iframe#markdown {
     margin-bottom: 10px;
 }
 
+.optionsDiv .fontManipulator {
+    display: flex;
+}
+
 .optionsDiv .fontManipulator button {
     width: 43.5px;
+    height: 43.5px;
     background-color: var(--nonimporant-theme-color);
     color: var(--nonimportant-text-color);
     transition: 0.125s;
+    margin: 0;
 }
 
 .optionsDiv .fontManipulator button:hover {
@@ -567,7 +586,12 @@ iframe#markdown {
 }
 
 .optionsDiv .fontManipulator .textMinusBox {
-    margin-left: 83.5px
+    margin-left: auto;
+}
+
+.optionsDiv .fontManipulator .textSizeBox {
+    margin-left: 5px;
+    margin-right: 5px;
 }
 
 .sessionDiv {
diff --git a/static/js/login.js.save b/static/js/login.js.save
new file mode 100644
index 0000000..9703f1b
--- /dev/null
+++ b/static/js/login.js.save
@@ -0,0 +1,198 @@
+if (localStorage.getItem("DONOTSHARE-secretkey") !== null) {
+    window.location.replace("/app/")
+    document.body.innerHTML = "Redirecting..."
+    throw new Error();
+}
+if (localStorage.getItem("DONOTSHARE-password") !== null) {
+    window.location.replace("/app/")
+    document.body.innerHTML = "Redirecting..."
+    throw new Error();
+}
+
+let remote = localStorage.getItem("homeserverURL")
+if (remote == null) {
+    localStorage.setItem("homeserverURL", "https://notes.hectabit.org")
+    remote = "https://notes.hectabit.org"
+}
+
+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 = "Login 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)
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById("homeserver").innerText = "Your homeserver is: " + remote + ". "
+});
+
+signupButton.addEventListener("click", () => {
+    if (passwordBox.classList.contains("hidden")) {
+        if (usernameBox.value === "") {
+            statusBox.innerText = "A username is required!"
+            return
+        } else {
+            statusBox.innerText = "Welcome back, " + usernameBox.value + "!"
+        }
+        showInput(1)
+    } else {
+        async function doStuff() {
+            let username = usernameBox.value
+            let password = passwordBox.value
+
+            if (password === "") {
+                statusBox.innerText = "A password is required!"
+                return
+            }
+
+            showInput(2)
+            showElements(true)
+            statusBox.innerText = "Signing in..."
+
+            async function hashpassold(pass) {
+                return await hashwasm.argon2id({
+                    password: pass,
+                    salt: await hashwasm.sha512(pass),
+                    parallelism: 1,
+                    iterations: 256,
+                    memorySize: 512,
+                    hashLength: 32,
+                    outputType: "encoded"
+                })
+            }
+
+            async function hashpass(pass) {
+                let key = pass
+                for (let i = 0; i < 128; i++) {
+                    key = await hashwasm.sha3(key)
+                }
+                return key
+            }
+
+            fetch(remote + "/api/login", {
+                method: "POST",
+                body: JSON.stringify({
+                    username: username,
+                    password: await hashpass(password),
+                    passwordchange: "no",
+                    newpass: "null"
+                }),
+                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/"
+                        }
+                        else if (response.status === 401) {
+                            console.log("Trying oldhash")
+                            fetch(remote + "/api/login", {
+                                method: "POST",
+                                body: JSON.stringify({
+                                    username: username,
+                                    password: await hashpassold(password),
+                                    passwordchange: "yes",
+                                    newpass: await hashpass(password)
+                                }),
+                                headers: {
+                                    "Content-Type": "application/json; charset=UTF-8"
+                                }
+                            })
+                                .then((response) => response)
+                                .then((response) => {
+                                    async function doStuff2() {
+                                        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)
+                                        }
+                                    }
+                                    doStuff2()
+                                });
+                        }
+                        else {
+                            statusBox.innerText = "Something went wrong! (error code: " + response.status + ")"
+                            showInput(1)
+                            showElements(true)
+                        }
+                    }
+                    doStuff()
+                });
+        }
+        doStuff()
+    }
+});
+
+backButton.addEventListener("click", () => {
+    showInput(0)
+});
+
+showInput(0)
