mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2025-11-17 19:16:25 +00:00
744 lines
28 KiB
TypeScript
744 lines
28 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
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, LogOut, Wrench, Package } from "lucide-react"
|
|
import { Sparkles, ChevronDown, ChevronUp } from "lucide-react"
|
|
import { APP_VERSION, CHANGELOG } from "./release-notes-modal"
|
|
import { getApiUrl } from "../lib/api-config"
|
|
import { TwoFactorSetup } from "./two-factor-setup"
|
|
|
|
interface ProxMenuxTool {
|
|
key: string
|
|
name: string
|
|
enabled: boolean
|
|
}
|
|
|
|
export function Settings() {
|
|
const [authEnabled, setAuthEnabled] = useState(false)
|
|
const [totpEnabled, setTotpEnabled] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState("")
|
|
const [success, setSuccess] = useState("")
|
|
|
|
// Setup form state
|
|
const [showSetupForm, setShowSetupForm] = useState(false)
|
|
const [username, setUsername] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [confirmPassword, setConfirmPassword] = useState("")
|
|
|
|
// Change password form state
|
|
const [showChangePassword, setShowChangePassword] = useState(false)
|
|
const [currentPassword, setCurrentPassword] = useState("")
|
|
const [newPassword, setNewPassword] = useState("")
|
|
const [confirmNewPassword, setConfirmNewPassword] = useState("")
|
|
|
|
const [show2FASetup, setShow2FASetup] = useState(false)
|
|
const [show2FADisable, setShow2FADisable] = useState(false)
|
|
const [disable2FAPassword, setDisable2FAPassword] = useState("")
|
|
|
|
const [proxmenuxTools, setProxmenuxTools] = useState<ProxMenuxTool[]>([])
|
|
const [loadingTools, setLoadingTools] = useState(true)
|
|
const [expandedVersions, setExpandedVersions] = useState<Record<string, boolean>>({
|
|
[APP_VERSION]: true, // Current version expanded by default
|
|
})
|
|
|
|
useEffect(() => {
|
|
checkAuthStatus()
|
|
loadProxmenuxTools()
|
|
}, [])
|
|
|
|
const checkAuthStatus = async () => {
|
|
try {
|
|
const response = await fetch(getApiUrl("/api/auth/status"))
|
|
const data = await response.json()
|
|
setAuthEnabled(data.auth_enabled || false)
|
|
setTotpEnabled(data.totp_enabled || false) // Get 2FA status
|
|
} catch (err) {
|
|
console.error("Failed to check auth status:", err)
|
|
}
|
|
}
|
|
|
|
const loadProxmenuxTools = async () => {
|
|
try {
|
|
const response = await fetch(getApiUrl("/api/proxmenux/installed-tools"))
|
|
const data = await response.json()
|
|
|
|
if (data.success) {
|
|
setProxmenuxTools(data.installed_tools || [])
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to load ProxMenux tools:", err)
|
|
} finally {
|
|
setLoadingTools(false)
|
|
}
|
|
}
|
|
|
|
const handleEnableAuth = async () => {
|
|
setError("")
|
|
setSuccess("")
|
|
|
|
if (!username || !password) {
|
|
setError("Please fill in all fields")
|
|
return
|
|
}
|
|
|
|
if (password !== confirmPassword) {
|
|
setError("Passwords do not match")
|
|
return
|
|
}
|
|
|
|
if (password.length < 6) {
|
|
setError("Password must be at least 6 characters")
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
|
|
try {
|
|
const response = await fetch(getApiUrl("/api/auth/setup"), {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
username,
|
|
password,
|
|
enable_auth: true,
|
|
}),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || "Failed to enable authentication")
|
|
}
|
|
|
|
// Save token
|
|
localStorage.setItem("proxmenux-auth-token", data.token)
|
|
localStorage.setItem("proxmenux-auth-setup-complete", "true")
|
|
|
|
setSuccess("Authentication enabled successfully!")
|
|
setAuthEnabled(true)
|
|
setShowSetupForm(false)
|
|
setUsername("")
|
|
setPassword("")
|
|
setConfirmPassword("")
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to enable authentication")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleDisableAuth = async () => {
|
|
if (
|
|
!confirm(
|
|
"Are you sure you want to disable authentication? This will remove password protection from your dashboard.",
|
|
)
|
|
) {
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
setError("")
|
|
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 ${token}`,
|
|
},
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.message || "Failed to disable authentication")
|
|
}
|
|
|
|
localStorage.removeItem("proxmenux-auth-token")
|
|
localStorage.removeItem("proxmenux-auth-setup-complete")
|
|
|
|
setSuccess("Authentication disabled successfully! Reloading...")
|
|
|
|
setTimeout(() => {
|
|
window.location.reload()
|
|
}, 1000)
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to disable authentication. Please try again.")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleChangePassword = async () => {
|
|
setError("")
|
|
setSuccess("")
|
|
|
|
if (!currentPassword || !newPassword) {
|
|
setError("Please fill in all fields")
|
|
return
|
|
}
|
|
|
|
if (newPassword !== confirmNewPassword) {
|
|
setError("New passwords do not match")
|
|
return
|
|
}
|
|
|
|
if (newPassword.length < 6) {
|
|
setError("Password must be at least 6 characters")
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
|
|
try {
|
|
const response = await fetch(getApiUrl("/api/auth/change-password"), {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${localStorage.getItem("proxmenux-auth-token")}`,
|
|
},
|
|
body: JSON.stringify({
|
|
current_password: currentPassword,
|
|
new_password: newPassword,
|
|
}),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || "Failed to change password")
|
|
}
|
|
|
|
// Update token if provided
|
|
if (data.token) {
|
|
localStorage.setItem("proxmenux-auth-token", data.token)
|
|
}
|
|
|
|
setSuccess("Password changed successfully!")
|
|
setShowChangePassword(false)
|
|
setCurrentPassword("")
|
|
setNewPassword("")
|
|
setConfirmNewPassword("")
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to change password")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleDisable2FA = async () => {
|
|
setError("")
|
|
setSuccess("")
|
|
|
|
if (!disable2FAPassword) {
|
|
setError("Please enter your password")
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
|
|
try {
|
|
const token = localStorage.getItem("proxmenux-auth-token")
|
|
const response = await fetch(getApiUrl("/api/auth/totp/disable"), {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({ password: disable2FAPassword }),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.message || "Failed to disable 2FA")
|
|
}
|
|
|
|
setSuccess("2FA disabled successfully!")
|
|
setTotpEnabled(false)
|
|
setShow2FADisable(false)
|
|
setDisable2FAPassword("")
|
|
checkAuthStatus()
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Failed to disable 2FA")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem("proxmenux-auth-token")
|
|
localStorage.removeItem("proxmenux-auth-setup-complete")
|
|
window.location.reload()
|
|
}
|
|
|
|
const toggleVersion = (version: string) => {
|
|
setExpandedVersions((prev) => ({
|
|
...prev,
|
|
[version]: !prev[version],
|
|
}))
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Settings</h1>
|
|
<p className="text-muted-foreground mt-2">Manage your dashboard security and preferences</p>
|
|
</div>
|
|
|
|
{/* Authentication Settings */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Shield className="h-5 w-5 text-blue-500" />
|
|
<CardTitle>Authentication</CardTitle>
|
|
</div>
|
|
<CardDescription>Protect your dashboard with username and password authentication</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{error && (
|
|
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-start gap-2">
|
|
<AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
|
|
<p className="text-sm text-red-500">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{success && (
|
|
<div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-start gap-2">
|
|
<CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
|
|
<p className="text-sm text-green-500">{success}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className={`w-10 h-10 rounded-full flex items-center justify-center ${authEnabled ? "bg-green-500/10" : "bg-gray-500/10"}`}
|
|
>
|
|
<Lock className={`h-5 w-5 ${authEnabled ? "text-green-500" : "text-gray-500"}`} />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">Authentication Status</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{authEnabled ? "Password protection is enabled" : "No password protection"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`px-3 py-1 rounded-full text-sm font-medium ${authEnabled ? "bg-green-500/10 text-green-500" : "bg-gray-500/10 text-gray-500"}`}
|
|
>
|
|
{authEnabled ? "Enabled" : "Disabled"}
|
|
</div>
|
|
</div>
|
|
|
|
{!authEnabled && !showSetupForm && (
|
|
<div className="space-y-3">
|
|
<div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3 flex items-start gap-2">
|
|
<Info className="h-5 w-5 text-blue-500 flex-shrink-0 mt-0.5" />
|
|
<p className="text-sm text-blue-500">
|
|
Enable authentication to protect your dashboard when accessing from non-private networks.
|
|
</p>
|
|
</div>
|
|
<Button onClick={() => setShowSetupForm(true)} className="w-full bg-blue-500 hover:bg-blue-600">
|
|
<Shield className="h-4 w-4 mr-2" />
|
|
Enable Authentication
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{!authEnabled && showSetupForm && (
|
|
<div className="space-y-4 border border-border rounded-lg p-4">
|
|
<h3 className="font-semibold">Setup Authentication</h3>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="setup-username">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="setup-username"
|
|
type="text"
|
|
placeholder="Enter username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
className="pl-10"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="setup-password">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="setup-password"
|
|
type="password"
|
|
placeholder="Enter password (min 6 characters)"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="pl-10"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="setup-confirm-password">Confirm 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="setup-confirm-password"
|
|
type="password"
|
|
placeholder="Confirm password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
className="pl-10"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button onClick={handleEnableAuth} className="flex-1 bg-blue-500 hover:bg-blue-600" disabled={loading}>
|
|
{loading ? "Enabling..." : "Enable"}
|
|
</Button>
|
|
<Button onClick={() => setShowSetupForm(false)} variant="outline" className="flex-1" disabled={loading}>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{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>
|
|
|
|
{!showChangePassword && (
|
|
<Button onClick={() => setShowChangePassword(true)} variant="outline" className="w-full">
|
|
<Lock className="h-4 w-4 mr-2" />
|
|
Change Password
|
|
</Button>
|
|
)}
|
|
|
|
{showChangePassword && (
|
|
<div className="space-y-4 border border-border rounded-lg p-4">
|
|
<h3 className="font-semibold">Change Password</h3>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="current-password">Current 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="current-password"
|
|
type="password"
|
|
placeholder="Enter current password"
|
|
value={currentPassword}
|
|
onChange={(e) => setCurrentPassword(e.target.value)}
|
|
className="pl-10"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="new-password">New 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="new-password"
|
|
type="password"
|
|
placeholder="Enter new password (min 6 characters)"
|
|
value={newPassword}
|
|
onChange={(e) => setNewPassword(e.target.value)}
|
|
className="pl-10"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="confirm-new-password">Confirm New 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="confirm-new-password"
|
|
type="password"
|
|
placeholder="Confirm new password"
|
|
value={confirmNewPassword}
|
|
onChange={(e) => setConfirmNewPassword(e.target.value)}
|
|
className="pl-10"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
onClick={handleChangePassword}
|
|
className="flex-1 bg-blue-500 hover:bg-blue-600"
|
|
disabled={loading}
|
|
>
|
|
{loading ? "Changing..." : "Change Password"}
|
|
</Button>
|
|
<Button
|
|
onClick={() => setShowChangePassword(false)}
|
|
variant="outline"
|
|
className="flex-1"
|
|
disabled={loading}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!totpEnabled && (
|
|
<Button
|
|
onClick={() => setShow2FASetup(true)}
|
|
variant="outline"
|
|
className="w-full bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/20"
|
|
>
|
|
<Shield className="h-4 w-4 mr-2" />
|
|
Enable Two-Factor Authentication
|
|
</Button>
|
|
)}
|
|
|
|
{totpEnabled && (
|
|
<div className="space-y-3">
|
|
<div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3 flex items-center gap-2">
|
|
<CheckCircle className="h-5 w-5 text-green-500" />
|
|
<p className="text-sm text-green-500 font-medium">2FA is enabled</p>
|
|
</div>
|
|
|
|
{!show2FADisable && (
|
|
<Button onClick={() => setShow2FADisable(true)} variant="outline" className="w-full">
|
|
<Shield className="h-4 w-4 mr-2" />
|
|
Disable 2FA
|
|
</Button>
|
|
)}
|
|
|
|
{show2FADisable && (
|
|
<div className="space-y-4 border border-border rounded-lg p-4">
|
|
<h3 className="font-semibold">Disable Two-Factor Authentication</h3>
|
|
<p className="text-sm text-muted-foreground">Enter your password to confirm</p>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="disable-2fa-password">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="disable-2fa-password"
|
|
type="password"
|
|
placeholder="Enter your password"
|
|
value={disable2FAPassword}
|
|
onChange={(e) => setDisable2FAPassword(e.target.value)}
|
|
className="pl-10"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button onClick={handleDisable2FA} variant="destructive" className="flex-1" disabled={loading}>
|
|
{loading ? "Disabling..." : "Disable 2FA"}
|
|
</Button>
|
|
<Button
|
|
onClick={() => {
|
|
setShow2FADisable(false)
|
|
setDisable2FAPassword("")
|
|
setError("")
|
|
}}
|
|
variant="outline"
|
|
className="flex-1"
|
|
disabled={loading}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<Button onClick={handleDisableAuth} variant="destructive" className="w-full" disabled={loading}>
|
|
Disable Authentication
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Release Notes */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Sparkles className="h-5 w-5 text-blue-500" />
|
|
<CardTitle>Release Notes</CardTitle>
|
|
</div>
|
|
<CardDescription>View changes and improvements in ProxMenux Monitor</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between p-4 bg-blue-500/10 rounded-lg border border-blue-500/20">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
|
|
<Package className="h-5 w-5 text-blue-500" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">Current Version</p>
|
|
<p className="text-sm text-muted-foreground">ProxMenux Monitor v{APP_VERSION}</p>
|
|
</div>
|
|
</div>
|
|
<div className="px-3 py-1 rounded-full text-sm font-medium bg-blue-500 text-white">Latest</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{Object.entries(CHANGELOG).map(([version, details]) => {
|
|
const isExpanded = expandedVersions[version]
|
|
const isCurrent = version === APP_VERSION
|
|
|
|
return (
|
|
<div key={version} className="border border-border rounded-lg overflow-hidden">
|
|
<button
|
|
onClick={() => toggleVersion(version)}
|
|
className="w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
{isCurrent && <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />}
|
|
<div className="text-left">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-semibold">Version {version}</span>
|
|
{isCurrent && (
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-500">
|
|
Current
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-sm text-muted-foreground">{details.date}</span>
|
|
</div>
|
|
</div>
|
|
{isExpanded ? (
|
|
<ChevronUp className="h-5 w-5 text-muted-foreground" />
|
|
) : (
|
|
<ChevronDown className="h-5 w-5 text-muted-foreground" />
|
|
)}
|
|
</button>
|
|
|
|
{isExpanded && (
|
|
<div className="px-4 pb-4 space-y-4 border-t border-border pt-4">
|
|
{details.changes.added && (
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="px-2 py-0.5 rounded text-xs font-medium bg-green-500/10 text-green-500">
|
|
Added
|
|
</div>
|
|
</div>
|
|
<ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground ml-2">
|
|
{details.changes.added.map((item, idx) => (
|
|
<li key={idx}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{details.changes.changed && (
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="px-2 py-0.5 rounded text-xs font-medium bg-blue-500/10 text-blue-500">
|
|
Changed
|
|
</div>
|
|
</div>
|
|
<ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground ml-2">
|
|
{details.changes.changed.map((item, idx) => (
|
|
<li key={idx}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{details.changes.fixed && (
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<div className="px-2 py-0.5 rounded text-xs font-medium bg-orange-500/10 text-orange-500">
|
|
Fixed
|
|
</div>
|
|
</div>
|
|
<ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground ml-2">
|
|
{details.changes.fixed.map((item, idx) => (
|
|
<li key={idx}>{item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* ProxMenux Optimizations */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Wrench className="h-5 w-5 text-orange-500" />
|
|
<CardTitle>ProxMenux Optimizations</CardTitle>
|
|
</div>
|
|
<CardDescription>System optimizations and utilities installed via ProxMenux</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loadingTools ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<div className="animate-spin h-8 w-8 border-4 border-orange-500 border-t-transparent rounded-full" />
|
|
</div>
|
|
) : proxmenuxTools.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<Package className="h-12 w-12 text-muted-foreground mx-auto mb-3 opacity-50" />
|
|
<p className="text-muted-foreground">No ProxMenux optimizations installed yet</p>
|
|
<p className="text-sm text-muted-foreground mt-1">Run ProxMenux to configure system optimizations</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between mb-4 pb-2 border-b border-border">
|
|
<span className="text-sm font-medium text-muted-foreground">Installed Tools</span>
|
|
<span className="text-sm font-semibold text-orange-500">{proxmenuxTools.length} active</span>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
|
{proxmenuxTools.map((tool) => (
|
|
<div
|
|
key={tool.key}
|
|
className="flex items-center gap-2 p-3 bg-muted/50 rounded-lg border border-border hover:bg-muted transition-colors"
|
|
>
|
|
<div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
|
|
<span className="text-sm font-medium">{tool.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<TwoFactorSetup
|
|
open={show2FASetup}
|
|
onClose={() => setShow2FASetup(false)}
|
|
onSuccess={() => {
|
|
setSuccess("2FA enabled successfully!")
|
|
checkAuthStatus()
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|