jsonjumble/Server/Static/index.html

<h1>JSON Stash</h1>
<div id="error"></div>
<input type="username" id="username" name="username" />
<input type="password" id="password" name="password" />
<button id="login">Login</button>
<script type="module">
	import CookieManager from "./CookieManager.js"
	const loginButton = document.getElementById("login")
	const errorDisplay = document.getElementById("error")
	const usernameInput = document.getElementById("username")
	const passwordInput = document.getElementById("password")

	const authEndpoint = "/jwt/login";
	loginButton.addEventListener("click", async () => {
		errorDisplay.innerHTML = ""
		const cookie = new CookieManager()
		const loginData = {
			"Username": usernameInput.value,
			"Password": passwordInput.value
		}
		const result = await fetch(authEndpoint, {
			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",
				// '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(loginData), // body data type must match "Content-Type" header
		});

		if (result.status == 200) {

			const response = await result.json()
			cookie.add("auth", `${response.token}`);
			cookie.add("expires", response.expiration);
			document.location = "manage.html"
		} else {
			errorDisplay.innerHTML = `${result.status} ${result.statusText}`
		}
	});
</script>