let usernameField;
let passwordField;

function showHint(message) {
	hintDisplay.innerText = message;
	hintDisplay.style.visibility = "visible";
}

function hintSuccess(message) {
	rootElement.attributeStyleMap.set("--hint", "lime");
	showHint(message);
}

function hintError(message) {
	rootElement.attributeStyleMap.set("--hint", "red");
	showHint(message);
}

function tryAuth() {
	window.login(usernameField.value, passwordField.value).then(function (response) {
		if (!response.successful) {
			return hintError("Login failed, invalid credentials !");
		}

		hintSuccess("Login successful, this modal should disappear shortly.");
	}).catch(function (error) {
		hintError("An error occurred while logging in : " + error.message);
	});
}

window.addEventListener("load", function () {
	rootElement = document.querySelector(":root");
	hintDisplay = document.querySelector("#hint");
	usernameField = document.querySelector("#username-field");
	passwordField = document.querySelector("#password-field");
});