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

backend/src/controllers/RolesController.js

@@ -0,0 +1,58 @@
+const RolesService = require('../services/RolesService');
+
+/**
+ * Controller für Rollen-Verwaltung
+ * Verarbeitet HTTP-Requests und delegiert an RolesService
+ */
+class RolesController {
+  /**
+   * Holt alle Benutzer mit ihren Rollen
+   */
+  async getAllUsers(req, res) {
+    try {
+      const users = await RolesService.getAllUsers();
+      res.json(users);
+    } catch (error) {
+      console.error('Fehler beim Abrufen der Benutzer:', error);
+      res.status(500).json({ 
+        message: 'Fehler beim Abrufen der Benutzer',
+        error: error.message 
+      });
+    }
+  }
+
+  /**
+   * Ändert die Rolle eines Benutzers
+   */
+  async updateUserRole(req, res) {
+    try {
+      const adminUserId = req.user?.id || 1;
+      const targetUserId = parseInt(req.params.id);
+      const { role } = req.body;
+      
+      if (isNaN(targetUserId)) {
+        return res.status(400).json({ message: 'Ungültige Benutzer-ID' });
+      }
+      
+      if (role === undefined || role === null) {
+        return res.status(400).json({ message: 'Rolle ist erforderlich' });
+      }
+      
+      const user = await RolesService.updateUserRole(adminUserId, targetUserId, role);
+      res.json(user);
+    } catch (error) {
+      console.error('Fehler beim Aktualisieren der Rolle:', error);
+      
+      if (error.message.includes('Keine Berechtigung')) {
+        return res.status(403).json({ message: error.message });
+      }
+      
+      res.status(500).json({ 
+        message: error.message 
+      });
+    }
+  }
+}
+
+module.exports = new RolesController();
+

backend/src/index.js

@@ -102,6 +102,10 @@ app.use('/api/password', authenticateToken, passwordRouter);
 const timewishRouter = require('./routes/timewish');
 app.use('/api/timewish', authenticateToken, timewishRouter);
 
+// Roles routes (geschützt, nur Admin) - MIT ID-Hashing
+const rolesRouter = require('./routes/roles');
+app.use('/api/roles', authenticateToken, rolesRouter);
+
 // Error handling middleware
 app.use((err, req, res, next) => {
   console.error(err.stack);

backend/src/routes/roles.js

@@ -0,0 +1,17 @@
+const express = require('express');
+const router = express.Router();
+const RolesController = require('../controllers/RolesController');
+const unhashRequestIds = require('../middleware/unhashRequest');
+
+/**
+ * Routen für Rollen-Verwaltung (nur für Admins)
+ */
+
+// GET /api/roles/users - Alle Benutzer mit Rollen abrufen
+router.get('/users', RolesController.getAllUsers.bind(RolesController));
+
+// PUT /api/roles/users/:id - Rolle eines Benutzers ändern
+router.put('/users/:id', unhashRequestIds, RolesController.updateUserRole.bind(RolesController));
+
+module.exports = router;
+

backend/src/services/RolesService.js

@@ -0,0 +1,91 @@
+const database = require('../config/database');
+
+/**
+ * Service-Klasse für Rollen-Verwaltung
+ * Nur für Admins: Verwaltet User-Rollen
+ */
+class RolesService {
+  /**
+   * Holt alle Benutzer mit ihren Rollen
+   * @returns {Promise<Array>} Array von Benutzern
+   */
+  async getAllUsers() {
+    const { User, State } = database.getModels();
+    
+    const users = await User.findAll({
+      include: [
+        {
+          model: State,
+          as: 'state',
+          attributes: ['state_name'],
+          required: false
+        }
+      ],
+      order: [['full_name', 'ASC']]
+    });
+    
+    return users.map(u => ({
+      id: u.id,
+      fullName: u.full_name,
+      role: u.role, // 0 = user, 1 = admin
+      roleString: u.role === 1 ? 'admin' : 'user',
+      stateName: u.state?.state_name || null
+    }));
+  }
+
+  /**
+   * Ändert die Rolle eines Benutzers
+   * @param {number} adminUserId - ID des Admins, der die Änderung vornimmt
+   * @param {number} targetUserId - ID des zu ändernden Users
+   * @param {number} newRole - Neue Rolle (0 = user, 1 = admin)
+   * @returns {Promise<Object>} Aktualisierter User
+   */
+  async updateUserRole(adminUserId, targetUserId, newRole) {
+    const { User } = database.getModels();
+    
+    // Prüfe ob Admin
+    const admin = await User.findByPk(adminUserId);
+    if (!admin || admin.role !== 1) {
+      throw new Error('Keine Berechtigung für diese Aktion');
+    }
+    
+    // Validierung
+    if (newRole !== 0 && newRole !== 1) {
+      throw new Error('Ungültige Rolle (muss 0 oder 1 sein)');
+    }
+    
+    // Hole Ziel-User
+    const targetUser = await User.findByPk(targetUserId);
+    
+    if (!targetUser) {
+      throw new Error('Benutzer nicht gefunden');
+    }
+    
+    // Verhindere, dass der einzige Admin sich selbst degradiert
+    if (targetUserId === adminUserId && newRole === 0) {
+      const adminCount = await User.count({
+        where: { role: 1 }
+      });
+      
+      if (adminCount <= 1) {
+        throw new Error('Sie können sich nicht selbst degradieren, wenn Sie der einzige Admin sind');
+      }
+    }
+    
+    // Aktualisiere Rolle
+    targetUser.role = newRole;
+    await targetUser.save();
+    
+    console.log(`Admin ${adminUserId} hat User ${targetUserId} Rolle auf ${newRole} geändert`);
+    
+    return {
+      id: targetUser.id,
+      fullName: targetUser.full_name,
+      role: targetUser.role,
+      roleString: targetUser.role === 1 ? 'admin' : 'user'
+    };
+  }
+}
+
+module.exports = new RolesService();
+

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