144 lines
4.5 KiB
JavaScript
144 lines
4.5 KiB
JavaScript
(function() {
|
||
'use strict';
|
||
|
||
function checkLoginStatus() {
|
||
const loggedInUser = sessionStorage.getItem("loggedInUser");
|
||
const loginBtn = document.querySelector('.btn-login');
|
||
|
||
if (loggedInUser && loginBtn) {
|
||
loginBtn.textContent = 'Logout';
|
||
loginBtn.classList.remove('btn-login');
|
||
loginBtn.classList.add('btn-logout');
|
||
loginBtn.href = '#';
|
||
loginBtn.replaceWith(loginBtn.cloneNode(true));
|
||
|
||
const newLogoutBtn = document.querySelector('.btn-logout');
|
||
if (newLogoutBtn) {
|
||
newLogoutBtn.addEventListener('click', handleLogoutClick);
|
||
}
|
||
|
||
console.log('✅ User logged in:', loggedInUser);
|
||
} else {
|
||
console.log('ℹ️ No user logged in');
|
||
}
|
||
}
|
||
|
||
function handleLogoutClick(e) {
|
||
e.preventDefault();
|
||
showLogoutModal();
|
||
}
|
||
|
||
function showLogoutModal() {
|
||
const overlay = document.getElementById('logout-overlay');
|
||
if (overlay) {
|
||
overlay.style.display = 'flex';
|
||
setTimeout(() => overlay.classList.add('active'), 10);
|
||
setupModalButtons();
|
||
}
|
||
}
|
||
|
||
function setupModalButtons() {
|
||
const cancelBtn = document.getElementById('btn-logout-cancel');
|
||
const confirmBtn = document.getElementById('btn-logout-confirm');
|
||
const overlay = document.getElementById('logout-overlay');
|
||
|
||
if (cancelBtn) {
|
||
const newCancelBtn = cancelBtn.cloneNode(true);
|
||
cancelBtn.replaceWith(newCancelBtn);
|
||
newCancelBtn.onclick = closeLogoutModal;
|
||
}
|
||
|
||
if (confirmBtn) {
|
||
const newConfirmBtn = confirmBtn.cloneNode(true);
|
||
confirmBtn.replaceWith(newConfirmBtn);
|
||
newConfirmBtn.onclick = confirmLogout;
|
||
}
|
||
|
||
if (overlay) {
|
||
overlay.onclick = function(e) {
|
||
if (e.target === overlay) {
|
||
closeLogoutModal();
|
||
}
|
||
};
|
||
}
|
||
|
||
document.addEventListener('keydown', handleEscapeKey);
|
||
}
|
||
|
||
function handleEscapeKey(e) {
|
||
if (e.key === 'Escape') {
|
||
const overlay = document.getElementById('logout-overlay');
|
||
if (overlay && overlay.classList.contains('active')) {
|
||
closeLogoutModal();
|
||
}
|
||
}
|
||
}
|
||
|
||
function closeLogoutModal() {
|
||
const overlay = document.getElementById('logout-overlay');
|
||
if (overlay) {
|
||
overlay.classList.remove('active');
|
||
setTimeout(() => {
|
||
overlay.style.display = 'none';
|
||
}, 300);
|
||
}
|
||
|
||
document.removeEventListener('keydown', handleEscapeKey);
|
||
}
|
||
|
||
function confirmLogout() {
|
||
console.log("Attempting to log out to the server...");
|
||
|
||
fetch('Logout.php')
|
||
.then(response => {
|
||
console.log("Respon server:", response);
|
||
return response.json();
|
||
})
|
||
.then(data => {
|
||
console.log("Status Logout:", data);
|
||
|
||
sessionStorage.removeItem("loggedInUser");
|
||
sessionStorage.removeItem("authToken");
|
||
sessionStorage.clear();
|
||
|
||
closeLogoutModal();
|
||
showSuccessModal();
|
||
|
||
setTimeout(() => {
|
||
window.location.replace('Homepage.html');
|
||
}, 1500);
|
||
})
|
||
.catch(error => {
|
||
console.error('Logout error:', error);
|
||
|
||
sessionStorage.clear();
|
||
window.location.replace('Homepage.html');
|
||
});
|
||
}
|
||
|
||
function showSuccessModal() {
|
||
const successOverlay = document.getElementById('logout-success-overlay');
|
||
if (successOverlay) {
|
||
successOverlay.style.display = 'flex';
|
||
setTimeout(() => successOverlay.classList.add('active'), 10);
|
||
|
||
setTimeout(() => {
|
||
successOverlay.classList.remove('active');
|
||
setTimeout(() => {
|
||
successOverlay.style.display = 'none';
|
||
}, 300);
|
||
}, 1300);
|
||
}
|
||
}
|
||
|
||
function init() {
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', checkLoginStatus);
|
||
} else {
|
||
checkLoginStatus();
|
||
}
|
||
}
|
||
|
||
init();
|
||
|
||
})(); |