Shape the ssh/vnc/rdp login ui to match auth

This commit is contained in:
Owen
2026-05-28 21:12:55 -07:00
parent 5b814e37c4
commit 9a1db4948b
8 changed files with 364 additions and 310 deletions

View File

@@ -6,6 +6,8 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "@app/hooks/useToast";
import { GetBrowserTargetResponse } from "@server/routers/resource";
import { Card, CardContent } from "@app/components/ui/card";
import LoginCardHeader from "@app/components/LoginCardHeader";
type FormState = {
password: string;
@@ -146,39 +148,43 @@ export default function VncClient({
if (error) {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<p className="text-destructive">{error}</p>
</div>
<Card className="w-full">
<LoginCardHeader subtitle="VNC" />
<CardContent className="pt-6">
<p className="text-destructive text-sm">{error}</p>
</CardContent>
</Card>
);
}
return (
<div className="min-h-screen bg-background">
<>
{!connected && (
<div className="mx-auto max-w-2xl p-6">
<h1 className="mb-4 text-2xl font-semibold">VNC</h1>
<Card className="w-full">
<LoginCardHeader subtitle="Connect via VNC" />
<CardContent className="pt-6">
<div className="space-y-4">
<Field label="Password (optional)" id="password">
<Input
id="password"
type="password"
value={form.password}
onChange={(e) =>
update("password", e.target.value)
}
/>
</Field>
<div className="space-y-4">
<Field label="Password (optional)" id="password">
<Input
id="password"
type="password"
value={form.password}
onChange={(e) =>
update("password", e.target.value)
}
/>
</Field>
<Button onClick={connect} className="w-full">
Connect
</Button>
</div>
</div>
<Button onClick={connect} className="w-full">
Connect
</Button>
</div>
</CardContent>
</Card>
)}
<div
className="flex h-screen flex-col bg-neutral-900"
className="fixed inset-0 z-50 flex flex-col bg-neutral-900"
style={{ display: connected ? "flex" : "none" }}
>
<div className="flex flex-wrap items-center gap-2 bg-black p-2 text-white">
@@ -223,7 +229,7 @@ export default function VncClient({
style={{ background: "#000" }}
/>
</div>
</div>
</>
);
}

View File

@@ -3,6 +3,7 @@ import { priv } from "@app/lib/api";
import { AxiosResponse } from "axios";
import { GetBrowserTargetResponse } from "@server/routers/resource";
import VncClient from "./VncClient";
import AuthFooter from "@app/components/AuthFooter";
export const dynamic = "force-dynamic";
@@ -28,5 +29,14 @@ export default async function VncPage() {
error = "No resource found for this domain";
}
return <VncClient target={target} error={error} />;
return (
<div className="h-full flex flex-col">
<div className="flex-1 flex md:items-center justify-center">
<div className="w-full max-w-md p-3">
<VncClient target={target} error={error} />
</div>
</div>
<AuthFooter />
</div>
);
}