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() {
	let username = usernameField.value;
	let password = passwordField.value;

	if (username.length < 3 || username.length > 16) {
		return hintError("The username must be between 3 and 16 characters !");
	}
	if (password.length < 6) {
		return hintError("The password must not be under 6 characters !");
	}

	window.login(username, password).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");
});