Inventarsystem/Web/templates/user_del.html

<!--
   Copyright 2025-2026 AIIrondev

   Licensed under the Inventarsystem EULA (Endbenutzer-Lizenzvertrag).
   See Legal/LICENSE for the full license text.
   Unauthorized commercial use, SaaS hosting, or removal of branding is prohibited.
   For commercial licensing inquiries: https://github.com/AIIrondev
-->
{% extends "base.html" %}

{% block title %}Benutzer verwalten{% endblock %}

{% block content %}
<div class="container">
    <h1>Benutzer verwalten</h1>
    
    <div class="user-management-container">
        <h2>Benutzer</h2>

        <form method="POST" action="{{ url_for('admin_anonymize_names') }}" class="mb-3">
            <button
                type="submit"
                class="btn btn-outline-danger"
                onclick="return confirm('Sollen alle gespeicherten Klarnamen dauerhaft in Synonym-Kuerzel umgewandelt werden?')"
            >
                Gespeicherte Namen anonymisieren
            </button>
        </form>

        <div class="filter-bar mb-3">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label for="filter-search" class="form-label">Suche</label>
                    <input type="text" class="form-control" id="filter-search" placeholder="Benutzername, Vor- oder Nachname...">
                </div>
                <div class="col-md-2">
                    <label for="filter-admin" class="form-label">Rolle</label>
                    <select class="form-select" id="filter-admin">
                        <option value="">Alle</option>
                        <option value="ja">Administrator</option>
                        <option value="nein">Standardbenutzer</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="filter-column" class="form-label">Sortieren nach</label>
                    <select class="form-select" id="filter-column">
                        <option value="0">Benutzername</option>
                        <option value="1">Vorname</option>
                        <option value="2">Nachname</option>
                        <option value="3">Rolle</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="filter-direction" class="form-label">Reihenfolge</label>
                    <select class="form-select" id="filter-direction">
                        <option value="asc">Aufsteigend</option>
                        <option value="desc">Absteigend</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-secondary w-100" onclick="resetFilters()">Filter zurücksetzen</button>
                </div>
            </div>
            <div class="mt-2 text-muted small" id="filter-count"></div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-hover" id="user-table">
                <thead class="thead-dark">
                    <tr>
                        <th>Benutzername</th>
                        <th>Vorname</th>
                        <th>Nachname</th>
                        <th>Administrator</th>
                        <th>Rechte-Preset</th>
                        <th>Aktionen</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>{{ user.username }}</td>
                        <td>{{ user.name if user.name else user.username }}</td>
                        <td>{{ user.last_name if user.last_name else '' }}</td>
                        <td>{{ "Ja" if user.admin else "Nein" }}</td>
                        <td>{{ permission_presets.get(user.permission_preset, {}).get('label', user.permission_preset) }}</td>
                        <td class="actions">
                            <form method="POST" action="{{ url_for('delete_user') }}" class="d-inline">
                                <input type="hidden" name="username" value="{{ user.username }}">
                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Sind Sie sicher, dass Sie den Benutzer {{ user.username }} löschen möchten?')">
                                    Löschen
                                </button>
                            </form>
                            <button type="button" class="btn btn-primary btn-sm" 
                                    data-username="{{ user.username }}"
                                    data-firstname="{{ user.name if user.name else '' }}"
                                    data-lastname="{{ user.last_name if user.last_name else '' }}"
                                    onclick="openEditUserModal(this)">
                                Bearbeiten
                            </button>
                            <button type="button" class="btn btn-warning btn-sm" 
                                    onclick="openResetPasswordModal('{{ user.username }}')">
                                Passwort zurücksetzen
                            </button>
                            <button type="button" class="btn btn-info btn-sm"
                                    data-username="{{ user.username }}"
                                    data-preset="{{ user.permission_preset }}"
                                    data-action-permissions='{{ user.action_permissions | tojson }}'
                                    data-page-permissions='{{ user.page_permissions | tojson }}'
                                    onclick="openPermissionsModal(this)">
                                Berechtigungen
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Permission Modal -->
<div class="modal fade" id="permissionsModal" tabindex="-1" aria-labelledby="permissionsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="permissionsModalLabel">Berechtigungen bearbeiten</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ url_for('admin_update_user_permissions') }}">
                <div class="modal-body permissions-modal-body">
                    <input type="hidden" id="perm-username" name="username">
                    <div class="mb-3">
                        <label for="perm-username-display" class="form-label">Benutzer</label>
                        <input type="text" class="form-control" id="perm-username-display" disabled>
                    </div>

                    <div class="mb-3">
                        <label for="permission-preset" class="form-label">Preset</label>
                        <select class="form-select" id="permission-preset" name="permission_preset">
                            {% for preset_key, preset_value in permission_presets.items() %}
                            <option value="{{ preset_key }}">{{ preset_value.label }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="permissions-grid">
                        <div class="permissions-group">
                            <h6>Aktionsrechte</h6>
                            {% for action_key, action_label in permission_action_options %}
                            <div class="form-check">
                                <input class="form-check-input permission-action-checkbox" type="checkbox" id="action-{{ action_key }}" name="action_{{ action_key }}">
                                <label class="form-check-label" for="action-{{ action_key }}">{{ action_label }}</label>
                            </div>
                            {% endfor %}
                        </div>

                        <div class="permissions-group">
                            <h6>Seitenrechte</h6>
                            {% for endpoint_name, endpoint_label in permission_page_options %}
                            <div class="form-check">
                                <input class="form-check-input permission-page-checkbox" type="checkbox" id="page-{{ endpoint_name }}" name="page_{{ endpoint_name }}">
                                <label class="form-check-label" for="page-{{ endpoint_name }}">{{ endpoint_label }}</label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary">Berechtigungen speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserModalLabel">Benutzer bearbeiten</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ url_for('admin_update_user_name') }}">
                <div class="modal-body">
                    <input type="hidden" id="edit-username" name="username">
                    <div class="mb-3">
                        <label for="edit-username-display" class="form-label">Benutzer:</label>
                        <input type="text" class="form-control" id="edit-username-display" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="edit-name" class="form-label">Vorname:</label>
                        <input type="text" class="form-control" id="edit-name" name="name">
                    </div>
                    <div class="mb-3">
                        <label for="edit-last-name" class="form-label">Nachname:</label>
                        <input type="text" class="form-control" id="edit-last-name" name="last_name">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary">Speichern</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Reset Password Modal -->
<div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resetPasswordModalLabel">Passwort zurücksetzen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ url_for('admin_reset_user_password') }}">
                <div class="modal-body">
                    <input type="hidden" id="reset-username" name="username">
                    <div class="mb-3">
                        <label for="username-display" class="form-label">Benutzer:</label>
                        <input type="text" class="form-control" id="username-display" disabled>
                    </div>
                    <div class="mb-3">
                        <label for="new-password" class="form-label">Neues Passwort:</label>
                        <input type="password" class="form-control" id="new-password" name="new_password" required>
                        <div class="password-requirements small text-muted mt-1">
                            <p>Das Passwort muss mindestens 6 Zeichen lang sein.</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-primary">Passwort zurücksetzen</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    var permissionPresets = {{ permission_presets | tojson }};

    function applyPresetToPermissionForm(presetKey) {
        var preset = permissionPresets[presetKey] || {};
        var actionDefaults = preset.actions || {};
        var pageDefaults = preset.pages || {};

        document.querySelectorAll('.permission-action-checkbox').forEach(function (checkbox) {
            var key = checkbox.name.replace('action_', '');
            checkbox.checked = !!actionDefaults[key];
        });

        document.querySelectorAll('.permission-page-checkbox').forEach(function (checkbox) {
            var key = checkbox.name.replace('page_', '');
            checkbox.checked = !!pageDefaults[key];
        });
    }

    function applyFilters() {
        var search = document.getElementById('filter-search').value.toLowerCase();
        var adminFilter = document.getElementById('filter-admin').value.toLowerCase();
        var colIndex = parseInt(document.getElementById('filter-column').value);
        var direction = document.getElementById('filter-direction').value;

        var table = document.getElementById('user-table');
        var tbody = table.querySelector('tbody');
        var rows = Array.from(tbody.querySelectorAll('tr'));

        var visible = rows.filter(function(row) {
            var cells = row.querySelectorAll('td');
            var username = cells[0] ? cells[0].textContent.toLowerCase() : '';
            var firstname = cells[1] ? cells[1].textContent.toLowerCase() : '';
            var lastname = cells[2] ? cells[2].textContent.toLowerCase() : '';
            var admin = cells[3] ? cells[3].textContent.toLowerCase().trim() : '';

            var matchesSearch = !search ||
                username.includes(search) ||
                firstname.includes(search) ||
                lastname.includes(search);

            var matchesAdmin = !adminFilter || admin === adminFilter;

            return matchesSearch && matchesAdmin;
        });

        var hidden = rows.filter(function(row) { return visible.indexOf(row) === -1; });

        hidden.forEach(function(row) { row.style.display = 'none'; });

        visible.sort(function(a, b) {
            var cellA = a.querySelectorAll('td')[colIndex];
            var cellB = b.querySelectorAll('td')[colIndex];
            var valA = cellA ? cellA.textContent.trim().toLowerCase() : '';
            var valB = cellB ? cellB.textContent.trim().toLowerCase() : '';
            if (valA < valB) return direction === 'asc' ? -1 : 1;
            if (valA > valB) return direction === 'asc' ? 1 : -1;
            return 0;
        });

        visible.forEach(function(row) {
            row.style.display = '';
            tbody.appendChild(row);
        });

        var countEl = document.getElementById('filter-count');
        countEl.textContent = visible.length + ' von ' + rows.length + ' Benutzer angezeigt';
    }

    function resetFilters() {
        document.getElementById('filter-search').value = '';
        document.getElementById('filter-admin').value = '';
        document.getElementById('filter-column').value = '0';
        document.getElementById('filter-direction').value = 'asc';
        applyFilters();
    }

    document.addEventListener('DOMContentLoaded', function() {
        applyFilters();
        document.getElementById('filter-search').addEventListener('input', applyFilters);
        document.getElementById('filter-admin').addEventListener('change', applyFilters);
        document.getElementById('filter-column').addEventListener('change', applyFilters);
        document.getElementById('filter-direction').addEventListener('change', applyFilters);

        var presetSelect = document.getElementById('permission-preset');
        if (presetSelect) {
            presetSelect.addEventListener('change', function () {
                applyPresetToPermissionForm(this.value);
            });
        }
    });

    function openEditUserModal(button) {
        var username = button.getAttribute('data-username');
        var name = button.getAttribute('data-firstname');
        var lastName = button.getAttribute('data-lastname');
        
        document.getElementById('edit-username').value = username;
        document.getElementById('edit-username-display').value = username;
        document.getElementById('edit-name').value = name;
        document.getElementById('edit-last-name').value = lastName;
        
        var modal = new bootstrap.Modal(document.getElementById('editUserModal'));
        modal.show();
    }

    function openResetPasswordModal(username) {
        document.getElementById('reset-username').value = username;
        document.getElementById('username-display').value = username;
        
        // Open modal using Bootstrap
        var modal = new bootstrap.Modal(document.getElementById('resetPasswordModal'));
        modal.show();
    }

    function openPermissionsModal(button) {
        var username = button.getAttribute('data-username') || '';
        var preset = button.getAttribute('data-preset') || 'standard_user';
        var actionPermissions = {};
        var pagePermissions = {};

        try {
            actionPermissions = JSON.parse(button.getAttribute('data-action-permissions') || '{}');
        } catch (err) {
            actionPermissions = {};
        }

        try {
            pagePermissions = JSON.parse(button.getAttribute('data-page-permissions') || '{}');
        } catch (err) {
            pagePermissions = {};
        }

        document.getElementById('perm-username').value = username;
        document.getElementById('perm-username-display').value = username;
        document.getElementById('permission-preset').value = preset;

        document.querySelectorAll('.permission-action-checkbox').forEach(function (checkbox) {
            var key = checkbox.name.replace('action_', '');
            checkbox.checked = !!actionPermissions[key];
        });

        document.querySelectorAll('.permission-page-checkbox').forEach(function (checkbox) {
            var key = checkbox.name.replace('page_', '');
            checkbox.checked = !!pagePermissions[key];
        });

        var modal = new bootstrap.Modal(document.getElementById('permissionsModal'));
        modal.show();
    }
</script>

<style>
    .user-management-container {
        margin-top: 20px;
    }
    
    .actions {
        white-space: nowrap;
    }
    
    .actions form {
        display: inline-block;
        margin-right: 5px;
    }
    
    .filter-bar {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 6px;
        border: 1px solid #dee2e6;
    }

    .password-requirements {
        background-color: #f8f9fa;
        padding: 10px;
        border-radius: 4px;
        margin-top: 10px;
    }
    
    .password-requirements p {
        margin-bottom: 5px;
    }

    .permissions-modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }

    .permissions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 18px;
    }

    .permissions-group {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 12px;
        background: #f8fafc;
    }

    .permissions-group h6 {
        font-weight: 700;
        margin-bottom: 10px;
    }

    .modal-backdrop {
        z-index: 1998 !important;
    }

    .modal {
        z-index: 1999 !important;
    }
</style>
{% endblock %}