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/login.vue
+++ b/pages/login.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="min-h-full flex items-center justify-center py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
+    <div class="max-w-md w-full space-y-8">
+      <div class="text-center">
+        <h2 class="text-3xl font-display font-bold text-gray-900">
+          Mitglieder-Login
+        </h2>
+        <p class="mt-2 text-sm text-gray-600">
+          Melden Sie sich an, um auf den Mitgliederbereich zuzugreifen
+        </p>
+      </div>
+
+      <div class="bg-white rounded-xl shadow-lg p-8">
+        <form @submit.prevent="handleLogin" class="space-y-6">
+          <!-- Email -->
+          <div>
+            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
+              E-Mail-Adresse
+            </label>
+            <input
+              id="email"
+              v-model="formData.email"
+              type="email"
+              required
+              autocomplete="email"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
+              :class="{ 'border-red-500': errorMessage }"
+              placeholder="ihre-email@example.com"
+            />
+          </div>
+
+          <!-- Password -->
+          <div>
+            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
+              Passwort
+            </label>
+            <input
+              id="password"
+              v-model="formData.password"
+              type="password"
+              required
+              autocomplete="current-password"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent transition-all"
+              :class="{ 'border-red-500': errorMessage }"
+              placeholder="••••••••"
+            />
+          </div>
+
+          <!-- Error Message -->
+          <div v-if="errorMessage" class="bg-red-50 border border-red-200 rounded-lg p-4">
+            <p class="text-sm text-red-800 flex items-center">
+              <AlertCircle :size="18" class="mr-2" />
+              {{ errorMessage }}
+            </p>
+          </div>
+
+          <!-- Success Message -->
+          <div v-if="successMessage" class="bg-green-50 border border-green-200 rounded-lg p-4">
+            <p class="text-sm text-green-800 flex items-center">
+              <Check :size="18" class="mr-2" />
+              {{ successMessage }}
+            </p>
+          </div>
+
+          <!-- Submit Button -->
+          <button
+            type="submit"
+            :disabled="isLoading"
+            class="w-full px-6 py-3 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-400 text-white font-semibold rounded-lg transition-colors flex items-center justify-center"
+          >
+            <Loader2 v-if="isLoading" :size="20" class="mr-2 animate-spin" />
+            <span>{{ isLoading ? 'Anmeldung läuft...' : 'Anmelden' }}</span>
+          </button>
+
+          <!-- Forgot Password Link -->
+          <div class="text-center">
+            <NuxtLink
+              to="/passwort-vergessen"
+              class="text-sm text-primary-600 hover:text-primary-700 font-medium"
+            >
+              Passwort vergessen?
+            </NuxtLink>
+          </div>
+        </form>
+      </div>
+
+      <!-- Info Box -->
+      <div class="bg-primary-50 border border-primary-100 rounded-lg p-4">
+        <p class="text-sm text-primary-800 text-center">
+          <Lock :size="16" class="inline mr-1" />
+          Nur für Vereinsmitglieder. Kein Zugang? Kontaktieren Sie den Vorstand.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { AlertCircle, Check, Loader2, Lock } from 'lucide-vue-next'
+
+const formData = ref({
+  email: '',
+  password: ''
+})
+
+const isLoading = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+
+const handleLogin = async () => {
+  isLoading.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  try {
+    const response = await $fetch('/api/auth/login', {
+      method: 'POST',
+      body: {
+        email: formData.value.email,
+        password: formData.value.password
+      }
+    })
+
+    if (response.success) {
+      successMessage.value = 'Anmeldung erfolgreich! Sie werden weitergeleitet...'
+      
+      // Redirect based on role
+      setTimeout(() => {
+        if (response.user.role === 'admin' || response.user.role === 'vorstand') {
+          navigateTo('/cms')
+        } else {
+          navigateTo('/mitgliederbereich')
+        }
+      }, 1000)
+    }
+  } catch (error) {
+    errorMessage.value = error.data?.message || 'Anmeldung fehlgeschlagen. Bitte prüfen Sie Ihre Zugangsdaten.'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+definePageMeta({
+  layout: 'default'
+})
+
+useHead({
+  title: 'Login - Harheimer TC',
+})
+</script>
+