Projektarbeit-MYP/backend/templates/users.html

{% extends "base.html" %}

{% block title %}Benutzer - MYP API Tester{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0">Benutzer verwalten</h4>
                <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#newUserForm">
                    Neuen Benutzer hinzufügen
                </button>
            </div>
            <div class="collapse" id="newUserForm">
                <div class="card-body border-bottom">
                    <form class="api-form" data-url="/auth/register" data-method="POST" data-response="createUserResponse" data-reload="true">
                        <div class="mb-3">
                            <label for="userName" class="form-label">Benutzername</label>
                            <input type="text" class="form-control" id="userName" name="username" required>
                        </div>
                        <div class="mb-3">
                            <label for="userPassword" class="form-label">Passwort</label>
                            <input type="password" class="form-control" id="userPassword" name="password" required>
                        </div>
                        <div class="mb-3">
                            <label for="userDisplayName" class="form-label">Anzeigename</label>
                            <input type="text" class="form-control" id="userDisplayName" name="displayName">
                        </div>
                        <div class="mb-3">
                            <label for="userEmail" class="form-label">E-Mail</label>
                            <input type="email" class="form-control" id="userEmail" name="email">
                        </div>
                        <button type="submit" class="btn btn-success">Benutzer erstellen</button>
                    </form>
                    <div class="mt-3">
                        <h6>Antwort:</h6>
                        <pre class="api-response" id="createUserResponse"></pre>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <form class="api-form mb-3" data-url="/api/users" data-method="GET" data-response="usersResponse">
                    <button type="submit" class="btn btn-primary">Benutzer aktualisieren</button>
                </form>
                
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Benutzername</th>
                                <th>Anzeigename</th>
                                <th>E-Mail</th>
                                <th>Rolle</th>
                                <th>Aktionen</th>
                            </tr>
                        </thead>
                        <tbody id="usersTableBody">
                            <!-- Wird dynamisch gefüllt -->
                        </tbody>
                    </table>
                </div>
                
                <div>
                    <h6>API-Antwort:</h6>
                    <pre class="api-response" id="usersResponse"></pre>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Benutzer bearbeiten Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Benutzer bearbeiten</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editUserForm" class="api-form" data-method="PUT" data-response="editUserResponse" data-reload="true">
                    <input type="hidden" id="editUserId" name="userId">
                    <div class="mb-3">
                        <label for="editUserName" class="form-label">Benutzername</label>
                        <input type="text" class="form-control" id="editUserName" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label for="editUserDisplayName" class="form-label">Anzeigename</label>
                        <input type="text" class="form-control" id="editUserDisplayName" name="displayName">
                    </div>
                    <div class="mb-3">
                        <label for="editUserEmail" class="form-label">E-Mail</label>
                        <input type="email" class="form-control" id="editUserEmail" name="email">
                    </div>
                    <div class="mb-3">
                        <label for="editUserRole" class="form-label">Rolle</label>
                        <select class="form-control" id="editUserRole" name="role">
                            <option value="user">Benutzer</option>
                            <option value="admin">Administrator</option>
                            <option value="guest">Gast</option>
                        </select>
                    </div>
                </form>
                <div class="mt-3">
                    <h6>Antwort:</h6>
                    <pre class="api-response" id="editUserResponse"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="submit" form="editUserForm" class="btn btn-primary">Änderungen speichern</button>
            </div>
        </div>
    </div>
</div>

<!-- Benutzer löschen Modal -->
<div class="modal fade" id="deleteUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Benutzer löschen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Möchten Sie den Benutzer <span id="deleteUserName"></span> wirklich löschen?</p>
                <form id="deleteUserForm" class="api-form" data-method="DELETE" data-response="deleteUserResponse" data-reload="true">
                    <input type="hidden" id="deleteUserId" name="userId">
                </form>
                <div class="mt-3">
                    <h6>Antwort:</h6>
                    <pre class="api-response" id="deleteUserResponse"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="submit" form="deleteUserForm" class="btn btn-danger">Löschen</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Benutzer laden
        document.querySelector('form[data-url="/api/users"]').dispatchEvent(new Event('submit'));
        
        // Tabelle aktualisieren, wenn Benutzer geladen werden
        const usersResponse = document.getElementById('usersResponse');
        const observer = new MutationObserver(function(mutations) {
            try {
                const users = JSON.parse(usersResponse.textContent);
                updateUsersTable(users);
            } catch (e) {
                console.error('Fehler beim Parsen der Benutzer-Daten:', e);
            }
        });
        
        observer.observe(usersResponse, { childList: true, characterData: true, subtree: true });
        
        // Edit-Modal vorbereiten
        document.getElementById('editUserModal').addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const userId = button.getAttribute('data-user-id');
            const userName = button.getAttribute('data-user-name');
            const userDisplayName = button.getAttribute('data-user-displayname');
            const userEmail = button.getAttribute('data-user-email');
            const userRole = button.getAttribute('data-user-role');
            
            document.getElementById('editUserId').value = userId;
            document.getElementById('editUserForm').setAttribute('data-url', `/api/users/${userId}`);
            document.getElementById('editUserName').value = userName;
            document.getElementById('editUserDisplayName').value = userDisplayName || '';
            document.getElementById('editUserEmail').value = userEmail || '';
            document.getElementById('editUserRole').value = userRole;
        });
        
        // Delete-Modal vorbereiten
        document.getElementById('deleteUserModal').addEventListener('show.bs.modal', function(event) {
            const button = event.relatedTarget;
            const userId = button.getAttribute('data-user-id');
            const userName = button.getAttribute('data-user-name');
            
            document.getElementById('deleteUserId').value = userId;
            document.getElementById('deleteUserForm').setAttribute('data-url', `/api/users/${userId}`);
            document.getElementById('deleteUserName').textContent = userName;
        });
    });
    
    function updateUsersTable(users) {
        const tableBody = document.getElementById('usersTableBody');
        tableBody.innerHTML = '';
        
        users.forEach(user => {
            const row = document.createElement('tr');
            
            const roleClass = {
                'admin': 'text-danger',
                'user': 'text-primary',
                'guest': 'text-secondary'
            }[user.role] || '';
            
            row.innerHTML = `
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.displayName || user.username}</td>
                <td>${user.email || '-'}</td>
                <td><span class="${roleClass}">${user.role}</span></td>
                <td>
                    <button type="button" class="btn btn-sm btn-primary" 
                        data-bs-toggle="modal" 
                        data-bs-target="#editUserModal"
                        data-user-id="${user.id}"
                        data-user-name="${user.username}"
                        data-user-displayname="${user.displayName || ''}"
                        data-user-email="${user.email || ''}"
                        data-user-role="${user.role}">
                        Bearbeiten
                    </button>
                    <button type="button" class="btn btn-sm btn-danger" 
                        data-bs-toggle="modal" 
                        data-bs-target="#deleteUserModal"
                        data-user-id="${user.id}"
                        data-user-name="${user.username}">
                        Löschen
                    </button>
                </td>
            `;
            
            tableBody.appendChild(row);
        });
    }
</script>
{% endblock %}