From fcee377fb4fad0456075eb067d90ac427b77f034 Mon Sep 17 00:00:00 2001
From: X3F200C <x3f200c@x3f200c.net>
Date: Sat, 9 Nov 2024 00:30:33 -0500
Subject: [PATCH] Introduce login UI error and success handling

---
 src/main.js          |  4 +++-
 src/preload.js       |  4 ++++
 src/scripts/login.js | 36 ++++++++++++++++++++++++++++++++++++
 src/sripts/login.js  | 11 -----------
 src/styles/login.css |  8 ++++++++
 src/views/login.html |  6 ++++--
 6 files changed, 55 insertions(+), 14 deletions(-)
 create mode 100644 src/scripts/login.js
 delete mode 100644 src/sripts/login.js

diff --git a/src/main.js b/src/main.js
index 6403c86..b438ba2 100644
--- a/src/main.js
+++ b/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) {
diff --git a/src/preload.js b/src/preload.js
index 5af98f0..23e2975 100644
--- a/src/preload.js
+++ b/src/preload.js
@@ -1 +1,5 @@
 const electron = require("electron");
+
+electron.contextBridge.exposeInMainWorld("login", function (username, password) {
+	return electron.ipcRenderer.invoke("login", username, password);
+});
diff --git a/src/scripts/login.js b/src/scripts/login.js
new file mode 100644
index 0000000..ee519a4
--- /dev/null
+++ b/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");
+});
diff --git a/src/sripts/login.js b/src/sripts/login.js
deleted file mode 100644
index 6a0ed15..0000000
--- a/src/sripts/login.js
+++ /dev/null
@@ -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");
-});
diff --git a/src/styles/login.css b/src/styles/login.css
index 2e09409..37677d6 100644
--- a/src/styles/login.css
+++ b/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);
+}
diff --git a/src/views/login.html b/src/views/login.html
index 3277197..4999037 100644
--- a/src/views/login.html
+++ b/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>