app-installer/templates/users_management.html

{% extends "base.html" %}

{% block title %}Benutzerverwaltung - App Installer{% endblock %}

{% block head %}
<style>
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    margin-right: 10px;
}

.user-avatar.admin { background: #dc3545; }
.user-avatar.moderator { background: #fd7e14; }
.user-avatar.user { background: #0d6efd; }
.user-avatar.viewer { background: #6c757d; }

.role-badge.admin { background: #dc3545 !important; }
.role-badge.moderator { background: #fd7e14 !important; }
.role-badge.user { background: #0d6efd !important; }
.role-badge.viewer { background: #6c757d !important; }

.user-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.stats-card {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.quick-action-btn {
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.modal-header.bg-primary {
    background: linear-gradient(45deg, #667eea, #764ba2) !important;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-users me-2 text-primary"></i>
                        Benutzerverwaltung
                    </h1>
                    <p class="text-muted mb-0">Verwalten Sie Benutzer und deren Berechtigungen</p>
                </div>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal">
                    <i class="fas fa-user-plus me-2"></i>
                    Neuer Benutzer
                </button>
            </div>
            
            <!-- Flash Messages -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
    </div>
    
    <!-- Statistiken -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card stats-card">
                <div class="card-body text-center">
                    <i class="fas fa-users fa-2x mb-2"></i>
                    <h3 class="mb-1">{{ users|length }}</h3>
                    <small>Benutzer gesamt</small>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-danger">
                <div class="card-body text-center">
                    <i class="fas fa-user-shield fa-2x mb-2 text-danger"></i>
                    <h3 class="mb-1 text-danger">{{ users.values()|selectattr('role', 'equalto', 'admin')|list|length }}</h3>
                    <small>Administratoren</small>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-warning">
                <div class="card-body text-center">
                    <i class="fas fa-user-cog fa-2x mb-2 text-warning"></i>
                    <h3 class="mb-1 text-warning">{{ users.values()|selectattr('role', 'equalto', 'moderator')|list|length }}</h3>
                    <small>Moderatoren</small>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-success">
                <div class="card-body text-center">
                    <i class="fas fa-user-check fa-2x mb-2 text-success"></i>
                    <h3 class="mb-1 text-success">{{ users.values()|selectattr('enabled', 'equalto', true)|list|length }}</h3>
                    <small>Aktive Benutzer</small>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Benutzer-Liste -->
    <div class="row">
        {% for username, user in users.items() %}
        <div class="col-lg-6 col-xl-4 mb-4">
            <div class="card user-card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="user-avatar {{ user.role }}">
                            {{ user.first_name[0] if user.first_name else user.username[0] }}{{ user.last_name[0] if user.last_name else '' }}
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-1">
                                {% if user.first_name or user.last_name %}
                                    {{ user.first_name }} {{ user.last_name }}
                                {% else %}
                                    {{ user.username }}
                                {% endif %}
                            </h6>
                            <small class="text-muted">@{{ user.username }}</small>
                        </div>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#editUserModal{{ loop.index }}">
                                    <i class="fas fa-edit me-2"></i>Bearbeiten
                                </a></li>
                                {% if user.username != 'admin' or users.values()|selectattr('role', 'equalto', 'admin')|list|length > 1 %}
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deleteUserModal{{ loop.index }}">
                                    <i class="fas fa-trash me-2"></i>Löschen
                                </a></li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <span class="badge role-badge {{ user.role }} text-white px-2 py-1">
                            <i class="fas fa-{{ 'user-shield' if user.role == 'admin' else 'user-cog' if user.role == 'moderator' else 'user' if user.role == 'user' else 'eye' }} me-1"></i>
                            {{ user.role.title() }}
                        </span>
                        {% if not user.get('enabled', true) %}
                            <span class="badge bg-secondary ms-1">Deaktiviert</span>
                        {% endif %}
                    </div>
                    
                    <div class="user-info">
                        <div class="info-row mb-2">
                            <small class="text-muted d-flex align-items-center">
                                <i class="fas fa-envelope me-2"></i>
                                {{ user.email }}
                            </small>
                        </div>
                        <div class="info-row mb-2">
                            <small class="text-muted d-flex align-items-center">
                                <i class="fas fa-calendar-plus me-2"></i>
                                Erstellt: {{ user.created_at[:10] }}
                            </small>
                        </div>
                        {% if user.last_login %}
                        <div class="info-row mb-2">
                            <small class="text-muted d-flex align-items-center">
                                <i class="fas fa-clock me-2"></i>
                                Letzter Login: {{ user.last_login[:16] }}
                            </small>
                        </div>
                        {% endif %}
                        <div class="info-row">
                            <small class="text-muted d-flex align-items-center">
                                <i class="fas fa-sign-in-alt me-2"></i>
                                Login-Anzahl: {{ user.login_count or 0 }}x
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Edit User Modal -->
        <div class="modal fade" id="editUserModal{{ loop.index }}" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title">
                            <i class="fas fa-edit me-2"></i>
                            Benutzer bearbeiten: {{ user.username }}
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <form method="POST" action="{{ url_for('edit_user', username=user.username) }}">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Vorname</label>
                                    <input type="text" class="form-control" name="first_name" value="{{ user.first_name or '' }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Nachname</label>
                                    <input type="text" class="form-control" name="last_name" value="{{ user.last_name or '' }}">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">E-Mail</label>
                                <input type="email" class="form-control" name="email" value="{{ user.email }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Rolle</label>
                                <select class="form-select" name="role" required>
                                    {% for role in roles %}
                                        <option value="{{ role }}" {% if role == user.role %}selected{% endif %}>
                                            {{ role.title() }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="enabled" id="enabled{{ loop.index }}" {% if user.get('enabled', true) %}checked{% endif %}>
                                <label class="form-check-label" for="enabled{{ loop.index }}">
                                    Benutzer ist aktiviert
                                </label>
                            </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">
                                <i class="fas fa-save me-2"></i>Speichern
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Delete User Modal -->
        {% if user.username != 'admin' or users.values()|selectattr('role', 'equalto', 'admin')|list|length > 1 %}
        <div class="modal fade" id="deleteUserModal{{ loop.index }}" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title">
                            <i class="fas fa-trash me-2"></i>
                            Benutzer löschen
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Sind Sie sicher, dass Sie den Benutzer <strong>{{ user.username }}</strong> löschen möchten?</p>
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            Diese Aktion kann nicht rückgängig gemacht werden!
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                        <form method="POST" action="{{ url_for('delete_user', username=user.username) }}" class="d-inline">
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-trash me-2"></i>Löschen
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% endfor %}
    </div>
</div>

<!-- Create User Modal -->
<div class="modal fade" id="createUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-user-plus me-2"></i>
                    Neuen Benutzer erstellen
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('create_user') }}">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Vorname</label>
                            <input type="text" class="form-control" name="first_name">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Nachname</label>
                            <input type="text" class="form-control" name="last_name">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Benutzername *</label>
                        <input type="text" class="form-control" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">E-Mail *</label>
                        <input type="email" class="form-control" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Passwort *</label>
                        <input type="password" class="form-control" name="password" minlength="6" required>
                        <div class="form-text">Mindestens 6 Zeichen</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Rolle</label>
                        <select class="form-select" name="role" required>
                            {% for role in roles %}
                                <option value="{{ role }}" {% if role == 'user' %}selected{% endif %}>
                                    {{ role.title() }}
                                </option>
                            {% endfor %}
                        </select>
                    </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">
                        <i class="fas fa-user-plus me-2"></i>Benutzer erstellen
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Auto-hide alerts
document.addEventListener('DOMContentLoaded', function() {
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(alert => {
        setTimeout(() => {
            if (alert && alert.parentNode) {
                alert.classList.remove('show');
                setTimeout(() => {
                    if (alert.parentNode) {
                        alert.parentNode.removeChild(alert);
                    }
                }, 150);
            }
        }, 5000);
    });
});

// Form validation
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', function(e) {
        const requiredFields = form.querySelectorAll('[required]');
        let isValid = true;
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                field.classList.add('is-invalid');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
            }
        });
        
        if (!isValid) {
            e.preventDefault();
        }
    });
});
</script>
{% endblock %}