header-komponens.vue

<script setup>
import axios from "axios";

defineProps({
  isLoggedIn: {
    type: Boolean,
    required: true
  },
  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'); logout(user, pass)">{{ isLoggedIn ? 'Kijelentkezés' : 'Bejelentkezés' }}</button>
    </div>
  </div>
</template>

<style scoped>

.login {
  position: fixed;
  right: 5%;
}

.title {
  color: var(--lightest);
  text-shadow: 0 0 10px var(--light);
}

.title:after{
  content: "™";
  vertical-align: super;
  font-size: large;
}

h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }

  .greetings {
    display: grid;
    padding: 1em;
    grid-template-columns: 1fr 4fr 2fr;
    align-items: center;
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  .subtitle {
    color: var(--lightest);
  }
}
</style>