forked from Ailur/burgernotes-server
better error handling and updated user interface
This commit is contained in:
parent
e0ce6b57f5
commit
ecdc6e7551
|
@ -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;
|
||||
|
|
|
@ -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")
|
||||
if (noteName != null) {
|
||||
let encryptedName = CryptoJS.AES.encrypt(noteName, password).toString();
|
||||
fetch("/api/newnote", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
secretKey: secretkey,
|
||||
noteName: encryptedName,
|
||||
}),
|
||||
headers: {
|
||||
"Content-type": "application/json; charset=UTF-8"
|
||||
}
|
||||
})
|
||||
.then((response) => response)
|
||||
.then((response) => {
|
||||
if (response.status !== 200) {
|
||||
updateNotes()
|
||||
alert('"' + noteName + '"' + " already exists")
|
||||
} else {
|
||||
updateNotes()
|
||||
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", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
secretKey: secretkey,
|
||||
noteName: encryptedName,
|
||||
}),
|
||||
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()
|
||||
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()
|
||||
})
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue