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

Add user management system with approval workflow and role assignment

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-21 11:35:02 +02:00
parent f058516a3d
commit 96ff9e5d44
59 changed files with 1145 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
pages/cms/benutzer.vue Normal file
View File

@@ -0,0 +1,308 @@
<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">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-4xl font-display font-bold text-gray-900">
Benutzerverwaltung
</h1>
<div class="w-24 h-1 bg-primary-600 mt-4" />
</div>
<NuxtLink
to="/cms"
class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg transition-colors"
>
← Zurück zum CMS
</NuxtLink>
</div>
<!-- Pending Users -->
<div v-if="pendingUsers.length > 0" class="mb-8">
<h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
<AlertCircle :size="24" class="inline text-yellow-600 mr-2" />
Wartende Registrierungen ({{ pendingUsers.length }})
</h2>
<div class="space-y-4">
<div
v-for="user in pendingUsers"
:key="user.id"
class="bg-yellow-50 border-l-4 border-yellow-400 rounded-lg p-6 shadow"
>
<div class="flex items-start justify-between">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900">{{ user.name }}</h3>
<p class="text-sm text-gray-600 mt-1">{{ user.email }}</p>
<p v-if="user.phone" class="text-sm text-gray-600">{{ user.phone }}</p>
<p class="text-xs text-gray-500 mt-2">
Registriert am: {{ formatDate(user.created) }}
</p>
</div>
<div class="flex flex-col space-y-2 ml-4">
<!-- Role Selection -->
<select
v-model="user.selectedRole"
class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-600"
>
<option value="mitglied">Mitglied</option>
<option value="vorstand">Vorstand</option>
<option value="admin">Administrator</option>
</select>
<!-- Approve Button -->
<button
@click="approveUser(user)"
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-lg transition-colors flex items-center justify-center"
>
<Check :size="16" class="mr-1" />
Freischalten
</button>
<!-- Reject Button -->
<button
@click="rejectUser(user)"
class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg transition-colors flex items-center justify-center"
>
<X :size="16" class="mr-1" />
Ablehnen
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Active Users -->
<div>
<h2 class="text-2xl font-display font-bold text-gray-900 mb-4">
Aktive Benutzer ({{ activeUsers.length }})
</h2>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
E-Mail
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Telefon
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Rolle
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Letzter Login
</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
Aktionen
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr v-for="user in activeUsers" :key="user.id" class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">{{ user.name }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-600">{{ user.email }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-600">{{ user.phone || '-' }}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<select
v-model="user.role"
@change="updateUserRole(user)"
class="px-3 py-1 border border-gray-300 rounded text-sm"
:class="{
'bg-red-50 border-red-300': user.role === 'admin',
'bg-blue-50 border-blue-300': user.role === 'vorstand',
'bg-gray-50 border-gray-300': user.role === 'mitglied'
}"
>
<option value="mitglied">Mitglied</option>
<option value="vorstand">Vorstand</option>
<option value="admin">Administrator</option>
</select>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-600">
{{ user.lastLogin ? formatDate(user.lastLogin) : 'Nie' }}
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
<button
v-if="user.id !== currentUserId"
@click="deactivateUser(user)"
class="text-red-600 hover:text-red-800 font-medium"
>
Deaktivieren
</button>
<span v-else class="text-gray-400">Eigenes Konto</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Success/Error Messages -->
<div v-if="successMessage" class="fixed bottom-20 right-4 bg-green-50 border border-green-200 rounded-lg p-4 shadow-lg">
<p class="text-sm text-green-800 flex items-center">
<Check :size="18" class="mr-2" />
{{ successMessage }}
</p>
</div>
<div v-if="errorMessage" class="fixed bottom-20 right-4 bg-red-50 border border-red-200 rounded-lg p-4 shadow-lg">
<p class="text-sm text-red-800 flex items-center">
<AlertCircle :size="18" class="mr-2" />
{{ errorMessage }}
</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { AlertCircle, Check, X } from 'lucide-vue-next'
const allUsers = ref([])
const currentUserId = ref(null)
const successMessage = ref('')
const errorMessage = ref('')
const pendingUsers = computed(() => {
return allUsers.value
.filter(u => u.active === false)
.map(u => ({ ...u, selectedRole: u.role || 'mitglied' }))
})
const activeUsers = computed(() => {
return allUsers.value.filter(u => u.active === true)
})
const formatDate = (dateString) => {
return new Date(dateString).toLocaleString('de-DE', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
})
}
const loadUsers = async () => {
try {
const response = await $fetch('/api/cms/users/list')
allUsers.value = response.users
} catch (error) {
console.error('Fehler beim Laden der Benutzer:', error)
errorMessage.value = 'Fehler beim Laden der Benutzerliste'
}
}
const approveUser = async (user) => {
try {
await $fetch('/api/cms/users/approve', {
method: 'POST',
body: {
userId: user.id,
role: user.selectedRole
}
})
successMessage.value = `Benutzer ${user.name} wurde als ${user.selectedRole} freigeschaltet`
setTimeout(() => successMessage.value = '', 3000)
await loadUsers()
} catch (error) {
errorMessage.value = 'Fehler beim Freischalten des Benutzers'
setTimeout(() => errorMessage.value = '', 3000)
}
}
const rejectUser = async (user) => {
if (!confirm(`Möchten Sie die Registrierung von ${user.name} wirklich ablehnen?`)) {
return
}
try {
await $fetch('/api/cms/users/reject', {
method: 'POST',
body: { userId: user.id }
})
successMessage.value = `Registrierung von ${user.name} wurde abgelehnt`
setTimeout(() => successMessage.value = '', 3000)
await loadUsers()
} catch (error) {
errorMessage.value = 'Fehler beim Ablehnen der Registrierung'
setTimeout(() => errorMessage.value = '', 3000)
}
}
const updateUserRole = async (user) => {
try {
await $fetch('/api/cms/users/update-role', {
method: 'POST',
body: {
userId: user.id,
role: user.role
}
})
successMessage.value = `Rolle von ${user.name} wurde aktualisiert`
setTimeout(() => successMessage.value = '', 3000)
} catch (error) {
errorMessage.value = 'Fehler beim Aktualisieren der Rolle'
setTimeout(() => errorMessage.value = '', 3000)
await loadUsers() // Reload to revert changes
}
}
const deactivateUser = async (user) => {
if (!confirm(`Möchten Sie ${user.name} wirklich deaktivieren?`)) {
return
}
try {
await $fetch('/api/cms/users/deactivate', {
method: 'POST',
body: { userId: user.id }
})
successMessage.value = `Benutzer ${user.name} wurde deaktiviert`
setTimeout(() => successMessage.value = '', 3000)
await loadUsers()
} catch (error) {
errorMessage.value = 'Fehler beim Deaktivieren des Benutzers'
setTimeout(() => errorMessage.value = '', 3000)
}
}
onMounted(async () => {
// Get current user ID
try {
const response = await $fetch('/api/auth/status')
currentUserId.value = response.user?.id
} catch (error) {
console.error('Fehler beim Laden des aktuellen Benutzers:', error)
}
await loadUsers()
})
definePageMeta({
middleware: 'auth'
})
useHead({
title: 'Benutzerverwaltung - CMS - Harheimer TC',
})
</script>