Update AppImage

AppImage/components/login.tsx

@@ -2,11 +2,12 @@
 
 import type React from "react"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Button } from "./ui/button"
 import { Input } from "./ui/input"
 import { Label } from "./ui/label"
-import { Lock, User, AlertCircle, Server } from "lucide-react"
+import { Checkbox } from "./ui/checkbox"
+import { Lock, User, AlertCircle, Server, Shield } from "lucide-react"
 import { getApiUrl } from "../lib/api-config"
 import Image from "next/image"
 
@@ -17,9 +18,23 @@ interface LoginProps {
 export function Login({ onLogin }: LoginProps) {
   const [username, setUsername] = useState("")
   const [password, setPassword] = useState("")
+  const [totpCode, setTotpCode] = useState("")
+  const [requiresTotp, setRequiresTotp] = useState(false)
+  const [rememberMe, setRememberMe] = useState(false)
   const [error, setError] = useState("")
   const [loading, setLoading] = useState(false)
 
+  useEffect(() => {
+    const savedUsername = localStorage.getItem("proxmenux-saved-username")
+    const savedPassword = localStorage.getItem("proxmenux-saved-password")
+
+    if (savedUsername && savedPassword) {
+      setUsername(savedUsername)
+      setPassword(savedPassword)
+      setRememberMe(true)
+    }
+  }, [])
+
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault()
     setError("")
@@ -29,23 +44,46 @@ export function Login({ onLogin }: LoginProps) {
       return
     }
 
+    if (requiresTotp && !totpCode) {
+      setError("Please enter your 2FA code")
+      return
+    }
+
     setLoading(true)
 
     try {
       const response = await fetch(getApiUrl("/api/auth/login"), {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ username, password }),
+        body: JSON.stringify({
+          username,
+          password,
+          totp_token: totpCode || undefined, // Include 2FA code if provided
+        }),
       })
 
       const data = await response.json()
 
-      if (!response.ok) {
-        throw new Error(data.error || "Login failed")
+      if (data.requires_totp) {
+        setRequiresTotp(true)
+        setLoading(false)
+        return
+      }
+
+      if (!response.ok) {
+        throw new Error(data.message || "Login failed")
       }
 
-      // Save token
       localStorage.setItem("proxmenux-auth-token", data.token)
+
+      if (rememberMe) {
+        localStorage.setItem("proxmenux-saved-username", username)
+        localStorage.setItem("proxmenux-saved-password", password)
+      } else {
+        localStorage.removeItem("proxmenux-saved-username")
+        localStorage.removeItem("proxmenux-saved-password")
+      }
+
       onLogin()
     } catch (err) {
       setError(err instanceof Error ? err.message : "Login failed")
@@ -94,46 +132,109 @@ export function Login({ onLogin }: LoginProps) {
               </div>
             )}
 
-            <div className="space-y-2">
-              <Label htmlFor="login-username" className="text-sm">
-                Username
-              </Label>
-              <div className="relative">
-                <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input
-                  id="login-username"
-                  type="text"
-                  placeholder="Enter your username"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  className="pl-10 text-base"
-                  disabled={loading}
-                  autoComplete="username"
-                />
-              </div>
-            </div>
+            {!requiresTotp ? (
+              <>
+                <div className="space-y-2">
+                  <Label htmlFor="login-username" className="text-sm">
+                    Username
+                  </Label>
+                  <div className="relative">
+                    <User className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                      id="login-username"
+                      type="text"
+                      placeholder="Enter your username"
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                      className="pl-10 text-base"
+                      disabled={loading}
+                      autoComplete="username"
+                    />
+                  </div>
+                </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="login-password" className="text-sm">
-                Password
-              </Label>
-              <div className="relative">
-                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input
-                  id="login-password"
-                  type="password"
-                  placeholder="Enter your password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="pl-10 text-base"
-                  disabled={loading}
-                  autoComplete="current-password"
-                />
+                <div className="space-y-2">
+                  <Label htmlFor="login-password" className="text-sm">
+                    Password
+                  </Label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                      id="login-password"
+                      type="password"
+                      placeholder="Enter your password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      className="pl-10 text-base"
+                      disabled={loading}
+                      autoComplete="current-password"
+                    />
+                  </div>
+                </div>
+
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="remember-me"
+                    checked={rememberMe}
+                    onCheckedChange={(checked) => setRememberMe(checked as boolean)}
+                    disabled={loading}
+                  />
+                  <Label htmlFor="remember-me" className="text-sm font-normal cursor-pointer select-none">
+                    Remember me
+                  </Label>
+                </div>
+              </>
+            ) : (
+              <div className="space-y-4">
+                <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
+                  <Shield className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-sm font-medium text-blue-500">Autenticación de Dos Factores</p>
+                    <p className="text-xs text-blue-500 mt-1">
+                      Introduce el código de 6 dígitos de tu aplicación de autenticación
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="totp-code" className="text-sm">
+                    Código de Autenticación
+                  </Label>
+                  <Input
+                    id="totp-code"
+                    type="text"
+                    placeholder="000000"
+                    value={totpCode}
+                    onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                    className="text-center text-lg tracking-widest font-mono text-base"
+                    maxLength={6}
+                    disabled={loading}
+                    autoComplete="one-time-code"
+                    autoFocus
+                  />
+                  <p className="text-xs text-muted-foreground text-center">
+                    También puedes usar un código de respaldo (formato: XXXX-XXXX)
+                  </p>
+                </div>
+
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    setRequiresTotp(false)
+                    setTotpCode("")
+                    setError("")
+                  }}
+                  className="w-full"
+                >
+                  Volver al inicio de sesión
+                </Button>
               </div>
-            </div>
+            )}
 
             <Button type="submit" className="w-full bg-blue-500 hover:bg-blue-600" disabled={loading}>
-              {loading ? "Signing in..." : "Sign In"}
+              {loading ? "Signing in..." : requiresTotp ? "Verify Code" : "Sign In"}
             </Button>
           </form>
         </div>