webgis-sig/jalan/assets/js/features/auth.js

// --- Fitur Autentikasi dan Manajemen User (RBAC) ---

(function() {
    window.currentUser = null;

    // Elements
    const authWidget = document.getElementById('authWidget');
    const loginModal = document.getElementById('loginModal');
    const loginUsernameInput = document.getElementById('loginUsername');
    const loginPasswordInput = document.getElementById('loginPassword');
    const loginSubmitBtn = document.getElementById('loginSubmitBtn');
    const loginErrorMsg = document.getElementById('loginErrorMsg');
    const closeLoginModal = document.getElementById('closeLoginModal');

    // Startup Session Check
    function checkSession() {
        fetch('../poverty/api/check_session.php')
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success' && data.isLoggedIn) {
                    window.currentUser = data.data;
                } else {
                    window.currentUser = null;
                }
                updateAuthUI();
                refreshAllLayers();
            })
            .catch(err => {
                console.error("Session check failed:", err);
                window.currentUser = null;
                updateAuthUI();
            });
    }

    // Update UI based on logged-in state
    function updateAuthUI() {
        if (!authWidget) return;

        if (window.currentUser) {
            // Logged In state
            const roleLabel = window.currentUser.role === 'admin' ? 'Admin' : 'Pengelola';
            
            authWidget.innerHTML = `
                <div class="user-profile-pill">
                    <div class="user-profile-info">
                        <div class="user-profile-name">👤 ${escHtml(window.currentUser.username)}</div>
                        <div class="user-profile-role">${roleLabel}</div>
                    </div>
                    <button class="btn-profile-logout" id="authLogoutBtn" title="Logout">
                        <i class="fas fa-sign-out-alt"></i>
                    </button>
                </div>
            `;

            document.getElementById('authLogoutBtn').addEventListener('click', logout);
        } else {
            // Logged Out state
            authWidget.innerHTML = `
                <button class="btn-login" id="authLoginBtn"><i class="fas fa-sign-in-alt"></i> Login</button>
            `;
            document.getElementById('authLoginBtn').addEventListener('click', showLoginModal);
        }
    }

    function refreshAllLayers() {
        if (typeof loadJalan === 'function') loadJalan();
        if (window.refreshActivePanel) window.refreshActivePanel();
    }

    // Login Modal logic
    function showLoginModal() {
        loginUsernameInput.value = '';
        loginPasswordInput.value = '';
        loginErrorMsg.style.display = 'none';
        loginModal.classList.add('show');
    }

    function hideLoginModal() {
        loginModal.classList.remove('show');
    }

    if (closeLoginModal) {
        closeLoginModal.addEventListener('click', hideLoginModal);
    }

    if (loginSubmitBtn) {
        loginSubmitBtn.addEventListener('click', function() {
            const username = loginUsernameInput.value.trim();
            const password = loginPasswordInput.value;

            if (!username || !password) {
                loginErrorMsg.textContent = 'Username dan password wajib diisi';
                loginErrorMsg.style.display = 'block';
                return;
            }

            fetch('../poverty/api/login.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, password })
            })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success') {
                    window.currentUser = data.data;
                    hideLoginModal();
                    updateAuthUI();
                    refreshAllLayers();
                    showToast('Login berhasil', 'success');
                } else {
                    loginErrorMsg.textContent = data.message || 'Login gagal';
                    loginErrorMsg.style.display = 'block';
                }
            })
            .catch(err => {
                console.error(err);
                loginErrorMsg.textContent = 'Koneksi ke server terputus';
                loginErrorMsg.style.display = 'block';
            });
        });
    }

    function logout() {
        fetch('../poverty/api/logout.php')
            .then(res => res.json())
            .then(data => {
                window.currentUser = null;
                updateAuthUI();
                refreshAllLayers();
                showToast('Logout berhasil', 'success');
            })
            .catch(err => {
                console.error(err);
                showToast('Gagal logout', 'error');
            });
    }

    // Helper functions
    function escHtml(str) {
        if (!str) return '';
        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    // Toast Notification helper
    function showToast(message, type = 'success') {
        if (typeof window.showToast === 'function') {
            window.showToast(message, type);
            return;
        }
        alert(message);
    }

    // Run session check on initialization
    checkSession();
})();