Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 03:26:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update AppImage

Browse Source
This commit is contained in:
MacRimi
2025-11-07 20:05:29 +01:00
parent beefdd280f
commit 6836777629
6 changed files with 184 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
AppImage/components/login.tsx
View File

@@ -2,11 +2,10 @@
import type React from "react"
import { useState, useEffect } from "react"
import { useState } from "react"
import { Button } from "./ui/button"
import { Input } from "./ui/input"
import { Label } from "./ui/label"
import { Checkbox } from "./ui/checkbox"
import { Lock, User, AlertCircle, Server } from "lucide-react"
import { getApiUrl } from "../lib/api-config"
import Image from "next/image"
@@ -18,49 +17,15 @@ interface LoginProps {
export function Login({ onLogin }: LoginProps) {
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
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)
// Auto-login si hay credenciales guardadas
handleAutoLogin(savedUsername, savedPassword)
}
}, [])
const handleAutoLogin = async (user: string, pass: string) => {
try {
const response = await fetch(getApiUrl("/api/auth/login"), {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username: user, password: pass, remember_me: true }),
})
const data = await response.json()
if (response.ok && data.token) {
localStorage.setItem("proxmenux-auth-token", data.token)
onLogin()
}
} catch (err) {
console.log("Auto-login failed, showing login form")
}
}
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault()
setError("")
if (!username || !password) {
setError("Por favor, introduce usuario y contraseña")
setError("Please enter username and password")
return
}
@@ -70,30 +35,20 @@ export function Login({ onLogin }: LoginProps) {
const response = await fetch(getApiUrl("/api/auth/login"), {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password, remember_me: rememberMe }),
body: JSON.stringify({ username, password }),
})
const data = await response.json()
if (!response.ok) {
throw new Error(data.error || "Fallo en el login")
throw new Error(data.error || "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 {
// Limpiar credenciales guardadas si no se marcó recordar
localStorage.removeItem("proxmenux-saved-username")
localStorage.removeItem("proxmenux-saved-password")
}
onLogin()
} catch (err) {
setError(err instanceof Error ? err.message : "Fallo en el login")
setError(err instanceof Error ? err.message : "Login failed")
} finally {
setLoading(false)
}
@@ -173,18 +128,6 @@ export function Login({ onLogin }: LoginProps) {
</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>
<Button type="submit" className="w-full bg-blue-500 hover:bg-blue-600" disabled={loading}>
{loading ? "Signing in..." : "Sign In"}
</Button>

165
AppImage/components/proxmox-dashboard.tsx
View File

@@ -1,7 +1,5 @@
"use client"
import type React from "react"
import { useState, useEffect, useMemo, useCallback } from "react"
import { Badge } from "./ui/badge"
import { Button } from "./ui/button"
@@ -55,13 +53,9 @@ interface FlaskSystemData {
interface FlaskSystemInfo {
hostname: string
uptime_seconds: number
uptime_formatted: string
health: {
status: string
summary: string
}
timestamp: string
node_id: string
uptime: string
health_status: "healthy" | "warning" | "critical"
}
export function ProxmoxDashboard() {
@@ -80,7 +74,6 @@ export function ProxmoxDashboard() {
const [showNavigation, setShowNavigation] = useState(true)
const [lastScrollY, setLastScrollY] = useState(0)
const [showHealthModal, setShowHealthModal] = useState(false)
const [isAuthenticated, setIsAuthenticated] = useState(false)
const fetchSystemData = useCallback(async () => {
const apiUrl = getApiUrl("/api/system-info")
@@ -101,26 +94,14 @@ export function ProxmoxDashboard() {
const data: FlaskSystemInfo = await response.json()
const uptimeValue =
data.uptime_formatted && typeof data.uptime_formatted === "string" && data.uptime_formatted.trim() !== ""
? data.uptime_formatted
: "N/A"
const healthStatus = data.health?.status || "healthy"
const mappedStatus =
healthStatus === "OK"
? "healthy"
: healthStatus === "WARNING"
? "warning"
: healthStatus === "CRITICAL"
? "critical"
: "healthy"
data.uptime && typeof data.uptime === "string" && data.uptime.trim() !== "" ? data.uptime : "N/A"
setSystemStatus({
status: mappedStatus as "healthy" | "warning" | "critical",
status: data.health_status || "healthy",
uptime: uptimeValue,
lastUpdate: new Date().toLocaleTimeString("en-US", { hour12: false }),
serverName: data.hostname || "Unknown",
nodeId: data.hostname || "Unknown",
nodeId: data.node_id || "Unknown",
})
setIsServerConnected(true)
} catch (error) {
@@ -203,18 +184,6 @@ export function ProxmoxDashboard() {
setIsRefreshing(false)
}
const handleLogout = (e: React.MouseEvent) => {
e.stopPropagation()
localStorage.removeItem("proxmenux-auth-token")
localStorage.removeItem("proxmenux-saved-username")
localStorage.removeItem("proxmenux-saved-password")
window.location.href = "/"
}
useEffect(() => {
setIsAuthenticated(!!localStorage.getItem("proxmenux-auth-token"))
}, [])
const statusIcon = useMemo(() => {
switch (systemStatus.status) {
case "healthy":
@@ -287,16 +256,18 @@ export function ProxmoxDashboard() {
className="border-b border-border bg-card sticky top-0 z-50 shadow-sm cursor-pointer hover:bg-accent/5 transition-colors"
onClick={() => setShowHealthModal(true)}
>
<div className="container mx-auto px-4 md:px-6 py-4">
<div className="flex items-start justify-between gap-4">
<div className="flex items-center space-x-3">
<div className="w-12 h-12 relative flex items-center justify-center bg-primary/10">
<div className="container mx-auto px-4 md:px-6 py-4 md:py-4">
{/* Logo and Title */}
<div className="flex items-start justify-between gap-3">
{/* Logo and Title */}
<div className="flex items-center space-x-2 md:space-x-3 min-w-0">
<div className="w-16 h-16 md:w-10 md:h-10 relative flex items-center justify-center bg-primary/10 flex-shrink-0">
<Image
src="/images/proxmenux-logo.png"
alt="ProxMenux Logo"
width={48}
height={48}
className="object-contain"
width={64}
height={64}
className="object-contain md:w-10 md:h-10"
priority
onError={(e) => {
console.log("[v0] Logo failed to load, using fallback icon")
@@ -308,65 +279,85 @@ export function ProxmoxDashboard() {
}
}}
/>
<Server className="h-6 w-6 text-primary absolute fallback-icon hidden" />
<Server className="h-8 w-8 md:h-6 md:w-6 text-primary absolute fallback-icon hidden" />
</div>
<div>
<h1 className="text-xl font-semibold text-foreground">ProxMenux Monitor</h1>
<p className="text-sm text-muted-foreground hidden md:block">Proxmox System Dashboard</p>
<div className="flex items-center space-x-2 mt-1">
<Server className="h-3 w-3 text-muted-foreground" />
<span className="text-xs text-muted-foreground">Node: {systemStatus.serverName}</span>
<div className="min-w-0">
<h1 className="text-lg md:text-xl font-semibold text-foreground truncate">ProxMenux Monitor</h1>
<p className="text-xs md:text-sm text-muted-foreground">Proxmox System Dashboard</p>
<div className="lg:hidden flex items-center gap-1 text-xs text-muted-foreground mt-0.5">
<Server className="h-3 w-3" />
<span className="truncate">Node: {systemStatus.serverName}</span>
</div>
</div>
</div>
<div className="flex items-center space-x-2 md:space-x-4">
<div className="hidden md:flex items-center space-x-4">
<Badge variant="outline" className={statusColor}>
{statusIcon}
<span className="ml-1 capitalize">{systemStatus.status}</span>
</Badge>
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation()
refreshData()
}}
disabled={isRefreshing}
className="border-border/50 bg-transparent hover:bg-secondary"
>
<RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
</Button>
{/* Desktop Actions */}
<div className="hidden lg:flex items-center space-x-4">
<div className="flex items-center space-x-2">
<Server className="h-4 w-4 text-muted-foreground" />
<div className="text-sm">
<div className="font-medium text-foreground">Node: {systemStatus.serverName}</div>
</div>
</div>
<div className="flex md:hidden items-center space-x-2">
<Badge variant="outline" className={statusColor}>
{statusIcon}
</Badge>
<Badge variant="outline" className={statusColor}>
{statusIcon}
<span className="ml-1 capitalize">{systemStatus.status}</span>
</Badge>
<Button
variant="ghost"
size="sm"
onClick={(e) => {
e.stopPropagation()
refreshData()
}}
disabled={isRefreshing}
className="h-9 w-9 p-0"
>
<RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
</Button>
<div className="text-sm text-muted-foreground whitespace-nowrap">
Uptime: {systemStatus.uptime || "N/A"}
</div>
<Button
variant="outline"
size="sm"
onClick={(e) => {
e.stopPropagation()
refreshData()
}}
disabled={isRefreshing}
className="border-border/50 bg-transparent hover:bg-secondary"
>
<RefreshCw className={`h-4 w-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
Refresh
</Button>
<div onClick={(e) => e.stopPropagation()}>
<ThemeToggle />
</div>
</div>
{/* Mobile Actions */}
<div className="flex lg:hidden items-center gap-2">
<Badge variant="outline" className={`${statusColor} text-xs px-2`}>
{statusIcon}
<span className="ml-1 capitalize hidden sm:inline">{systemStatus.status}</span>
</Badge>
<Button
variant="ghost"
size="sm"
onClick={(e) => {
e.stopPropagation()
refreshData()
}}
disabled={isRefreshing}
className="h-8 w-8 p-0"
>
<RefreshCw className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
</Button>
<div onClick={(e) => e.stopPropagation()}>
<ThemeToggle />
</div>
</div>
</div>
<div className="mt-2 text-right text-sm text-muted-foreground">Uptime: {systemStatus.uptime}</div>
{/* Mobile Server Info */}
<div className="lg:hidden mt-2 flex items-center justify-end text-xs text-muted-foreground">
<span className="whitespace-nowrap">Uptime: {systemStatus.uptime || "N/A"}</span>
</div>
</div>
</header>

22
AppImage/components/settings.tsx
View File

@@ -5,7 +5,7 @@ import { Button } from "./ui/button"
import { Input } from "./ui/input"
import { Label } from "./ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
import { Shield, Lock, User, AlertCircle, CheckCircle, Info } from "lucide-react"
import { Shield, Lock, User, AlertCircle, CheckCircle, Info, LogOut } from "lucide-react"
import { getApiUrl } from "../lib/api-config"
export function Settings() {
@@ -98,7 +98,7 @@ export function Settings() {
const handleDisableAuth = async () => {
if (
!confirm(
"¿Estás seguro de que quieres deshabilitar la autenticación? Esto eliminará la protección por contraseña de tu dashboard y tendrás que configurarla de nuevo si quieres reactivarla.",
"Are you sure you want to disable authentication? This will remove password protection from your dashboard.",
)
) {
return
@@ -109,35 +109,31 @@ export function Settings() {
setSuccess("")
try {
const token = localStorage.getItem("proxmenux-auth-token")
const response = await fetch(getApiUrl("/api/auth/disable"), {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("proxmenux-auth-token")}`,
Authorization: `Bearer ${token}`,
},
})
const data = await response.json()
if (!response.ok) {
throw new Error(data.error || "Failed to disable authentication")
throw new Error(data.message || "Failed to disable authentication")
}
localStorage.removeItem("proxmenux-auth-token")
localStorage.removeItem("proxmenux-saved-username")
localStorage.removeItem("proxmenux-saved-password")
localStorage.removeItem("proxmenux-auth-setup-complete")
setSuccess("¡Autenticación deshabilitada correctamente! La página se recargará...")
setSuccess("Authentication disabled successfully! Reloading...")
// Recargar la página después de 1.5 segundos
setTimeout(() => {
window.location.reload()
}, 1500)
}, 1000)
} catch (err) {
setError(
err instanceof Error ? err.message : "No se pudo deshabilitar la autenticación. Por favor, inténtalo de nuevo.",
)
setError(err instanceof Error ? err.message : "Failed to disable authentication. Please try again.")
} finally {
setLoading(false)
}
@@ -202,6 +198,7 @@ export function Settings() {
const handleLogout = () => {
localStorage.removeItem("proxmenux-auth-token")
localStorage.removeItem("proxmenux-auth-setup-complete")
window.location.reload()
}
@@ -338,6 +335,7 @@ export function Settings() {
{authEnabled && (
<div className="space-y-3">
<Button onClick={handleLogout} variant="outline" className="w-full bg-transparent">
<LogOut className="h-4 w-4 mr-2" />
Logout
</Button>