Implement login frontend

frontend/src/assets/helpers.js

@@ -5,9 +5,10 @@ function request(method, path, data = null) {
 			if (xhr.status >= 200 && xhr.status < 300)
 				resolve(xhr.responseText ? JSON.parse(xhr.responseText) : null);
 			else
-				reject(xhr.responseText ? JSON.parse(xhr.responseText).title : "HTTP " + xhr.status);
+				reject(xhr.responseText || "HTTP " + xhr.status);
 		}
 		xhr.onerror = () => reject("Something went wrong");
+		xhr.withCredentials = true;
 		xhr.open(method, import.meta.env.VITE_API_URL + path);
 		if (data) xhr.setRequestHeader("Content-Type", "application/json"),
 		xhr.send(JSON.stringify(data));

frontend/src/views/LoginView.vue

@@ -1,17 +1,43 @@
 <script setup>
+import { request } from "../assets/helpers.js";
+import { ref } from "vue";
 
+const username = ref(null);
+const password = ref(null);
+
+const error = ref("");
+
+function login() {
+	request("POST", "/login", { username: username.value.value, password: password.value.value })
+		.then(success)
+		.catch(err => error.value = err);
+}
+
+function success() {
+	alert("Successfully logged in");
+}
 </script>
 
 <template>
   <main>
     <h1>LOGIN</h1>
+
     <br>
-    <span>Brugernavn</span><br>
+
-    <input id="usernameInput" type="text">
+	<label>
-    <br><br>
+		Username <br>
-    <span>Password</span><br>
+		<input ref="username" type="text" required>
-    <input id="passwordInput" type="password">
+	</label>
-    <br><br><br>
+
-    <button>Login</button>
+	<br><br>
+
+	<label>
+		Password <br>
+		<input ref="password" type="password" required>
+	</label>
+
+	<p class="error">{{ error }}</p>
+
+    <button @click="login">Login</button>
   </main>
 </template>

frontend/src/views/RegisterView.vue

@@ -26,14 +26,14 @@ function success() {
 
 	<label>
 		Username <br>
-		<input ref="username" type="text">
+		<input ref="username" type="text" required>
 	</label>
 
 	<br><br>
 
 	<label>
 		Password <br>
-		<input ref="password" type="password">
+		<input ref="password" type="password" required>
 	</label>
 
 	<p class="error">{{ error }}</p>