160 lines
6.8 KiB
HTML
160 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test All Logout Buttons</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<script src="/admin/js/auth.js"></script>
|
|
<style>
|
|
body { padding: 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; }
|
|
.test-card { background: white; border-radius: 15px; padding: 30px; margin-bottom: 20px; }
|
|
.btn-logout {
|
|
background: #dc3545;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
margin: 10px;
|
|
font-size: 16px;
|
|
}
|
|
.btn-logout:hover { background: #c82333; }
|
|
.status { padding: 15px; border-radius: 8px; margin: 10px 0; }
|
|
.success { background: #d4edda; color: #155724; }
|
|
.info { background: #d1ecf1; color: #0c5460; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="test-card">
|
|
<h1>🧪 Logout Button Test - All Scenarios</h1>
|
|
<p class="lead">Test that ALL logout buttons trigger the custom modal popup</p>
|
|
|
|
<div class="status info" id="status">
|
|
<strong>Status:</strong> Page loaded. Click any button below...
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3>Test Buttons:</h3>
|
|
<p>Each button simulates the logout button from different pages:</p>
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
|
|
<button class="btn-logout" data-page="homepage">
|
|
<i class="bi bi-box-arrow-right"></i> Homepage Editor
|
|
</button>
|
|
|
|
<button class="btn-logout" data-page="products">
|
|
<i class="bi bi-box-arrow-right"></i> Products
|
|
</button>
|
|
|
|
<button class="btn-logout" data-page="portfolio">
|
|
<i class="bi bi-box-arrow-right"></i> Portfolio
|
|
</button>
|
|
|
|
<button class="btn-logout" data-page="blog">
|
|
<i class="bi bi-box-arrow-right"></i> Blog
|
|
</button>
|
|
|
|
<button class="btn-logout" data-page="pages">
|
|
<i class="bi bi-box-arrow-right"></i> Pages
|
|
</button>
|
|
|
|
<button class="btn-logout" data-page="media-library">
|
|
<i class="bi bi-box-arrow-right"></i> Media Library
|
|
</button>
|
|
|
|
<button class="btn-logout" data-page="menu">
|
|
<i class="bi bi-box-arrow-right"></i> Menu
|
|
</button>
|
|
|
|
<button class="btn-logout" data-page="users">
|
|
<i class="bi bi-box-arrow-right"></i> Users
|
|
</button>
|
|
|
|
<button class="btn-logout" data-page="settings">
|
|
<i class="bi bi-box-arrow-right"></i> Settings
|
|
</button>
|
|
|
|
<button class="btn-logout" data-page="dashboard">
|
|
<i class="bi bi-box-arrow-right"></i> Dashboard
|
|
</button>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3>✅ What Should Happen:</h3>
|
|
<ol>
|
|
<li>Click any button above</li>
|
|
<li><strong>Custom modal appears</strong> (NOT browser confirm)</li>
|
|
<li>Modal shows: Red logout icon, "Confirm Logout" heading</li>
|
|
<li>Two buttons: Gray "Cancel" (left) and Red "Logout" (right)</li>
|
|
<li>Click "Cancel" → Modal closes, status updates</li>
|
|
<li>Click "Logout" → Redirects to login page</li>
|
|
<li>Press ESC → Modal closes</li>
|
|
<li>Click outside modal → Modal closes</li>
|
|
</ol>
|
|
|
|
<div id="log" style="background: #f8f9fa; padding: 15px; border-radius: 8px; font-family: monospace; font-size: 12px; max-height: 200px; overflow-y: auto; margin-top: 20px;">
|
|
<strong>Console Log:</strong><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const statusDiv = document.getElementById('status');
|
|
const logDiv = document.getElementById('log');
|
|
|
|
function updateStatus(msg, type = 'info') {
|
|
statusDiv.className = `status ${type}`;
|
|
statusDiv.innerHTML = `<strong>Status:</strong> ${msg}`;
|
|
addLog(msg);
|
|
}
|
|
|
|
function addLog(msg) {
|
|
const time = new Date().toLocaleTimeString();
|
|
logDiv.innerHTML += `[${time}] ${msg}<br>`;
|
|
logDiv.scrollTop = logDiv.scrollHeight;
|
|
}
|
|
|
|
// Track button clicks
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
addLog('Page loaded - auth.js loaded');
|
|
addLog('Checking if window.logout exists: ' + (typeof window.logout === 'function' ? 'YES' : 'NO'));
|
|
addLog('Checking if window.showLogoutConfirm exists: ' + (typeof window.showLogoutConfirm === 'function' ? 'YES' : 'NO'));
|
|
|
|
// Add tracking to all buttons
|
|
const buttons = document.querySelectorAll('.btn-logout');
|
|
addLog(`Found ${buttons.length} logout buttons`);
|
|
|
|
buttons.forEach((btn, index) => {
|
|
const page = btn.getAttribute('data-page');
|
|
btn.addEventListener('click', function() {
|
|
addLog(`Button clicked: ${page}`);
|
|
updateStatus(`Testing logout from: ${page}`, 'info');
|
|
});
|
|
});
|
|
|
|
// Override performLogout temporarily to prevent actual redirect during testing
|
|
if (window.logout) {
|
|
const originalLogout = window.logout;
|
|
window.logout = function(skipConfirm) {
|
|
addLog(`window.logout() called with skipConfirm=${skipConfirm}`);
|
|
if (!skipConfirm) {
|
|
addLog('Showing custom modal...');
|
|
window.showLogoutConfirm(async () => {
|
|
addLog('User clicked LOGOUT button in modal');
|
|
updateStatus('User confirmed logout! (Redirect disabled for testing)', 'success');
|
|
// Don't actually logout in test mode
|
|
// await performLogout();
|
|
});
|
|
}
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|