From 395dc0b07fde3523bbc6870b62ee2a9e6f44193e Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Sat, 16 Aug 2025 18:08:21 +0000
Subject: [PATCH] fix: add FirstRunSetup for initial authentication
 configuration

- Modified Login component to check security status
- Shows FirstRunSetup when no authentication is configured
- Shows login form when authentication exists
- Fixed App.tsx to properly detect when auth setup is needed
---
 frontend-modern/src/App.tsx              | 66 +++++++++++++-----------
 frontend-modern/src/components/Login.tsx | 35 ++++++++++++-
 2 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/frontend-modern/src/App.tsx b/frontend-modern/src/App.tsx
index 793578e42..7bd2bde81 100644
--- a/frontend-modern/src/App.tsx
+++ b/frontend-modern/src/App.tsx
@@ -97,41 +97,45 @@ function App() {
   }
   
   // Check auth on mount
-  onMount(() => {
+  onMount(async () => {
     // First check security status to see if auth is configured
-    fetch('/api/security/status')
-      .then(res => res.json())
-      .then(data => {
-        setHasAuth(data.hasAuthentication || false);
-      })
-      .catch(() => {
-        setHasAuth(false);
-      });
-    
-    fetch('/api/state', {
-      headers: {
-        'X-Requested-With': 'XMLHttpRequest',
-        'Accept': 'application/json'
-      },
-      credentials: 'include'
-    })
-      .then(response => {
-        if (response.status === 401) {
-          setNeedsAuth(true);
-        } else {
-          setNeedsAuth(false);
-          // Only initialize WebSocket after successful auth check
-          setWsStore(getGlobalWebSocketStore());
-        }
+    try {
+      const securityRes = await fetch('/api/security/status');
+      const securityData = await securityRes.json();
+      const authConfigured = securityData.hasAuthentication || false;
+      setHasAuth(authConfigured);
+      
+      // If no auth is configured, show FirstRunSetup
+      if (!authConfigured) {
+        setNeedsAuth(true); // This will show the Login component which shows FirstRunSetup
         setIsLoading(false);
-      })
-      .catch(() => {
-        // On error, assume no auth needed
+        return;
+      }
+      
+      // If auth is configured, check if we're authenticated
+      const stateRes = await fetch('/api/state', {
+        headers: {
+          'X-Requested-With': 'XMLHttpRequest',
+          'Accept': 'application/json'
+        },
+        credentials: 'include'
+      });
+      
+      if (stateRes.status === 401) {
+        setNeedsAuth(true);
+      } else {
         setNeedsAuth(false);
-        // Initialize WebSocket
+        // Only initialize WebSocket after successful auth check
         setWsStore(getGlobalWebSocketStore());
-        setIsLoading(false);
-      });
+      }
+    } catch (error) {
+      console.error('Auth check error:', error);
+      // On error, try to proceed without auth
+      setNeedsAuth(false);
+      setWsStore(getGlobalWebSocketStore());
+    } finally {
+      setIsLoading(false);
+    }
     
     // Load version info
     UpdatesAPI.getVersion()
diff --git a/frontend-modern/src/components/Login.tsx b/frontend-modern/src/components/Login.tsx
index 98cf04b7e..9f4219256 100644
--- a/frontend-modern/src/components/Login.tsx
+++ b/frontend-modern/src/components/Login.tsx
@@ -1,5 +1,6 @@
-import { Component, createSignal, Show } from 'solid-js';
+import { Component, createSignal, Show, onMount } from 'solid-js';
 import { setBasicAuth } from '@/utils/apiClient';
+import { FirstRunSetup } from './FirstRunSetup';
 
 interface LoginProps {
   onLogin: () => void;
@@ -10,6 +11,20 @@ export const Login: Component<LoginProps> = (props) => {
   const [password, setPassword] = createSignal('');
   const [error, setError] = createSignal('');
   const [loading, setLoading] = createSignal(false);
+  const [hasAuth, setHasAuth] = createSignal<boolean | null>(null);
+
+  onMount(async () => {
+    try {
+      const response = await fetch('/api/security/status');
+      if (response.ok) {
+        const data = await response.json();
+        setHasAuth(data.hasAuthentication);
+      }
+    } catch (err) {
+      console.error('Failed to check auth status:', err);
+      setHasAuth(false);
+    }
+  });
 
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
@@ -46,6 +61,24 @@ export const Login: Component<LoginProps> = (props) => {
     }
   };
 
+  // Show loading state while checking auth status
+  if (hasAuth() === null) {
+    return (
+      <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-cyan-50 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900">
+        <div class="text-center">
+          <div class="animate-spin h-12 w-12 border-4 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
+          <p class="text-gray-600 dark:text-gray-400">Initializing...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show FirstRunSetup if no authentication is configured
+  if (hasAuth() === false) {
+    return <FirstRunSetup />;
+  }
+
+  // Show login form if authentication is configured
   return (
     <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-cyan-50 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900 py-12 px-4 sm:px-6 lg:px-8">
       <div class="max-w-md w-full space-y-8">