logout handled for backend

frontend/src/App.vue

@@ -8,14 +8,19 @@ import { ref } from 'vue';
 // handle page switch and other top-level state based logic
 const isLoggedIn = ref(false);
 const fullName = ref('');
+const username = ref('');
+const password = ref('');
 
-function toggleLoggedIn(name) {
+function toggleLoggedIn(name, user, pass) {
   isLoggedIn.value = !isLoggedIn.value;
   if (name) {
     fullName.value = name.value;
   } else {
     fullName.value = '';
   }
+
+  username.value = user;
+  password.value = pass;
 }
 
 const isLoginFormVisible = ref(false);
@@ -74,7 +79,7 @@ function registerUser(credentials, callback) {
 
 <template>
   <header>
-    <header-komponens :isLoggedIn="isLoggedIn" :fullName="fullName" @toggle-login-form="toggleLoginForm" />
+    <header-komponens :isLoggedIn="isLoggedIn" :fullName="fullName" :user="username" :pass="password" @toggle-login-form="toggleLoginForm" />
   </header>
   <div v-if="!isLoggedIn">
     <main>

frontend/src/components/header-komponens.vue

 <script setup>
+import axios from "axios";
+
 defineProps({
   isLoggedIn: {
     type: Boolean,
@@ -7,17 +9,43 @@ defineProps({
   fullName: {
     type: String,
     required: false
+  },
+  user: {
+    type: String,
+    required: true
+  },
+  pass: {
+    type: String,
+    required: true
   }
 })
+
+function logoutUser(credentials, callback) {
+  axios.post('http://localhost:8080/api/login', credentials)
+      .then(response => {
+        callback(response.data)
+      })
+      .catch(error => {
+        console.log(error);
+      });
+}
+
+function logout(user, pass){
+  //Itt lesz a kitalált user (Gipsz Jakab, keksz) aki megpróbál bejelentkezni
+  logoutUser({username: user, password: pass}, function(response) {
+    console.log(response)
+  })
+}
 </script>
 
+
 <template>
   <div class="greetings">
     <img alt="NoteStore logo" class="logo" src="../assets/book-shelf.svg" width="100" height="100" />
     <h1 class="title">TechnoCool NoteStore</h1>
     <div class="login">
       <h3 v-if="(fullName)" class="subtitle">Üdvözöllek, {{ fullName }}!</h3>
-      <button class="grow" @click="$emit('toggle-login-form')">{{ isLoggedIn ? 'Kijelentkezés' : 'Bejelentkezés' }}</button>
+      <button class="grow" @click="$emit('toggle-login-form'); logout(user, pass)">{{ isLoggedIn ? 'Kijelentkezés' : 'Bejelentkezés' }}</button>
     </div>
   </div>
 </template>

frontend/src/components/intro-komponens.vue

@@ -19,11 +19,11 @@ let fullName = ref('');
 
 const emit = defineEmits(['toggle-logged-in']);
 
-function handleLogin(success, name) {
+function handleLogin(success, name, user, pass) {
   isLoggedIn.value = success;
   if (success) {
     fullName.value = name;
-    emit('toggle-logged-in', fullName);
+    emit('toggle-logged-in', fullName, user, pass);
   }
 }
 </script>

frontend/src/components/loginform-komponens.vue

@@ -4,6 +4,7 @@ import axios from 'axios';
 
 let credentials = ref({ username: '', password: '' });
 let isFailed = ref(false);
+let logged_in = ref(false);
 
 const emit = defineEmits(['login']);
 
@@ -14,14 +15,17 @@ async function loginUser() {
     if (!response.data["loggedIn"]) {
       emit('login', false, ""); // Emit login event with failure value
       isFailed.value = true;
+      logged_in.value = false;
     } else {
-      emit('login', true, response.data["fullName"]); // Emit login event with success value and full name
+      emit('login', true, response.data["fullName"], credentials.value.username, credentials.value.password); // Emit login event with success value and full name
       isFailed.value = false;
+      logged_in.value = true;
     }
   } catch (error) {
     console.log(error);
     emit('login', false, ""); // Emit login event with failure value
     isFailed.value = true;
+    logged_in.value = false;
   }
 }