Merge pull request #6 from GEWIS/feature/small-fixes

Fixed form for login
GEWIS · Aug 5, 2023 · dff5e53 · dff5e53
2 parents 71083c3 + 615024e
commit dff5e53
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -14,16 +14,19 @@
   "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",
     "primevue": "^3.30.1",
     "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",
+    "yup": "^1.2.0"
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.2.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

diff --git 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">

diff --git 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
@@ -7,12 +7,15 @@
         $t('login.Login via GEWIS')
       }}</Button>
     <hr>
-    <label for="username">{{$t('login.Username')}}</label>
-    <InputText id="username" type="text" v-model="username" :placeholder="$t('login.Enter username')"/>
-    <label for="password">{{$t('login.Password')}}</label>
-    <InputText id="password" type="password" v-model="password" :placeholder="$t('login.Enter password')" />
-    <Button @click="ldapLogin" id="login-button" severity="danger">{{$t('login.Login')}}</Button>
-    <a href="https://wieditleesttrekteenbak.nl/">{{$t('login.Password reset')}}</a>
+    <form id="login-form" @submit="ldapLogin">
+      <!--      TODO: Form validation with vee-validate -->
+      <label for="username">{{$t('login.Username')}}</label>
+      <InputText id="username" type="text" v-bind="username" :placeholder="$t('login.Enter username')"/>
+      <label for="password">{{$t('login.Password')}}</label>
+      <InputText id="password" type="password" v-bind="password" :placeholder="$t('login.Enter password')" />
+      <Button type="submit" id="login-button" severity="danger">{{$t('login.Login')}}</Button>
+      <a href="https://wieditleesttrekteenbak.nl/">{{$t('login.Password reset')}}</a>
+    </form>
   </main>
   <CopyrightBanner />
 </div>
@@ -26,15 +29,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;
@@ -46,8 +59,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) => {
@@ -62,6 +76,10 @@ const loginViaGEWIS = () => {
 </script>
 
 <style scoped lang="scss">
+form {
+  display: flex;
+  flex-direction: column;
+}
 h1 {
   color: black;
   max-width: 350px;