display error, and add style

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;
+}

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();
 	
-	errors.user.forEach(error => {
+	["username", "user", "password"].forEach(error_field => {
-		console.log(error)
+		let error_display = document.getElementById(`error_${error_field}`);
+		if (error_display != null)
+			error_display.innerHTML = "";
+	});
+
+	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">
+			<div class=form>
-			<input type="password" id="password" placeholder="password">
+				<link rel="stylesheet" href="static/css/accounts/login.css">
-			<input type="button" value="login">
+				<input type="text" id="username" placeholder="username">
-			<span id="login_failed"></span>
+				<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>
         `;
     }
 }