aewing
c33ee3dfe7
- Create modular project structure with src/backend, src/frontend, public - Hono server with routing, static file serving, and API endpoints - TailwindCSS styling pipeline with Tailwind CLI - Vanilla JS frontend (extensible for frameworks) - Complete TypeScript configuration and type checking - Auth module as self-contained submodule - Ready for development: bun run dev (port 3000) - All dependencies installed and tested Also: - Lock main branch with read-only settings in VS Code - Create .github/copilot-instructions.md with Monica persona - Initialize session logging system Status: Project ready for feature development
171 lines
5.0 KiB
HTML
171 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Auth Module Test</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
max-width: 800px;
|
|
margin: 40px auto;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.test-section {
|
|
border: 1px solid #ddd;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 4px;
|
|
}
|
|
.test-section h3 {
|
|
margin-top: 0;
|
|
}
|
|
.test-result {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-left: 4px solid #4CAF50;
|
|
background: #f1f8f4;
|
|
}
|
|
.test-result.error {
|
|
border-left-color: #f44336;
|
|
background: #fdecea;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
margin: 5px 5px 5px 0;
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background: #0056b3;
|
|
}
|
|
code {
|
|
background: #f4f4f4;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Auth Module Test</h1>
|
|
<p>Interactive test page for the Auth module. Run tests to verify functionality.</p>
|
|
|
|
<div class="test-section">
|
|
<h3>1. Module Availability</h3>
|
|
<button onclick="testModuleExists()">Test Module Load</button>
|
|
<div id="module-test-result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>2. Token Storage</h3>
|
|
<button onclick="testTokenStorage()">Test Token Storage</button>
|
|
<div id="storage-test-result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>3. Configuration</h3>
|
|
<button onclick="testConfiguration()">Test Configuration</button>
|
|
<div id="config-test-result"></div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h3>4. Clear Tokens</h3>
|
|
<button onclick="testClearTokens()">Clear All Tokens</button>
|
|
<div id="clear-test-result"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// temporary: using inline module for testing without bundler
|
|
|
|
function logResult(elementId, message, isError = false) {
|
|
const element = document.getElementById(elementId);
|
|
const resultDiv = document.createElement('div');
|
|
resultDiv.className = `test-result ${isError ? 'error' : ''}`;
|
|
resultDiv.textContent = message;
|
|
element.appendChild(resultDiv);
|
|
}
|
|
|
|
function testModuleExists() {
|
|
const elementId = 'module-test-result';
|
|
document.getElementById(elementId).innerHTML = '';
|
|
|
|
if (typeof window.Auth !== 'undefined') {
|
|
logResult(elementId, '✓ Auth module loaded successfully');
|
|
} else {
|
|
logResult(elementId, '✗ Auth module not found', true);
|
|
}
|
|
}
|
|
|
|
function testTokenStorage() {
|
|
const elementId = 'storage-test-result';
|
|
document.getElementById(elementId).innerHTML = '';
|
|
|
|
try {
|
|
// Note: This test requires the compiled JS version.
|
|
// For now, we're testing localStorage directly
|
|
const testKey = 'test:token';
|
|
const testValue = 'test-token-value-12345';
|
|
|
|
localStorage.setItem(testKey, testValue);
|
|
const retrieved = localStorage.getItem(testKey);
|
|
|
|
if (retrieved === testValue) {
|
|
logResult(elementId, '✓ localStorage working correctly');
|
|
localStorage.removeItem(testKey);
|
|
logResult(elementId, '✓ Cleanup successful');
|
|
} else {
|
|
logResult(elementId, '✗ localStorage retrieval failed', true);
|
|
}
|
|
} catch (error) {
|
|
logResult(elementId, `✗ Error: ${error.message}`, true);
|
|
}
|
|
}
|
|
|
|
function testConfiguration() {
|
|
const elementId = 'config-test-result';
|
|
document.getElementById(elementId).innerHTML = '';
|
|
|
|
if (typeof window.Auth !== 'undefined' && typeof window.Auth.configure === 'function') {
|
|
logResult(elementId, '✓ Auth.configure method exists');
|
|
} else {
|
|
logResult(elementId, '✗ Auth.configure method not found', true);
|
|
}
|
|
}
|
|
|
|
function testClearTokens() {
|
|
const elementId = 'clear-test-result';
|
|
document.getElementById(elementId).innerHTML = '';
|
|
|
|
try {
|
|
// Set some test tokens
|
|
localStorage.setItem('auth:pb-user', 'test-pb-token');
|
|
localStorage.setItem('auth:graph-user', 'test-graph-token');
|
|
logResult(elementId, '✓ Test tokens created');
|
|
|
|
// Clear them
|
|
localStorage.removeItem('auth:pb-user');
|
|
localStorage.removeItem('auth:graph-user');
|
|
|
|
const pbToken = localStorage.getItem('auth:pb-user');
|
|
const graphToken = localStorage.getItem('auth:graph-user');
|
|
|
|
if (!pbToken && !graphToken) {
|
|
logResult(elementId, '✓ Tokens cleared successfully');
|
|
} else {
|
|
logResult(elementId, '✗ Tokens still present after clear', true);
|
|
}
|
|
} catch (error) {
|
|
logResult(elementId, `✗ Error: ${error.message}`, true);
|
|
}
|
|
}
|
|
|
|
// Run initial module check on page load
|
|
window.addEventListener('DOMContentLoaded', testModuleExists);
|
|
</script>
|
|
</body>
|
|
</html>
|