Add login formatting

This commit is contained in:
Owen
2026-05-28 21:38:40 -07:00
parent c1ef5b4fbe
commit 9617eb2bd7
3 changed files with 323 additions and 189 deletions

View File

@@ -15,8 +15,14 @@ import type {
FileInfo
} from "@devolutions/iron-remote-desktop-rdp/dist";
import { GetBrowserTargetResponse } from "@server/routers/resource";
import { Card, CardContent } from "@app/components/ui/card";
import LoginCardHeader from "@app/components/LoginCardHeader";
import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription
} from "@app/components/ui/card";
import Link from "next/link";
declare module "react" {
namespace JSX {
@@ -309,21 +315,57 @@ export default function RdpClient({
if (error) {
return (
<div>
<div className="text-center mb-2">
<span className="text-sm text-muted-foreground">
Powered by{" "}
<Link
href="https://pangolin.net/"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
Pangolin
</Link>
</span>
</div>
<Card className="w-full">
<LoginCardHeader subtitle="RDP" />
<CardContent className="pt-6">
<CardHeader>
<CardTitle>RDP</CardTitle>
</CardHeader>
<CardContent>
<p className="text-destructive text-sm">{error}</p>
</CardContent>
</Card>
</div>
);
}
return (
<>
{showLogin && (
<div>
<div className="text-center mb-2">
<span className="text-sm text-muted-foreground">
Powered by{" "}
<Link
href="https://pangolin.net/"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
Pangolin
</Link>
</span>
</div>
<Card className="w-full">
<LoginCardHeader subtitle="Connect via RDP" />
<CardContent className="pt-6">
<CardHeader>
<CardTitle>Sign in to Remote Desktop</CardTitle>
<CardDescription>
Enter Windows credentials to access xxxx
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<Field label="Domain" id="domain">
<Input
@@ -392,11 +434,14 @@ export default function RdpClient({
loading={connecting}
className="w-full"
>
{moduleReady ? "Connect" : "Loading module..."}
{moduleReady
? "Connect"
: "Loading module..."}
</Button>
</div>
</CardContent>
</Card>
</div>
)}
<div

View File

@@ -8,8 +8,14 @@ import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import type { SignSshKeyResponse } from "@server/private/routers/ssh";
import { GetBrowserTargetResponse } from "@server/routers/resource";
import { Card, CardContent } from "@app/components/ui/card";
import LoginCardHeader from "@app/components/LoginCardHeader";
import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription
} from "@app/components/ui/card";
import Link from "next/link";
type FormState = {
username: string;
@@ -300,21 +306,57 @@ export default function SshClient({
if (error) {
return (
<div>
<div className="text-center mb-2">
<span className="text-sm text-muted-foreground">
Powered by{" "}
<Link
href="https://pangolin.net/"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
Pangolin
</Link>
</span>
</div>
<Card className="w-full">
<LoginCardHeader subtitle="SSH" />
<CardContent className="pt-6">
<CardHeader>
<CardTitle>SSH</CardTitle>
</CardHeader>
<CardContent>
<p className="text-destructive text-sm">{error}</p>
</CardContent>
</Card>
</div>
);
}
return (
<>
{!connected && (
<div>
<div className="text-center mb-2">
<span className="text-sm text-muted-foreground">
Powered by{" "}
<Link
href="https://pangolin.net/"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
Pangolin
</Link>
</span>
</div>
<Card className="w-full">
<LoginCardHeader subtitle="Connect via SSH" />
<CardContent className="pt-6">
<CardHeader>
<CardTitle>Sign in to SSH</CardTitle>
<CardDescription>
Enter your credentials to access xxxx
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<Field label="Username" id="username">
<Input
@@ -420,6 +462,7 @@ export default function SshClient({
</div>
</CardContent>
</Card>
</div>
)}
{connected && (

View File

@@ -6,8 +6,14 @@ 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";
import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription
} from "@app/components/ui/card";
import Link from "next/link";
type FormState = {
password: string;
@@ -148,23 +154,62 @@ export default function VncClient({
if (error) {
return (
<div>
<div className="text-center mb-2">
<span className="text-sm text-muted-foreground">
Powered by{" "}
<Link
href="https://pangolin.net/"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
Pangolin
</Link>
</span>
</div>
<Card className="w-full">
<LoginCardHeader subtitle="VNC" />
<CardContent className="pt-6">
<CardHeader>
<CardTitle>VNC</CardTitle>
</CardHeader>
<CardContent>
<p className="text-destructive text-sm">{error}</p>
</CardContent>
</Card>
</div>
);
}
return (
<>
{!connected && (
<div>
<div className="text-center mb-2">
<span className="text-sm text-muted-foreground">
Powered by{" "}
<Link
href="https://pangolin.net/"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
Pangolin
</Link>
</span>
</div>
<Card className="w-full">
<LoginCardHeader subtitle="Connect via VNC" />
<CardContent className="pt-6">
<CardHeader>
<CardTitle>VNC</CardTitle>
<CardDescription>
Enter your credentials to connect
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<Field label="Password (optional)" id="password">
<Field
label="Password (optional)"
id="password"
>
<Input
id="password"
type="password"
@@ -181,6 +226,7 @@ export default function VncClient({
</div>
</CardContent>
</Card>
</div>
)}
<div