auth-required.html•7.23 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Authentication Required - BrowserLoop Test</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #ff7b7b 0%, #667eea 100%);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 40px;
border-radius: 10px;
backdrop-filter: blur(10px);
max-width: 600px;
}
.auth-status {
padding: 20px;
margin: 20px 0;
border-radius: 8px;
font-weight: bold;
}
.authenticated {
background: rgba(76, 175, 80, 0.3);
border: 2px solid #4CAF50;
}
.unauthenticated {
background: rgba(244, 67, 54, 0.3);
border: 2px solid #f44336;
}
.cookie-info {
background: rgba(255, 255, 255, 0.2);
padding: 15px;
border-radius: 5px;
margin: 15px 0;
text-align: left;
}
.login-form {
background: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
input {
padding: 10px;
margin: 5px;
border: none;
border-radius: 4px;
width: 200px;
}
button {
padding: 10px 20px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 10px;
}
button:hover {
background: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Authentication Test Page</h1>
<div id="auth-status" class="auth-status">
<span id="status-text">Checking authentication...</span>
</div>
<div id="authenticated-content" style="display: none;">
<h2>✅ Welcome, Authenticated User!</h2>
<p>You have successfully accessed the protected content.</p>
<div class="cookie-info">
<h3>Authentication Details:</h3>
<p><strong>Session ID:</strong> <span id="session-id">N/A</span></p>
<p><strong>Auth Token:</strong> <span id="auth-token">N/A</span></p>
<p><strong>User Role:</strong> <span id="user-role">N/A</span></p>
</div>
</div>
<div id="unauthenticated-content" style="display: none;">
<h2>🔒 Authentication Required</h2>
<p>Please log in to access this protected content.</p>
<div class="login-form">
<h3>Login Form</h3>
<input type="text" placeholder="Username" id="username">
<br>
<input type="password" placeholder="Password" id="password">
<br>
<button onclick="simulateLogin()">Login</button>
</div>
</div>
<div class="cookie-info">
<h3>Cookie Information:</h3>
<p><strong>Total Cookies:</strong> <span id="cookie-count">0</span></p>
<p><strong>Authentication Cookies Found:</strong> <span id="auth-cookies">None</span></p>
</div>
<p>Timestamp: <span id="timestamp"></span></p>
</div>
<script>
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
function checkAuthentication() {
const sessionId = getCookie('session_id');
const authToken = getCookie('auth_token');
const userRole = getCookie('user_role');
const authStatus = document.getElementById('auth-status');
const statusText = document.getElementById('status-text');
const authenticatedContent = document.getElementById('authenticated-content');
const unauthenticatedContent = document.getElementById('unauthenticated-content');
// Count all cookies
const cookieCount = document.cookie.split(';').filter(c => c.trim()).length;
document.getElementById('cookie-count').textContent = cookieCount;
// Check for authentication cookies
const authCookies = [];
if (sessionId) authCookies.push('session_id');
if (authToken) authCookies.push('auth_token');
if (userRole) authCookies.push('user_role');
document.getElementById('auth-cookies').textContent =
authCookies.length > 0 ? authCookies.join(', ') : 'None';
if (sessionId || authToken) {
// User is authenticated
authStatus.className = 'auth-status authenticated';
statusText.textContent = '✅ Authenticated';
authenticatedContent.style.display = 'block';
unauthenticatedContent.style.display = 'none';
// Display cookie values (masked for security)
document.getElementById('session-id').textContent =
sessionId ? sessionId.substring(0, 8) + '...' : 'N/A';
document.getElementById('auth-token').textContent =
authToken ? authToken.substring(0, 8) + '...' : 'N/A';
document.getElementById('user-role').textContent =
userRole || 'user';
} else {
// User is not authenticated
authStatus.className = 'auth-status unauthenticated';
statusText.textContent = '🔒 Not Authenticated';
authenticatedContent.style.display = 'none';
unauthenticatedContent.style.display = 'block';
}
}
function simulateLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username && password) {
// Simulate setting authentication cookies
document.cookie = 'session_id=sim_' + Math.random().toString(36).substr(2, 9) + '; path=/';
document.cookie = 'auth_token=sim_token_' + Date.now() + '; path=/';
document.cookie = 'user_role=user; path=/';
// Refresh the authentication check
setTimeout(checkAuthentication, 100);
} else {
alert('Please enter both username and password');
}
}
// Initialize page
document.getElementById('timestamp').textContent = new Date().toISOString();
checkAuthentication();
</script>
</body>
</html>