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
@@ -36,10 +36,12 @@ import {
|
||||
Loader2,
|
||||
Terminal,
|
||||
FolderOpen,
|
||||
Monitor,
|
||||
} from "lucide-react";
|
||||
import { Status } from "@/components/ui/shadcn-io/status";
|
||||
import { BsLightning } from "react-icons/bs";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { GuacamoleTestDialog } from "@/ui/desktop/apps/guacamole/GuacamoleTestDialog";
|
||||
|
||||
interface DashboardProps {
|
||||
onSelectView: (view: string) => void;
|
||||
@@ -687,6 +689,22 @@ export function Dashboard({
|
||||
{t("dashboard.userProfile")}
|
||||
</span>
|
||||
</Button>
|
||||
<GuacamoleTestDialog
|
||||
trigger={
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-2 !border-dark-border flex flex-col items-center justify-center h-auto p-3 min-w-0"
|
||||
>
|
||||
<Monitor
|
||||
className="shrink-0"
|
||||
style={{ width: "40px", height: "40px" }}
|
||||
/>
|
||||
<span className="font-semibold text-sm mt-2">
|
||||
Test RDP/VNC
|
||||
</span>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
313
src/ui/desktop/apps/guacamole/GuacamoleDisplay.tsx
Normal file
313
src/ui/desktop/apps/guacamole/GuacamoleDisplay.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
import {
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
useImperativeHandle,
|
||||
forwardRef,
|
||||
useCallback,
|
||||
} from "react";
|
||||
import Guacamole from "guacamole-common-js";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import { getCookie, isElectron } from "@/ui/main-axios.ts";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
export type GuacamoleConnectionType = "rdp" | "vnc" | "telnet";
|
||||
|
||||
export interface GuacamoleConnectionConfig {
|
||||
type: GuacamoleConnectionType;
|
||||
hostname: string;
|
||||
port?: number;
|
||||
username?: string;
|
||||
password?: string;
|
||||
domain?: string;
|
||||
// Display settings
|
||||
width?: number;
|
||||
height?: number;
|
||||
dpi?: number;
|
||||
// Additional protocol options
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface GuacamoleDisplayHandle {
|
||||
disconnect: () => void;
|
||||
sendKey: (keysym: number, pressed: boolean) => void;
|
||||
sendMouse: (x: number, y: number, buttonMask: number) => void;
|
||||
setClipboard: (data: string) => void;
|
||||
}
|
||||
|
||||
interface GuacamoleDisplayProps {
|
||||
connectionConfig: GuacamoleConnectionConfig;
|
||||
isVisible: boolean;
|
||||
onConnect?: () => void;
|
||||
onDisconnect?: () => void;
|
||||
onError?: (error: string) => void;
|
||||
}
|
||||
|
||||
const isDev = import.meta.env.DEV;
|
||||
|
||||
export const GuacamoleDisplay = forwardRef<GuacamoleDisplayHandle, GuacamoleDisplayProps>(
|
||||
function GuacamoleDisplay(
|
||||
{ connectionConfig, isVisible, onConnect, onDisconnect, onError },
|
||||
ref
|
||||
) {
|
||||
const { t } = useTranslation();
|
||||
const displayRef = useRef<HTMLDivElement>(null);
|
||||
const clientRef = useRef<Guacamole.Client | null>(null);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [connectionError, setConnectionError] = useState<string | null>(null);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
disconnect: () => {
|
||||
if (clientRef.current) {
|
||||
clientRef.current.disconnect();
|
||||
}
|
||||
},
|
||||
sendKey: (keysym: number, pressed: boolean) => {
|
||||
if (clientRef.current) {
|
||||
clientRef.current.sendKeyEvent(pressed ? 1 : 0, keysym);
|
||||
}
|
||||
},
|
||||
sendMouse: (x: number, y: number, buttonMask: number) => {
|
||||
if (clientRef.current) {
|
||||
clientRef.current.sendMouseState(
|
||||
new Guacamole.Mouse.State({ x, y, left: !!(buttonMask & 1), middle: !!(buttonMask & 2), right: !!(buttonMask & 4) })
|
||||
);
|
||||
}
|
||||
},
|
||||
setClipboard: (data: string) => {
|
||||
if (clientRef.current) {
|
||||
const stream = clientRef.current.createClipboardStream("text/plain");
|
||||
const writer = new Guacamole.StringWriter(stream);
|
||||
writer.sendText(data);
|
||||
writer.sendEnd();
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
const getWebSocketUrl = useCallback(async (): Promise<string | null> => {
|
||||
const jwtToken = getCookie("jwt");
|
||||
if (!jwtToken) {
|
||||
setConnectionError("Authentication required");
|
||||
return null;
|
||||
}
|
||||
|
||||
// First, get an encrypted token from the backend
|
||||
try {
|
||||
const baseUrl = isDev
|
||||
? "http://localhost:30001"
|
||||
: isElectron()
|
||||
? (window as { configuredServerUrl?: string }).configuredServerUrl || "http://127.0.0.1:30001"
|
||||
: `${window.location.origin}`;
|
||||
|
||||
const response = await fetch(`${baseUrl}/guacamole/token`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${jwtToken}`,
|
||||
},
|
||||
body: JSON.stringify(connectionConfig),
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const err = await response.json();
|
||||
throw new Error(err.error || "Failed to get connection token");
|
||||
}
|
||||
|
||||
const { token } = await response.json();
|
||||
|
||||
// Build WebSocket URL
|
||||
const wsBase = isDev
|
||||
? `ws://localhost:30007`
|
||||
: isElectron()
|
||||
? (() => {
|
||||
const base = (window as { configuredServerUrl?: string }).configuredServerUrl || "http://127.0.0.1:30001";
|
||||
return `${base.startsWith("https://") ? "wss://" : "ws://"}${base.replace(/^https?:\/\//, "")}/guacamole/websocket/`;
|
||||
})()
|
||||
: `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/guacamole/websocket/`;
|
||||
|
||||
return `${wsBase}?token=${encodeURIComponent(token)}`;
|
||||
} catch (error) {
|
||||
const errorMessage = error instanceof Error ? error.message : "Unknown error";
|
||||
setConnectionError(errorMessage);
|
||||
onError?.(errorMessage);
|
||||
return null;
|
||||
}
|
||||
}, [connectionConfig, onError]);
|
||||
|
||||
const connect = useCallback(async () => {
|
||||
if (isConnecting || isConnected) return;
|
||||
setIsConnecting(true);
|
||||
setConnectionError(null);
|
||||
|
||||
const wsUrl = await getWebSocketUrl();
|
||||
if (!wsUrl) {
|
||||
setIsConnecting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const tunnel = new Guacamole.WebSocketTunnel(wsUrl);
|
||||
const client = new Guacamole.Client(tunnel);
|
||||
clientRef.current = client;
|
||||
|
||||
// Set up display
|
||||
const display = client.getDisplay();
|
||||
if (displayRef.current) {
|
||||
displayRef.current.innerHTML = "";
|
||||
const displayElement = display.getElement();
|
||||
displayElement.style.width = "100%";
|
||||
displayElement.style.height = "100%";
|
||||
displayRef.current.appendChild(displayElement);
|
||||
}
|
||||
|
||||
// Handle display sync (when frames arrive) - scale to fit container
|
||||
display.onresize = (width: number, height: number) => {
|
||||
if (displayRef.current) {
|
||||
const containerWidth = displayRef.current.clientWidth;
|
||||
const containerHeight = displayRef.current.clientHeight;
|
||||
const scale = Math.min(containerWidth / width, containerHeight / height);
|
||||
display.scale(scale);
|
||||
}
|
||||
};
|
||||
|
||||
// Set up mouse input
|
||||
const mouse = new Guacamole.Mouse(displayRef.current!);
|
||||
mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = (state: Guacamole.Mouse.State) => {
|
||||
client.sendMouseState(state);
|
||||
};
|
||||
|
||||
// Set up keyboard input
|
||||
const keyboard = new Guacamole.Keyboard(document);
|
||||
keyboard.onkeydown = (keysym: number) => {
|
||||
client.sendKeyEvent(1, keysym);
|
||||
};
|
||||
keyboard.onkeyup = (keysym: number) => {
|
||||
client.sendKeyEvent(0, keysym);
|
||||
};
|
||||
|
||||
// Handle client state changes
|
||||
client.onstatechange = (state: number) => {
|
||||
switch (state) {
|
||||
case 0: // IDLE
|
||||
break;
|
||||
case 1: // CONNECTING
|
||||
setIsConnecting(true);
|
||||
break;
|
||||
case 2: // WAITING
|
||||
break;
|
||||
case 3: // CONNECTED
|
||||
setIsConnected(true);
|
||||
setIsConnecting(false);
|
||||
onConnect?.();
|
||||
break;
|
||||
case 4: // DISCONNECTING
|
||||
break;
|
||||
case 5: // DISCONNECTED
|
||||
setIsConnected(false);
|
||||
setIsConnecting(false);
|
||||
keyboard.onkeydown = null;
|
||||
keyboard.onkeyup = null;
|
||||
onDisconnect?.();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Handle errors
|
||||
client.onerror = (error: Guacamole.Status) => {
|
||||
const errorMessage = error.message || "Connection error";
|
||||
setConnectionError(errorMessage);
|
||||
setIsConnecting(false);
|
||||
onError?.(errorMessage);
|
||||
toast.error(`${t("guacamole.connectionError")}: ${errorMessage}`);
|
||||
};
|
||||
|
||||
// Handle clipboard from remote
|
||||
client.onclipboard = (stream: Guacamole.InputStream, mimetype: string) => {
|
||||
if (mimetype === "text/plain") {
|
||||
const reader = new Guacamole.StringReader(stream);
|
||||
let data = "";
|
||||
reader.ontext = (text: string) => {
|
||||
data += text;
|
||||
};
|
||||
reader.onend = () => {
|
||||
navigator.clipboard.writeText(data).catch(() => {});
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Connect with display size
|
||||
const width = connectionConfig.width || displayRef.current?.clientWidth || 1024;
|
||||
const height = connectionConfig.height || displayRef.current?.clientHeight || 768;
|
||||
const dpi = connectionConfig.dpi || 96;
|
||||
|
||||
client.connect(`width=${width}&height=${height}&dpi=${dpi}`);
|
||||
}, [isConnecting, isConnected, getWebSocketUrl, connectionConfig, onConnect, onDisconnect, onError, t]);
|
||||
|
||||
// Track if we've initiated a connection to prevent re-triggering
|
||||
const hasInitiatedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible && !hasInitiatedRef.current) {
|
||||
hasInitiatedRef.current = true;
|
||||
connect();
|
||||
}
|
||||
}, [isVisible, connect]);
|
||||
|
||||
// Separate cleanup effect that only runs on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (clientRef.current) {
|
||||
clientRef.current.disconnect();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Handle window resize
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (clientRef.current && displayRef.current) {
|
||||
const display = clientRef.current.getDisplay();
|
||||
const width = displayRef.current.clientWidth;
|
||||
const height = displayRef.current.clientHeight;
|
||||
display.scale(Math.min(width / display.getWidth(), height / display.getHeight()));
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full relative bg-black">
|
||||
<div
|
||||
ref={displayRef}
|
||||
className="h-full w-full"
|
||||
style={{ cursor: isConnected ? "none" : "default" }}
|
||||
/>
|
||||
|
||||
{isConnecting && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/80">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||
<span className="text-muted-foreground">
|
||||
{t("guacamole.connecting", { type: connectionConfig.type.toUpperCase() })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{connectionError && !isConnecting && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/80">
|
||||
<div className="flex flex-col items-center gap-4 text-center p-4">
|
||||
<span className="text-destructive font-medium">{t("guacamole.connectionFailed")}</span>
|
||||
<span className="text-muted-foreground text-sm">{connectionError}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
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