added login logic

src/components/AddEmployeeModal.vue

@@ -43,7 +43,7 @@ div.modal.fade(
      */
     const props = defineProps<{
         modalId: string,
-        searchData : [],
+        searchData : any[],
         searchFields? : string[],
         sourceRow? : number,
         minQueryLength? : number

src/components/Schedule.vue

@@ -68,11 +68,11 @@ AddEmployeeModal(
     import { watch, computed, ref, onMounted } from 'vue'
     import type { Ref, ComputedRef } from 'vue'
     import { storeToRefs } from 'pinia'
-    import { useEmployees } from '../stores/employees'
+    import { useEmployees } from '@/stores/employees'
     import { addMonths, eachMonthOfInterval, subDays, addDays, format, getISODay, getYear, getMonth, getDaysInMonth } from 'date-fns'
     import { de } from 'date-fns/locale'
-    import AddEmployeeModal from './AddEmployeeModal.vue'
-    import Coordinates from '../types/coordinates'
+    import AddEmployeeModal from '@/components/AddEmployeeModal.vue'
+    import Coordinates from '@/types/coordinates'
 
     /*
     *   Props

src/stores/user.ts

@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia'
+import axios from 'axios'
+import router from '@/router'
+
+
+export const useUser = defineStore('userStore', {
+    state: () => {
+        return {
+            user: '',
+            role: '',
+            isLoggedIn: false
+        }
+    },
+
+    actions: {
+        async login(username: string, password: string) {
+            
+            axios.post('http://localhost:3333/api/v1/login', {
+                username: username,
+                password: password
+            }).then((response) => {
+                console.log(response)
+                this.isLoggedIn = true
+                // this.user = response?.data?.user
+                // this.role = response?.data?.role
+
+                router.push({name: 'Home'})
+            }).catch((error) => {
+                console.log(error.response)
+            })
+           
+
+            
+        }
+    }
+})

src/views/Home.vue

@@ -1,5 +1,7 @@
 <template lang="pug">
 
+p {{ state }}
+
 MonthPicker(:selectedMonth="selectedMonth" :selectedYear="selectedYear" @getMonth="selectedMonth = $event" @getYear="selectedYear = $event")
 
 Schedule( :startDate="new Date(selectedYear, selectedMonth)")
@@ -12,6 +14,9 @@ Schedule( :startDate="new Date(selectedYear, selectedMonth)")
   import { getYear, getMonth, eachMonthOfInterval, getDaysInMonth, getISODay } from 'date-fns'
   import Schedule from '/src/components/Schedule.vue'
   import MonthPicker from '/src/components/MonthPicker.vue'
+  import { useUser } from '@/stores/user'
+
+  const state = useUser()
 
   const selectedMonth = ref(getMonth(new Date()))
   const selectedYear = ref(getYear(new Date()))

src/views/Login.vue

@@ -3,11 +3,11 @@
     <form class="m-auto">
         <h1 class="h3 mb-3">Bitte einloggen</h1>
         <div class="form-floating">
-            <input type="text" class="form-control" id="usernameInput" placeholder="Benutzername">
+            <input type="text" class="form-control" id="usernameInput" v-model="input.username" placeholder="Benutzername">
             <label for="usernameInput">Benutzername</label>
         </div>
         <div class="form-floating">
-            <input type="password" class="form-control" id="passwordInput" placeholder="Passwort">
+            <input type="password" class="form-control" id="passwordInput" v-model="input.password" placeholder="Passwort">
             <label for="passwordInput">Passwort</label>
         </div>
 
@@ -18,12 +18,31 @@
             </label>
         </div>
 
-        <button class="btn btn-lg btn-success w-100 mb-5">Einloggen</button>
+        <button class="btn btn-lg btn-success w-100 mb-5" @click.prevent="onClick">Einloggen</button>
     </form>
 </template>
 
 <script setup lang="ts">
+import { useUser } from '@/stores/user'
+import { onMounted, reactive } from 'vue'
 
+const userStore = useUser()
+
+const input = reactive({
+    username: '',
+    password: ''
+})
+
+onMounted(() => {
+    
+})
+
+async function onClick() {
+    
+    userStore.login(input.username, input.password)
+    
+}
+    
 </script>
 
 <style scoped>