test_logout_functionality.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logout Test</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
        button { padding: 10px 20px; margin: 10px; cursor: pointer; }
        .success { color: green; }
        .error { color: red; }
        .info { color: blue; }
    </style>
</head>
<body>
    <h1>Logout Functionality Test</h1>

    <div class="test-section">
        <h2>Test 1: Check if auth.js loads correctly</h2>
        <button onclick="testAuthLoad()">Test Auth Load</button>
        <div id="auth-load-result"></div>
    </div>

    <div class="test-section">
        <h2>Test 2: Check if header component loads</h2>
        <button onclick="testHeaderLoad()">Test Header Load</button>
        <div id="header-load-result"></div>
    </div>

    <div class="test-section">
        <h2>Test 3: Check authentication state</h2>
        <button onclick="testAuthState()">Check Auth State</button>
        <div id="auth-state-result"></div>
    </div>

    <div class="test-section">
        <h2>Test 4: Manual Login Test</h2>
        <input type="text" id="test-username" placeholder="Username" value="testuser">
        <input type="password" id="test-password" placeholder="Password" value="testpass123">
        <button onclick="testLogin()">Login</button>
        <div id="login-result"></div>
    </div>

    <div class="test-section">
        <h2>Test 5: Logout Test</h2>
        <button onclick="testLogout()">Logout</button>
        <div id="logout-result"></div>
    </div>

    <div class="test-section">
        <h2>Test 6: Check localStorage</h2>
        <button onclick="testLocalStorage()">Check Storage</button>
        <div id="storage-result"></div>
    </div>

    <script src="auth.js"></script>
    <script src="components/component-loader.js"></script>

    <script>
        function log(message, type = 'info') {
            const resultDiv = event.target.nextElementSibling;
            resultDiv.innerHTML += `<div class="${type}">${new Date().toLocaleTimeString()}: ${message}</div>`;
        }

        function testAuthLoad() {
            try {
                if (typeof authManager !== 'undefined') {
                    log('✅ auth.js loaded successfully - authManager is available', 'success');
                } else {
                    log('❌ auth.js not loaded - authManager is undefined', 'error');
                }
            } catch (e) {
                log(`❌ Error testing auth load: ${e.message}`, 'error');
            }
        }

        function testHeaderLoad() {
            setTimeout(() => {
                const header = document.querySelector('header');
                if (header) {
                    log('✅ Header component loaded successfully', 'success');
                } else {
                    log('❌ Header component not loaded', 'error');
                }
            }, 1000);
        }

        function testAuthState() {
            try {
                if (typeof authManager !== 'undefined') {
                    const isAuth = authManager.isAuthenticated;
                    const user = authManager.currentUser;
                    log(`✅ Auth state checked - isAuthenticated: ${isAuth}, user: ${user ? user.username : 'none'}`, 'success');
                } else {
                    log('❌ Cannot check auth state - authManager not available', 'error');
                }
            } catch (e) {
                log(`❌ Error checking auth state: ${e.message}`, 'error');
            }
        }

        async function testLogin() {
            try {
                const username = document.getElementById('test-username').value;
                const password = document.getElementById('test-password').value;

                if (typeof authManager !== 'undefined') {
                    const result = await authManager.login(username, password);
                    log(`✅ Login successful for user: ${result.username}`, 'success');
                } else {
                    log('❌ Cannot login - authManager not available', 'error');
                }
            } catch (e) {
                log(`❌ Login failed: ${e.message}`, 'error');
            }
        }

        function testLogout() {
            try {
                if (typeof authManager !== 'undefined') {
                    authManager.logout();
                    log('✅ Logout called successfully', 'success');
                } else {
                    log('❌ Cannot logout - authManager not available', 'error');
                }
            } catch (e) {
                log(`❌ Logout failed: ${e.message}`, 'error');
            }
        }

        function testLocalStorage() {
            try {
                const userData = localStorage.getItem('mytheater_user');
                if (userData) {
                    const user = JSON.parse(userData);
                    log(`✅ User data found in localStorage: ${user.username}`, 'success');
                } else {
                    log('ℹ️ No user data in localStorage', 'info');
                }
            } catch (e) {
                log(`❌ Error checking localStorage: ${e.message}`, 'error');
            }
        }

        // Auto-run some tests on page load
        window.addEventListener('load', () => {
            setTimeout(() => {
                testAuthLoad();
                testHeaderLoad();
                testAuthState();
            }, 500);
        });
    </script>
</body>
</html>