d1041231044_webgis_geopoverty/js/auth.js

/* ============================================================
   js/auth.js — Login / Logout / Role management v2.1
   ============================================================ */

window.appAuth = { loggedIn: false, nama: '', role: '' };

window.checkAuthState = async function () {
    try {
        var res  = await fetch('php/check_auth.php', { cache: 'no-store' });
        var data = await res.json();
        window.appAuth.loggedIn = !!data.loggedIn;
        window.appAuth.nama     = data.nama  || '';
        window.appAuth.role     = data.role  || '';
    } catch (e) {
        window.appAuth = { loggedIn: false, nama: '', role: '' };
    }
    window.renderAuthBar();
    if (!window.appAuth.loggedIn) {
        window.openLoginModal();
    }
};

/* ── Render auth area di navbar ── */
window.renderAuthBar = function () {
    var area = document.getElementById('auth-area');
    if (!area) return;
    area.innerHTML = '';

    /* Clean up old nav buttons */
    var navMenus = document.getElementById('nav-menus');
    if (navMenus) {
        ['btn-pesan-nav','btn-laporan-mgr-nav'].forEach(function(id) {
            var el = document.getElementById(id);
            if (el) el.remove();
        });
    }

    if (!window.appAuth.loggedIn) {
        /* Show Masuk button */
        var btnMasuk = document.createElement('button');
        btnMasuk.className = 'nav-btn';
        btnMasuk.id = 'btn-masuk-nav';
        btnMasuk.innerHTML = '<i class="fa-solid fa-right-to-bracket"></i> Masuk';
        btnMasuk.onclick = window.openLoginModal;
        area.appendChild(btnMasuk);
    } else {
        /* Role chip */
        var chip = document.createElement('span');
        var isPimpinan = window.appAuth.role === 'pimpinan_daerah';
        chip.className = 'role-chip ' + (isPimpinan ? 'pimpinan' : 'pengurus');
        chip.innerHTML = isPimpinan
            ? '<i class="fa-solid fa-crown"></i> Pimpinan'
            : '<i class="fa-solid fa-mosque"></i> Pengurus';
        area.appendChild(chip);

        var name = document.createElement('span');
        name.className = 'auth-name';
        name.textContent = window.appAuth.nama;
        area.appendChild(name);

        /* Pengurus: add Pesan & Laporan buttons to nav-menus */
        if (window.appAuth.role === 'pengurus_masjid' && navMenus) {
            var btnMsg = document.createElement('button');
            btnMsg.className = 'nav-btn msg-btn';
            btnMsg.id = 'btn-pesan-nav';
            btnMsg.innerHTML = '<i class="fa-solid fa-message"></i> Pesan <span class="lumina-badge" id="nav-badge-pesan" style="display:none; background:var(--lumina-primary);"></span>';
            btnMsg.onclick = window.openPesanPanel;
            navMenus.appendChild(btnMsg);

            var btnLap = document.createElement('button');
            btnLap.className = 'nav-btn mgr-btn';
            btnLap.id = 'btn-laporan-mgr-nav';
            btnLap.innerHTML = '<i class="fa-solid fa-clipboard-list"></i> Laporan <span class="lumina-badge" id="nav-badge-laporan" style="display:none; background:var(--lumina-error);"></span>';
            btnLap.onclick = window.openLaporanPanel;
            navMenus.appendChild(btnLap);
        }

        var btnLogout = document.createElement('button');
        btnLogout.className = 'nav-btn logout-btn';
        btnLogout.id = 'btn-logout-nav';
        btnLogout.innerHTML = '<i class="fa-solid fa-arrow-right-from-bracket"></i> Keluar';
        btnLogout.onclick = window.doLogout;
        area.appendChild(btnLogout);
    }

    window.updateToolbarForRole();

    if (window.pollLaporanNotification) window.pollLaporanNotification();
    if (window.pollPesanNotification) window.pollPesanNotification();
};


/* ── Role-based toolbar control ── */
window.updateToolbarForRole = function () {
    var editBtn      = document.getElementById('luminaModeEdit');
    var menuKeluarga = document.getElementById('menu-tambah-keluarga');
    var menuIbadah   = document.getElementById('menu-tambah-ibadah');

    var isPengurus = window.appAuth && window.appAuth.loggedIn && window.appAuth.role === 'pengurus_masjid';

    if (isPengurus) {
        if (editBtn) editBtn.style.display = 'block';
        if (menuKeluarga) menuKeluarga.style.display = 'flex';
        if (menuIbadah) menuIbadah.style.display = 'flex';
    } else {
        if (editBtn) editBtn.style.display = 'none';
        if (menuKeluarga) menuKeluarga.style.display = 'none';
        if (menuIbadah) menuIbadah.style.display = 'none';
        if (window.appState && window.appState.mode === 'edit') window.setMode('view');
    }
};

/* ── Open login modal ── */
window.openLoginModal = function () {
    var overlay = document.getElementById('modal-login');
    if (!overlay) return;
    document.getElementById('login-username').value  = '';
    document.getElementById('login-password').value  = '';
    document.getElementById('login-error').textContent = '';
    overlay.style.display = 'flex';
    document.getElementById('login-username').focus();
    // Do not allow closing
};

/* ── Login submit ── */
window.doLogin = async function (e) {
    e.preventDefault();
    var btn   = document.getElementById('btn-submit-login');
    var errEl = document.getElementById('login-error');
    var uname = document.getElementById('login-username').value.trim();
    var pass  = document.getElementById('login-password').value;

    if (!uname || !pass) { 
        errEl.textContent = 'Username dan password wajib diisi.'; 
        errEl.style.display = 'block';
        return; 
    }
    btn.disabled = true; btn.textContent = 'Masuk...';
    errEl.textContent = '';
    errEl.style.display = 'none';

    try {
        var res  = await fetch('php/login.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams({ username: uname, password: pass })
        });
        var data = await res.json();
        if (data.success) {
            window.appAuth = { loggedIn: true, nama: data.nama, role: data.role };
            document.getElementById('modal-login').style.display = 'none';
            window.renderAuthBar();
            window.loadAllData();
            window.showToast('Selamat datang, ' + data.nama + '!', 'success');
        } else {
            errEl.textContent = data.error || 'Login gagal.';
            errEl.style.display = 'block';
        }
    } catch (err) {
        errEl.textContent = 'Koneksi gagal: ' + err.message;
        errEl.style.display = 'block';
    } finally {
        btn.disabled = false; btn.innerHTML = 'Masuk Sekarang <i class="fa-solid fa-arrow-right"></i>';
    }
};

/* ── Logout ── */
window.doLogout = async function () {
    await fetch('php/logout.php', { cache: 'no-store' });
    window.appAuth = { loggedIn: false, nama: '', role: '' };
    window.renderAuthBar();
    if (window.appState && window.appState.mode === 'edit') window.setMode('view');
    window.loadAllData();
    window.openLoginModal();
    window.showToast('Anda telah keluar.', 'info');
};

/* ── Toggle Password Visibility ── */
window.togglePassword = function () {
    var passInput = document.getElementById('login-password');
    var eyeIcon = document.getElementById('login-password-eye');
    if (passInput.type === 'password') {
        passInput.type = 'text';
        eyeIcon.classList.remove('fa-eye');
        eyeIcon.classList.add('fa-eye-slash');
    } else {
        passInput.type = 'password';
        eyeIcon.classList.remove('fa-eye-slash');
        eyeIcon.classList.add('fa-eye');
    }
};