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) + ")")
                 }
             })
     }
@@ -165,6 +215,12 @@ function selectNote(nameithink) {
             "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) => {
             selectedNote = nameithink
@@ -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,28 +336,34 @@ function updateNotes() {
 updateNotes()
 
 newNote.addEventListener("click", (event) => {
-    let noteName = prompt("note name? :3")
+    let noteName = displayPrompt("note name? :3", burgerFunction)
-    if (noteName != null) {
+    //let noteName = prompt("note name? :3")
-        let encryptedName = CryptoJS.AES.encrypt(noteName, password).toString();
+    function burgerFunction(noteName) {
-        fetch("/api/newnote", {
+        if (noteName != null) {
-            method: "POST",
+            let encryptedName = CryptoJS.AES.encrypt(noteName, password).toString();
-            body: JSON.stringify({
+            fetch("/api/newnote", {
-                secretKey: secretkey,
+                method: "POST",
-                noteName: encryptedName,
+                body: JSON.stringify({
-            }),
+                    secretKey: secretkey,
-            headers: {
+                    noteName: encryptedName,
-                "Content-type": "application/json; charset=UTF-8"
+                }),
-            }
+                headers: {
-        })
+                    "Content-type": "application/json; charset=UTF-8"
-            .then((response) => response)
-            .then((response) => {
-                if (response.status !== 200) {
-                    updateNotes()
-                    alert('"' + noteName + '"' + " already exists")
-                } else {
-                    updateNotes()
                 }
-            });
+            })
+                .catch((error) => {
+                    displayError("failed to create new note, please try again later")
+                })
+                .then((response) => response)
+                .then((response) => {
+                    if (response.status !== 200) {
+                        updateNotes()
+                        displayError("something went wrong while creating note")
+                    } else {
+                        updateNotes()
+                    }
+                });
+        }
     }
 });
 document.body.addEventListener("click", (event) => {
@@ -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>