Skip to content
Snippets Groups Projects
Select Git revision
  • 49be3749424eb0a812820d8befcf92ac5987cd04
  • main default protected
  • demo
  • tolsztoj
4 results

header-komponens.vue

Blame
  • header-komponens.vue 1.91 KiB
    <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>