Konsole: Box-Zugang-Karte entfernt (redundant)

Der Login läuft jetzt über den su-Passwort-Prompt im Terminal selbst; die Passwort-
Verwaltung bleibt in System-Wartung → Einstellungen. Die doppelte „Box-Zugang"-Karte
auf der Konsole-Seite ist damit ueberfluessig und wird entfernt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
2026-07-04 21:45:48 +02:00
parent eff23643e6
commit 032b9a8ee9
4 changed files with 79 additions and 148 deletions
+3 -72
View File
@@ -1,12 +1,10 @@
import { useEffect, useState } from "react"
import { SquareTerminal, ExternalLink, AlertTriangle, Shield, Eye, EyeOff, Check, Trash2 } from "lucide-react"
import { SquareTerminal, ExternalLink, AlertTriangle } from "lucide-react"
import { useAgentStatus } from "@/lib/queries"
import { resolveExternalUrl, cn } from "@/lib/utils"
// Konsole = direkter, SSH-artiger Box-Zugriff (ttyd → Login-Shell auf :7682), eingebettet
// per iframe — Schwester der Hermes-Terminal-Seite. Darunter Box-Zugang": das Host-Sudo-
// Passwort, das MC2 für System-Operationen (Neustarts, apt, Reboot) braucht, hier direkt
// änder-/löschbar (nur lokal im Browser gespeichert, wie in den Einstellungen).
// per iframe — Schwester der Hermes-Terminal-Seite. Login per Box-Passwort (su-Prompt im
// Terminal selbst). Die Passwort-Verwaltung liegt in System-Wartung → Einstellungen.
export function KonsoleView() {
const { data: agent } = useAgentStatus(5_000)
const url = agent?.box_console_url ? resolveExternalUrl(agent.box_console_url) : undefined
@@ -56,73 +54,6 @@ export function KonsoleView() {
<SquareTerminal className="mr-2 h-4 w-4" /> Lade Konsole
</div>
)}
<BoxAccessCard />
</div>
)
}
// „Box-Zugang" — das Host-Sudo-Passwort direkt setzen/ändern/löschen. Reine Frontend-
// Verwaltung des lokal gespeicherten Werts (localStorage `mc_sudo_password`), den api.ts
// bei Bedarf mitschickt. KEINE Änderung des echten Linux-Kontopassworts.
function BoxAccessCard() {
const [pw, setPw] = useState("")
const [stored, setStored] = useState(false)
const [show, setShow] = useState(false)
const [saved, setSaved] = useState(false)
useEffect(() => {
const v = localStorage.getItem("mc_sudo_password") || ""
setPw(v); setStored(!!v)
}, [])
function save() {
if (pw) localStorage.setItem("mc_sudo_password", pw)
else localStorage.removeItem("mc_sudo_password")
setStored(!!pw)
setSaved(true); setTimeout(() => setSaved(false), 1800)
}
function clear() {
localStorage.removeItem("mc_sudo_password"); setPw(""); setStored(false)
setSaved(true); setTimeout(() => setSaved(false), 1800)
}
return (
<div className="rounded-2xl border border-border/60 bg-card/45 p-5 shadow-lg shadow-black/15 backdrop-blur-md">
<div className="mb-1 flex items-center gap-2">
<Shield className="h-4.5 w-4.5 text-amber-400" />
<h2 className="text-sm font-semibold uppercase tracking-wide text-foreground">Box-Zugang</h2>
<span className={cn("ml-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold",
stored ? "border-emerald-500/30 bg-emerald-500/5 text-emerald-400" : "border-border/40 bg-background/30 text-muted-foreground")}>
{stored ? "gesetzt" : "nicht gesetzt"}
</span>
</div>
<p className="mb-3 text-[11px] leading-normal text-muted-foreground">
Das Box-Passwort (Sudo) braucht MC2 für System-Aktionen wie Dienst-Neustarts, OS-Updates und Neustart der Box.
Es wird nur lokal in deinem Browser gespeichert. Hier kannst du es setzen, ändern oder löschen.
</p>
<div className="flex flex-col gap-2 sm:flex-row">
<div className="relative flex-1">
<input
type={show ? "text" : "password"} value={pw} onChange={(e) => setPw(e.target.value)}
placeholder="Box-Passwort" autoComplete="off" spellCheck={false} name="box-password"
className="h-10 w-full rounded-lg border border-border/60 bg-background/40 pl-3 pr-10 text-xs text-foreground outline-none transition-colors focus:border-primary"
/>
<button type="button" onClick={() => setShow(!show)}
className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors hover:text-foreground"
aria-label={show ? "Passwort verbergen" : "Passwort anzeigen"}>
{show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</button>
</div>
<button onClick={save}
className="flex h-10 items-center justify-center gap-1.5 rounded-lg bg-primary px-4 text-xs font-semibold text-primary-foreground shadow shadow-primary/10 transition-colors hover:bg-primary/90 cursor-pointer">
{saved ? <><Check className="h-4 w-4" /> gespeichert</> : "Speichern"}
</button>
<button onClick={clear} disabled={!stored && !pw}
className="flex h-10 items-center justify-center gap-1.5 rounded-lg border border-border/60 bg-background/20 px-3 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent cursor-pointer disabled:opacity-40">
<Trash2 className="h-3.5 w-3.5" /> Löschen
</button>
</div>
</div>
)
}