135 lines
4.2 KiB
JavaScript
135 lines
4.2 KiB
JavaScript
(function() {
|
||
'use strict';
|
||
|
||
// ==================== CHECK LOGIN STATUS ====================
|
||
function checkLoginStatus() {
|
||
const loggedInUser = sessionStorage.getItem("loggedInUser");
|
||
const loginBtn = document.querySelector('.btn-login');
|
||
|
||
if (loggedInUser && loginBtn) {
|
||
// User is logged in - change to Logout button
|
||
loginBtn.textContent = 'Logout';
|
||
loginBtn.classList.remove('btn-login');
|
||
loginBtn.classList.add('btn-logout');
|
||
loginBtn.href = '#'; // Prevent navigation
|
||
|
||
// Add logout click handler
|
||
loginBtn.addEventListener('click', handleLogoutClick);
|
||
|
||
console.log('✅ User logged in:', loggedInUser);
|
||
} else {
|
||
console.log('ℹ️ No user logged in');
|
||
}
|
||
}
|
||
|
||
// ==================== LOGOUT CLICK HANDLER ====================
|
||
function handleLogoutClick(e) {
|
||
e.preventDefault();
|
||
showLogoutModal();
|
||
}
|
||
|
||
// ==================== SHOW LOGOUT CONFIRMATION MODAL ====================
|
||
function showLogoutModal() {
|
||
const overlay = document.getElementById('logout-overlay');
|
||
if (overlay) {
|
||
overlay.style.display = 'flex';
|
||
setTimeout(() => overlay.classList.add('active'), 10);
|
||
|
||
// Setup modal buttons
|
||
setupModalButtons();
|
||
}
|
||
}
|
||
|
||
// ==================== SETUP MODAL BUTTONS ====================
|
||
function setupModalButtons() {
|
||
const cancelBtn = document.getElementById('btn-logout-cancel');
|
||
const confirmBtn = document.getElementById('btn-logout-confirm');
|
||
|
||
// Cancel button
|
||
if (cancelBtn) {
|
||
cancelBtn.onclick = closeLogoutModal;
|
||
}
|
||
|
||
// Confirm button
|
||
if (confirmBtn) {
|
||
confirmBtn.onclick = confirmLogout;
|
||
}
|
||
|
||
// Close on overlay click
|
||
const overlay = document.getElementById('logout-overlay');
|
||
if (overlay) {
|
||
overlay.addEventListener('click', function(e) {
|
||
if (e.target === overlay) {
|
||
closeLogoutModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// ESC key to close
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape') {
|
||
closeLogoutModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
// ==================== CLOSE LOGOUT MODAL ====================
|
||
function closeLogoutModal() {
|
||
const overlay = document.getElementById('logout-overlay');
|
||
if (overlay) {
|
||
overlay.classList.remove('active');
|
||
setTimeout(() => {
|
||
overlay.style.display = 'none';
|
||
}, 300);
|
||
}
|
||
}
|
||
|
||
// ==================== CONFIRM LOGOUT ====================
|
||
function confirmLogout() {
|
||
// Clear session
|
||
sessionStorage.removeItem("loggedInUser");
|
||
|
||
// Close logout modal
|
||
closeLogoutModal();
|
||
|
||
// Show success modal
|
||
showSuccessModal();
|
||
|
||
// Redirect after 1.5 seconds
|
||
setTimeout(() => {
|
||
window.location.href = 'Homepage.html';
|
||
}, 2000);
|
||
}
|
||
|
||
// ==================== SHOW SUCCESS MODAL ====================
|
||
function showSuccessModal() {
|
||
const successOverlay = document.getElementById('logout-success-overlay');
|
||
if (successOverlay) {
|
||
successOverlay.style.display = 'flex';
|
||
setTimeout(() => successOverlay.classList.add('active'), 10);
|
||
|
||
// Auto close after 1.3 seconds
|
||
setTimeout(() => {
|
||
successOverlay.classList.remove('active');
|
||
setTimeout(() => {
|
||
successOverlay.style.display = 'none';
|
||
}, 300);
|
||
}, 1300);
|
||
}
|
||
}
|
||
|
||
|
||
// ==================== INITIALIZE ====================
|
||
function init() {
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', checkLoginStatus);
|
||
} else {
|
||
checkLoginStatus();
|
||
}
|
||
}
|
||
|
||
|
||
// Start
|
||
init();
|
||
|
||
})(); |