From 0719e456969e89264ca4ab163d4ec0365377790b Mon Sep 17 00:00:00 2001
From: maaa <no@thankyou.com>
Date: Mon, 28 Aug 2023 20:18:14 +0200
Subject: [PATCH] fr

---
 static/css/style.css          | 34 +++++++++++++++++++++++++++-------
 static/js/main.js             | 18 +++++++++++++++++-
 static/svg/phonelink_lock.svg |  1 +
 templates/app.html            | 18 ++++++++++++++++++
 4 files changed, 63 insertions(+), 8 deletions(-)
 create mode 100644 static/svg/phonelink_lock.svg

diff --git a/static/css/style.css b/static/css/style.css
index dfa7dc6..8cd2ce0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -111,12 +111,12 @@ body {
     overflow-y: scroll;
 }
 
-.notesBar button {
-    width: calc(100% - 7px - 7px - 3.5px);
+.notesBar .noteButton {
+    width: calc(100% - 5px - 5px);
     height: 35px;
     line-height: 0px;
     padding: 10px;
-    margin: 7px;
+    margin: 5px;
     margin-bottom: 0;
     background-color: var(--note-button);
     color: var(--unselected-note-button-text-color);
@@ -159,14 +159,19 @@ body {
 }
 
 .notesBar .newNote {
+    height: 41px;
+    line-height: 41px;
+    width: 100%;
+    text-align: left;
     background-color: rgba(0, 0, 0, 0);
-    transform: translateY(-35%);
-    padding-left: 0;
     border: none;
+    font-size: 16px;
+
+    margin-bottom: 5px;
 }
 
 .notesBar .newNote img {
-    height: 200%;
+    height: 32px;
     padding-right: 5px;
     transform: translateY(30%);
 }
@@ -246,12 +251,27 @@ body {
     border-width: 1px;
     border-radius: 8px;
 }
-
+.optionsDiv .mfacheckbox {
+    display: inline;
+    margin: 0;
+    margin-left: 5px;
+    margin-bottom: 12px;
+    padding: 0;
+    height: 17px;
+    width: 17px;
+}
 .optionsDiv input:focus {
     outline: 0;
     border-color: var(--theme-color);
 }
 
+.optionsDiv code {
+    padding: 7px;
+    font-size: 14px;
+    border-radius: 8px;
+    background-color: var(--session-color);
+}
+
 .optionsDiv progress {
     width: 100%;
     background-color: var(--session-color);
diff --git a/static/js/main.js b/static/js/main.js
index 95e8f9f..4d92753 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -36,13 +36,17 @@ let cancelErrorButton = document.getElementById("cancelErrorButton")
 let errorInput = document.getElementById("errorInput")
 let exitThing = document.getElementById("exitThing")
 let exitSessionsThing = document.getElementById("exitSessionsThing")
+let exitMfaThing = document.getElementById("exitMfaThing")
 let sessionManagerButton = document.getElementById("sessionManagerButton")
 let sessionManagerDiv = document.getElementById("sessionManagerDiv")
 let sessionDiv = document.getElementById("sessionDiv")
+let mfaDiv = document.getElementById("mfaDiv")
+let mfaCheckbox = document.getElementById("mfaCheckbox")
 let deleteMyAccountButton = document.getElementById("deleteMyAccountButton")
 let storageThing = document.getElementById("storageThing")
 let storageProgressThing = document.getElementById("storageProgressThing")
 let usernameThing = document.getElementById("usernameThing")
+let passwordThing = document.getElementById("passwordThing")
 let logOutButton = document.getElementById("logOutButton")
 let notesBar = document.getElementById("notesBar")
 let notesDiv = document.getElementById("notesDiv")
@@ -194,7 +198,8 @@ function updateUserInfo() {
                 } else {
                     let responseData = await response.json()
                     usernameBox.innerText = responseData["username"]
-                    usernameThing.innerText = "logged in as " + responseData["username"]
+                    usernameThing.innerText = "username: " + responseData["username"]
+                    passwordThing.innerText = "password: *************"
                     storageThing.innerText = "you've used " + formatBytes(responseData["storageused"]) + " out of " + formatBytes(responseData["storagemax"])
                     storageProgressThing.value = responseData["storageused"]
                     storageProgressThing.max = responseData["storagemax"]
@@ -317,6 +322,17 @@ exitSessionsThing.addEventListener("click", (event) => {
     optionsDiv.classList.remove("hidden")
     sessionManagerDiv.classList.add("hidden")
 });
+mfaCheckbox.addEventListener("change", (event) => {
+    if (mfaCheckbox.checked === true) {
+        mfaCheckbox.checked = false
+        optionsDiv.classList.add("hidden")
+        mfaDiv.classList.remove("hidden")
+    }
+})
+exitMfaThing.addEventListener("click", (event) => {
+    optionsDiv.classList.remove("hidden")
+    mfaDiv.classList.add("hidden")
+});
 
 updateUserInfo()
 
diff --git a/static/svg/phonelink_lock.svg b/static/svg/phonelink_lock.svg
new file mode 100644
index 0000000..6c54fdf
--- /dev/null
+++ b/static/svg/phonelink_lock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M634-320q-14 0-24-10t-10-24v-132q0-14 10-24t24-10h6v-40q0-33 23.5-56.5T720-640q33 0 56.5 23.5T800-560v40h6q14 0 24 10t10 24v132q0 14-10 24t-24 10H634Zm46-200h80v-40q0-17-11.5-28.5T720-600q-17 0-28.5 11.5T680-560v40ZM280-40q-33 0-56.5-23.5T200-120v-720q0-33 23.5-56.5T280-920h400q33 0 56.5 23.5T760-840v160h-80v-40H280v480h400v-40h80v160q0 33-23.5 56.5T680-40H280Zm0-120v40h400v-40H280Zm0-640h400v-40H280v40Zm0 0v-40 40Zm0 640v40-40Z"/></svg>
\ No newline at end of file
diff --git a/templates/app.html b/templates/app.html
index c5fdd83..b855390 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -31,6 +31,9 @@
             <button class="exit" id="exitThing">X</button>
             <h3 class="w300">your account</h3>
             <p id="usernameThing"></p>
+            <p id="passwordThing"></p>
+            <p style="display: inline">enable two-factor authentication: </p>
+            <input type="checkbox" id="mfaCheckbox" class="mfacheckbox">
             <div class="section"></div>
             <p>storage</p>
             <progress id="storageProgressThing" value="0" max="100"></progress><br>
@@ -50,6 +53,21 @@
             <div class="sessionDiv" id="sessionDiv">
             </div>
         </div>
+        <div id="mfaDiv" class="optionsDiv hidden">
+            <button class="exit" id="exitMfaThing">X</button>
+            <h3 class="w300">enable 2FA</h3>
+            <img style="filter: none; width: 100%; height: 60px;" src="/static/svg/phonelink_lock.svg">
+            <br><br>
+            Two-factor authentication is coming soon!
+            <div class="hidden">
+                <p>Two-factor authentication adds an extra layer of security to your account.</p>
+                <p>Enter in this token in your authenticator app:</p>
+                <code></code>
+                <p>Enter in the 6 digit code from your authenticator app:</p>
+                <input style="margin-bottom: 0;" inputmode="numeric" id="errorInput" type="text"
+                    placeholder="6-digit code"><br></input>
+            </div>
+        </div>
         <div id="errorDiv" class="optionsDiv hidden">
             <p id="errorMessageThing"></p>
             <input class="hidden" id="errorInput" type="text" placeholder="e.g. shopping list"><br></input>