implement authentication and authorization

public/js/app.js

@@ -6,6 +6,7 @@ class App {
     constructor() {
         this.currentPage = 'home';
         this.pages = {};
+        this.currentUser = null;
 
         // Initialize components
         this.player = new VideoPlayer();
@@ -24,6 +25,9 @@ class App {
     }
 
     async init() {
+        // Check authentication first
+        await this.checkAuth();
+        
         // Mobile menu toggle
         const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
         const navbarMenu = document.getElementById('navbar-menu');
@@ -110,6 +114,82 @@ class App {
         console.log('NodeCast TV initialized');
     }
 
+    async checkAuth() {
+        const token = localStorage.getItem('authToken');
+        
+        if (!token) {
+            // No token, redirect to login
+            window.location.href = '/login.html';
+            return;
+        }
+        
+        try {
+            // Verify token with server
+            const response = await fetch('/api/auth/me', {
+                headers: {
+                    'Authorization': `Bearer ${token}`
+                }
+            });
+            
+            if (!response.ok) {
+                throw new Error('Invalid token');
+            }
+            
+            this.currentUser = await response.json();
+            
+            // Hide settings for viewers
+            if (this.currentUser.role === 'viewer') {
+                const settingsLink = document.querySelector('.nav-link[data-page="settings"]');
+                if (settingsLink) {
+                    settingsLink.style.display = 'none';
+                }
+            }
+            
+            // Add logout button to navbar
+            this.addLogoutButton();
+            
+        } catch (err) {
+            console.error('Authentication error:', err);
+            localStorage.removeItem('authToken');
+            window.location.href = '/login.html';
+        }
+    }
+
+    addLogoutButton() {
+        const navbar = document.querySelector('.navbar-menu');
+        if (!navbar || document.getElementById('logout-btn')) return;
+        
+        const logoutLink = document.createElement('a');
+        logoutLink.href = '#';
+        logoutLink.className = 'nav-link';
+        logoutLink.id = 'logout-btn';
+        logoutLink.innerHTML = `
+            <span class="nav-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon">
+                <path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/>
+            </svg></span>
+            <span>Logout</span>
+        `;
+        
+        logoutLink.addEventListener('click', async (e) => {
+            e.preventDefault();
+            
+            const token = localStorage.getItem('authToken');
+            if (token) {
+                await fetch('/api/auth/logout', {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+            }
+            
+            localStorage.removeItem('authToken');
+            window.location.href = '/login.html';
+        });
+        
+        navbar.appendChild(logoutLink);
+    }
+
     navigateTo(pageName) {
         // Update nav
         document.querySelectorAll('.nav-link').forEach(link => {