7a4fa4b312
- Move dark mode detection to inline script in HTML head - Prevents white flash in Firefox by applying theme before render - Clean up redundant code in dark-mode.js - Apply fix to all HTML pages for consistent behavior 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
85 lines
No EOL
3.5 KiB
HTML
85 lines
No EOL
3.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>Account Information</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script>
|
|
// Apply dark mode immediately to prevent flash
|
|
if (localStorage.getItem('theme') === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
|
|
<h1>Account Information</h1>
|
|
<p>Your authenticated user information:</p>
|
|
|
|
<div class="section">
|
|
<h3>User Details</h3>
|
|
<div id="user-info" class="loading">Loading user information...</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>All Headers (Debug)</h3>
|
|
<div id="headers-info" class="loading">Loading headers...</div>
|
|
</div>
|
|
|
|
<div class="back-link">
|
|
<a href="index.html" class="back-button">← Back to Feature List</a>
|
|
</div>
|
|
|
|
<script>
|
|
async function loadUserInfo() {
|
|
try {
|
|
const response = await fetch('/api/auth/user');
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
|
|
// Display user information
|
|
const userInfoDiv = document.getElementById('user-info');
|
|
userInfoDiv.innerHTML = `
|
|
<p><strong>Username:</strong> ${data.username || 'Not provided'}</p>
|
|
<p><strong>Display Name:</strong> ${data.name || 'Not provided'}</p>
|
|
<p><strong>Email:</strong> ${data.email || 'Not provided'}</p>
|
|
<p><strong>Groups:</strong> ${data.groups || 'Not provided'}</p>
|
|
`;
|
|
userInfoDiv.className = 'response';
|
|
|
|
// Display all headers
|
|
const headersDiv = document.getElementById('headers-info');
|
|
let headersHtml = '<div style="font-family: monospace; font-size: 14px; background: #f8f8f8; padding: 15px; border-radius: 4px; overflow-x: auto;">';
|
|
|
|
if (data.headers && Object.keys(data.headers).length > 0) {
|
|
for (const [key, value] of Object.entries(data.headers)) {
|
|
headersHtml += `<div><strong>${key}:</strong> ${value}</div>`;
|
|
}
|
|
} else {
|
|
headersHtml += '<div>No headers available</div>';
|
|
}
|
|
|
|
headersHtml += '</div>';
|
|
headersDiv.innerHTML = headersHtml;
|
|
headersDiv.className = 'response';
|
|
|
|
} catch (error) {
|
|
console.error('Error loading user info:', error);
|
|
|
|
document.getElementById('user-info').innerHTML = `<p class="error">Error loading user information: ${error.message}</p>`;
|
|
document.getElementById('user-info').className = 'error';
|
|
|
|
document.getElementById('headers-info').innerHTML = `<p class="error">Error loading headers: ${error.message}</p>`;
|
|
document.getElementById('headers-info').className = 'error';
|
|
}
|
|
}
|
|
|
|
// Load user info when page loads
|
|
document.addEventListener('DOMContentLoaded', loadUserInfo);
|
|
</script>
|
|
<script src="dark-mode.js"></script>
|
|
</body>
|
|
</html> |