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 FileInfo
} from "@devolutions/iron-remote-desktop-rdp/dist"; } from "@devolutions/iron-remote-desktop-rdp/dist";
import { GetBrowserTargetResponse } from "@server/routers/resource"; import { GetBrowserTargetResponse } from "@server/routers/resource";
import { Card, CardContent } from "@app/components/ui/card"; import {
import LoginCardHeader from "@app/components/LoginCardHeader"; Card,
CardContent,
CardHeader,
CardTitle,
CardDescription
} from "@app/components/ui/card";
import Link from "next/link";
declare module "react" { declare module "react" {
namespace JSX { namespace JSX {
@@ -309,21 +315,57 @@ export default function RdpClient({
if (error) { if (error) {
return ( 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"> <Card className="w-full">
<LoginCardHeader subtitle="RDP" /> <CardHeader>
<CardContent className="pt-6"> <CardTitle>RDP</CardTitle>
</CardHeader>
<CardContent>
<p className="text-destructive text-sm">{error}</p> <p className="text-destructive text-sm">{error}</p>
</CardContent> </CardContent>
</Card> </Card>
</div>
); );
} }
return ( return (
<> <>
{showLogin && ( {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"> <Card className="w-full">
<LoginCardHeader subtitle="Connect via RDP" /> <CardHeader>
<CardContent className="pt-6"> <CardTitle>Sign in to Remote Desktop</CardTitle>
<CardDescription>
Enter Windows credentials to access xxxx
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4"> <div className="space-y-4">
<Field label="Domain" id="domain"> <Field label="Domain" id="domain">
<Input <Input
@@ -392,11 +434,14 @@ export default function RdpClient({
loading={connecting} loading={connecting}
className="w-full" className="w-full"
> >
{moduleReady ? "Connect" : "Loading module..."} {moduleReady
? "Connect"
: "Loading module..."}
</Button> </Button>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div>
)} )}
<div <div

View File

@@ -8,8 +8,14 @@ import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import type { SignSshKeyResponse } from "@server/private/routers/ssh"; import type { SignSshKeyResponse } from "@server/private/routers/ssh";
import { GetBrowserTargetResponse } from "@server/routers/resource"; import { GetBrowserTargetResponse } from "@server/routers/resource";
import { Card, CardContent } from "@app/components/ui/card"; import {
import LoginCardHeader from "@app/components/LoginCardHeader"; Card,
CardContent,
CardHeader,
CardTitle,
CardDescription
} from "@app/components/ui/card";
import Link from "next/link";
type FormState = { type FormState = {
username: string; username: string;
@@ -300,21 +306,57 @@ export default function SshClient({
if (error) { if (error) {
return ( 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"> <Card className="w-full">
<LoginCardHeader subtitle="SSH" /> <CardHeader>
<CardContent className="pt-6"> <CardTitle>SSH</CardTitle>
</CardHeader>
<CardContent>
<p className="text-destructive text-sm">{error}</p> <p className="text-destructive text-sm">{error}</p>
</CardContent> </CardContent>
</Card> </Card>
</div>
); );
} }
return ( return (
<> <>
{!connected && ( {!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"> <Card className="w-full">
<LoginCardHeader subtitle="Connect via SSH" /> <CardHeader>
<CardContent className="pt-6"> <CardTitle>Sign in to SSH</CardTitle>
<CardDescription>
Enter your credentials to access xxxx
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4"> <div className="space-y-4">
<Field label="Username" id="username"> <Field label="Username" id="username">
<Input <Input
@@ -420,6 +462,7 @@ export default function SshClient({
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div>
)} )}
{connected && ( {connected && (

View File

@@ -6,8 +6,14 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { GetBrowserTargetResponse } from "@server/routers/resource"; import { GetBrowserTargetResponse } from "@server/routers/resource";
import { Card, CardContent } from "@app/components/ui/card"; import {
import LoginCardHeader from "@app/components/LoginCardHeader"; Card,
CardContent,
CardHeader,
CardTitle,
CardDescription
} from "@app/components/ui/card";
import Link from "next/link";
type FormState = { type FormState = {
password: string; password: string;
@@ -148,23 +154,62 @@ export default function VncClient({
if (error) { if (error) {
return ( 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"> <Card className="w-full">
<LoginCardHeader subtitle="VNC" /> <CardHeader>
<CardContent className="pt-6"> <CardTitle>VNC</CardTitle>
</CardHeader>
<CardContent>
<p className="text-destructive text-sm">{error}</p> <p className="text-destructive text-sm">{error}</p>
</CardContent> </CardContent>
</Card> </Card>
</div>
); );
} }
return ( return (
<> <>
{!connected && ( {!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"> <Card className="w-full">
<LoginCardHeader subtitle="Connect via VNC" /> <CardHeader>
<CardContent className="pt-6"> <CardTitle>VNC</CardTitle>
<CardDescription>
Enter your credentials to connect
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4"> <div className="space-y-4">
<Field label="Password (optional)" id="password"> <Field
label="Password (optional)"
id="password"
>
<Input <Input
id="password" id="password"
type="password" type="password"
@@ -181,6 +226,7 @@ export default function VncClient({
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div>
)} )}
<div <div