Introduce login UI error and success handling

src/main.js

@@ -106,7 +106,8 @@ electron.ipcMain.handle("login", function (event, username, password) {
 		}, function (response) {
 			if (response.statusCode !== 200) {
 				return resolve({
-					"status": "unauthenticated"
+					"status": "unauthenticated",
+					"successful": false
 				});
 			}
 
@@ -126,6 +127,7 @@ electron.ipcMain.handle("login", function (event, username, password) {
 
 					resolve({
 						"status": "authenticated",
+						"successful": true,
 						...data
 					});
 				} catch (error) {

src/preload.js

@@ -1 +1,5 @@
 const electron = require("electron");
+
+electron.contextBridge.exposeInMainWorld("login", function (username, password) {
+	return electron.ipcRenderer.invoke("login", username, password);
+});

src/scripts/login.js

@@ -0,0 +1,36 @@
+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");
+});

src/sripts/login.js

@@ -1,11 +0,0 @@
-let usernameField;
-let passwordField;
-
-function tryAuth() {
-	window.authenticate(usernameField.value, passwordField.value);
-}
-
-window.addEventListener("load", function () {
-	usernameField = document.querySelector("#username-field");
-	passwordField = document.querySelector("#password-field");
-});

src/styles/login.css

@@ -8,3 +8,11 @@
 	display: flex;
 	flex-direction: column;
 }
+
+#hint {
+	color: var(--hint);
+}
+
+input[type="text"], input[type="password"] {
+	border: 2px solid var(--hint);
+}

src/views/login.html

@@ -11,10 +11,12 @@
 		<main>
 			<div id="login-container">
 				<form id="login-form">
+					<h2>Plutonium login</h2>
+					<p id="hint" style="visibility: hidden;"></p>
 					<label for="username">Username :</label>
-					<input type="text" name="username" id="username-field" placeholder="Your Plutonium username" minLength="2" maxLength="64">
+					<input type="text" name="username" id="username-field" placeholder="Your Plutonium username" minLength="3" maxLength="16">
 					<label for="password">Password :</label>
-					<input type="text" name="password" id="password-field" placeholder="Your Plutonium password" minLength="2" maxLength="64">
+					<input type="password" name="password" id="password-field" placeholder="Your Plutonium password" minLength="6" maxLength="64">
 					<span>Create an account at <a href="https://forum.plutonium.pw/register" target="_blank">https://forum.plutonium.pw/register</a> if you don't have one.</span>
 					<input type="button" value="Log in" onclick="tryAuth();">
 				</form>