From 91b6127152714d8923a4dfbedee5701ec953d2ba Mon Sep 17 00:00:00 2001
From: ReiMerc <reim0009@edu.mercantec.dk>
Date: Fri, 8 Dec 2023 00:08:01 +0100
Subject: [PATCH] Implement registration in frontend

---
 frontend/src/assets/helpers.js      | 20 ++++++++++++++
 frontend/src/assets/main.css        | 15 ++++++++--
 frontend/src/main.js                | 15 +++++-----
 frontend/src/views/HomeView.vue     |  7 ++---
 frontend/src/views/LoginView.vue    |  2 +-
 frontend/src/views/RegisterView.vue | 43 +++++++++++++++++++++++------
 6 files changed, 80 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/assets/helpers.js

diff --git a/frontend/src/assets/helpers.js b/frontend/src/assets/helpers.js
new file mode 100644
index 0000000..ee196cd
--- /dev/null
+++ b/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,
+};
+
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 4356a16..38903f8 100644
--- a/frontend/src/assets/main.css
+++ b/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;
 }
 
@@ -39,4 +42,12 @@ nav a:not(.router-link-active):hover {
 }
 .router-link-active {
 	background-color: rgba(0, 0, 0, 0.8);
-}
\ No newline at end of file
+}
+
+.error {
+	color: red;
+	border-radius: 5px;
+	padding: 10px 20px;
+	height: 1em;
+}
+
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 5a5dbdb..1c1f361 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,11 +1,12 @@
-import './assets/main.css'
+import './assets/main.css';
 
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(router)
+app.use(router);
+
+app.mount('#app');
 
-app.mount('#app')
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index abffa5e..7e9084c 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -3,10 +3,9 @@
 </script>
 
 <template>
-  <main>
-    
-    <h1>M&M Dispenser</h1>
+	<main>
+		<h1>M&M Dispenser</h1>
 
 		<button @click="dispense">Dispense the m&m</button>
-  </main>
+	</main>
 </template>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 7c5ecda..ffcfccc 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -14,4 +14,4 @@
     <br><br><br>
     <button>Login</button>
   </main>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
index 067535a..0888957 100644
--- a/frontend/src/views/RegisterView.vue
+++ b/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">
-    <br><br>
-    <span>Password</span><br>
-    <input id="passwordInput" type="password">
-    <br><br><br>
-    <button>Login</button>
+
+	<label>
+		Username <br>
+		<input ref="username" type="text">
+	</label>
+
+	<br><br>
+
+	<label>
+		Password <br>
+		<input ref="password" type="password">
+	</label>
+
+	<p class="error">{{ error }}</p>
+
+    <button @click="register">Register</button>
   </main>
-</template>
\ No newline at end of file
+</template>
+