-
-
- Config Editor
+
+ {/* Sidebar - fixed width, full height */}
+
+
+
+ {/* Topbar - fixed height, full width minus sidebar */}
+
+
+
+ {/* Editor area - fills remaining space, with padding for sidebar and topbar */}
+
+
+
)
}
\ No newline at end of file
diff --git a/src/apps/Config Editor/ConfigTopbar.tsx b/src/apps/Config Editor/ConfigTopbar.tsx
new file mode 100644
index 00000000..8d4975b0
--- /dev/null
+++ b/src/apps/Config Editor/ConfigTopbar.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export function ConfigTopbar(): React.ReactElement {
+ return (
+
+ test
+
+ )
+}
\ No newline at end of file
diff --git a/src/apps/Homepage/HomepageAuth.tsx b/src/apps/Homepage/HomepageAuth.tsx
index f07747e5..ec3e0e8a 100644
--- a/src/apps/Homepage/HomepageAuth.tsx
+++ b/src/apps/Homepage/HomepageAuth.tsx
@@ -211,6 +211,14 @@ export function HomepageAuth({ className, setLoggedIn, setIsAdmin, setUsername,
>
Discord
+
+
-
+interface SSHTunnel {
+ id: number;
+ name: string;
+ folder: string;
+ sourcePort: number;
+ endpointPort: number;
+ sourceIP: string;
+ sourceSSHPort: number;
+ sourceUsername: string;
+ sourcePassword: string;
+ sourceAuthMethod: string;
+ sourceSSHKey: string;
+ sourceKeyPassword: string;
+ sourceKeyType: string;
+ endpointIP: string;
+ endpointSSHPort: number;
+ endpointUsername: string;
+ endpointPassword: string;
+ endpointAuthMethod: string;
+ endpointSSHKey: string;
+ endpointKeyPassword: string;
+ endpointKeyType: string;
+ maxRetries: number;
+ retryInterval: number;
+ connectionState: string;
+ autoStart: boolean;
+ isPinned: boolean;
+}
- SSH Tunnel
+export function SSHTunnel({ onSelectView }: ConfigEditorProps): React.ReactElement {
+ const [tunnels, setTunnels] = useState
([]);
+ const [tunnelsLoading, setTunnelsLoading] = useState(false);
+ const [tunnelsError, setTunnelsError] = useState(null);
+ const [tunnelStatusMap, setTunnelStatusMap] = useState>({});
+ const sidebarRef = React.useRef(null);
+
+ const fetchTunnels = useCallback(async () => {
+ setTunnelsLoading(true);
+ setTunnelsError(null);
+ try {
+ const jwt = document.cookie.split('; ').find(row => row.startsWith('jwt='))?.split('=')[1];
+ const res = await axios.get(
+ (window.location.hostname === 'localhost' ? 'http://localhost:8081' : '') + '/ssh_tunnel/tunnel',
+ { headers: { Authorization: `Bearer ${jwt}` } }
+ );
+ const tunnelData = res.data || [];
+ setTunnels(tunnelData.map((tunnel: any) => ({
+ id: tunnel.id,
+ name: tunnel.name,
+ folder: tunnel.folder || '',
+ sourcePort: tunnel.sourcePort,
+ endpointPort: tunnel.endpointPort,
+ sourceIP: tunnel.sourceIP,
+ sourceSSHPort: tunnel.sourceSSHPort,
+ sourceUsername: tunnel.sourceUsername || '',
+ sourcePassword: tunnel.sourcePassword || '',
+ sourceAuthMethod: tunnel.sourceAuthMethod || 'password',
+ sourceSSHKey: tunnel.sourceSSHKey || '',
+ sourceKeyPassword: tunnel.sourceKeyPassword || '',
+ sourceKeyType: tunnel.sourceKeyType || '',
+ endpointIP: tunnel.endpointIP,
+ endpointSSHPort: tunnel.endpointSSHPort,
+ endpointUsername: tunnel.endpointUsername || '',
+ endpointPassword: tunnel.endpointPassword || '',
+ endpointAuthMethod: tunnel.endpointAuthMethod || 'password',
+ endpointSSHKey: tunnel.endpointSSHKey || '',
+ endpointKeyPassword: tunnel.endpointKeyPassword || '',
+ endpointKeyType: tunnel.endpointKeyType || '',
+ maxRetries: tunnel.maxRetries || 3,
+ retryInterval: tunnel.retryInterval || 5000,
+ connectionState: tunnel.connectionState || 'DISCONNECTED',
+ autoStart: tunnel.autoStart || false,
+ isPinned: tunnel.isPinned || false
+ })));
+ } catch (err: any) {
+ setTunnelsError('Failed to load tunnels');
+ } finally {
+ setTunnelsLoading(false);
+ }
+ }, []);
+
+ // Poll backend for tunnel statuses
+ const fetchTunnelStatuses = useCallback(async () => {
+ try {
+ const res = await axios.get('http://localhost:8083/status');
+ setTunnelStatusMap(res.data || {});
+ } catch (err) {
+ // Optionally handle error
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchTunnels();
+ const interval = setInterval(fetchTunnels, 10000);
+ return () => clearInterval(interval);
+ }, [fetchTunnels]);
+
+ useEffect(() => {
+ fetchTunnelStatuses();
+ const interval = setInterval(fetchTunnelStatuses, 500);
+ return () => clearInterval(interval);
+ }, [fetchTunnelStatuses]);
+
+ // Merge backend status into tunnels
+ const tunnelsWithStatus = tunnels.map(tunnel => {
+ const status = tunnelStatusMap[tunnel.name] || {};
+ return {
+ ...tunnel,
+ connectionState: status.status ? status.status.toUpperCase() : tunnel.connectionState,
+ statusReason: status.reason || '',
+ statusErrorType: status.errorType || '',
+ statusManualDisconnect: status.manualDisconnect || false,
+ statusRetryCount: status.retryCount,
+ statusMaxRetries: status.maxRetries,
+ statusNextRetryIn: status.nextRetryIn,
+ statusRetryExhausted: status.retryExhausted,
+ };
+ });
+
+ const handleConnect = async (tunnelId: string) => {
+ // Immediately set to CONNECTING for instant UI feedback
+ setTunnels(prev => prev.map(t =>
+ t.id.toString() === tunnelId
+ ? { ...t, connectionState: "CONNECTING" }
+ : t
+ ));
+ const tunnel = tunnels.find(t => t.id.toString() === tunnelId);
+ if (!tunnel) return;
+ try {
+ await axios.post('http://localhost:8083/connect', {
+ ...tunnel,
+ name: tunnel.name
+ });
+ // No need to update state here; polling will update real status
+ } catch (err) {
+ // Optionally handle error
+ }
+ };
+
+ const handleDisconnect = async (tunnelId: string) => {
+ // Immediately set to DISCONNECTING for instant UI feedback
+ setTunnels(prev => prev.map(t =>
+ t.id.toString() === tunnelId
+ ? { ...t, connectionState: "DISCONNECTING" }
+ : t
+ ));
+ const tunnel = tunnels.find(t => t.id.toString() === tunnelId);
+ if (!tunnel) return;
+ try {
+ await axios.post('http://localhost:8083/disconnect', {
+ tunnelName: tunnel.name
+ });
+ // No need to update state here; polling will update real status
+ } catch (err) {
+ // Optionally handle error
+ }
+ };
+
+ const handleDeleteTunnel = async (tunnelId: string) => {
+ try {
+ const jwt = document.cookie.split('; ').find(row => row.startsWith('jwt='))?.split('=')[1];
+ await axios.delete(
+ (window.location.hostname === 'localhost' ? 'http://localhost:8081' : '') + `/ssh_tunnel/tunnel/${tunnelId}`,
+ { headers: { Authorization: `Bearer ${jwt}` } }
+ );
+ fetchTunnels();
+ } catch (err: any) {
+ console.error('Failed to delete tunnel:', err);
+ }
+ };
+
+ const handleEditTunnel = async (tunnelId: string, data: any) => {
+ try {
+ const jwt = document.cookie.split('; ').find(row => row.startsWith('jwt='))?.split('=')[1];
+ await axios.put(
+ (window.location.hostname === 'localhost' ? 'http://localhost:8081' : '') + `/ssh_tunnel/tunnel/${tunnelId}`,
+ data,
+ { headers: { Authorization: `Bearer ${jwt}` } }
+ );
+ fetchTunnels();
+ } catch (err: any) {
+ console.error('Failed to edit tunnel:', err);
+ }
+ };
+
+ const handleEditTunnelClick = (tunnelId: string) => {
+ // Find the tunnel data and pass it to the sidebar
+ const tunnel = tunnels.find(t => t.id.toString() === tunnelId);
+ if (tunnel && sidebarRef.current) {
+ // Call the sidebar's openEditSheet function
+ sidebarRef.current.openEditSheet(tunnel);
+ }
+ };
+
+ return (
+
- )
+ );
}
\ No newline at end of file
diff --git a/src/apps/SSH Tunnel/SSHTunnelObject.tsx b/src/apps/SSH Tunnel/SSHTunnelObject.tsx
new file mode 100644
index 00000000..358fd3e8
--- /dev/null
+++ b/src/apps/SSH Tunnel/SSHTunnelObject.tsx
@@ -0,0 +1,186 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Loader2, Edit, Trash2 } from "lucide-react";
+
+const CONNECTION_STATES = {
+ DISCONNECTED: "disconnected",
+ CONNECTING: "connecting",
+ CONNECTED: "connected",
+ VERIFYING: "verifying",
+ FAILED: "failed",
+ UNSTABLE: "unstable",
+ RETRYING: "retrying",
+ DISCONNECTING: "disconnecting"
+};
+
+interface SSHTunnelObjectProps {
+ hostConfig: any;
+ onConnect?: () => void;
+ onDisconnect?: () => void;
+ onDelete?: () => void;
+ onEdit?: () => void;
+ connectionState?: keyof typeof CONNECTION_STATES;
+ isPinned?: boolean;
+}
+
+export function SSHTunnelObject({
+ hostConfig = {},
+ onConnect,
+ onDisconnect,
+ onDelete,
+ onEdit,
+ connectionState = "DISCONNECTED",
+ isPinned = false
+}: SSHTunnelObjectProps): React.ReactElement {
+ const getStatusColor = (state: keyof typeof CONNECTION_STATES) => {
+ switch (state) {
+ case "CONNECTED":
+ return "bg-green-500";
+ case "CONNECTING":
+ case "VERIFYING":
+ case "RETRYING":
+ return "bg-yellow-500";
+ case "FAILED":
+ return "bg-red-500";
+ case "UNSTABLE":
+ return "bg-orange-500";
+ default:
+ return "bg-gray-500";
+ }
+ };
+
+ const getStatusText = (state: keyof typeof CONNECTION_STATES) => {
+ switch (state) {
+ case "CONNECTED":
+ return "Connected";
+ case "CONNECTING":
+ return "Connecting";
+ case "VERIFYING":
+ return "Verifying";
+ case "FAILED":
+ return "Failed";
+ case "UNSTABLE":
+ return "Unstable";
+ case "RETRYING":
+ return "Retrying";
+ default:
+ return "Disconnected";
+ }
+ };
+
+
+
+ const isConnected = connectionState === "CONNECTED";
+ const isConnecting = ["CONNECTING", "VERIFYING", "RETRYING"].includes(connectionState);
+ const isDisconnecting = connectionState === "DISCONNECTING";
+
+ return (
+
+ {/* Hover overlay buttons */}
+
+
+
+
+
+
+
+
+
+ {isPinned && ★}
+ {hostConfig.name || "My SSH Tunnel"}
+
+
+
+
+
+
+ {getStatusText(connectionState)}
+
+
+
+
+
+
+
+ Source:
+
+ {hostConfig.source || "localhost:22"}
+
+
+
+ Endpoint:
+
+ {hostConfig.endpoint || "test:224"}
+
+
+
+
+
+ {/* Error/Status Reason */}
+ {((connectionState === "FAILED" || connectionState === "UNSTABLE") && hostConfig.statusReason) && (
+
+ {hostConfig.statusReason}
+ {typeof hostConfig.statusReason === 'string' && hostConfig.statusReason.includes('Max retries exhausted') && (
+ <>
+
+
+ Check your Docker logs for the error reason, join the Discord or create a GitHub issue for help.
+
+
+ )}
+
+ )}
+
+
+
+
+
+ {submitError && (
+
{submitError}
+ )}
+
+
+
+ {submitError && (
+
{submitError}
+ )}
+
+
+
+
+ {/* Header */}
+
+
+ SSH Tunnels
+
+
+ Manage your SSH tunnel connections
+
+
+
+ {/* Accordion Layout */}
+ {tunnels.length === 0 ? (
+
+
+ No SSH Tunnels
+
+
+ Create your first SSH tunnel to get started. Use the sidebar to add a new tunnel configuration.
+
+
+ ) : (
+
+ {sortedFolders.map((folder, idx) => (
+
+
+ {folder}
+
+
+
+ {getSortedTunnels(tunnelsByFolder[folder]).map((tunnel, tunnelIndex) => (
+
+ handleConnect(tunnel.id.toString())}
+ onDisconnect={() => handleDisconnect(tunnel.id.toString())}
+ onDelete={() => onDeleteTunnel?.(tunnel.id.toString())}
+ onEdit={() => onEditTunnel?.(tunnel.id.toString())}
+ />
+
+ ))}
+
+ )}
+
+