From be6884079925964dd6fc701e40cb7fa4fed436e4 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Thu, 3 Aug 2023 11:46:02 +0200
Subject: [PATCH 1/3] Fixed form for login - Now when pressing enter it works!

---
 package.json            |  1 +
 src/views/LoginView.vue | 25 +++++++++++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index a8545589..a01b8c83 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "sass": "^1.63.6",
     "stripe": "^12.14.0",
     "uuid": "^9.0.0",
+    "vee-validate": "^4.11.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2"
   },
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 43a5eaa1..571915ee 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -5,11 +5,14 @@
     <h1>SudoSOS Login</h1>
     <Button id="login-gewis-button" @click="loginViaGEWIS" severity="success"><img id="gewis-branding" src="../assets/img/gewis-branding.svg" alt="GEWIS">Login via GEWIS</Button>
     <hr>
-    <label for="username">Username</label>
-    <InputText id="username" type="text" v-model="username" placeholder="Enter username"/>
-    <label for="password">Password</label>
-    <InputText id="password" type="password" v-model="password" placeholder="Enter password" />
-    <Button @click="ldapLogin" id="login-button" severity="danger">Login</Button>
+    <form id="login-form" @submit="ldapLogin">
+<!--      TODO: Form validation with vee-validate -->
+      <label for="username">Username</label>
+      <InputText id="username" type="text" v-model="username" placeholder="Enter username"/>
+      <label for="password">Password</label>
+      <InputText id="password" type="password" v-model="password" placeholder="Enter password" />
+      <Button type="submit" id="login-button" severity="danger">Login</Button>
+    </form>
     <a href="https://wieditleesttrekteenbak.nl/">Reset password (External accounts only)</a>
   </main>
   <CopyrightBanner />
@@ -28,11 +31,12 @@ import router from "@/router";
 const authStore = useAuthStore();
 const userStore = useUserStore();
 
+const username = ref("");
+const password = ref("");
 
-const username = ref('');
-const password = ref('');
 const route = useRoute();
 
+
 onBeforeMount(() => {
   if (route.query.token !== undefined) {
     const token  = route.query.token as string;
@@ -44,7 +48,8 @@ onBeforeMount(() => {
   }
 })
 
-const ldapLogin = async () => {
+const ldapLogin = async (event: Event) => {
+  event.preventDefault();
   await authStore.gewisLdapLogin(username.value, password.value, apiService).then(() => {
     if (authStore.getUser) userStore.fetchCurrentUserBalance(authStore.getUser.id, apiService);
     router.push({name: 'home'})
@@ -60,6 +65,10 @@ const loginViaGEWIS = () => {
 </script>
 
 <style scoped lang="scss">
+form {
+  display: flex;
+  flex-direction: column;
+}
 h1 {
   color: black;
   max-width: 350px;

From 1fb7ee4f3984f6878aa5db2e5109f27286cfa70c Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Thu, 3 Aug 2023 11:46:02 +0200
Subject: [PATCH 2/3] Fixed form for login - Now when pressing enter it works!

---
 package.json            |  5 ++++-
 src/router/index.ts     |  4 ++--
 src/views/LoginView.vue | 38 ++++++++++++++++++++++++++++----------
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index a8545589..bcf17f03 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@sudosos/sudosos-client": "github:GEWIS/sudosos-client",
     "@sudosos/sudosos-frontend-common": "github:GEWIS/sudosos-frontend-common#5ac5e0d",
+    "@vee-validate/yup": "^4.11.1",
     "jwt-decode": "^3.1.2",
     "pinia": "^2.1.3",
     "primeicons": "^6.0.1",
@@ -21,8 +22,10 @@
     "sass": "^1.63.6",
     "stripe": "^12.14.0",
     "uuid": "^9.0.0",
+    "vee-validate": "^4.11.1",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.2"
+    "vue-router": "^4.2.2",
+    "yup": "^1.2.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
diff --git a/src/router/index.ts b/src/router/index.ts
index 8336826d..8ab33941 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import HomeView from '../views/HomeView.vue';
 import LoginView from "@/views/LoginView.vue";
 import BalanceView from "@/views/BalanceView.vue";
 import {useAuthStore} from "@sudosos/sudosos-frontend-common";
+import jwtDecode from "jwt-decode";
 
 const router = createRouter({
   history: createWebHistory(),
@@ -42,8 +43,7 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  const isAuthenticated = useAuthStore().getToken; // Replace with your actual authentication logic
-
+  const isAuthenticated = useAuthStore().getToken;
   if (to.meta?.requiresAuth && !isAuthenticated) {
     // If the route requires authentication and the user is not authenticated, redirect to login
     next({ name: 'login' });
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 43a5eaa1..98a41d41 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -5,11 +5,14 @@
     <h1>SudoSOS Login</h1>
     <Button id="login-gewis-button" @click="loginViaGEWIS" severity="success"><img id="gewis-branding" src="../assets/img/gewis-branding.svg" alt="GEWIS">Login via GEWIS</Button>
     <hr>
-    <label for="username">Username</label>
-    <InputText id="username" type="text" v-model="username" placeholder="Enter username"/>
-    <label for="password">Password</label>
-    <InputText id="password" type="password" v-model="password" placeholder="Enter password" />
-    <Button @click="ldapLogin" id="login-button" severity="danger">Login</Button>
+    <form id="login-form" @submit="ldapLogin">
+<!--      TODO: Form validation with vee-validate -->
+      <label for="username">Username</label>
+      <InputText id="username" type="text" v-bind="username" placeholder="Enter username"/>
+      <label for="password">Password</label>
+      <InputText id="password" type="password" v-bind="password" placeholder="Enter password" />
+      <Button type="submit" id="login-button" severity="danger">Login</Button>
+    </form>
     <a href="https://wieditleesttrekteenbak.nl/">Reset password (External accounts only)</a>
   </main>
   <CopyrightBanner />
@@ -24,15 +27,25 @@ import apiService from "@/services/ApiService"
 import {useRoute} from "vue-router";
 import { v4 as uuid } from 'uuid'
 import router from "@/router";
+import {useForm} from "vee-validate";
+import * as yup from 'yup';
+import {toTypedSchema} from "@vee-validate/yup";
 
 const authStore = useAuthStore();
 const userStore = useUserStore();
+const schema = toTypedSchema(yup.object({
+  username: yup.string().required(),
+  password: yup.string().required(),
+}));
+const { values, defineComponentBinds} = useForm({
+  validationSchema: schema,
+});
+const username = defineComponentBinds('username');
+const password = defineComponentBinds('password');
 
-
-const username = ref('');
-const password = ref('');
 const route = useRoute();
 
+
 onBeforeMount(() => {
   if (route.query.token !== undefined) {
     const token  = route.query.token as string;
@@ -44,8 +57,9 @@ onBeforeMount(() => {
   }
 })
 
-const ldapLogin = async () => {
-  await authStore.gewisLdapLogin(username.value, password.value, apiService).then(() => {
+const ldapLogin = async (event: Event) => {
+  event.preventDefault();
+  await authStore.gewisLdapLogin(values.username, values.password, apiService).then(() => {
     if (authStore.getUser) userStore.fetchCurrentUserBalance(authStore.getUser.id, apiService);
     router.push({name: 'home'})
   }).catch((error) => {
@@ -60,6 +74,10 @@ const loginViaGEWIS = () => {
 </script>
 
 <style scoped lang="scss">
+form {
+  display: flex;
+  flex-direction: column;
+}
 h1 {
   color: black;
   max-width: 350px;

From d44dc9d194908bdbd53c1d949f8de6ae6a24143e Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Fri, 4 Aug 2023 23:51:09 +0200
Subject: [PATCH 3/3] Little logout button fix.

---
 src/components/TopNavbar.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/TopNavbar.vue b/src/components/TopNavbar.vue
index 2bda1c43..a8c62c68 100644
--- a/src/components/TopNavbar.vue
+++ b/src/components/TopNavbar.vue
@@ -18,11 +18,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import {useUserStore} from "@sudosos/sudosos-frontend-common";
-import {computed} from "vue";
+import {computed, ref} from "vue";
+import {useAuthStore, useUserStore} from "@sudosos/sudosos-frontend-common";
+import {useRouter} from "vue-router";
 
 const userStore = useUserStore();
+const authStore = useAuthStore();
+const router = useRouter();
 const balance = computed((): string | undefined => {
   const balanceInCents = userStore.getCurrentUser.balance;
   if (!balanceInCents) return undefined;
@@ -33,6 +35,12 @@ const balance = computed((): string | undefined => {
 const firstName = computed((): string | undefined => {
   return userStore.getCurrentUser.user ? userStore.getCurrentUser.user.firstName : undefined;
 });
+
+const handleLogout = () => {
+  console.error(true)
+  authStore.logout();
+  router.push('/');
+}
 // TODO: Style the hovering of buttons
 const leftItems = ref([ // TODO: Implement Submenus
   {
@@ -97,7 +105,8 @@ const rightItems = ref([
         label: 'Profile',
       },
       {
-        label: 'Sign Out'
+        label: 'Sign Out',
+        command: handleLogout,
       },
     ]
   },
@@ -118,7 +127,6 @@ const rightItems = ref([
   },
 ])
 
-
 </script>
 
 <style scoped lang="scss">