Add authentication system with login, password reset, and member area

2025-10-21 11:23:06 +02:00
parent 4dc07b7b25
commit 2b249577a7
17 changed files with 1080 additions and 2 deletions
--- a/pages/mitgliederbereich/index.vue
+++ b/pages/mitgliederbereich/index.vue
@@ -0,0 +1,111 @@
+<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>
+