Updatweb
This commit is contained in:
Local Server
263
website/admin/logout-debug.html
Normal file
263
website/admin/logout-debug.html
Normal file
@@ -0,0 +1,263 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user