better error handling and updated user interface

This commit is contained in:
maaa 2023-08-09 02:23:20 +02:00
parent e0ce6b57f5
commit ecdc6e7551
3 changed files with 122 additions and 25 deletions

View File

@ -203,6 +203,24 @@ body {
border-radius: 8px; 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 { .optionsDiv progress {
width: 100%; width: 100%;
background-color: #d8d8d8; background-color: #d8d8d8;

View File

@ -16,6 +16,12 @@ let password = localStorage.getItem("DONOTSHARE-password")
let usernameBox = document.getElementById("usernameBox") let usernameBox = document.getElementById("usernameBox")
let optionsCoverDiv = document.getElementById("optionsCoverDiv") 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 exitThing = document.getElementById("exitThing")
let deleteMyAccountButton = document.getElementById("deleteMyAccountButton") let deleteMyAccountButton = document.getElementById("deleteMyAccountButton")
let storageThing = document.getElementById("storageThing") let storageThing = document.getElementById("storageThing")
@ -92,6 +98,48 @@ noteBox.readOnly = true
let noteCount = 0 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() { function updateUserInfo() {
fetch("/api/userinfo", { fetch("/api/userinfo", {
method: "POST", method: "POST",
@ -118,12 +166,14 @@ function updateUserInfo() {
} }
usernameBox.addEventListener("click", (event) => { usernameBox.addEventListener("click", (event) => {
optionsCoverDiv.classList.remove("hidden") optionsCoverDiv.classList.remove("hidden")
optionsDiv.classList.remove("hidden")
updateUserInfo() updateUserInfo()
}); });
logOutButton.addEventListener("click", (event) => { logOutButton.addEventListener("click", (event) => {
window.location.href = "/api/logout" window.location.href = "/api/logout"
}); });
exitThing.addEventListener("click", (event) => { exitThing.addEventListener("click", (event) => {
optionsDiv.classList.add("hidden")
optionsCoverDiv.classList.add("hidden") optionsCoverDiv.classList.add("hidden")
}); });
deleteMyAccountButton.addEventListener("click", (event) => { deleteMyAccountButton.addEventListener("click", (event) => {
@ -142,7 +192,7 @@ deleteMyAccountButton.addEventListener("click", (event) => {
if (response.status == 200) { if (response.status == 200) {
window.location.href = "/api/logout" window.location.href = "/api/logout"
} else { } 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" "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) => response)
.then((response) => { .then((response) => {
selectedNote = nameithink selectedNote = nameithink
@ -201,9 +257,12 @@ function selectNote(nameithink) {
.then((response) => response) .then((response) => response)
.then((response) => { .then((response) => {
if (response.status == 418) { 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); }, waitTime);
}); });
@ -257,7 +316,12 @@ function updateNotes() {
} }
}) })
.then((response) => response) .then((response) => response)
.then((response) => { updateNotes() }) .then((response) => {
updateNotes()
})
.catch((error) => {
displayError("something went wrong! please try again later")
})
} else { } else {
selectNote(responseData[i]["id"]) selectNote(responseData[i]["id"])
} }
@ -272,28 +336,34 @@ function updateNotes() {
updateNotes() updateNotes()
newNote.addEventListener("click", (event) => { 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) => { document.body.addEventListener("click", (event) => {
@ -353,6 +423,9 @@ function exportNotes() {
exportNotesButton.innerText = "export notes" exportNotesButton.innerText = "export notes"
downloadObjectAsJson(jsonString, "data") downloadObjectAsJson(jsonString, "data")
optionsDiv.classList.add("hidden")
displayError("exported notes!")
} }
doStuff() doStuff()
}) })

View File

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