fr

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);

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()
 

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>

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>