Implement registration in frontend

frontend/src/assets/helpers.js

@@ -0,0 +1,20 @@
+function request(method, path, data = null) {
+	return new Promise((resolve, reject) => {
+		const xhr = new XMLHttpRequest();
+		xhr.onload = () => {
+			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);
+		}
+		xhr.onerror = () => reject("Something went wrong");
+		xhr.open(method, import.meta.env.VITE_API_URL + path);
+		if (data) xhr.setRequestHeader("Content-Type", "application/json"),
+		xhr.send(JSON.stringify(data));
+	});
+}
+
+export {
+	request,
+};
+

frontend/src/assets/main.css

@@ -2,12 +2,15 @@ body, h1{
 	margin: 0;
 }
 
+#app, button {
+	font-family: 'comic sans ms','serif';
+}
+
 #app {
 	height: 100vh;
 	background-image: url('/Plain-M&Ms-Pile.jpg');
 	padding: 5%;
 	color: white;
-	font-family: 'comic sans ms','serif';
 	text-align: center;
 }
 
@@ -40,3 +43,11 @@ nav a:not(.router-link-active):hover {
 .router-link-active {
 	background-color: rgba(0, 0, 0, 0.8);
 }
+
+.error {
+	color: red;
+	border-radius: 5px;
+	padding: 10px 20px;
+	height: 1em;
+}
+

frontend/src/main.js

@@ -1,11 +1,12 @@
-import './assets/main.css'
+import './assets/main.css';
 
-import { createApp } from 'vue'
+import { createApp } from 'vue';
-import App from './App.vue'
+import App from './App.vue';
-import router from './router'
+import router from './router';
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(router)
+app.use(router);
+
+app.mount('#app');
 
-app.mount('#app')

frontend/src/views/HomeView.vue

@@ -4,7 +4,6 @@
 
 <template>
 	<main>
-    
 		<h1>M&M Dispenser</h1>
 
 		<button @click="dispense">Dispense the m&m</button>

frontend/src/views/RegisterView.vue

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