usbcheck.it/public/assets/js/header.js

// public/assets/js/header.js

document.addEventListener('DOMContentLoaded', function () {
    // -------------------------
    // Login-Button
    // -------------------------
    const loginBtn = document.getElementById('loginButton');

    if (loginBtn) {
        loginBtn.addEventListener('click', function (event) {
            event.preventDefault();

            const currentPath  = window.location.pathname || '/';
            const currentQuery = window.location.search || '';
            const redirect     = currentPath + currentQuery;

            // Sprache aus dem Label oben ziehen, falls vorhanden
            const langLabelEl = document.getElementById('langCurrentLabel');
            let lang = 'de';
            if (langLabelEl && langLabelEl.textContent) {
                lang = langLabelEl.textContent.trim().toLowerCase();
            }

            // Wenn wir bereits auf /login sind → nur zum #auth scrollen
            if (currentPath === '/login' || currentPath === '/login/') {
                const authEl = document.getElementById('auth');
                if (authEl) {
                    authEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
                return;
            }

            // Sonst: auf Login-Seite mit lang + redirect-Parameter
            const url = '/login/?lang=' + encodeURIComponent(lang) +
                '&redirect=' + encodeURIComponent(redirect) +
                '#auth';

            window.location.href = url;
        });
    }

    // -------------------------
    // Avatar-Menü ein-/ausblenden
    // -------------------------
    const avatarBtn = document.getElementById('userAvatar');
    const userMenu  = document.getElementById('userMenu');

    if (avatarBtn && userMenu) {
        avatarBtn.addEventListener('click', function (event) {
            event.stopPropagation();
            userMenu.classList.toggle('hidden');

            const expanded = avatarBtn.getAttribute('aria-expanded') === 'true';
            avatarBtn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
        });

        // Klick außerhalb schließt Menü
        document.addEventListener('click', function (event) {
            if (!userMenu.classList.contains('hidden')) {
                const clickedInsideMenu   = userMenu.contains(event.target);
                const clickedAvatarButton = avatarBtn.contains(event.target);

                if (!clickedInsideMenu && !clickedAvatarButton) {
                    userMenu.classList.add('hidden');
                    avatarBtn.setAttribute('aria-expanded', 'false');
                }
            }
        });
    }

    // -------------------------
    // Logout-Modal
    // -------------------------
    const logoutButtons = document.querySelectorAll('[data-logout-link="true"]');
    const backdrop      = document.getElementById('logoutModalBackdrop');
    const btnConfirm    = document.getElementById('logoutConfirm');
    const btnCancel     = document.getElementById('logoutCancel');

    let logoutTarget = null;

    function showLogoutModal(targetHref) {
        logoutTarget = targetHref || null;
        if (!backdrop) return;

        backdrop.classList.remove('hidden');
        document.body.classList.add('overflow-hidden');
    }

    function hideLogoutModal() {
        if (!backdrop) return;
        backdrop.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
        logoutTarget = null;
    }

    if (logoutButtons.length && backdrop && btnConfirm && btnCancel) {
        logoutButtons.forEach(function (btn) {
            btn.addEventListener('click', function (event) {
                event.preventDefault();
                event.stopPropagation();

                const href = btn.getAttribute('data-logout-href') || btn.getAttribute('href') || '/auth/logout';
                showLogoutModal(href);

                // Avatar-Menü beim Öffnen des Modals schließen
                if (userMenu && !userMenu.classList.contains('hidden')) {
                    userMenu.classList.add('hidden');
                    if (avatarBtn) {
                        avatarBtn.setAttribute('aria-expanded', 'false');
                    }
                }
            });
        });

        // Bestätigen → weiter zur Logout-URL
        btnConfirm.addEventListener('click', function () {
            if (logoutTarget) {
                window.location.href = logoutTarget;
            } else {
                window.location.href = '/auth/logout';
            }
        });

        // Abbrechen → Modal schließen
        btnCancel.addEventListener('click', function () {
            hideLogoutModal();
        });

        // Klick auf Hintergrund schließt Modal
        backdrop.addEventListener('click', function (event) {
            const card = backdrop.querySelector('div.w-full.max-w-sm');
            if (card && !card.contains(event.target)) {
                hideLogoutModal();
            }
        });

        // ESC-Taste schließt Modal
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape' && !backdrop.classList.contains('hidden')) {
                hideLogoutModal();
            }
        });
    }
});