mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2026-05-30 20:14:46 +00:00
MacRimi
449 lines
17 KiB
TypeScript
449 lines
17 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect, useRef } from "react"
|
|
import { Button } from "./ui/button"
|
|
import { Dialog, DialogContent, DialogTitle } from "./ui/dialog"
|
|
import { Input } from "./ui/input"
|
|
import { Label } from "./ui/label"
|
|
import { Shield, Lock, User, AlertCircle, Eye, EyeOff, Upload, Trash2 } from "lucide-react"
|
|
import { getApiUrl } from "../lib/api-config"
|
|
|
|
interface AuthSetupProps {
|
|
onComplete: () => void
|
|
}
|
|
|
|
export function AuthSetup({ onComplete }: AuthSetupProps) {
|
|
const [open, setOpen] = useState(false)
|
|
const [step, setStep] = useState<"choice" | "setup">("choice")
|
|
const [username, setUsername] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [confirmPassword, setConfirmPassword] = useState("")
|
|
const [error, setError] = useState("")
|
|
const [loading, setLoading] = useState(false)
|
|
const [showPassword, setShowPassword] = useState(false)
|
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false)
|
|
// Profile (Fase 2 — v1.2.2). Both optional decorations on top of the
|
|
// mandatory username + password. Persisted via PUT /api/auth/profile
|
|
// and POST /api/auth/profile/avatar after the user lands a successful
|
|
// /api/auth/setup so we don't change the setup endpoint's contract.
|
|
const [displayName, setDisplayName] = useState("")
|
|
const [avatarFile, setAvatarFile] = useState<File | null>(null)
|
|
const [avatarPreviewUrl, setAvatarPreviewUrl] = useState<string | null>(null)
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
|
|
useEffect(() => {
|
|
const checkOnboardingStatus = async () => {
|
|
try {
|
|
const response = await fetch(getApiUrl("/api/auth/status"))
|
|
|
|
// Check if response is valid JSON before parsing
|
|
if (!response.ok) {
|
|
// API not available - don't show modal in preview
|
|
return
|
|
}
|
|
|
|
const contentType = response.headers.get("content-type")
|
|
if (!contentType || !contentType.includes("application/json")) {
|
|
return
|
|
}
|
|
|
|
const data = await response.json()
|
|
|
|
// Show modal if auth is not configured and not declined
|
|
if (!data.auth_configured) {
|
|
setTimeout(() => setOpen(true), 500)
|
|
}
|
|
} catch {
|
|
// API not available (preview environment) - don't show modal
|
|
}
|
|
}
|
|
|
|
checkOnboardingStatus()
|
|
}, [])
|
|
|
|
const handleSkipAuth = async () => {
|
|
setLoading(true)
|
|
setError("")
|
|
|
|
try {
|
|
const response = await fetch(getApiUrl("/api/auth/skip"), {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || "Failed to skip authentication")
|
|
}
|
|
|
|
if (data.auth_declined) {
|
|
}
|
|
|
|
localStorage.setItem("proxmenux-auth-declined", "true")
|
|
localStorage.removeItem("proxmenux-auth-token") // Remove any old token
|
|
setOpen(false)
|
|
onComplete()
|
|
} catch (err) {
|
|
console.error("[v0] Auth skip error:", err)
|
|
setError(err instanceof Error ? err.message : "Failed to save preference")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleAvatarPick = () => fileInputRef.current?.click()
|
|
|
|
const handleAvatarChange = (file: File | null) => {
|
|
// Revoke the previous local preview so we don't leak blob URLs while
|
|
// the user picks another file before submitting.
|
|
if (avatarPreviewUrl) {
|
|
URL.revokeObjectURL(avatarPreviewUrl)
|
|
}
|
|
setAvatarFile(file)
|
|
setAvatarPreviewUrl(file ? URL.createObjectURL(file) : null)
|
|
}
|
|
|
|
const handleSetupAuth = async () => {
|
|
setError("")
|
|
|
|
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,
|
|
}),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || "Failed to setup authentication")
|
|
}
|
|
|
|
if (data.token) {
|
|
localStorage.setItem("proxmenux-auth-token", data.token)
|
|
localStorage.removeItem("proxmenux-auth-declined")
|
|
}
|
|
|
|
// Profile decorations (Fase 2). Sent as a follow-up to the setup
|
|
// call so the /api/auth/setup endpoint stays minimal (username +
|
|
// password only) — these calls reuse the existing profile
|
|
// endpoints and the JWT we just received. Failures here are
|
|
// non-fatal: the user is already authenticated and can finish
|
|
// configuring the profile from the /profile page.
|
|
const token = data.token
|
|
if (token) {
|
|
const trimmedDisplayName = displayName.trim()
|
|
if (trimmedDisplayName) {
|
|
try {
|
|
await fetch(getApiUrl("/api/auth/profile"), {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify({ display_name: trimmedDisplayName }),
|
|
})
|
|
} catch (e) {
|
|
console.warn("[auth-setup] failed to save display_name:", e)
|
|
}
|
|
}
|
|
if (avatarFile) {
|
|
try {
|
|
await fetch(getApiUrl("/api/auth/profile/avatar"), {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": avatarFile.type,
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: avatarFile,
|
|
})
|
|
} catch (e) {
|
|
console.warn("[auth-setup] failed to upload avatar:", e)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Release the local preview blob now that the file has been
|
|
// uploaded (or skipped). The header avatar pulls a fresh copy
|
|
// from the backend.
|
|
if (avatarPreviewUrl) {
|
|
URL.revokeObjectURL(avatarPreviewUrl)
|
|
setAvatarPreviewUrl(null)
|
|
}
|
|
|
|
// Notify the header AvatarMenu (mounted on dashboard load with
|
|
// auth_enabled=false) to re-fetch its status + profile so the
|
|
// avatar appears immediately after first-time setup instead of
|
|
// requiring a page refresh.
|
|
if (typeof window !== "undefined") {
|
|
window.dispatchEvent(new CustomEvent("proxmenux:profile-changed"))
|
|
}
|
|
|
|
setOpen(false)
|
|
onComplete()
|
|
} catch (err) {
|
|
console.error("[v0] Auth setup error:", err)
|
|
setError(err instanceof Error ? err.message : "Failed to setup authentication")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
|
|
<DialogTitle className="sr-only">
|
|
{step === "choice" ? "Setup Dashboard Protection" : "Create Password"}
|
|
</DialogTitle>
|
|
{step === "choice" ? (
|
|
<div className="space-y-6 py-2">
|
|
<div className="text-center space-y-2">
|
|
<div className="mx-auto w-16 h-16 bg-blue-500/10 rounded-full flex items-center justify-center">
|
|
<Shield className="h-8 w-8 text-blue-500" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold">Protect Your Dashboard?</h2>
|
|
<p className="text-muted-foreground text-sm">
|
|
Add an extra layer of security to protect your Proxmox data when accessing from non-private networks.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<Button onClick={() => setStep("setup")} className="w-full bg-blue-500 hover:bg-blue-600" size="lg">
|
|
<Lock className="h-4 w-4 mr-2" />
|
|
Yes, Setup Password
|
|
</Button>
|
|
<Button
|
|
onClick={handleSkipAuth}
|
|
variant="outline"
|
|
className="w-full bg-transparent"
|
|
size="lg"
|
|
disabled={loading}
|
|
>
|
|
No, Continue Without Protection
|
|
</Button>
|
|
</div>
|
|
|
|
<p className="text-xs text-center text-muted-foreground">You can always enable this later in Settings</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6 py-2">
|
|
<div className="text-center space-y-2">
|
|
<div className="mx-auto w-16 h-16 bg-blue-500/10 rounded-full flex items-center justify-center">
|
|
<Lock className="h-8 w-8 text-blue-500" />
|
|
</div>
|
|
<h2 className="text-2xl font-bold">Setup Authentication</h2>
|
|
<p className="text-muted-foreground text-sm">Create a username and password to protect your dashboard</p>
|
|
</div>
|
|
|
|
{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>
|
|
)}
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="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="username"
|
|
type="text"
|
|
placeholder="Enter 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="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="password"
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder="Enter password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="pl-10 text-base"
|
|
disabled={loading}
|
|
autoComplete="new-password"
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2"
|
|
disabled={loading}
|
|
>
|
|
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="confirm-password" className="text-sm">
|
|
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="confirm-password"
|
|
type={showConfirmPassword ? "text" : "password"}
|
|
placeholder="Confirm password"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
className="pl-10 text-base"
|
|
disabled={loading}
|
|
autoComplete="new-password"
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2"
|
|
disabled={loading}
|
|
>
|
|
{showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Optional profile decorations (Fase 2). Visually
|
|
separated from the mandatory credential fields by a
|
|
divider + a small heading so the operator understands
|
|
they can skip everything below and still complete the
|
|
setup. Both are saved with follow-up calls after the
|
|
setup endpoint returns the JWT. */}
|
|
<div className="pt-3 border-t border-border/60 space-y-4">
|
|
<p className="text-xs text-muted-foreground uppercase tracking-wider">
|
|
Profile · optional
|
|
</p>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="display-name" className="text-sm">
|
|
Display name
|
|
</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="display-name"
|
|
type="text"
|
|
placeholder="Shown above the username in the menu"
|
|
value={displayName}
|
|
onChange={(e) => setDisplayName(e.target.value)}
|
|
maxLength={64}
|
|
className="pl-10 text-base"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
<p className="text-[11px] text-muted-foreground">
|
|
Leave empty to render the username itself. Up to 64 characters.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-sm">Avatar</Label>
|
|
<div className="flex items-center gap-3">
|
|
{avatarPreviewUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={avatarPreviewUrl}
|
|
alt=""
|
|
className="w-14 h-14 rounded-full object-cover border border-border bg-cyan-500/5 shrink-0"
|
|
/>
|
|
) : (
|
|
<span className="w-14 h-14 rounded-full bg-cyan-500/15 text-cyan-600 dark:text-cyan-300 flex items-center justify-center text-xl font-semibold border border-border shrink-0">
|
|
{(displayName || username || "U").trim().charAt(0).toUpperCase() || "U"}
|
|
</span>
|
|
)}
|
|
<div className="flex flex-col gap-1.5 min-w-0">
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/png,image/jpeg,image/webp,image/gif"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0] || null
|
|
handleAvatarChange(file)
|
|
if (fileInputRef.current) fileInputRef.current.value = ""
|
|
}}
|
|
/>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleAvatarPick}
|
|
disabled={loading}
|
|
className="h-7 text-xs"
|
|
>
|
|
<Upload className="h-3 w-3 mr-1.5" />
|
|
{avatarFile ? "Change" : "Choose image"}
|
|
</Button>
|
|
{avatarFile && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleAvatarChange(null)}
|
|
disabled={loading}
|
|
className="h-7 text-xs text-red-500 hover:text-red-500 hover:bg-red-500/10"
|
|
>
|
|
<Trash2 className="h-3 w-3 mr-1.5" />
|
|
Clear
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<p className="text-[11px] text-muted-foreground">
|
|
PNG, JPEG, WebP or GIF · up to 2 MB · pre-crop square for best results.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Button onClick={handleSetupAuth} className="w-full bg-blue-500 hover:bg-blue-600" disabled={loading}>
|
|
{loading ? "Setting up..." : "Setup Authentication"}
|
|
</Button>
|
|
<Button onClick={() => setStep("choice")} variant="ghost" className="w-full" disabled={loading}>
|
|
Back
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|