better error handling and updated user interface

static/css/style.css

@@ -203,6 +203,24 @@ body {
     border-radius: 8px;
 }
 
+.optionsDiv input {
+    width: calc(100% - 12px);
+    height: 25px;
+    background-color: ffffff;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin-bottom: 7px;
+    border: solid;
+    border-color: #dadada;
+    border-width: 1px;
+    border-radius: 8px;
+}
+
+.optionsDiv input:focus {
+    outline: 0;
+    border-color: #157efb;
+}
+
 .optionsDiv progress {
     width: 100%;
     background-color: #d8d8d8;

static/js/main.js

@@ -16,6 +16,12 @@ let password = localStorage.getItem("DONOTSHARE-password")
 
 let usernameBox = document.getElementById("usernameBox")
 let optionsCoverDiv = document.getElementById("optionsCoverDiv")
+let optionsDiv = document.getElementById("optionsDiv")
+let errorDiv = document.getElementById("errorDiv")
+let errorMessageThing = document.getElementById("errorMessageThing")
+let closeErrorButton = document.getElementById("closeErrorButton")
+let cancelErrorButton = document.getElementById("cancelErrorButton")
+let errorInput = document.getElementById("errorInput")
 let exitThing = document.getElementById("exitThing")
 let deleteMyAccountButton = document.getElementById("deleteMyAccountButton")
 let storageThing = document.getElementById("storageThing")
@@ -92,6 +98,48 @@ noteBox.readOnly = true
 
 let noteCount = 0
 
+function displayError(message) {
+    errorDiv.classList.remove("hidden")
+    optionsCoverDiv.classList.remove("hidden")
+
+    errorMessageThing.innerText = message
+}
+
+closeErrorButton.addEventListener("click", (event) => {
+    errorDiv.classList.add("hidden")
+    optionsCoverDiv.classList.add("hidden")
+});
+
+
+function displayPrompt(message, callback) {
+    errorMessageThing.innerText = message
+    errorInput.value = ""
+
+    closeErrorButton.addEventListener("click", (event) => {
+        callback(errorInput.value)
+        callback = undefined
+    });
+    cancelErrorButton.addEventListener("click", (event) => {
+        callback = undefined
+        errorDiv.classList.add("hidden")
+        optionsCoverDiv.classList.add("hidden")
+        errorInput.classList.add("hidden")
+        cancelErrorButton.classList.add("hidden")
+    });
+
+    errorDiv.classList.remove("hidden")
+    optionsCoverDiv.classList.remove("hidden")
+    errorInput.classList.remove("hidden")
+    cancelErrorButton.classList.remove("hidden")
+}
+
+closeErrorButton.addEventListener("click", (event) => {
+    errorDiv.classList.add("hidden")
+    optionsCoverDiv.classList.add("hidden")
+    errorInput.classList.add("hidden")
+    cancelErrorButton.classList.add("hidden")
+});
+
 function updateUserInfo() {
     fetch("/api/userinfo", {
         method: "POST",
@@ -118,12 +166,14 @@ function updateUserInfo() {
 }
 usernameBox.addEventListener("click", (event) => {
     optionsCoverDiv.classList.remove("hidden")
+    optionsDiv.classList.remove("hidden")
     updateUserInfo()
 });
 logOutButton.addEventListener("click", (event) => {
     window.location.href = "/api/logout"
 });
 exitThing.addEventListener("click", (event) => {
+    optionsDiv.classList.add("hidden")
     optionsCoverDiv.classList.add("hidden")
 });
 deleteMyAccountButton.addEventListener("click", (event) => {
@@ -142,7 +192,7 @@ deleteMyAccountButton.addEventListener("click", (event) => {
                 if (response.status == 200) {
                     window.location.href = "/api/logout"
                 } else {
-                    alert("failed to delete account (" + String(response.status) + ")")
+                    displayError("failed to delete account (" + String(response.status) + ")")
                 }
             })
     }
@@ -164,6 +214,12 @@ function selectNote(nameithink) {
         headers: {
             "Content-type": "application/json; charset=UTF-8"
         }
+    })
+        .catch((error) => {
+            noteBox.readOnly = true
+            noteBox.value = ""
+            noteBox.placeholder = ""
+            displayError("something went wrong, please try again later")
         })
         .then((response) => response)
         .then((response) => {
@@ -201,9 +257,12 @@ function selectNote(nameithink) {
                                 .then((response) => response)
                                 .then((response) => {
                                     if (response.status == 418) {
-                                        alert("you've ran out of storage :3 changes will not be saved until you free up storage!!! owo")
+                                        displayError("you've ran out of storage :3 changes will not be saved until you free up storage!!! owo")
                                     }
                                 })
+                                .catch((error) => {
+                                    displayError("failed to save changes, please try again later")
+                                })
                         }
                     }, waitTime);
                 });
@@ -257,7 +316,12 @@ function updateNotes() {
                                 }
                             })
                                 .then((response) => response)
-                                .then((response) => { updateNotes() })
+                                .then((response) => {
+                                    updateNotes()
+                                })
+                                .catch((error) => {
+                                    displayError("something went wrong! please try again later")
+                                })
                         } else {
                             selectNote(responseData[i]["id"])
                         }
@@ -272,7 +336,9 @@ function updateNotes() {
 updateNotes()
 
 newNote.addEventListener("click", (event) => {
-    let noteName = prompt("note name? :3")
+    let noteName = displayPrompt("note name? :3", burgerFunction)
+    //let noteName = prompt("note name? :3")
+    function burgerFunction(noteName) {
         if (noteName != null) {
             let encryptedName = CryptoJS.AES.encrypt(noteName, password).toString();
             fetch("/api/newnote", {
@@ -284,17 +350,21 @@ newNote.addEventListener("click", (event) => {
                 headers: {
                     "Content-type": "application/json; charset=UTF-8"
                 }
+            })
+                .catch((error) => {
+                    displayError("failed to create new note, please try again later")
                 })
                 .then((response) => response)
                 .then((response) => {
                     if (response.status !== 200) {
                         updateNotes()
-                    alert('"' + noteName + '"' + " already exists")
+                        displayError("something went wrong while creating note")
                     } else {
                         updateNotes()
                     }
                 });
         }
+    }
 });
 document.body.addEventListener("click", (event) => {
     if (event.clientX > 100) {
@@ -353,6 +423,9 @@ function exportNotes() {
 
                 exportNotesButton.innerText = "export notes"
                 downloadObjectAsJson(jsonString, "data")
+                optionsDiv.classList.add("hidden")
+                displayError("exported notes!")
+
             }
             doStuff()
         })

templates/app.html

@@ -31,7 +31,7 @@
     </div>
 
     <div id="optionsCoverDiv" class="optionsCoverDiv hidden">
-        <div class="optionsDiv">
+        <div id="optionsDiv" class="optionsDiv hidden">
             <button class="exit" id="exitThing">X</button>
             <h3>manage your account</h3>
             <p id="usernameThing"></p>
@@ -41,6 +41,12 @@
             <button id="deleteMyAccountButton">delete my account</button>
             <button id="exportNotesButton">export notes</button>
         </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>
+            <button id="closeErrorButton">OK</button>
+            <button class="hidden" id="cancelErrorButton">Cancel</button>
+        </div>
     </div>
 
     <textarea id="noteBox" class="noteBox"></textarea>