diff --git a/frontend/src/App.vue b/frontend/src/App.vue index a2ed770598aca91df3d9a414ce778371eb05025e..509ca00b33e6ebe35f988c0dca43110b01c23744 100644 --- a/frontend/src/App.vue +++ b/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> diff --git a/frontend/src/components/header-komponens.vue b/frontend/src/components/header-komponens.vue index c49303575862a6ba01407e5f98d4ddd792283783..10a0fc4474d692fe508e538455e88d8a339faaa8 100644 --- a/frontend/src/components/header-komponens.vue +++ b/frontend/src/components/header-komponens.vue @@ -1,4 +1,6 @@ <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> diff --git a/frontend/src/components/intro-komponens.vue b/frontend/src/components/intro-komponens.vue index 73b1ab356ef6dc36282f935be779cee0c36e084a..27ca53b6aafdbaf4898c84a953c43d374f26e7d9 100644 --- a/frontend/src/components/intro-komponens.vue +++ b/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> diff --git a/frontend/src/components/loginform-komponens.vue b/frontend/src/components/loginform-komponens.vue index adfd64207bc1c87fe312a7158fa38ce2cf83741f..265f642cb86634a83a5dbc4b06d96f1a3140c696 100644 --- a/frontend/src/components/loginform-komponens.vue +++ b/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; } }