Add roles routes to backend and frontend; implement routing and UI components for admin roles management

frontend/src/App.vue

@@ -73,6 +73,7 @@ const pageTitle = computed(() => {
     'workdays': 'Arbeitstage',
     'calendar': 'Kalender',
     'admin-holidays': 'Feiertage',
+    'admin-roles': 'Rechte',
     'settings-profile': 'Persönliches',
     'settings-password': 'Passwort ändern',
     'settings-timewish': 'Zeitwünsche',

frontend/src/router/index.js

@@ -19,6 +19,7 @@ import Holidays from '../views/Holidays.vue'
 import Profile from '../views/Profile.vue'
 import PasswordChange from '../views/PasswordChange.vue'
 import Timewish from '../views/Timewish.vue'
+import Roles from '../views/Roles.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -101,6 +102,12 @@ const router = createRouter({
       component: Holidays,
       meta: { requiresAuth: true, requiresAdmin: true }
     },
+    {
+      path: '/admin/roles',
+      name: 'admin-roles',
+      component: Roles,
+      meta: { requiresAuth: true, requiresAdmin: true }
+    },
     {
       path: '/settings/profile',
       name: 'settings-profile',

frontend/src/views/Roles.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="roles-page">
+    <div class="card">
+      <div class="info-banner">
+        <strong>Hinweis:</strong> Als Administrator können Sie hier die Berechtigungen anderer Benutzer verwalten.
+        Admins haben Zugriff auf zusätzliche Funktionen wie Feiertags-Verwaltung.
+      </div>
+
+      <!-- Tabelle mit allen Benutzern -->
+      <table class="users-table">
+        <thead>
+          <tr>
+            <th>Benutzer</th>
+            <th>Bundesland</th>
+            <th>Aktuelle Rolle</th>
+            <th>Aktion</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="users.length === 0">
+            <td colspan="4" class="no-data">Keine Benutzer gefunden</td>
+          </tr>
+          <tr v-for="user in users" :key="user.id">
+            <td>{{ user.fullName }}</td>
+            <td>{{ user.stateName || '—' }}</td>
+            <td>
+              <span class="role-badge" :class="user.roleString">
+                {{ user.roleString === 'admin' ? 'Administrator' : 'Benutzer' }}
+              </span>
+            </td>
+            <td>
+              <button 
+                v-if="user.roleString === 'user'"
+                @click="promoteToAdmin(user.id, user.fullName)" 
+                class="btn btn-promote"
+                :disabled="loading"
+              >
+                Zu Admin machen
+              </button>
+              <button 
+                v-else
+                @click="demoteToUser(user.id, user.fullName)" 
+                class="btn btn-demote"
+                :disabled="loading"
+              >
+                Zu Benutzer machen
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Modal-Komponente -->
+    <Modal 
+      v-if="showModal"
+      :show="showModal"
+      :title="modalConfig.title"
+      :message="modalConfig.message"
+      :type="modalConfig.type"
+      :confirmText="modalConfig.confirmText"
+      :cancelText="modalConfig.cancelText"
+      @confirm="onConfirm" 
+      @cancel="onCancel" 
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useAuthStore } from '../stores/authStore'
+import { useModal } from '../composables/useModal'
+import Modal from '../components/Modal.vue'
+
+const authStore = useAuthStore()
+const users = ref([])
+const loading = ref(false)
+
+const { showModal, modalConfig, alert, confirm, onConfirm, onCancel } = useModal()
+
+// Lade alle Benutzer
+async function loadUsers() {
+  try {
+    loading.value = true
+    const response = await fetch('http://localhost:3010/api/roles/users', {
+      headers: {
+        'Authorization': `Bearer ${authStore.token}`
+      }
+    })
+    
+    if (!response.ok) {
+      throw new Error('Fehler beim Laden der Benutzer')
+    }
+    
+    users.value = await response.json()
+  } catch (error) {
+    console.error('Fehler beim Laden der Benutzer:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Befördere zu Admin
+async function promoteToAdmin(userId, userName) {
+  const confirmed = await confirm(
+    `Möchten Sie ${userName} wirklich zu einem Administrator machen? Admins haben erweiterte Berechtigungen.`,
+    'Zu Admin machen'
+  )
+  
+  if (!confirmed) {
+    return
+  }
+  
+  await updateRole(userId, 1)
+}
+
+// Degradiere zu User
+async function demoteToUser(userId, userName) {
+  const confirmed = await confirm(
+    `Möchten Sie ${userName} wirklich die Administrator-Rechte entziehen?`,
+    'Zu Benutzer machen'
+  )
+  
+  if (!confirmed) {
+    return
+  }
+  
+  await updateRole(userId, 0)
+}
+
+// Aktualisiere Rolle
+async function updateRole(userId, newRole) {
+  try {
+    loading.value = true
+    const response = await fetch(`http://localhost:3010/api/roles/users/${userId}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${authStore.token}`
+      },
+      body: JSON.stringify({ role: newRole })
+    })
+    
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Fehler beim Ändern der Rolle')
+    }
+    
+    // Liste neu laden
+    await loadUsers()
+    
+    await alert('Rolle erfolgreich geändert', 'Erfolg')
+  } catch (error) {
+    console.error('Fehler beim Ändern der Rolle:', error)
+    await alert(`Fehler: ${error.message}`, 'Fehler')
+  } finally {
+    loading.value = false
+  }
+}
+
+// Initiales Laden
+onMounted(() => {
+  loadUsers()
+})
+</script>
+
+<style scoped>
+.roles-page {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.info-banner {
+  background: #e3f2fd;
+  border: 1px solid #90caf9;
+  border-radius: 4px;
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  font-size: 13px;
+  color: #1565c0;
+}
+
+.users-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.users-table th {
+  text-align: left;
+  padding: 12px 10px;
+  background: #f5f5f5;
+  border-bottom: 2px solid #ddd;
+  font-weight: 600;
+  font-size: 12px;
+  color: #666;
+}
+
+.users-table td {
+  padding: 12px 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.users-table tbody tr:hover {
+  background: #f9f9f9;
+}
+
+.no-data {
+  text-align: center;
+  color: #999;
+  font-style: italic;
+  padding: 20px !important;
+}
+
+.role-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.role-badge.user {
+  background: #e0e0e0;
+  color: #666;
+}
+
+.role-badge.admin {
+  background: #f3e5f5;
+  color: #7b1fa2;
+}
+
+.btn {
+  padding: 6px 14px;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-promote {
+  background: linear-gradient(135deg, #7b1fa2, #9c27b0);
+  color: white;
+  box-shadow: 0 2px 4px rgba(123, 31, 162, 0.3);
+}
+
+.btn-promote:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(123, 31, 162, 0.4);
+}
+
+.btn-demote {
+  background: linear-gradient(135deg, #757575, #616161);
+  color: white;
+  box-shadow: 0 2px 4px rgba(97, 97, 97, 0.3);
+}
+
+.btn-demote:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(97, 97, 97, 0.4);
+}
+</style>
+