add useful login statuses

login.html

@@ -19,6 +19,7 @@
 						<button id="submit">LOGIN</button>
 					</div>
 				</fieldset>
+				<p id="status"></p>
 			</form>
 		</div>
 	</body>

scripts/login.js

@@ -1,20 +1,35 @@
-import {requestTicket, setTicket} from "./utils.js";
+import {requestTicket, setTicket, ResponseError, NetworkError} from "./utils.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
 function init (){
 	let formSubmitButton = document.querySelector("#submit");
+	let status = document.querySelector("#status");
 	formSubmitButton.addEventListener("click", async (e) => {
+		status.innerText = "";
 		e.preventDefault();
 		let form = document.querySelector("form");
 		let formData = new FormData(form);
 		try {
+			status.innerText = "Authenticating...";
 			let ticket = await requestTicket(formData.get("username"), formData.get("password"));
-			await setTicket(ticket.data.ticket);
+			setTicket(ticket.data.ticket);
 			window.location.href = "index.html";
 		}
 		catch (error) {
-			console.log(error);
+			if(error instanceof ResponseError) { // response error is usually 401 auth failed
+				status.innerText = "Authentication failed.";
+				status.style.color = "#ff0000";
+			}
+			else if (error instanceof NetworkError) {
+				status.innerText = "Encountered a network error.";
+				status.style.color = "#ff0000";
+			}
+			else {
+				status.innerText = "An error occured.";
+				status.style.color = "#ff0000";
+				console.error(error);
+			}
 		}
 	});
 }

scripts/utils.js

@@ -1,11 +1,11 @@
-class ResponseError extends Error {
+export class ResponseError extends Error {
 	constructor(message) {
 		super(message);
 		this.name = "ResponseError";
 	}
 }
 
-class NetworkError extends Error {
+export class NetworkError extends Error {
 	constructor(message) {
 		super(message);
 		this.name = "NetworkError";