App.vue

<script setup>
import HeaderKomponens from '@/components/header-komponens.vue';
import IntroKomponens from "@/components/intro-komponens.vue";
import BrowseKomponens from "@/components/browse-komponens.vue";
import axios from "axios";
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, 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);

function toggleLoginForm() {
  if(isLoggedIn.value) {
    toggleLoggedIn();
    isLoginFormVisible.value = false;
  } else {
    isLoginFormVisible.value = true;
  }
}

// register user
function registerUser(credentials, callback) {
  return axios.post('http://localhost:8080/api/register', credentials)
      .then(response => {
        callback(response.data)
      })
      .catch(error => {
        console.error(error);
      });
}

// prepopulating the database
  registerUser({fullName: 'Gipsz Jakab', username: 'gipja', password: 'süti'}, function (res) {
    console.log(res)
  }).then(() => {
    registerUser({fullName: 'Kada Zsolt', username: 'kazso', password: 'keksz'}, function (res) {
      console.log(res)
    })
  }).then(() => {
    return axios.post('http://localhost:8080/api/addsubject', {subjectId: "szofttech", name: "Szoftver Technológia"})
  }).then(() => {
      return axios.post('http://localhost:8080/api/setdetails', {
        id: 1,
        user: "kazso",
        subject: "szofttech",
        title: "Szoftvertechnológia: 1. előadás",
        description: "A Szoftvertechnológia alapjai című tárgy első előadás diái. Tartalmazza a szoftverkövetelményeket, milyen alap elemei vannak, mit kell tartalmaznia.",
        filepath: "1.eloadas_szoftvertechnologia_2024_v1.0.pdf"
      })
  }
  ).then(() => {
        return axios.post('http://localhost:8080/api/setdetails', {
          id: 2,
          user: "kazso",
          subject: "szofttech",
          title: "Szoftvertechnológia: 3. előadás",
          description: "A Szoftvertechnológia alapjai című tárgy harmadik előadás diái. Tartalmazza a szoftverfolyamatot, milyen modellek léteznek és a szoftverfolyamat szakaszait.",
          filepath: "3.eloadas_szoftvertechnologia_2024_v1.0.pdf"
        })
      }
  )
</script>

<template>
  <header>
    <header-komponens :isLoggedIn="isLoggedIn" :fullName="fullName" :user="username" :pass="password" @toggle-login-form="toggleLoginForm" />
  </header>
  <div v-if="!isLoggedIn">
    <main>
      <h1>A TechnoCool NoteStore jegyzetek, segédanyagok hallgatók közötti egyszerű megosztására alkalmas szolgáltatás.</h1>
      <div>
        <intro-komponens :isLoginFormVisible="isLoginFormVisible" @toggle-logged-in="toggleLoggedIn" />
      </div>
    </main>
  </div>
  <div v-else>
    <browse-komponens/>
  </div>
</template>

<style scoped>

@media (min-width: 1024px) {

  main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
    color: var(--light);
    padding: 20px;
  }

  header {
    display: block;
    line-height: 1.5;
    background-color: var(--dark);
    margin: 10px 0 20px 0;
  }

  main h1 {
    padding-right: 20%;
    text-align: justify;
  }
}
</style>