From b98371cf70d9c8b6aaa208091c4901d743c56e45 Mon Sep 17 00:00:00 2001
From: starnakin <camille@chauvet.pro>
Date: Mon, 27 Nov 2023 13:55:05 +0100
Subject: [PATCH] display error, and add style

---
 frontend/static/css/accounts/login.css        | 16 ++++++++++
 .../static/js/views/accounts/LoginView.js     | 30 +++++++++++++------
 2 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 frontend/static/css/accounts/login.css

diff --git a/frontend/static/css/accounts/login.css b/frontend/static/css/accounts/login.css
new file mode 100644
index 0000000..72e58a9
--- /dev/null
+++ b/frontend/static/css/accounts/login.css
@@ -0,0 +1,16 @@
+#app .form {
+	background-color: red;
+    width: 300px;
+    height: 300px;
+	display: grid;
+	grid-template-columns: repeat(1, 1fr);
+	grid-gap: 10px;
+	margin-left: auto;
+    margin-right: auto;
+	margin-top: 90px;
+    border: 1px black solid;
+}
+
+#app {
+	background-color: green;
+}
\ No newline at end of file
diff --git a/frontend/static/js/views/accounts/LoginView.js b/frontend/static/js/views/accounts/LoginView.js
index 1f83d90..3484610 100644
--- a/frontend/static/js/views/accounts/LoginView.js
+++ b/frontend/static/js/views/accounts/LoginView.js
@@ -7,10 +7,18 @@ async function login()
 	let password = document.getElementById("password").value;
 	
 	let response = await client.login(username, password);
-	let errors = await response.json();
+	let response_data = await response.json();
+	
+	["username", "user", "password"].forEach(error_field => {
+		let error_display = document.getElementById(`error_${error_field}`);
+		if (error_display != null)
+			error_display.innerHTML = "";
+	});
 
-	errors.user.forEach(error => {
-		console.log(error)
+	Object.keys(response_data).forEach(error_field => {
+		let error_display = document.getElementById(`error_${error_field}`);
+		if (error_display != null)
+			error_display.innerHTML = response_data[error_field];
 	});
 }
 
@@ -21,18 +29,22 @@ export default class extends AbstractView {
 		document.body.addEventListener("click", e => {
 			e.preventDefault();
 			if (e.target.type == "button")
-			{
 				login();
-			}
 		});
 	}
 
     async getHtml() {
         return `
-			<input type="text" id="username" placeholder="username">
-			<input type="password" id="password" placeholder="password">
-			<input type="button" value="login">
-			<span id="login_failed"></span>
+			<div class=form>
+				<link rel="stylesheet" href="static/css/accounts/login.css">
+				<input type="text" id="username" placeholder="username">
+				<span id="error_username"></span>
+				<input type="password" id="password" placeholder="password">
+				<span id="error_password"></span>
+				<input type="button" value="login">
+				<span id="error_user"></span>
+				<a href="/register" class="nav__link" data-link>Register</a>
+			</div>
         `;
     }
 }
\ No newline at end of file