264 lines
8.5 KiB
HTML
264 lines
8.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Logout Debug Tool</title>
|
||
|
|
<link
|
||
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
<script src="/admin/js/auth.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 20px;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
min-height: 100vh;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
background: rgba(255, 255, 255, 0.95);
|
||
|
|
border-radius: 15px;
|
||
|
|
padding: 30px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.test-result {
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 5px;
|
||
|
|
margin: 10px 0;
|
||
|
|
font-family: monospace;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
background: #d4edda;
|
||
|
|
border: 1px solid #c3e6cb;
|
||
|
|
color: #155724;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
background: #f8d7da;
|
||
|
|
border: 1px solid #f5c6cb;
|
||
|
|
color: #721c24;
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
background: #d1ecf1;
|
||
|
|
border: 1px solid #bee5eb;
|
||
|
|
color: #0c5460;
|
||
|
|
}
|
||
|
|
.btn-test {
|
||
|
|
margin: 10px 5px;
|
||
|
|
padding: 10px 20px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="text-center mb-4">🔍 Logout Function Debug Tool</h1>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h3>📊 Function Availability Test</h3>
|
||
|
|
<div id="availabilityResults"></div>
|
||
|
|
<button class="btn btn-primary btn-test" onclick="checkAvailability()">
|
||
|
|
Run Availability Check
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h3>🎯 Logout Button Tests</h3>
|
||
|
|
<p>Test different methods of calling the logout function:</p>
|
||
|
|
|
||
|
|
<!-- Method 1: Direct onclick (like in admin pages) -->
|
||
|
|
<button class="btn btn-danger btn-test" onclick="logout()">
|
||
|
|
Test 1: onclick="logout()" (Skip Confirm)
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Method 2: Via window object -->
|
||
|
|
<button class="btn btn-warning btn-test" onclick="window.logout(true)">
|
||
|
|
Test 2: onclick="window.logout(true)"
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Method 3: Via JavaScript function -->
|
||
|
|
<button class="btn btn-info btn-test" id="test3">
|
||
|
|
Test 3: addEventListener
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div id="testResults" class="mt-3"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h3>🌐 API Direct Test</h3>
|
||
|
|
<button class="btn btn-success btn-test" onclick="testLogoutAPI()">
|
||
|
|
Test Logout API Directly
|
||
|
|
</button>
|
||
|
|
<div id="apiResults"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h3>📝 Console Logs</h3>
|
||
|
|
<p class="text-muted">Check browser console (F12) for detailed logs</p>
|
||
|
|
<div
|
||
|
|
id="consoleOutput"
|
||
|
|
class="test-result info"
|
||
|
|
style="max-height: 200px; overflow-y: auto"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Capture console logs
|
||
|
|
const consoleDiv = document.getElementById("consoleOutput");
|
||
|
|
const originalLog = console.log;
|
||
|
|
const originalError = console.error;
|
||
|
|
|
||
|
|
function addToConsoleOutput(msg, isError = false) {
|
||
|
|
const timestamp = new Date().toLocaleTimeString();
|
||
|
|
const line = document.createElement("div");
|
||
|
|
line.textContent = `[${timestamp}] ${msg}`;
|
||
|
|
line.style.color = isError ? "red" : "black";
|
||
|
|
consoleDiv.appendChild(line);
|
||
|
|
consoleDiv.scrollTop = consoleDiv.scrollHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log = function (...args) {
|
||
|
|
originalLog.apply(console, args);
|
||
|
|
addToConsoleOutput(args.join(" "));
|
||
|
|
};
|
||
|
|
|
||
|
|
console.error = function (...args) {
|
||
|
|
originalError.apply(console, args);
|
||
|
|
addToConsoleOutput("ERROR: " + args.join(" "), true);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Check availability
|
||
|
|
function checkAvailability() {
|
||
|
|
const results = document.getElementById("availabilityResults");
|
||
|
|
results.innerHTML = "";
|
||
|
|
|
||
|
|
const tests = [
|
||
|
|
{ name: "typeof logout", value: typeof logout },
|
||
|
|
{ name: "typeof window.logout", value: typeof window.logout },
|
||
|
|
{
|
||
|
|
name: "logout === window.logout",
|
||
|
|
value: typeof logout !== "undefined" && logout === window.logout,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "window.adminAuth exists",
|
||
|
|
value: typeof window.adminAuth !== "undefined",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "window.checkAuth exists",
|
||
|
|
value: typeof window.checkAuth === "function",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "window.showSuccess exists",
|
||
|
|
value: typeof window.showSuccess === "function",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "window.showError exists",
|
||
|
|
value: typeof window.showError === "function",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
tests.forEach((test) => {
|
||
|
|
const div = document.createElement("div");
|
||
|
|
div.className =
|
||
|
|
"test-result " +
|
||
|
|
(test.value === "function" || test.value === true
|
||
|
|
? "success"
|
||
|
|
: "error");
|
||
|
|
div.textContent = `${test.name}: ${test.value}`;
|
||
|
|
results.appendChild(div);
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log("Availability check completed");
|
||
|
|
}
|
||
|
|
|
||
|
|
// Test 3: Using addEventListener
|
||
|
|
document
|
||
|
|
.getElementById("test3")
|
||
|
|
.addEventListener("click", async function () {
|
||
|
|
const resultsDiv = document.getElementById("testResults");
|
||
|
|
resultsDiv.innerHTML =
|
||
|
|
'<div class="test-result info">Test 3: Calling logout via addEventListener...</div>';
|
||
|
|
console.log("Test 3: Calling window.logout(true)");
|
||
|
|
|
||
|
|
try {
|
||
|
|
if (typeof window.logout === "function") {
|
||
|
|
await window.logout(true);
|
||
|
|
resultsDiv.innerHTML +=
|
||
|
|
'<div class="test-result success">✓ Logout called successfully!</div>';
|
||
|
|
} else {
|
||
|
|
resultsDiv.innerHTML +=
|
||
|
|
'<div class="test-result error">✗ window.logout is not a function!</div>';
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
resultsDiv.innerHTML += `<div class="test-result error">✗ Error: ${error.message}</div>`;
|
||
|
|
console.error("Test 3 error:", error);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Test logout API directly
|
||
|
|
async function testLogoutAPI() {
|
||
|
|
const resultsDiv = document.getElementById("apiResults");
|
||
|
|
resultsDiv.innerHTML =
|
||
|
|
'<div class="test-result info">Testing API endpoint...</div>';
|
||
|
|
console.log("Testing /api/admin/logout endpoint");
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch("/api/admin/logout", {
|
||
|
|
method: "POST",
|
||
|
|
credentials: "include",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
resultsDiv.innerHTML += `<div class="test-result success">✓ API Response: ${JSON.stringify(
|
||
|
|
data
|
||
|
|
)}</div>`;
|
||
|
|
console.log("API test successful:", data);
|
||
|
|
} else {
|
||
|
|
resultsDiv.innerHTML += `<div class="test-result error">✗ API Error: ${
|
||
|
|
response.status
|
||
|
|
} - ${JSON.stringify(data)}</div>`;
|
||
|
|
console.error("API test failed:", response.status, data);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
resultsDiv.innerHTML += `<div class="test-result error">✗ Fetch Error: ${error.message}</div>`;
|
||
|
|
console.error("API test error:", error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Override logout temporarily to prevent redirect during testing
|
||
|
|
const originalLogout = window.logout;
|
||
|
|
window.logout = async function (skipConfirm = false) {
|
||
|
|
const resultsDiv = document.getElementById("testResults");
|
||
|
|
console.log("logout() called with skipConfirm:", skipConfirm);
|
||
|
|
|
||
|
|
resultsDiv.innerHTML =
|
||
|
|
'<div class="test-result info">Logout function called...</div>';
|
||
|
|
|
||
|
|
try {
|
||
|
|
// Call original function
|
||
|
|
await originalLogout(true); // Always skip confirm for testing
|
||
|
|
|
||
|
|
resultsDiv.innerHTML +=
|
||
|
|
'<div class="test-result success">✓ Logout executed! Should redirect to login...</div>';
|
||
|
|
} catch (error) {
|
||
|
|
resultsDiv.innerHTML += `<div class="test-result error">✗ Logout failed: ${error.message}</div>`;
|
||
|
|
console.error("Logout error:", error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Run availability check on load
|
||
|
|
window.addEventListener("DOMContentLoaded", function () {
|
||
|
|
console.log("Page loaded - running initial checks...");
|
||
|
|
checkAvailability();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|