HomeView.vue

<script lang="ts">
import { useAuthStore } from '../stores/auth'
import { useRouter } from 'vue-router'

export default {
    setup() {
        const authStore = useAuthStore()
        const router = useRouter()

        return {
            authStore,
            router,
        }
    },
    methods: {
        async logout() {
            try {
                await this.authStore.logout(this.$router)
            } catch (error) {
                console.error(error)
            }
        },
    },
    async mounted() {
        await this.authStore.fetchUser()
    },
}
</script>

<template>
  <div class="home-container">
    <div class="welcome-box">
      <h1>Willkommen auf der HFT CO₂-Webplattform</h1>
      <p>
        Hier kannst du Umweltdaten wie CO₂-Konzentration, Temperatur und Luftfeuchtigkeit aus verschiedenen Räumen der HFT visualisieren.
      </p>

      <div v-if="authStore.isAuthenticated" class="status-box">
        <h2>👋 Hallo, {{ authStore.user?.username }}</h2>
        <p>Du bist aktuell eingeloggt.</p>
        <button @click="logout">Logout</button>
      </div>

      <div v-else class="status-box">
        <p>Du bist nicht eingeloggt.</p>
        <router-link class="login-link" to="/login">Jetzt einloggen</router-link>
      </div>
    </div>
  </div>
</template>


<style scoped>
.home-container {
  display: flex;
  justify-content: center;
  padding-top: 120px;
  padding: 2rem;
}

.welcome-box {
  max-width: 800px;
  width: 100%;
  background: #f5f5f5;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.status-box {
  margin-top: 2rem;
  padding: 1rem;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
}

button {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background-color: #007bff;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.login-link {
  display: inline-block;
  margin-top: 0.8rem;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.login-link:hover {
  text-decoration: underline;
}
</style>