v2.0.0 (#621)

* Guacd, Docker-Compose, RDP (#475) * fix select edit host but not update view (#438) * fix: Checksum issue with chocolatey * fix: Remove homebrew old stuff * Add Korean translation (#439) Co-authored-by: 송준우 <2484@coreit.co.kr> * feat: Automate flatpak * fix: Add imagemagik to electron builder to resolve build error * fix: Build error with runtime repo flag * fix: Flatpak runtime error and install freedesktop ver warning * fix: Flatpak runtime error and install freedesktop ver warning * feat: Re-add homebrew cask and move scripts to backend * fix: No sandbox flag issue * fix: Change name for electron macos cask output * fix: Sandbox error with Linux * fix: Remove comming soon for app stores in readme * Adding Comment at the end of the public_key on the host on deploy (#440) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * -Add New Interface for Credential DB -Add Credential Name as a comment into the server authorized_key file --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Sudo auto fill password (#441) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Feature Sudo password auto-fill; * Fix locale json shema; --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Added Italian Language; (#445) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Added Italian Language; --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Auto collapse snippet folders (#448) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * feat: Add collapsable snippets (customizable in user profile) * Translations (#447) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Added Italian Language; * Fix translations; Removed duplicate keys, synchronised other languages using English as the source, translated added keys, fixed inaccurate translations. --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Remove PTY-level keepalive (#449) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Remove PTY-level keepalive to prevent unwanted terminal output; use SSH-level keepalive instead --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * 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. * feat: enhance Guacamole support with RDP and VNC connection settings and UI updates * feat: Seperate server stats and tunnel management (improved both UI's) then started initial docker implementation * fix: finalize adding docker to db * fix: merge syntax errors * feat: implement mouse coordinate adjustment based on scale factor in GuacamoleDisplay * feat: add TypeScript definitions for guacamole-common-js module * feat: enhance Mouse.State constructor to accept optional parameters and object destructuring * feat: Add support for RDP and VNC connections in SSH host management - Introduced connectionType field to differentiate between SSH, RDP, VNC, and Telnet in host data structures. - Updated backend routes to handle RDP/VNC specific fields: domain, security, and ignoreCert. - Enhanced the HostManagerEditor to include RDP/VNC specific settings and authentication options. - Implemented token retrieval for RDP/VNC connections using Guacamole API. - Updated UI components to reflect connection type changes and provide appropriate connection buttons. - Removed the GuacamoleTestDialog component as its functionality is integrated into the HostManagerEditor. - Adjusted the TopNavbar and Host components to accommodate new connection types and their respective actions. * feat: Enhance Guacamole integration with extended configuration options - Added detailed Guacamole configuration interface for RDP/VNC/Telnet connections, including display, audio, performance, and session settings. - Implemented logging for token requests and received options for better debugging. - Updated HostManagerEditor to support new Guacamole configuration fields with validation and default values. - Integrated Guacamole configuration parsing in HostManagerViewer and Host components. - Enhanced API requests to include extended Guacamole configuration parameters in the token request. - Refactored code to convert camelCase configuration keys to kebab-case for compatibility with Guacamole API. * feat: merge guacd into 2.0.0 and improve UI for host manager and made general bug fixes --------- Co-authored-by: Tran Trung Kien <kientt13.7@gmail.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: junu <bigdwarf_@naver.com> Co-authored-by: 송준우 <2484@coreit.co.kr> Co-authored-by: SlimGary <trash.slim@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: Nunzio Marfè <nunzio.marfe@protonmail.com> Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> * feat: rename api routes and files * feat: improve guacd ui/backend * feat: improve guacd ui/backend * fix: state persistance issues causing refresh * feat: improge guacd connections, fixed telnet not opening, and improved general guacd integration * feat: continue improving integration also with bug fixes * Merge 2.0.0 with 2.0.0 that includes bug fixes (#620) * Guacd, Docker-Compose, RDP (#475) * fix select edit host but not update view (#438) * fix: Checksum issue with chocolatey * fix: Remove homebrew old stuff * Add Korean translation (#439) Co-authored-by: 송준우 <2484@coreit.co.kr> * feat: Automate flatpak * fix: Add imagemagik to electron builder to resolve build error * fix: Build error with runtime repo flag * fix: Flatpak runtime error and install freedesktop ver warning * fix: Flatpak runtime error and install freedesktop ver warning * feat: Re-add homebrew cask and move scripts to backend * fix: No sandbox flag issue * fix: Change name for electron macos cask output * fix: Sandbox error with Linux * fix: Remove comming soon for app stores in readme * Adding Comment at the end of the public_key on the host on deploy (#440) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * -Add New Interface for Credential DB -Add Credential Name as a comment into the server authorized_key file --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Sudo auto fill password (#441) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Feature Sudo password auto-fill; * Fix locale json shema; --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Added Italian Language; (#445) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Added Italian Language; --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Auto collapse snippet folders (#448) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * feat: Add collapsable snippets (customizable in user profile) * Translations (#447) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Added Italian Language; * Fix translations; Removed duplicate keys, synchronised other languages using English as the source, translated added keys, fixed inaccurate translations. --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * Remove PTY-level keepalive (#449) * Add termix.rb Cask file * Update Termix to version 1.9.0 with new checksum * Update README to remove 'coming soon' notes * Remove PTY-level keepalive to prevent unwanted terminal output; use SSH-level keepalive instead --------- Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> * 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. * feat: enhance Guacamole support with RDP and VNC connection settings and UI updates * feat: Seperate server stats and tunnel management (improved both UI's) then started initial docker implementation * fix: finalize adding docker to db * fix: merge syntax errors * feat: implement mouse coordinate adjustment based on scale factor in GuacamoleDisplay * feat: add TypeScript definitions for guacamole-common-js module * feat: enhance Mouse.State constructor to accept optional parameters and object destructuring * feat: Add support for RDP and VNC connections in SSH host management - Introduced connectionType field to differentiate between SSH, RDP, VNC, and Telnet in host data structures. - Updated backend routes to handle RDP/VNC specific fields: domain, security, and ignoreCert. - Enhanced the HostManagerEditor to include RDP/VNC specific settings and authentication options. - Implemented token retrieval for RDP/VNC connections using Guacamole API. - Updated UI components to reflect connection type changes and provide appropriate connection buttons. - Removed the GuacamoleTestDialog component as its functionality is integrated into the HostManagerEditor. - Adjusted the TopNavbar and Host components to accommodate new connection types and their respective actions. * feat: Enhance Guacamole integration with extended configuration options - Added detailed Guacamole configuration interface for RDP/VNC/Telnet connections, including display, audio, performance, and session settings. - Implemented logging for token requests and received options for better debugging. - Updated HostManagerEditor to support new Guacamole configuration fields with validation and default values. - Integrated Guacamole configuration parsing in HostManagerViewer and Host components. - Enhanced API requests to include extended Guacamole configuration parameters in the token request. - Refactored code to convert camelCase configuration keys to kebab-case for compatibility with Guacamole API. * feat: merge guacd into 2.0.0 and improve UI for host manager and made general bug fixes --------- Co-authored-by: Tran Trung Kien <kientt13.7@gmail.com> Co-authored-by: LukeGus <bugattiguy527@gmail.com> Co-authored-by: junu <bigdwarf_@naver.com> Co-authored-by: 송준우 <2484@coreit.co.kr> Co-authored-by: SlimGary <trash.slim@gmail.com> Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com> Co-authored-by: Nunzio Marfè <nunzio.marfe@protonmail.com> Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> * feat: rename api routes and files * feat: improve guacd ui/backend * feat: improve guacd ui/backend * fix: state persistance issues causing refresh * feat: improge guacd connections, fixed telnet not opening, and improved general guacd integration * feat: continue improving integration also with bug fixes --------- Co-authored-by: Wesley Reid <starhound@lostsouls.org> Co-authored-by: Tran Trung Kien <kientt13.7@gmail.com> Co-authored-by: junu <bigdwarf_@naver.com> Co-authored-by: 송준우 <2484@coreit.co.kr> Co-authored-by: SlimGary <trash.slim@gmail.com> Co-authored-by: Nunzio Marfè <nunzio.marfe@protonmail.com> Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> * feat: allow customizing guacd backened url * fix: ssh route mistmatching and guacamole url not changing * chore: increment ver * feat: change default to work with default compose, added splits creen support, updated readmes * fix: linux app not starting due to better sqlite isuses, improved copy/paste system so no context menu, added oidc remember me toggle, improved OS detection for sessions, flatpak invalid key, and sharing hosts with other users errors * fix: global settings not setting * chore: update compose * feat: improve the global status input * chore: cleanup files * chore: update export/improt with new host fields * fix: file manager and docker not loading properly --------- Co-authored-by: Wesley Reid <starhound@lostsouls.org> Co-authored-by: Tran Trung Kien <kientt13.7@gmail.com> Co-authored-by: junu <bigdwarf_@naver.com> Co-authored-by: 송준우 <2484@coreit.co.kr> Co-authored-by: SlimGary <trash.slim@gmail.com> Co-authored-by: Nunzio Marfè <nunzio.marfe@protonmail.com> Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-09-14 02:59:06 +00:00 · 2026-03-14 20:05:05 -05:00
parent a255a08903
commit e9e30cd318
85 changed files with 7053 additions and 2286 deletions
@@ -0,0 +1,385 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  useImperativeHandle,
+  forwardRef,
+  useCallback,
+} from "react";
+import Guacamole from "guacamole-common-js";
+import { useTranslation } from "react-i18next";
+import { getCookie, isElectron } from "@/ui/main-axios.ts";
+import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
+
+export type GuacamoleConnectionType = "rdp" | "vnc" | "telnet";
+
+export interface GuacamoleConnectionConfig {
+  token?: string;
+  protocol?: GuacamoleConnectionType;
+  type?: GuacamoleConnectionType;
+  hostname?: string;
+  port?: number;
+  username?: string;
+  password?: string;
+  domain?: string;
+  width?: number;
+  height?: number;
+  dpi?: number;
+  [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 containerRef = useRef<HTMLDivElement>(null);
+  const displayRef = useRef<HTMLDivElement>(null);
+  const clientRef = useRef<Guacamole.Client | null>(null);
+  const scaleRef = useRef<number>(1);
+  const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  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 (
+      containerWidth: number,
+      containerHeight: number,
+    ): Promise<string | null> => {
+      try {
+        let token: string;
+
+        if (connectionConfig.token) {
+          token = connectionConfig.token;
+        } else {
+          const jwtToken = getCookie("jwt");
+          if (!jwtToken) {
+            onError?.("Authentication required");
+            return null;
+          }
+
+          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 data = await response.json();
+          token = data.token;
+        }
+
+        const width = connectionConfig.width || containerWidth || 1280;
+        const height = connectionConfig.height || containerHeight || 720;
+        const dpi = connectionConfig.dpi || 96;
+
+        const wsBase = isDev
+          ? `ws://localhost:30008`
+          : 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)}&width=${width}&height=${height}&dpi=${dpi}`;
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : "Unknown error";
+        onError?.(errorMessage);
+        return null;
+      }
+    },
+    [connectionConfig, onError],
+  );
+
+  const rescaleDisplay = useCallback((immediate: boolean = false) => {
+    if (!clientRef.current || !containerRef.current) return;
+
+    const performRescale = () => {
+      if (!clientRef.current || !containerRef.current) return;
+
+      const display = clientRef.current.getDisplay();
+      const cWidth = containerRef.current.clientWidth;
+      const cHeight = containerRef.current.clientHeight;
+      const displayWidth = display.getWidth();
+      const displayHeight = display.getHeight();
+
+      if (displayWidth > 0 && displayHeight > 0 && cWidth > 0 && cHeight > 0) {
+        const scale = Math.min(cWidth / displayWidth, cHeight / displayHeight);
+        scaleRef.current = scale;
+        display.scale(scale);
+      }
+    };
+
+    if (immediate) {
+      performRescale();
+    } else {
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+      resizeTimeoutRef.current = setTimeout(performRescale, 200);
+    }
+  }, []);
+
+  const connect = useCallback(async () => {
+    if (isConnectingRef.current) return;
+    isConnectingRef.current = true;
+    setIsConnecting(true);
+    setIsReady(false);
+
+    let containerWidth = containerRef.current?.clientWidth || 0;
+    let containerHeight = containerRef.current?.clientHeight || 0;
+
+    if (containerWidth < 100 || containerHeight < 100) {
+      containerWidth = 1280;
+      containerHeight = 720;
+    }
+
+    const wsUrl = await getWebSocketUrl(containerWidth, containerHeight);
+    if (!wsUrl) {
+      isConnectingRef.current = false;
+      setIsConnecting(false);
+      return;
+    }
+
+    const tunnel = new Guacamole.WebSocketTunnel(wsUrl);
+    const client = new Guacamole.Client(tunnel);
+    clientRef.current = client;
+
+    const display = client.getDisplay();
+    const displayElement = display.getElement();
+
+    if (displayRef.current) {
+      displayRef.current.innerHTML = "";
+      displayRef.current.appendChild(displayElement);
+    }
+
+    display.onresize = () => {
+      rescaleDisplay(true);
+      setIsReady(true);
+    };
+
+    const mouse = new Guacamole.Mouse(displayElement);
+    const sendMouseState = (state: Guacamole.Mouse.State) => {
+      const scale = scaleRef.current;
+      const adjustedX = Math.round(state.x / scale);
+      const adjustedY = Math.round(state.y / scale);
+
+      const adjustedState = new Guacamole.Mouse.State(
+        adjustedX,
+        adjustedY,
+        state.left,
+        state.middle,
+        state.right,
+        state.up,
+        state.down,
+      ) as Guacamole.Mouse.State;
+
+      client.sendMouseState(adjustedState);
+    };
+    mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = sendMouseState;
+
+    const keyboard = new Guacamole.Keyboard(document);
+    keyboard.onkeydown = (keysym: number) => {
+      client.sendKeyEvent(1, keysym);
+    };
+    keyboard.onkeyup = (keysym: number) => {
+      client.sendKeyEvent(0, keysym);
+    };
+
+    client.onstatechange = (state: number) => {
+      switch (state) {
+        case 0:
+          break;
+        case 1:
+          setIsConnecting(true);
+          break;
+        case 2:
+          break;
+        case 3:
+          setIsConnecting(false);
+          onConnect?.();
+          break;
+        case 4:
+          break;
+        case 5:
+          setIsConnecting(false);
+          setIsReady(false);
+          keyboard.onkeydown = null;
+          keyboard.onkeyup = null;
+          onDisconnect?.();
+          break;
+      }
+    };
+
+    client.onerror = (error: Guacamole.Status) => {
+      const errorMessage = error.message || "Connection error";
+      setIsConnecting(false);
+      setIsReady(false);
+      onError?.(errorMessage);
+    };
+
+    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(() => {});
+        };
+      }
+    };
+
+    client.connect();
+  }, [getWebSocketUrl, onConnect, onDisconnect, onError, rescaleDisplay]);
+
+  const hasInitiatedRef = useRef(false);
+  const isMountedRef = useRef(false);
+  const isConnectingRef = useRef(false);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+
+    if (isVisible && !hasInitiatedRef.current) {
+      hasInitiatedRef.current = true;
+      requestAnimationFrame(() => {
+        if (isMountedRef.current) {
+          connect();
+        }
+      });
+    }
+  }, [isVisible, connect]);
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+      hasInitiatedRef.current = false;
+      isConnectingRef.current = false;
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+      if (clientRef.current) {
+        clientRef.current.disconnect();
+        clientRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      rescaleDisplay(false);
+    });
+
+    resizeObserver.observe(containerRef.current);
+
+    const initialTimeout = setTimeout(() => rescaleDisplay(true), 100);
+
+    return () => {
+      resizeObserver.disconnect();
+      clearTimeout(initialTimeout);
+    };
+  }, [rescaleDisplay]);
+
+  const connectingMessage = t("guacamole.connecting", {
+    type: (
+      connectionConfig.protocol ||
+      connectionConfig.type ||
+      "remote"
+    ).toUpperCase(),
+  });
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute inset-0 overflow-hidden"
+      style={{ backgroundColor: "var(--bg-base)" }}
+    >
+      <div
+        ref={displayRef}
+        className="relative w-full h-full flex items-center justify-center"
+        style={{
+          cursor: isReady ? "none" : "default",
+          visibility: isReady ? "visible" : "hidden",
+        }}
+      />
+
+      <SimpleLoader visible={!isReady} message={connectingMessage} />
+    </div>
+  );
+});