112 lines
3.5 KiB
Vue
112 lines
3.5 KiB
Vue
<template>
|
|
<div class="min-h-full py-16 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
|
|
Mitgliederbereich
|
|
</h1>
|
|
<div class="w-24 h-1 bg-primary-600 mb-8" />
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
|
|
<h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
|
|
Willkommen, {{ user?.name }}!
|
|
</h2>
|
|
<p class="text-gray-600 mb-4">
|
|
Sie sind als <span class="font-semibold text-primary-600">{{ roleLabel }}</span> angemeldet.
|
|
</p>
|
|
<p class="text-sm text-gray-500">
|
|
Letzter Login: {{ lastLoginFormatted }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Quick Links -->
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<NuxtLink
|
|
to="/mitgliederbereich/mitglieder"
|
|
class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-100"
|
|
>
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
|
|
<Users :size="24" class="text-primary-600" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900">Mitgliederliste</h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm">
|
|
Kontaktdaten aller Vereinsmitglieder
|
|
</p>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/mitgliederbereich/news"
|
|
class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-100"
|
|
>
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
|
|
<Newspaper :size="24" class="text-primary-600" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900">Interne News</h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm">
|
|
Neuigkeiten nur für Mitglieder
|
|
</p>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/mitgliederbereich/profil"
|
|
class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-100"
|
|
>
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mr-4">
|
|
<UserCog :size="24" class="text-primary-600" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900">Mein Profil</h3>
|
|
</div>
|
|
<p class="text-gray-600 text-sm">
|
|
Profil bearbeiten und Passwort ändern
|
|
</p>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { Users, Newspaper, UserCog } from 'lucide-vue-next'
|
|
|
|
const user = ref(null)
|
|
|
|
const roleLabel = computed(() => {
|
|
const labels = {
|
|
admin: 'Administrator',
|
|
vorstand: 'Vorstand',
|
|
mitglied: 'Mitglied'
|
|
}
|
|
return labels[user.value?.role] || 'Mitglied'
|
|
})
|
|
|
|
const lastLoginFormatted = computed(() => {
|
|
if (!user.value?.lastLogin) return 'Erste Anmeldung'
|
|
return new Date(user.value.lastLogin).toLocaleString('de-DE')
|
|
})
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const response = await $fetch('/api/auth/status')
|
|
if (response.isLoggedIn) {
|
|
user.value = response.user
|
|
}
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Benutzerdaten:', error)
|
|
}
|
|
})
|
|
|
|
definePageMeta({
|
|
middleware: 'auth'
|
|
})
|
|
|
|
useHead({
|
|
title: 'Mitgliederbereich - Harheimer TC',
|
|
})
|
|
</script>
|
|
|