jsonjumble/Server/Static/manage.js

import CookieManager from "./CookieManager.js";
			const cookie = new CookieManager();

			document.addEventListener("DOMContentLoaded", () => {
				const tokenInput = document.getElementById("token")
				const userInput = document.getElementById("user")
				const keyInput = document.getElementById("key")
				const dataInput = document.getElementById("data")
				const getButton = document.getElementById("get")
				const saveButton = document.getElementById("save")
				const mergeButton = document.getElementById("merge")
				const deleteButton = document.getElementById("delete")
				const errorDisplay = document.getElementById("error")

				tokenInput.value = cookie.get("auth")
				userInput.value = cookie.parseJwt(tokenInput.value)?.path ?? "default"
				keyInput.value = "init"

				const dataEndpoint = `/v1/data`;
				getButton.addEventListener("click", async () => {
					errorDisplay.innerHTML = ""
					const key = keyInput.value
					const user = userInput.value ?? "default"
					const result = await fetch(`${dataEndpoint}/${user}/${key}`, {
						method: "GET", // *GET, POST, PUT, DELETE, etc.
						mode: "cors", // no-cors, *cors, same-origin
						cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
						credentials: "same-origin", // include, *same-origin, omit
						headers: {
							"Content-Type": "application/json",
							"Authorization": `Bearer ${tokenInput.value}`,

							// 'Content-Type': 'application/x-www-form-urlencoded',
						},
						redirect: "follow", // manual, *follow, error
						referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
					});
					if (result.status == 200) {
						dataInput.value = JSON.stringify(await result.json(), null, 2);
					} else {
						dataInput.value = "{}";
						errorDisplay.innerHTML = `${result.status} ${result.statusText}: Retrieving ${dataEndpoint}/${user}/${key} was not successful.`
					}
				});

				saveButton.addEventListener("click", async () => {
					errorDisplay.innerHTML = ""
					const key = keyInput.value;
					// if(!confirm(`Are you sure you want to save '${key}'?`)) {
					// 	return
					// }
					const user = userInput.value ?? "default"
					const data = JSON.parse(dataInput.value);
					const result = await fetch(`${dataEndpoint}/${user}/${key}`, {
						method: "PUT", // *GET, POST, PUT, DELETE, etc.
						mode: "cors", // no-cors, *cors, same-origin
						cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
						credentials: "same-origin", // include, *same-origin, omit
						headers: {
							"Content-Type": "application/json",
							"Authorization": `Bearer ${tokenInput.value}`,
							// 'Content-Type': 'application/x-www-form-urlencoded',
						},
						redirect: "follow", // manual, *follow, error
						referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
						body: JSON.stringify(data), // body data type must match "Content-Type" header
					});

					if (result.status == 200) {
						// cookie.add("auth", tokenInput.value);
					} else {
						errorDisplay.innerHTML = `${result.status} ${result.statusText}: Saving ${dataEndpoint}/${user}/${key} was not successful.`
					}
				});

				mergeButton.addEventListener("click", async () => {
					errorDisplay.innerHTML = ""
					const key = keyInput.value;
					// if(!confirm(`Are you sure you want to save '${key}'?`)) {
					// 	return
					// }
					const user = userInput.value ?? "default"
					const data = JSON.parse(dataInput.value);
					const result = await fetch(`${dataEndpoint}/${user}/${key}`, {
						method: "POST", // *GET, POST, PUT, DELETE, etc.
						mode: "cors", // no-cors, *cors, same-origin
						cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
						credentials: "same-origin", // include, *same-origin, omit
						headers: {
							"Content-Type": "application/json",
							"Authorization": `Bearer ${tokenInput.value}`,
							// 'Content-Type': 'application/x-www-form-urlencoded',
						},
						redirect: "follow", // manual, *follow, error
						referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
						body: JSON.stringify(data), // body data type must match "Content-Type" header
					});

					if (result.status == 200) {
						// cookie.add("auth", tokenInput.value);
					} else {
						errorDisplay.innerHTML = `${result.status} ${result.statusText}: Saving ${dataEndpoint}/${user}/${key} was not successful.`
					}
				});

				deleteButton.addEventListener("click", async () => {
					errorDisplay.innerHTML = ""
					const key = keyInput.value;
					if(!confirm(`Are you sure you want to delete '${key}'? This cannot be undone.`)) {
						return
					}
					const user = userInput.value ?? "default"
					const result = await fetch(`${dataEndpoint}/${user}/${key}`, {
						method: "DELETE", // *GET, POST, PUT, DELETE, etc.
						mode: "cors", // no-cors, *cors, same-origin
						cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
						credentials: "same-origin", // include, *same-origin, omit
						headers: {
							"Content-Type": "application/json",
							"Authorization": `Bearer ${tokenInput.value}`,
							// 'Content-Type': 'application/x-www-form-urlencoded',
						},
						redirect: "follow", // manual, *follow, error
						referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
					});
					if (result.status == 200) {
						// cookie.add("auth", tokenInput.value);
					} else {
						errorDisplay.innerHTML = `${result.status} ${result.statusText}: Deleting ${dataEndpoint}/${user}/${key} was not successful.`
					}
				});

				getButton.click()
			});