feat: add Guacamole support for RDP, VNC, and Telnet connections
- Implemented WebSocket support for Guacamole in Nginx configuration. - Added REST API endpoints for generating connection tokens and checking guacd status. - Created Guacamole server using guacamole-lite for handling connections. - Developed frontend components for testing RDP/VNC connections and displaying the remote session. - Updated package dependencies to include guacamole-common-js and guacamole-lite. - Enhanced logging for Guacamole operations.
This commit is contained in:
starhound
194
src/ui/desktop/apps/guacamole/GuacamoleTestDialog.tsx
Normal file
194
src/ui/desktop/apps/guacamole/GuacamoleTestDialog.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { PasswordInput } from "@/components/ui/password-input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Monitor, MonitorPlay, Terminal } from "lucide-react";
|
||||
import { GuacamoleDisplay, GuacamoleConnectionConfig } from "./GuacamoleDisplay";
|
||||
|
||||
interface GuacamoleTestDialogProps {
|
||||
trigger?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function GuacamoleTestDialog({ trigger }: GuacamoleTestDialogProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [connectionConfig, setConnectionConfig] = useState<GuacamoleConnectionConfig | null>(null);
|
||||
|
||||
const [connectionType, setConnectionType] = useState<"rdp" | "vnc" | "telnet">("rdp");
|
||||
const [hostname, setHostname] = useState("");
|
||||
const [port, setPort] = useState("");
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [domain, setDomain] = useState("");
|
||||
const [security, setSecurity] = useState("nla");
|
||||
|
||||
const defaultPorts = { rdp: "3389", vnc: "5900", telnet: "23" };
|
||||
|
||||
const handleConnect = () => {
|
||||
if (!hostname) return;
|
||||
|
||||
const config: GuacamoleConnectionConfig = {
|
||||
type: connectionType,
|
||||
hostname,
|
||||
port: parseInt(port || defaultPorts[connectionType]),
|
||||
username: username || undefined,
|
||||
password: password || undefined,
|
||||
domain: domain || undefined,
|
||||
security: connectionType === "rdp" ? security : undefined,
|
||||
"ignore-cert": true,
|
||||
};
|
||||
|
||||
setConnectionConfig(config);
|
||||
setIsConnecting(true);
|
||||
};
|
||||
|
||||
const handleDisconnect = () => {
|
||||
setConnectionConfig(null);
|
||||
setIsConnecting(false);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
handleDisconnect();
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => open ? setIsOpen(true) : handleClose()}>
|
||||
<DialogTrigger asChild>
|
||||
{trigger || (
|
||||
<Button variant="outline" className="gap-2">
|
||||
<Monitor className="w-4 h-4" />
|
||||
Test RDP/VNC
|
||||
</Button>
|
||||
)}
|
||||
</DialogTrigger>
|
||||
<DialogContent className={isConnecting ? "sm:max-w-4xl h-[80vh]" : "sm:max-w-md"}>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Monitor className="w-5 h-5" />
|
||||
{isConnecting ? `Connected to ${hostname}` : "Test Remote Connection"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{!isConnecting ? (
|
||||
<div className="space-y-4">
|
||||
<Tabs value={connectionType} onValueChange={(v) => {
|
||||
setConnectionType(v as "rdp" | "vnc" | "telnet");
|
||||
setPort("");
|
||||
}}>
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="rdp" className="gap-1">
|
||||
<MonitorPlay className="w-4 h-4" /> RDP
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="vnc" className="gap-1">
|
||||
<Monitor className="w-4 h-4" /> VNC
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="telnet" className="gap-1">
|
||||
<Terminal className="w-4 h-4" /> Telnet
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="rdp" className="space-y-3 mt-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Hostname / IP</Label>
|
||||
<Input value={hostname} onChange={(e) => setHostname(e.target.value)} placeholder="192.168.1.100" />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Port</Label>
|
||||
<Input value={port} onChange={(e) => setPort(e.target.value)} placeholder="3389" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Domain (optional)</Label>
|
||||
<Input value={domain} onChange={(e) => setDomain(e.target.value)} placeholder="WORKGROUP" />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Security</Label>
|
||||
<Select value={security} onValueChange={setSecurity}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="nla">NLA (Windows 10/11)</SelectItem>
|
||||
<SelectItem value="tls">TLS</SelectItem>
|
||||
<SelectItem value="rdp">RDP (legacy)</SelectItem>
|
||||
<SelectItem value="any">Auto-negotiate</SelectItem>
|
||||
<SelectItem value="vmconnect">Hyper-V</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Username</Label>
|
||||
<Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Administrator" />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Password</Label>
|
||||
<PasswordInput value={password} onChange={(e) => setPassword(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="vnc" className="space-y-3 mt-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Hostname / IP</Label>
|
||||
<Input value={hostname} onChange={(e) => setHostname(e.target.value)} placeholder="192.168.1.100" />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Port</Label>
|
||||
<Input value={port} onChange={(e) => setPort(e.target.value)} placeholder="5900" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Password</Label>
|
||||
<PasswordInput value={password} onChange={(e) => setPassword(e.target.value)} />
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="telnet" className="space-y-3 mt-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Hostname / IP</Label>
|
||||
<Input value={hostname} onChange={(e) => setHostname(e.target.value)} placeholder="192.168.1.100" />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Port</Label>
|
||||
<Input value={port} onChange={(e) => setPort(e.target.value)} placeholder="23" />
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<Button onClick={handleConnect} disabled={!hostname} className="w-full">
|
||||
Connect
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 h-full min-h-[500px]">
|
||||
<GuacamoleDisplay
|
||||
connectionConfig={connectionConfig!}
|
||||
isVisible={true}
|
||||
onDisconnect={handleDisconnect}
|
||||
onError={(err) => console.error("Guacamole error:", err)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user