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

Update dependencies to include TinyMCE and Quill, enhance Navigation component with a new Newsletter submenu, and implement role-based access control for CMS features. Refactor user role handling to support multiple roles and improve user management functionality across various API endpoints.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-12-19 09:51:28 +01:00
parent baf6c59c0d
commit 435e28fd55
69 changed files with 5034 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
pages/newsletter/confirm.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<div class="min-h-full py-16 bg-gray-50">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-xl shadow-lg p-8 text-center">
<div v-if="loading" class="py-12">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-blue-600 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</div>
<p class="text-lg text-gray-600">Newsletter-Anmeldung wird bestätigt...</p>
</div>
<div v-else-if="error" class="py-12">
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
<h1 class="text-3xl font-display font-bold text-gray-900 mb-4">
Fehler
</h1>
<p class="text-lg text-gray-600 mb-8">
{{ error }}
</p>
<NuxtLink
to="/newsletter/subscribe"
class="inline-block px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition-colors"
>
Zurück zur Anmeldung
</NuxtLink>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
useHead({
title: 'Newsletter bestätigen - Harheimer TC',
})
const route = useRoute()
const loading = ref(true)
const error = ref('')
onMounted(async () => {
const token = route.query.token
if (!token) {
error.value = 'Bestätigungstoken fehlt'
loading.value = false
return
}
try {
// Rufe den API-Endpoint auf, der die Bestätigung durchführt
const response = await $fetch(`/api/newsletter/confirm?token=${token}`)
// Wenn erfolgreich, weiterleiten zur Bestätigungsseite
if (response.alreadyConfirmed) {
await navigateTo('/newsletter/confirmed?already=true')
} else {
await navigateTo('/newsletter/confirmed')
}
} catch (err) {
console.error('Fehler bei Newsletter-Bestätigung:', err)
error.value = err.data?.statusMessage || err.message || 'Fehler bei der Newsletter-Bestätigung'
loading.value = false
}
})
</script>

40
pages/newsletter/confirmed.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<div class="min-h-full py-16 bg-gray-50">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-xl shadow-lg p-8 text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h1 class="text-3xl font-display font-bold text-gray-900 mb-4">
{{ alreadyConfirmed ? 'Bereits bestätigt' : 'Anmeldung bestätigt!' }}
</h1>
<p class="text-lg text-gray-600 mb-8">
{{ alreadyConfirmed
? 'Ihre Newsletter-Anmeldung wurde bereits bestätigt.'
: 'Vielen Dank! Ihre Newsletter-Anmeldung wurde erfolgreich bestätigt. Sie erhalten ab sofort unseren Newsletter.' }}
</p>
<NuxtLink
to="/"
class="inline-block px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition-colors"
>
Zur Startseite
</NuxtLink>
</div>
</div>
</div>
</template>
<script setup>
const route = useRoute()
const alreadyConfirmed = route.query.already === 'true'
useHead({
title: 'Newsletter bestätigt - Harheimer TC',
})
</script>

179
pages/newsletter/subscribe.vue Normal file
View File

@@ -0,0 +1,179 @@
<template>
<div class="min-h-full py-16 bg-gray-50">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-xl shadow-lg p-8">
<h1 class="text-3xl font-display font-bold text-gray-900 mb-6">
Newsletter abonnieren
</h1>
<div class="w-24 h-1 bg-primary-600 mb-8" />
<div v-if="loadingGroups" class="text-center py-8">
<p class="text-gray-600">Lade verfügbare Newsletter...</p>
</div>
<form v-else @submit.prevent="subscribe" class="space-y-6">
<div>
<label for="groupId" class="block text-sm font-medium text-gray-700 mb-2">
Newsletter auswählen *
</label>
<select
id="groupId"
v-model="form.groupId"
required
@change="checkSubscription"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
>
<option value="">Bitte wählen Sie einen Newsletter</option>
<option v-for="group in groups" :key="group.id" :value="group.id">
{{ group.name }}
</option>
</select>
<p v-if="selectedGroup?.description" class="mt-2 text-sm text-gray-600">
{{ selectedGroup.description }}
</p>
<div v-if="alreadySubscribed" class="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
<p class="text-sm text-blue-700">
✓ Sie sind bereits für diesen Newsletter angemeldet.
</p>
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
E-Mail-Adresse *
</label>
<input
id="email"
v-model="form.email"
type="email"
required
@blur="checkSubscription"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
placeholder="ihre.email@example.com"
/>
</div>
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">
Name (optional)
</label>
<input
id="name"
v-model="form.name"
type="text"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
placeholder="Ihr Name"
/>
</div>
<div v-if="error" class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
{{ error }}
</div>
<div v-if="success" class="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700">
{{ success }}
</div>
<button
type="submit"
:disabled="loading || alreadySubscribed || !form.groupId"
class="w-full px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{{ loading ? 'Wird verarbeitet...' : alreadySubscribed ? 'Bereits abonniert' : 'Newsletter abonnieren' }}
</button>
</form>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
useHead({
title: 'Newsletter abonnieren - Harheimer TC',
})
const groups = ref([])
const loadingGroups = ref(true)
const form = ref({
groupId: '',
email: '',
name: ''
})
const loading = ref(false)
const checking = ref(false)
const error = ref('')
const success = ref('')
const alreadySubscribed = ref(false)
const selectedGroup = computed(() => {
return groups.value.find(g => g.id === form.value.groupId)
})
async function loadGroups() {
try {
const response = await $fetch('/api/newsletter/groups/public-list')
groups.value = response.groups || []
} catch (err) {
console.error('Fehler beim Laden der Newsletter-Gruppen:', err)
error.value = 'Fehler beim Laden der verfügbaren Newsletter. Bitte versuchen Sie es später erneut.'
} finally {
loadingGroups.value = false
}
}
async function checkSubscription() {
if (!form.value.groupId || !form.value.email || !form.value.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
alreadySubscribed.value = false
return
}
checking.value = true
try {
const response = await $fetch('/api/newsletter/check-subscription', {
query: {
email: form.value.email,
groupId: form.value.groupId
}
})
alreadySubscribed.value = response.subscribed || false
} catch (err) {
// Fehler ignorieren - könnte bedeuten, dass nicht abonniert ist
alreadySubscribed.value = false
} finally {
checking.value = false
}
}
async function subscribe() {
if (alreadySubscribed.value) {
return
}
loading.value = true
error.value = ''
success.value = ''
try {
const response = await $fetch('/api/newsletter/subscribe', {
method: 'POST',
body: form.value
})
success.value = response.message || 'Eine Bestätigungsmail wurde an Ihre E-Mail-Adresse gesendet.'
form.value = { groupId: form.value.groupId, email: '', name: '' }
alreadySubscribed.value = false
} catch (err) {
error.value = err.data?.statusMessage || err.message || 'Fehler bei der Anmeldung. Bitte versuchen Sie es später erneut.'
} finally {
loading.value = false
}
}
onMounted(() => {
loadGroups()
})
</script>

128
pages/newsletter/unsubscribe.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<div class="min-h-full py-16 bg-gray-50">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-xl shadow-lg p-8">
<h1 class="text-3xl font-display font-bold text-gray-900 mb-6">
Newsletter abmelden
</h1>
<div class="w-24 h-1 bg-primary-600 mb-8" />
<div v-if="loadingGroups" class="text-center py-8">
<p class="text-gray-600">Lade verfügbare Newsletter...</p>
</div>
<form v-else @submit.prevent="unsubscribe" class="space-y-6">
<div>
<label for="groupId" class="block text-sm font-medium text-gray-700 mb-2">
Newsletter auswählen *
</label>
<select
id="groupId"
v-model="form.groupId"
required
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
>
<option value="">Bitte wählen Sie einen Newsletter</option>
<option v-for="group in groups" :key="group.id" :value="group.id">
{{ group.name }}
</option>
</select>
<p v-if="selectedGroup?.description" class="mt-2 text-sm text-gray-600">
{{ selectedGroup.description }}
</p>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
E-Mail-Adresse *
</label>
<input
id="email"
v-model="form.email"
type="email"
required
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"
placeholder="ihre.email@example.com"
/>
</div>
<div v-if="error" class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
{{ error }}
</div>
<div v-if="success" class="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700">
{{ success }}
</div>
<button
type="submit"
:disabled="loading || !form.groupId"
class="w-full px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{{ loading ? 'Wird verarbeitet...' : 'Newsletter abmelden' }}
</button>
</form>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
useHead({
title: 'Newsletter abmelden - Harheimer TC',
})
const groups = ref([])
const loadingGroups = ref(true)
const form = ref({
groupId: '',
email: ''
})
const loading = ref(false)
const error = ref('')
const success = ref('')
const selectedGroup = computed(() => {
return groups.value.find(g => g.id === form.value.groupId)
})
async function loadGroups() {
try {
const response = await $fetch('/api/newsletter/groups/public-list')
groups.value = response.groups || []
} catch (err) {
console.error('Fehler beim Laden der Newsletter-Gruppen:', err)
error.value = 'Fehler beim Laden der verfügbaren Newsletter. Bitte versuchen Sie es später erneut.'
} finally {
loadingGroups.value = false
}
}
async function unsubscribe() {
loading.value = true
error.value = ''
success.value = ''
try {
const response = await $fetch('/api/newsletter/unsubscribe-by-email', {
method: 'POST',
body: form.value
})
success.value = response.message || 'Sie wurden erfolgreich vom Newsletter abgemeldet.'
form.value = { groupId: '', email: '' }
} catch (err) {
error.value = err.data?.statusMessage || err.message || 'Fehler bei der Abmeldung. Bitte versuchen Sie es später erneut.'
} finally {
loading.value = false
}
}
onMounted(() => {
loadGroups()
})
</script>

40
pages/newsletter/unsubscribed.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<div class="min-h-full py-16 bg-gray-50">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-xl shadow-lg p-8 text-center">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
</svg>
</div>
<h1 class="text-3xl font-display font-bold text-gray-900 mb-4">
{{ alreadyUnsubscribed ? 'Bereits abgemeldet' : 'Erfolgreich abgemeldet' }}
</h1>
<p class="text-lg text-gray-600 mb-8">
{{ alreadyUnsubscribed
? 'Sie sind bereits vom Newsletter abgemeldet.'
: 'Sie wurden erfolgreich vom Newsletter abgemeldet. Sie erhalten keine weiteren Newsletter mehr.' }}
</p>
<NuxtLink
to="/"
class="inline-block px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition-colors"
>
Zur Startseite
</NuxtLink>
</div>
</div>
</div>
</template>
<script setup>
const route = useRoute()
const alreadyUnsubscribed = route.query.already === 'true'
useHead({
title: 'Newsletter abgemeldet - Harheimer TC',
})
</script>