playground.shiny.space/account.html
Lucas e95f47874a Add authentication system with Authelia integration
- Add /auth/user API endpoint to extract and return Authelia headers
- Create account.html test page for authentication verification
- Update documentation in CLAUDE.md with authentication setup details
- Add account page to main feature list in index.html

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-06-14 01:56:00 +02:00

77 lines
No EOL
3.2 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">
</head>
<body>
<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>
</body>
</html>