Ensure status auth modal is visible by default (auth at beginning)

static/status.html

@@ -84,18 +84,22 @@
             margin-bottom: 20px;
         }
         
-        /* Login Modal */
+        /* Login Modal - Visible by default for immediate auth */
         .modal-overlay {
             position: fixed;
             top: 0; left: 0; right: 0; bottom: 0;
-            background: rgba(0,0,0,0.8);
-            display: none; /* Hidden by default */
+            background: rgba(0,0,0,0.9); /* Darker background to hide content */
+            display: flex;
             align-items: center;
             justify-content: center;
             z-index: 1000;
+            opacity: 1;
+            transition: opacity 0.3s ease-in-out;
         }
-        .modal-overlay.active {
-            display: flex; /* Show when active */
+        .modal-overlay.hidden {
+            opacity: 0;
+            pointer-events: none;
+            display: none;
         }
         .modal {
             background: var(--bg-secondary);
@@ -186,14 +190,17 @@
             return localStorage.getItem("managementKey");
         }
 
-        function checkAuth() {
+        // Initialize: Check auth immediately
+        function init() {
             const key = getKey();
-            if (!key) {
-                console.log("No key found, showing login modal");
-                document.getElementById('login-modal').classList.add('active');
-                return false;
+            if (key) {
+                // If we have a key, hide the login screen and fetch data
+                document.getElementById('login-modal').classList.add('hidden');
+                fetchData();
+            } else {
+                // No key? The login modal is visible by default.
+                console.log("No auth key found, waiting for login...");
             }
-            return true;
         }
 
         document.getElementById('login-form').addEventListener('submit', async function(e) {
@@ -216,7 +223,7 @@
                 if (res.ok) {
                     localStorage.setItem("managementKey", key);
                     localStorage.setItem("isLoggedIn", "true");
-                    document.getElementById('login-modal').classList.remove('active');
+                    document.getElementById('login-modal').classList.add('hidden');
                     fetchData();
                 } else {
                     showLoginError("Invalid key");
@@ -243,9 +250,10 @@
         }
 
         async function fetchData() {
-            if (!checkAuth()) return;
+            const key = getKey();
+            if (!key) return; // Should be handled by init, but double check
 
-            const headers = { "Authorization": "Bearer " + getKey() };
+            const headers = { "Authorization": "Bearer " + key };
 
             try {
                 // Parallel fetch
@@ -337,8 +345,8 @@
             document.getElementById("activity-log").innerHTML = "<p>Check logs for detailed activity.</p>";
         }
 
-        // Initial Load
-        document.addEventListener('DOMContentLoaded', fetchData);
+        // Start everything
+        document.addEventListener('DOMContentLoaded', init);
     </script>
 </body>
 </html>