torsten/harheimertc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-21 11:23:06 +02:00
parent 4dc07b7b25
commit 2b249577a7
17 changed files with 1080 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
pages/cms/index.vue Normal file
View File

@@ -0,0 +1,124 @@
<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">
Content Management System
</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 im CMS, {{ user?.name }}!
</h2>
<p class="text-gray-600">
Hier können Sie Inhalte der Website verwalten.
</p>
</div>
<!-- CMS Modules -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-xl shadow-lg 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">
<Calendar :size="24" class="text-primary-600" />
</div>
<h3 class="text-lg font-semibold text-gray-900">Termine verwalten</h3>
</div>
<p class="text-gray-600 text-sm mb-4">
Termine hinzufügen, bearbeiten und löschen
</p>
<button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
Öffnen →
</button>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg 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 mb-4">
News für Mitglieder erstellen und verwalten
</p>
<button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
Öffnen →
</button>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg 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">
<FileText :size="24" class="text-primary-600" />
</div>
<h3 class="text-lg font-semibold text-gray-900">Spielpläne</h3>
</div>
<p class="text-gray-600 text-sm mb-4">
Spielpläne hochladen und verwalten
</p>
<button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
Öffnen →
</button>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg 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">Mitglieder</h3>
</div>
<p class="text-gray-600 text-sm mb-4">
Mitgliederdaten verwalten
</p>
<button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
Öffnen →
</button>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg 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">
<Image :size="24" class="text-primary-600" />
</div>
<h3 class="text-lg font-semibold text-gray-900">Galerie</h3>
</div>
<p class="text-gray-600 text-sm mb-4">
Bilder hochladen und verwalten
</p>
<button class="text-sm text-primary-600 hover:text-primary-700 font-medium">
Öffnen →
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Calendar, Newspaper, FileText, Users, Image } from 'lucide-vue-next'
const user = ref(null)
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: 'CMS - Harheimer TC',
})
</script>

152
pages/login.vue Normal file
View File

@@ -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>

111
pages/mitgliederbereich/index.vue Normal file
View File

@@ -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>

115
pages/passwort-vergessen.vue Normal file
View File

@@ -0,0 +1,115 @@
<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">
Passwort zurücksetzen
</h2>
<p class="mt-2 text-sm text-gray-600">
Geben Sie Ihre E-Mail-Adresse ein, um Ihr Passwort zurückzusetzen
</p>
</div>
<div class="bg-white rounded-xl shadow-lg p-8">
<form @submit.prevent="handleReset" 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="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>
<!-- 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 ? 'Wird gesendet...' : 'Passwort zurücksetzen' }}</span>
</button>
<!-- Back to Login -->
<div class="text-center">
<NuxtLink
to="/login"
class="text-sm text-primary-600 hover:text-primary-700 font-medium"
>
Zurück zum Login
</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">
Sie erhalten eine E-Mail mit einem Link zum Zurücksetzen Ihres Passworts.
</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { AlertCircle, Check, Loader2 } from 'lucide-vue-next'
const email = ref('')
const isLoading = ref(false)
const errorMessage = ref('')
const successMessage = ref('')
const handleReset = async () => {
isLoading.value = true
errorMessage.value = ''
successMessage.value = ''
try {
const response = await $fetch('/api/auth/reset-password', {
method: 'POST',
body: { email: email.value }
})
if (response.success) {
successMessage.value = 'Eine E-Mail mit weiteren Anweisungen wurde an Ihre E-Mail-Adresse gesendet.'
email.value = ''
}
} catch (error) {
errorMessage.value = error.data?.message || 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.'
} finally {
isLoading.value = false
}
}
useHead({
title: 'Passwort vergessen - Harheimer TC',
})
</script>