Update AppImage

AppImage/app/page.tsx

@@ -1,7 +1,94 @@
 "use client"
 
+import { useState, useEffect } from "react"
 import { ProxmoxDashboard } from "../components/proxmox-dashboard"
+import { Login } from "../components/login"
+import { AuthSetup } from "../components/auth-setup"
+import { getApiUrl } from "../lib/api-config"
 
 export default function Home() {
+  const [authState, setAuthState] = useState<"loading" | "setup" | "login" | "authenticated">("loading")
+
+  useEffect(() => {
+    checkAuthStatus()
+  }, [])
+
+  const checkAuthStatus = async () => {
+    try {
+      const response = await fetch(getApiUrl("/api/auth/status"), {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+
+      const data = await response.json()
+
+      if (!data.auth_enabled) {
+        // Auth no está habilitada, permitir acceso directo
+        setAuthState("authenticated")
+        return
+      }
+
+      // Auth está habilitada, verificar si hay token válido
+      const token = localStorage.getItem("proxmenux-auth-token")
+
+      if (!token) {
+        setAuthState("login")
+        return
+      }
+
+      // Verificar que el token sea válido
+      const verifyResponse = await fetch(getApiUrl("/api/auth/verify"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (verifyResponse.ok) {
+        setAuthState("authenticated")
+      } else {
+        // Token inválido, limpiar y pedir login
+        localStorage.removeItem("proxmenux-auth-token")
+        localStorage.removeItem("proxmenux-saved-username")
+        localStorage.removeItem("proxmenux-saved-password")
+        setAuthState("login")
+      }
+    } catch (error) {
+      console.error("Error checking auth status:", error)
+      // En caso de error, mostrar setup
+      setAuthState("setup")
+    }
+  }
+
+  const handleSetupComplete = () => {
+    setAuthState("login")
+  }
+
+  const handleLoginSuccess = () => {
+    setAuthState("authenticated")
+  }
+
+  if (authState === "loading") {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+          <p className="mt-4 text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (authState === "setup") {
+    return <AuthSetup onComplete={handleSetupComplete} />
+  }
+
+  if (authState === "login") {
+    return <Login onLogin={handleLoginSuccess} />
+  }
+
   return <ProxmoxDashboard />
 }