debug

static/js/script.js

@@ -1,17 +1,18 @@
-// --- Existing Constants (keep) ---
+// --- Existing Constants (remove theme button) ---
 const registerSection = document.getElementById('register-section');
 const loginSection = document.getElementById('login-section');
 const welcomeSection = document.getElementById('welcome-section');
 // ... other element constants ...
 const notificationsDiv = document.getElementById('notifications');
-const API_URL = '/api'; // Use relative path
-const themeToggleButton = document.getElementById('theme-toggle'); // Get toggle button
+const API_URL = '/api';
+// const themeToggleButton = document.getElementById('theme-toggle'); // REMOVE
 
-// --- Existing State Variables (keep) ---
+// --- Existing State Variables ---
 let webSocket = null;
-let authToken = localStorage.getItem('authToken'); // Load token on script start
+let authToken = localStorage.getItem('authToken');
 
 // --- UI Control (showSection, setStatus - keep) ---
+// ... showSection and setStatus functions remain the same ...
 function showSection(sectionId) {
     registerSection.style.display = 'none';
     loginSection.style.display = 'none';
@@ -26,7 +27,9 @@ function setStatus(element, message, isSuccess = false) {
     element.style.display = message ? 'block' : 'none';
 }
 
+
 // --- API Calls (apiRequest - keep) ---
+// ... apiRequest function remains the same ...
 async function apiRequest(endpoint, method = 'GET', body = null, token = null) {
     const headers = { 'Content-Type': 'application/json' };
     if (token) { headers['Authorization'] = `Bearer ${token}`; }
@@ -43,7 +46,8 @@ async function apiRequest(endpoint, method = 'GET', body = null, token = null) {
 }
 
 
-// --- WebSocket Handling (connect/disconnectWebSocket - keep) ---
+// --- WebSocket Handling (connect/disconnectWebSocket, displayNotificationError - keep) ---
+// ... connectWebSocket, disconnectWebSocket, displayNotificationError functions remain the same ...
 function connectWebSocket(token) {
     if (!token) { console.error("No token for WebSocket."); return; }
     if (webSocket && webSocket.readyState === WebSocket.OPEN) { console.log("WS already open."); return; }
@@ -77,7 +81,7 @@ function connectWebSocket(token) {
 function disconnectWebSocket() {
     if (webSocket) { console.log("Closing WS."); webSocket.close(); webSocket = null; }
 }
-function displayNotificationError(message) { // Helper for WS errors
+function displayNotificationError(message) {
     const p = document.createElement('p');
     p.textContent = message;
     p.style.color = 'orange';
@@ -87,6 +91,7 @@ function displayNotificationError(message) { // Helper for WS errors
 
 
 // --- Authentication Logic (handleLogin, handleRegister, showWelcomePage, handleLogout - keep) ---
+// ... handleLogin, handleRegister, showWelcomePage, handleLogout functions remain the same ...
 async function handleLogin(email, password) {
     setStatus(loginStatus, "Logging in...");
     try {
@@ -122,29 +127,22 @@ function handleLogout() {
     localStorage.removeItem('authToken');
     disconnectWebSocket();
     setStatus(loginStatus, "");
-    // Reset notification display on logout
     notificationsDiv.innerHTML = '<p><em>Notifications will appear here...</em></p>';
     showSection('login-section');
 }
 
-// --- Theme Toggling ---
-function applyTheme(theme) {
-    if (theme === 'dark') {
+// --- Theme Handling ---
+function applyTheme(isDarkMode) {
+    if (isDarkMode) {
         document.body.classList.add('dark-mode');
+        console.log("Applied dark theme.");
     } else {
         document.body.classList.remove('dark-mode');
+        console.log("Applied light theme.");
     }
 }
 
-function toggleTheme() {
-    const isDarkMode = document.body.classList.toggle('dark-mode');
-    const newTheme = isDarkMode ? 'dark' : 'light';
-    localStorage.setItem('theme', newTheme); // Save preference
-    console.log("Theme toggled to:", newTheme);
-}
-
-
-// --- Event Listeners ---
+// --- Event Listeners (Forms & Logout) ---
 registerForm.addEventListener('submit', (e) => {
     e.preventDefault();
     // ... (validation and call handleRegister - keep) ...
@@ -155,7 +153,6 @@ registerForm.addEventListener('submit', (e) => {
     if (password.length < 8) { setStatus(registerStatus, "Password must be >= 8 characters."); return; }
     handleRegister(email, password);
 });
-
 loginForm.addEventListener('submit', (e) => {
     e.preventDefault();
     // ... (call handleLogin - keep) ...
@@ -163,30 +160,38 @@ loginForm.addEventListener('submit', (e) => {
     const password = document.getElementById('login-password').value;
     handleLogin(email, password);
 });
-
 logoutButton.addEventListener('click', handleLogout);
-
-themeToggleButton.addEventListener('click', toggleTheme); // Add listener
+// themeToggleButton.addEventListener('click', toggleTheme); // REMOVE
 
 
 // --- Initial Page Load Logic ---
 document.addEventListener('DOMContentLoaded', () => {
-    // Apply stored theme preference first
-    const storedTheme = localStorage.getItem('theme');
-    if (storedTheme) {
-        applyTheme(storedTheme);
-        console.log("Applied stored theme:", storedTheme);
-    } else {
-        // Optional: Detect system preference if no theme stored
-        // const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        // applyTheme(prefersDark ? 'dark' : 'light');
-        // console.log("Applied system theme preference.");
-        applyTheme('light'); // Default to light if nothing else
-        console.log("Applied default light theme.");
-    }
+    // System Theme Detection
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+    // Apply theme based on current system preference
+    applyTheme(prefersDarkScheme.matches);
 
+    // Listen for changes in system theme preference
+    try {
+        // Newer browsers
+        prefersDarkScheme.addEventListener('change', (e) => {
+            console.log("System theme preference changed.");
+            applyTheme(e.matches);
+        });
+    } catch (e1) {
+        try {
+            // Older browsers (legacy method)
+            prefersDarkScheme.addListener((e) => {
+                 console.log("System theme preference changed (legacy listener).");
+                 applyTheme(e.matches);
+            });
+        } catch (e2) {
+            console.error("Browser doesn't support dynamic theme changes via matchMedia listeners.");
+        }
+    }
 
-    // Then check auth token
+    // Check auth token after setting theme
     if (authToken) {
         console.log("Token found, showing welcome page.");
         showWelcomePage();

templates/index.html

@@ -10,7 +10,8 @@
     <div class="container">
         <div class="header">
             <h1>Auth & Notification App</h1>
-            <button id="theme-toggle">Toggle Theme</button>
+            <!-- REMOVE THE BUTTON HERE -->
+            <!-- <button id="theme-toggle">Toggle Theme</button> -->
         </div>
 
         <!-- Registration Section -->