mirror of
https://github.com/YuzuZensai/Termix.git
synced 2026-11-12 16:51:49 +00:00
1283 lines
58 KiB
TypeScript
1283 lines
58 KiB
TypeScript
     
|
import React, { useEffect, useState } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import {
|
||
|
|
TERMINAL_THEMES,
|
||
|
|
TERMINAL_FONTS,
|
||
|
|
BELL_STYLES,
|
||
|
|
FAST_SCROLL_MODIFIERS,
|
||
|
|
CURSOR_STYLES,
|
||
|
|
} from "@/lib/terminal-themes";
|
||
|
|
import { Button } from "@/components/button";
|
||
|
|
import { Input } from "@/components/input";
|
||
|
|
import { PasswordInput } from "@/components/password-input";
|
||
|
|
import { Slider } from "@/components/slider";
|
||
|
|
import {
|
||
|
|
Globe,
|
||
|
|
Network,
|
||
|
|
Palette,
|
||
|
|
Plus,
|
||
|
|
Shield,
|
||
|
|
Upload,
|
||
|
|
X,
|
||
|
|
Zap,
|
||
|
|
} from "lucide-react";
|
||
|
|
import { toast } from "sonner";
|
||
|
|
import { SectionCard, SettingRow, FakeSwitch } from "@/components/section-card";
|
||
|
|
import { TerminalPreview } from "@/features/terminal/TerminalPreview";
|
||
|
|
import {
|
||
|
|
createSSHHost,
|
||
|
|
updateSSHHost,
|
||
|
|
getSnippets,
|
||
|
|
subscribeTunnelStatuses,
|
||
|
|
connectTunnel,
|
||
|
|
disconnectTunnel,
|
||
|
|
} from "@/main-axios";
|
||
|
|
import type { Host } from "@/types/ui-types";
|
||
|
|
import type { SSHHost, TunnelStatus } from "@/types";
|
||
|
|
import { useTabsSafe } from "@/shell/TabContext";
|
||
|
|
import {
|
||
|
|
buildHostEditorPayload,
|
||
|
|
createHostEditorForm,
|
||
|
|
mapSnippetResponse,
|
||
|
|
type HostAuthType,
|
||
|
|
type HostBellStyle,
|
||
|
|
type HostBackspaceMode,
|
||
|
|
type HostCursorStyle,
|
||
|
|
type HostFastScrollModifier,
|
||
|
|
type HostProtocols,
|
||
|
|
} from "./HostEditorData";
|
||
|
|
import { HostDockerTab, HostFilesTab } from "./HostEditorFeatureTabs";
|
||
|
|
import { HostEditorGeneralTab } from "./HostEditorGeneralTab";
|
||
|
|
import {
|
||
|
|
HostEditorRdpTab,
|
||
|
|
HostEditorTelnetTab,
|
||
|
|
HostEditorVncTab,
|
||
|
|
} from "./HostEditorGuacamoleTabs";
|
||
|
|
import { HostStatsTab } from "./HostEditorStatsTab";
|
||
|
|
|
||
|
|
export function HostEditor({
|
||
|
|
host,
|
||
|
|
activeTab,
|
||
|
|
onBack,
|
||
|
|
onSave,
|
||
|
|
protocols,
|
||
|
|
onProtocolChange,
|
||
|
|
onTabChange,
|
||
|
|
hosts,
|
||
|
|
credentials,
|
||
|
|
}: {
|
||
|
|
host: Host | null;
|
||
|
|
activeTab: string;
|
||
|
|
onBack: () => void;
|
||
|
|
onSave: (saved: SSHHost) => void;
|
||
|
|
protocols: HostProtocols;
|
||
|
|
onProtocolChange: (p: Partial<typeof protocols>) => void;
|
||
|
|
onTabChange: (tab: string) => void;
|
||
|
|
hosts: Host[];
|
||
|
|
credentials: { id: string; name: string; username: string }[];
|
||
|
|
}) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const { setPreviewTerminalTheme } = useTabsSafe();
|
||
|
|
const [form, setForm] = useState(() => createHostEditorForm(host));
|
||
|
|
|
||
|
|
const setField = <K extends keyof typeof form>(k: K, v: (typeof form)[K]) =>
|
||
|
|
setForm((p) => ({ ...p, [k]: v }));
|
||
|
|
|
||
|
|
const setGuacField = (key: string, value: unknown) =>
|
||
|
|
setField("guacamoleConfig", { ...form.guacamoleConfig, [key]: value });
|
||
|
|
|
||
|
|
const [saving, setSaving] = useState(false);
|
||
|
|
const [snippets, setSnippets] = useState<{ id: number; name: string }[]>([]);
|
||
|
|
const [tunnelStatuses, setTunnelStatuses] = useState<
|
||
|
|
Record<string, TunnelStatus>
|
||
|
|
>({});
|
||
|
|
const [connectingTunnel, setConnectingTunnel] = useState<number | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getSnippets()
|
||
|
|
.then((res) => setSnippets(mapSnippetResponse(res)))
|
||
|
|
.catch(() => {});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (activeTab !== "tunnels") return;
|
||
|
|
const unsub = subscribeTunnelStatuses((s) => setTunnelStatuses(s));
|
||
|
|
return unsub;
|
||
|
|
}, [activeTab]);
|
||
|
|
|
||
|
|
const handleSave = async () => {
|
||
|
|
setSaving(true);
|
||
|
|
try {
|
||
|
|
const data = buildHostEditorPayload(form, protocols);
|
||
|
|
const saved = host
|
||
|
|
? await updateSSHHost(Number(host.id), data)
|
||
|
|
: await createSSHHost(data);
|
||
|
|
toast.success(host ? t("hosts.hostUpdated") : t("hosts.hostCreated"));
|
||
|
|
setPreviewTerminalTheme(null);
|
||
|
|
onSave(saved);
|
||
|
|
} catch {
|
||
|
|
toast.error(t("hosts.failedToSave"));
|
||
|
|
} finally {
|
||
|
|
setSaving(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const authMethod = form.authType;
|
||
|
|
const selectedCredential = credentials.find(
|
||
|
|
(c) => c.id === form.credentialId,
|
||
|
|
);
|
||
|
|
|
||
|
|
const handleProtocolToggle = (
|
||
|
|
proto: keyof typeof protocols,
|
||
|
|
value: boolean,
|
||
|
|
) => {
|
||
|
|
onProtocolChange({ [proto]: value });
|
||
|
|
const tabForProto: Record<string, string> = {
|
||
|
|
enableSsh: "ssh",
|
||
|
|
enableRdp: "rdp",
|
||
|
|
enableVnc: "vnc",
|
||
|
|
enableTelnet: "telnet",
|
||
|
|
};
|
||
|
|
if (!value && activeTab === tabForProto[proto]) onTabChange("general");
|
||
|
|
if (value && tabForProto[proto]) onTabChange(tabForProto[proto]);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col gap-3">
|
||
|
|
<div className="flex flex-col gap-3">
|
||
|
|
{activeTab === "general" && (
|
||
|
|
<HostEditorGeneralTab
|
||
|
|
form={form}
|
||
|
|
setField={setField}
|
||
|
|
protocols={protocols}
|
||
|
|
handleProtocolToggle={handleProtocolToggle}
|
||
|
|
hosts={hosts}
|
||
|
|
host={host}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === "ssh" && (
|
||
|
|
<>
|
||
|
|
<SectionCard
|
||
|
|
title={t("hosts.connectionLabel")}
|
||
|
|
icon={<Globe className="size-3.5" />}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-4 py-3">
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.sshPort")}
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
placeholder="22"
|
||
|
|
value={form.sshPort}
|
||
|
|
onChange={(e) =>
|
||
|
|
setField("sshPort", Number(e.target.value))
|
||
|
|
}
|
||
|
|
className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</SectionCard>
|
||
|
|
<SectionCard
|
||
|
|
title={t("hosts.authenticationLabel")}
|
||
|
|
icon={<Shield className="size-3.5" />}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-4 py-3">
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.authMethod")}
|
||
|
|
</label>
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
{["password", "key", "credential", "none", "opkssh"].map(
|
||
|
|
(m) => (
|
||
|
|
<button
|
||
|
|
key={m}
|
||
|
|
onClick={() => {
|
||
|
|
setField("authType", m as HostAuthType);
|
||
|
|
}}
|
||
|
|
className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest border transition-colors ${authMethod === m ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
|
||
|
|
>
|
||
|
|
{m}
|
||
|
|
</button>
|
||
|
|
),
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 border-t border-border pt-4 mt-1">
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.username")}
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
placeholder="root"
|
||
|
|
value={form.username}
|
||
|
|
disabled={
|
||
|
|
authMethod === "credential" &&
|
||
|
|
!!selectedCredential?.username &&
|
||
|
|
!form.overrideCredentialUsername
|
||
|
|
}
|
||
|
|
onChange={(e) => setField("username", e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{authMethod === "password" && (
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.password")}
|
||
|
|
</label>
|
||
|
|
<PasswordInput
|
||
|
|
className="h-8 text-xs pr-8"
|
||
|
|
placeholder="••••••••"
|
||
|
|
value={form.password}
|
||
|
|
onChange={(e) => setField("password", e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{authMethod === "key" && (
|
||
|
|
<>
|
||
|
|
<div className="flex flex-col gap-1.5 col-span-2">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.sshPrivateKey")}
|
||
|
|
</label>
|
||
|
|
<div className="flex gap-1">
|
||
|
|
{(["paste", "upload"] as const).map((tab) => (
|
||
|
|
<button
|
||
|
|
key={tab}
|
||
|
|
type="button"
|
||
|
|
onClick={() => setField("keySubTab", tab)}
|
||
|
|
className={`px-2 py-0.5 text-[9px] font-bold uppercase tracking-widest border transition-colors ${form.keySubTab === tab ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
|
||
|
|
>
|
||
|
|
{tab === "paste"
|
||
|
|
? t("hosts.keyPasteTab")
|
||
|
|
: t("hosts.keyUploadTab")}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{form.keySubTab === "paste" ? (
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
{form.key === "existing_key" && (
|
||
|
|
<div className="px-3 py-2 text-[10px] border border-accent-brand/30 bg-accent-brand/5 text-accent-brand">
|
||
|
|
{t("hosts.keySaved")} —{" "}
|
||
|
|
{t("hosts.keyReplaceNotice")}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<textarea
|
||
|
|
placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
|
||
|
|
rows={5}
|
||
|
|
value={
|
||
|
|
form.key === "existing_key" ? "" : form.key
|
||
|
|
}
|
||
|
|
onChange={(e) => setField("key", e.target.value)}
|
||
|
|
className="w-full px-3 py-2 text-[10px] bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring font-mono"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<label
|
||
|
|
className={`flex items-center justify-center gap-2 h-16 border-2 border-dashed cursor-pointer transition-colors ${form.key ? "border-accent-brand/40 bg-accent-brand/5 text-accent-brand" : "border-border text-muted-foreground hover:border-accent-brand/30 hover:text-foreground"}`}
|
||
|
|
>
|
||
|
|
<Upload className="size-4" />
|
||
|
|
<span className="text-xs">
|
||
|
|
{form.key === "existing_key"
|
||
|
|
? t("hosts.keySaved")
|
||
|
|
: form.key
|
||
|
|
? t("hosts.keyFileLoaded")
|
||
|
|
: t("hosts.keyUploadClick")}
|
||
|
|
</span>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
accept=".pem,.key,.txt,.ppk"
|
||
|
|
className="hidden"
|
||
|
|
onChange={async (e) => {
|
||
|
|
const file = e.target.files?.[0];
|
||
|
|
if (!file) return;
|
||
|
|
const text = await file.text();
|
||
|
|
setField("key", text);
|
||
|
|
e.target.value = "";
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
{form.key && (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setField("key", "")}
|
||
|
|
className="text-[10px] text-destructive self-start"
|
||
|
|
>
|
||
|
|
{form.key === "existing_key"
|
||
|
|
? t("hosts.replaceKey")
|
||
|
|
: t("hosts.clearKey")}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.keyPassphrase")}
|
||
|
|
</label>
|
||
|
|
<PasswordInput
|
||
|
|
className="h-8 text-xs pr-8"
|
||
|
|
placeholder={
|
||
|
|
form.keyPassword === "existing_key_password"
|
||
|
|
? t("hosts.keyPassphraseSaved")
|
||
|
|
: t("hosts.optional")
|
||
|
|
}
|
||
|
|
value={
|
||
|
|
form.keyPassword === "existing_key_password"
|
||
|
|
? ""
|
||
|
|
: form.keyPassword
|
||
|
|
}
|
||
|
|
onFocus={() => {
|
||
|
|
if (form.keyPassword === "existing_key_password")
|
||
|
|
setField("keyPassword", "");
|
||
|
|
}}
|
||
|
|
onChange={(e) =>
|
||
|
|
setField("keyPassword", e.target.value)
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.keyTypeLabel")}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={form.keyType}
|
||
|
|
onChange={(e) => setField("keyType", e.target.value)}
|
||
|
|
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||
|
|
>
|
||
|
|
<option value="auto">{t("hosts.keyTypeAuto")}</option>
|
||
|
|
<option value="ssh-rsa">RSA</option>
|
||
|
|
<option value="ssh-ed25519">Ed25519</option>
|
||
|
|
<option value="ecdsa-sha2-nistp256">
|
||
|
|
ECDSA P-256
|
||
|
|
</option>
|
||
|
|
<option value="ecdsa-sha2-nistp384">
|
||
|
|
ECDSA P-384
|
||
|
|
</option>
|
||
|
|
<option value="ecdsa-sha2-nistp521">
|
||
|
|
ECDSA P-521
|
||
|
|
</option>
|
||
|
|
<option value="ssh-dss">DSA</option>
|
||
|
|
<option value="ssh-rsa-sha2-256">RSA SHA2-256</option>
|
||
|
|
<option value="ssh-rsa-sha2-512">RSA SHA2-512</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
{authMethod === "credential" && (
|
||
|
|
<>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.storedCredential")}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={form.credentialId}
|
||
|
|
onChange={(e) => {
|
||
|
|
const newId = e.target.value;
|
||
|
|
setField("credentialId", newId);
|
||
|
|
if (!form.overrideCredentialUsername) {
|
||
|
|
const cred = credentials.find(
|
||
|
|
(c) => c.id === newId,
|
||
|
|
);
|
||
|
|
if (cred?.username)
|
||
|
|
setField("username", cred.username);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||
|
|
>
|
||
|
|
<option value="">
|
||
|
|
{t("hosts.selectACredential")}
|
||
|
|
</option>
|
||
|
|
{credentials.map((c) => (
|
||
|
|
<option key={c.id} value={c.id}>
|
||
|
|
{c.username
|
||
|
|
? `${c.name} (${c.username})`
|
||
|
|
: c.name}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
{selectedCredential?.username && (
|
||
|
|
<div className="flex items-center justify-between col-span-2 pt-1">
|
||
|
|
<div className="flex flex-col gap-0.5">
|
||
|
|
<span className="text-xs font-medium">
|
||
|
|
{t("hosts.overrideCredentialUsername")}
|
||
|
|
</span>
|
||
|
|
<span className="text-[10px] text-muted-foreground">
|
||
|
|
{t("hosts.overrideCredentialUsernameDesc")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<FakeSwitch
|
||
|
|
checked={form.overrideCredentialUsername}
|
||
|
|
onChange={(v) => {
|
||
|
|
setField("overrideCredentialUsername", v);
|
||
|
|
if (!v && selectedCredential?.username) {
|
||
|
|
setField(
|
||
|
|
"username",
|
||
|
|
selectedCredential.username,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<SettingRow
|
||
|
|
label={t("hosts.forceKeyboardInteractiveLabel")}
|
||
|
|
description={t("hosts.forceKeyboardInteractiveShortDesc")}
|
||
|
|
>
|
||
|
|
<FakeSwitch
|
||
|
|
checked={form.forceKeyboardInteractive}
|
||
|
|
onChange={(v) => setField("forceKeyboardInteractive", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
</SectionCard>
|
||
|
|
|
||
|
|
<SectionCard
|
||
|
|
title={t("hosts.terminalAppearance")}
|
||
|
|
icon={<Palette className="size-3.5" />}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-4 py-3">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.themePreview")}
|
||
|
|
</label>
|
||
|
|
<TerminalPreview
|
||
|
|
theme={form.theme}
|
||
|
|
fontSize={form.fontSize}
|
||
|
|
fontFamily={form.fontFamily}
|
||
|
|
cursorStyle={form.cursorStyle}
|
||
|
|
cursorBlink={form.cursorBlink}
|
||
|
|
letterSpacing={form.letterSpacing}
|
||
|
|
lineHeight={form.lineHeight}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.colorTheme")}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={form.theme}
|
||
|
|
onChange={(e) => {
|
||
|
|
setField("theme", e.target.value);
|
||
|
|
setPreviewTerminalTheme(e.target.value);
|
||
|
|
}}
|
||
|
|
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||
|
|
>
|
||
|
|
{Object.entries(TERMINAL_THEMES)
|
||
|
|
.filter(
|
||
|
|
([key]) =>
|
||
|
|
key !== "termixDark" && key !== "termixLight",
|
||
|
|
)
|
||
|
|
.map(([key, theme]) => (
|
||
|
|
<option key={key} value={key}>
|
||
|
|
{theme.name}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.fontFamilyLabel")}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={form.fontFamily}
|
||
|
|
onChange={(e) => setField("fontFamily", e.target.value)}
|
||
|
|
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring font-mono"
|
||
|
|
>
|
||
|
|
{TERMINAL_FONTS.map((f) => (
|
||
|
|
<option key={f.value} value={f.value}>
|
||
|
|
{f.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.fontSizeLabel")}
|
||
|
|
</label>
|
||
|
|
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||
|
|
{form.fontSize}px
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Slider
|
||
|
|
min={8}
|
||
|
|
max={24}
|
||
|
|
step={1}
|
||
|
|
value={[form.fontSize]}
|
||
|
|
onValueChange={([v]) => setField("fontSize", v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.cursorStyleLabel")}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={form.cursorStyle}
|
||
|
|
onChange={(e) =>
|
||
|
|
setField(
|
||
|
|
"cursorStyle",
|
||
|
|
e.target.value as HostCursorStyle,
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||
|
|
>
|
||
|
|
{CURSOR_STYLES.map((s) => (
|
||
|
|
<option key={s.value} value={s.value}>
|
||
|
|
{s.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.letterSpacingPx")}
|
||
|
|
</label>
|
||
|
|
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||
|
|
{form.letterSpacing}px
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Slider
|
||
|
|
min={-2}
|
||
|
|
max={10}
|
||
|
|
step={0.5}
|
||
|
|
value={[form.letterSpacing]}
|
||
|
|
onValueChange={([v]) => setField("letterSpacing", v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.lineHeightLabel")}
|
||
|
|
</label>
|
||
|
|
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||
|
|
{form.lineHeight.toFixed(1)}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Slider
|
||
|
|
min={1.0}
|
||
|
|
max={2.0}
|
||
|
|
step={0.1}
|
||
|
|
value={[form.lineHeight]}
|
||
|
|
onValueChange={([v]) => setField("lineHeight", v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.bellStyleLabel")}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={form.bellStyle}
|
||
|
|
onChange={(e) =>
|
||
|
|
setField("bellStyle", e.target.value as HostBellStyle)
|
||
|
|
}
|
||
|
|
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||
|
|
>
|
||
|
|
{BELL_STYLES.map((b) => (
|
||
|
|
<option key={b.value} value={b.value}>
|
||
|
|
{b.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.backspaceModeLabel")}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={form.backspaceMode}
|
||
|
|
onChange={(e) =>
|
||
|
|
setField(
|
||
|
|
"backspaceMode",
|
||
|
|
e.target.value as HostBackspaceMode,
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||
|
|
>
|
||
|
|
<option value="normal">Normal (DEL)</option>
|
||
|
|
<option value="control-h">Control-H (BS)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<SettingRow
|
||
|
|
label={t("hosts.cursorBlinking")}
|
||
|
|
description={t("hosts.cursorBlinkingDesc")}
|
||
|
|
>
|
||
|
|
<FakeSwitch
|
||
|
|
checked={form.cursorBlink}
|
||
|
|
onChange={(v) => setField("cursorBlink", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("hosts.rightClickSelectsWordLabel")}
|
||
|
|
description={t("hosts.rightClickSelectsWordShortDesc")}
|
||
|
|
>
|
||
|
|
<FakeSwitch
|
||
|
|
checked={form.rightClickSelectsWord}
|
||
|
|
onChange={(v) => setField("rightClickSelectsWord", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
</SectionCard>
|
||
|
|
|
||
|
|
<SectionCard
|
||
|
|
title={t("hosts.behaviorAndAdvanced")}
|
||
|
|
icon={<Zap className="size-3.5" />}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-4 py-3">
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.scrollbackBufferLabel")}
|
||
|
|
</label>
|
||
|
|
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||
|
|
{form.scrollback.toLocaleString()}{" "}
|
||
|
|
{t("hosts.scrollbackMaxLines")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Slider
|
||
|
|
min={1000}
|
||
|
|
max={100000}
|
||
|
|
step={1000}
|
||
|
|
value={[form.scrollback]}
|
||
|
|
onValueChange={([v]) => setField("scrollback", v)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<SettingRow
|
||
|
|
label={t("hosts.sshAgentForwardingLabel")}
|
||
|
|
description={t("hosts.sshAgentForwardingShortDesc")}
|
||
|
|
>
|
||
|
|
<FakeSwitch
|
||
|
|
checked={form.agentForwarding}
|
||
|
|
onChange={(v) => setField("agentForwarding", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("hosts.enableAutoMosh")}
|
||
|
|
description={t("hosts.enableAutoMoshDesc")}
|
||
|
|
>
|
||
|
|
<FakeSwitch
|
||
|
|
checked={form.autoMosh}
|
||
|
|
onChange={(v) => setField("autoMosh", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("hosts.enableAutoTmux")}
|
||
|
|
description={t("hosts.enableAutoTmuxDesc")}
|
||
|
|
>
|
||
|
|
<FakeSwitch
|
||
|
|
checked={form.autoTmux}
|
||
|
|
onChange={(v) => setField("autoTmux", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<SettingRow
|
||
|
|
label={t("hosts.sudoPasswordAutoFillLabel")}
|
||
|
|
description={t("hosts.sudoPasswordAutoFillShortDesc")}
|
||
|
|
>
|
||
|
|
<FakeSwitch
|
||
|
|
checked={form.sudoPasswordAutoFill}
|
||
|
|
onChange={(v) => setField("sudoPasswordAutoFill", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
{form.sudoPasswordAutoFill && (
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.sudoPasswordLabel")}
|
||
|
|
</label>
|
||
|
|
<PasswordInput
|
||
|
|
className="h-8 text-xs pr-8"
|
||
|
|
placeholder="••••••••"
|
||
|
|
value={form.sudoPassword}
|
||
|
|
onChange={(e) => setField("sudoPassword", e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="flex flex-col gap-3">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.environmentVariablesLabel")}
|
||
|
|
</span>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="h-6 text-[10px] px-2 border-accent-brand/40 text-accent-brand"
|
||
|
|
onClick={() =>
|
||
|
|
setField("environmentVariables", [
|
||
|
|
...form.environmentVariables,
|
||
|
|
{ key: "", value: "" },
|
||
|
|
])
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Plus className="size-3 mr-1" />{" "}
|
||
|
|
{t("hosts.addVariableBtn")}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
{form.environmentVariables.length === 0 && (
|
||
|
|
<p className="text-[10px] text-muted-foreground/50">
|
||
|
|
{t("hosts.noEnvVars")}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
{form.environmentVariables.map((ev, i) => (
|
||
|
|
<div key={i} className="flex items-center gap-2">
|
||
|
|
<Input
|
||
|
|
className="h-7 text-xs flex-1"
|
||
|
|
placeholder="KEY"
|
||
|
|
value={ev.key}
|
||
|
|
onChange={(e) => {
|
||
|
|
const updated = [...form.environmentVariables];
|
||
|
|
updated[i] = { ...updated[i], key: e.target.value };
|
||
|
|
setField("environmentVariables", updated);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Input
|
||
|
|
className="h-7 text-xs flex-1"
|
||
|
|
placeholder="VALUE"
|
||
|
|
value={ev.value}
|
||
|
|
onChange={(e) => {
|
||
|
|
const updated = [...form.environmentVariables];
|
||
|
|
updated[i] = {
|
||
|
|
...updated[i],
|
||
|
|
value: e.target.value,
|
||
|
|
};
|
||
|
|
setField("environmentVariables", updated);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
className="text-destructive"
|
||
|
|
onClick={() =>
|
||
|
|
setField(
|
||
|
|
"environmentVariables",
|
||
|
|
form.environmentVariables.filter(
|
||
|
|
(_, idx) => idx !== i,
|
||
|
|
),
|
||
|
|
)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<X className="size-4" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 border-t border-border pt-4">
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.fastScrollModifierLabel")}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={form.fastScrollModifier}
|
||
|
|
onChange={(e) =>
|
||
|
|
setField(
|
||
|
|
"fastScrollModifier",
|
||
|
|
e.target.value as HostFastScrollModifier,
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||
|
|
>
|
||
|
|
{FAST_SCROLL_MODIFIERS.map((m) => (
|
||
|
|
<option key={m.value} value={m.value}>
|
||
|
|
{m.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.fastScrollSensitivityLabel")}
|
||
|
|
</label>
|
||
|
|
<span className="text-[10px] text-muted-foreground tabular-nums">
|
||
|
|
{form.fastScrollSensitivity}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<Slider
|
||
|
|
min={1}
|
||
|
|
max={10}
|
||
|
|
step={1}
|
||
|
|
value={[form.fastScrollSensitivity]}
|
||
|
|
onValueChange={([v]) =>
|
||
|
|
setField("fastScrollSensitivity", v)
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{form.autoMosh && (
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.moshCommandLabel")}
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
placeholder="mosh"
|
||
|
|
value={form.moshCommand}
|
||
|
|
onChange={(e) => setField("moshCommand", e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 border-t border-border pt-4">
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.startupSnippetLabel")}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
value={form.startupSnippetId ?? ""}
|
||
|
|
onChange={(e) =>
|
||
|
|
setField(
|
||
|
|
"startupSnippetId",
|
||
|
|
e.target.value ? Number(e.target.value) : null,
|
||
|
|
)
|
||
|
|
}
|
||
|
|
className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
|
||
|
|
>
|
||
|
|
<option value="">{t("hosts.none")}</option>
|
||
|
|
{snippets.map((s) => (
|
||
|
|
<option key={s.id} value={s.id}>
|
||
|
|
{s.name}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 border-t border-border pt-4">
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.keepaliveIntervalLabel")}
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
value={form.keepaliveInterval}
|
||
|
|
onChange={(e) =>
|
||
|
|
setField("keepaliveInterval", Number(e.target.value))
|
||
|
|
}
|
||
|
|
className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
||
|
|
{t("hosts.maxKeepaliveMisses")}
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
value={form.keepaliveCountMax}
|
||
|
|
onChange={(e) =>
|
||
|
|
setField("keepaliveCountMax", Number(e.target.value))
|
||
|
|
}
|
||
|
|
className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</SectionCard>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === "tunnels" && (
|
||
|
|
<>
|
||
|
|
<SectionCard
|
||
|
|
title={t("hosts.tunnelSettings")}
|
||
|
|
icon={<Network className="size-3.5" />}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-4 py-3">
|
||
|
|
<SettingRow
|
||
|
|
label={t("hosts.enableTunneling")}
|
||
|
|
description={t("hosts.enableTunnelingDesc")}
|
||
|
|
>
|
||
|
|
<FakeSwitch
|
||
|
|
checked={form.enableTunnel}
|
||
|
|
onChange={(v) => setField("enableTunnel", v)}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
<div className="text-xs text-muted-foreground p-3 bg-muted/30 border border-border space-y-1">
|
||
|
|
<p>{t("hosts.tunnelRequirementsText")}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</SectionCard>
|
||
|
|
<SectionCard
|
||
|
|
title={t("hosts.serverTunnelsSection")}
|
||
|
|
icon={<Network className="size-3.5" />}
|
||
|
|
action={
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
className="h-6 text-[10px] px-2 border-accent-brand/40 text-accent-brand"
|
||
|
|
onClick={() =>
|
||
|
|
setField("serverTunnels", [
|
||
|
|
...form.serverTunnels,
|
||
|
|
{
|
||
|
|
mode: "local" as const,
|
||
|
|
sourcePort: 8080,
|
||
|
|
endpointHost: "",
|
||
|
|
endpointPort: 80,
|
||
|
|
bindHost: "127.0.0.1",
|
||
|
|
maxRetries: 3,
|
||
|
|
retryInterval: 10,
|
||
|
|
autoStart: false,
|
||
|
|
},
|
||
|
|
])
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Plus className="size-3 mr-1" /> {t("hosts.addTunnelBtn")}
|
||
|
|
</Button>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-3 py-3">
|
||
|
|
{form.serverTunnels.length === 0 && (
|
||
|
|
<p className="text-[10px] text-muted-foreground/50 px-1">
|
||
|
|
{t("hosts.noTunnelsConfigured")}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
{form.serverTunnels.map((tun, i) => {
|
||
|
|
const tunnelName = `${host?.id ?? "new"}-${i}-${tun.sourcePort}`;
|
||
|
|
const tunnelStatus = tunnelStatuses[tunnelName]?.status as
|
||
|
|
| string
|
||
|
|
| undefined;
|
||
|
|
const isConnected = tunnelStatus === "connected";
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={i}
|
||
|
|
className="flex flex-col gap-3 p-3 border border-border bg-muted/20 relative group"
|
||
|
|
>
|
||
|
|
<div className="flex items-center justify-between mb-1">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-xs font-bold text-muted-foreground">
|
||
|
|
{t("hosts.tunnelLabel", { number: i + 1 })}
|
||
|
|
</span>
|
||
|
|
<div
|
||
|
|
className={`size-1.5 rounded-full shrink-0 ${
|
||
|
|
isConnected
|
||
|
|
? "bg-accent-brand shadow-[0_0_4px_rgba(251,146,60,0.4)]"
|
||
|
|
: tunnelStatus === "error"
|
||
|
|
? "bg-red-400"
|
||
|
|
: "bg-muted-foreground/25"
|
||
|
|
}`}
|
||
|
|
title={tunnelStatus ?? "not connected"}
|
||
|
|
/>
|
||
|
|
{host && (
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
size="sm"
|
||
|
|
disabled={connectingTunnel === i}
|
||
|
|
className={`h-6 text-[10px] px-2 ${isConnected ? "border-destructive/40 text-destructive hover:bg-destructive/10" : "border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10"}`}
|
||
|
|
onClick={async () => {
|
||
|
|
setConnectingTunnel(i);
|
||
|
|
try {
|
||
|
|
if (isConnected) {
|
||
|
|
await disconnectTunnel(tunnelName);
|
||
|
|
toast.success(
|
||
|
|
t("hosts.tunnelDisconnected"),
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
await connectTunnel({
|
||
|
|
name: tunnelName,
|
||
|
|
mode: tun.mode,
|
||
|
|
sourceHostId: Number(host.id),
|
||
|
|
tunnelIndex: i,
|
||
|
|
hostName: host.name,
|
||
|
|
sourceIP: host.ip,
|
||
|
|
sourceSSHPort: host.sshPort ?? host.port,
|
||
|
|
sourceUsername: form.username,
|
||
|
|
sourcePassword:
|
||
|
|
form.password || undefined,
|
||
|
|
sourceAuthMethod: form.authType,
|
||
|
|
sourceSSHKey: form.key || undefined,
|
||
|
|
sourceKeyPassword:
|
||
|
|
form.keyPassword || undefined,
|
||
|
|
sourceCredentialId: form.credentialId
|
||
|
|
? Number(form.credentialId)
|
||
|
|
: undefined,
|
||
|
|
endpointIP: host.ip,
|
||
|
|
endpointSSHPort:
|
||
|
|
host.sshPort ?? host.port,
|
||
|
|
endpointHost: tun.endpointHost ?? "",
|
||
|
|
endpointUsername: form.username,
|
||
|
|
endpointAuthMethod: form.authType,
|
||
|
|
sourcePort: tun.sourcePort,
|
||
|
|
endpointPort: tun.endpointPort ?? 0,
|
||
|
|
bindHost: tun.bindHost ?? "127.0.0.1",
|
||
|
|
maxRetries: tun.maxRetries ?? 3,
|
||
|
|
retryInterval: tun.retryInterval ?? 10,
|
||
|
|
autoStart: tun.autoStart ?? false,
|
||
|
|
isPinned: false,
|
||
|
|
});
|
||
|
|
toast.success(t("hosts.tunnelConnecting"));
|
||
|
|
}
|
||
|
|
} catch {
|
||
|
|
toast.error(
|
||
|
|
isConnected
|
||
|
|
? t("hosts.failedToDisconnectTunnel")
|
||
|
|
: t("hosts.failedToConnectTunnel"),
|
||
|
|
);
|
||
|
|
} finally {
|
||
|
|
setConnectingTunnel(null);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{connectingTunnel === i
|
||
|
|
? "..."
|
||
|
|
: isConnected
|
||
|
|
? t("hosts.disconnectBtn")
|
||
|
|
: t("hosts.connectBtn")}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="sm"
|
||
|
|
className="h-6 text-[10px] px-2 text-destructive"
|
||
|
|
onClick={() =>
|
||
|
|
setField(
|
||
|
|
"serverTunnels",
|
||
|
|
form.serverTunnels.filter((_, idx) => idx !== i),
|
||
|
|
)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{t("common.delete")}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1.5">
|
||
|
|
<label className="text-[10px] font-bold text-muted-foreground">
|
||
|
|
{t("hosts.tunnelType")}
|
||
|
|
</label>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
{(["remote", "local", "dynamic"] as const).map(
|
||
|
|
(m) => (
|
||
|
|
<button
|
||
|
|
key={m}
|
||
|
|
onClick={() => {
|
||
|
|
const updated = [...form.serverTunnels];
|
||
|
|
updated[i] = { ...updated[i], mode: m };
|
||
|
|
setField("serverTunnels", updated);
|
||
|
|
}}
|
||
|
|
className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest border transition-colors ${tun.mode === m ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
|
||
|
|
>
|
||
|
|
{m}
|
||
|
|
</button>
|
||
|
|
),
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<p className="text-[10px] text-muted-foreground/70 mt-0.5">
|
||
|
|
{tun.mode === "local"
|
||
|
|
? t("hosts.tunnelModeLocalDesc")
|
||
|
|
: tun.mode === "remote"
|
||
|
|
? t("hosts.tunnelModeRemoteDesc")
|
||
|
|
: t("hosts.tunnelModeDynamicDesc")}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
|
|
{tun.mode !== "dynamic" && (
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<label className="text-[10px] font-bold text-muted-foreground">
|
||
|
|
{t("hosts.endpointHost")}
|
||
|
|
</label>
|
||
|
|
<select
|
||
|
|
className="h-7 text-xs border border-border bg-background px-2 outline-none focus:ring-1 focus:ring-ring"
|
||
|
|
value={tun.endpointHost ?? ""}
|
||
|
|
onChange={(e) => {
|
||
|
|
const updated = [...form.serverTunnels];
|
||
|
|
updated[i] = {
|
||
|
|
...updated[i],
|
||
|
|
endpointHost: e.target.value,
|
||
|
|
};
|
||
|
|
setField("serverTunnels", updated);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<option value="">{t("hosts.sameHost")}</option>
|
||
|
|
{hosts
|
||
|
|
.filter((h) => h.enableSsh)
|
||
|
|
.map((h) => (
|
||
|
|
<option key={h.id} value={h.ip}>
|
||
|
|
{h.name || h.ip} ({h.ip})
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{tun.mode !== "dynamic" && (
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<label className="text-[10px] font-bold text-muted-foreground">
|
||
|
|
{t("hosts.endpointPort")}
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
className="h-7 text-xs [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||
|
|
type="number"
|
||
|
|
value={tun.endpointPort}
|
||
|
|
onChange={(e) => {
|
||
|
|
const updated = [...form.serverTunnels];
|
||
|
|
updated[i] = {
|
||
|
|
...updated[i],
|
||
|
|
endpointPort: Number(e.target.value),
|
||
|
|
};
|
||
|
|
setField("serverTunnels", updated);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<label className="text-[10px] font-bold text-muted-foreground">
|
||
|
|
{t("hosts.bindHost")}
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
className="h-7 text-xs"
|
||
|
|
placeholder="127.0.0.1"
|
||
|
|
value={tun.bindHost ?? ""}
|
||
|
|
onChange={(e) => {
|
||
|
|
const updated = [...form.serverTunnels];
|
||
|
|
updated[i] = {
|
||
|
|
...updated[i],
|
||
|
|
bindHost: e.target.value,
|
||
|
|
};
|
||
|
|
setField("serverTunnels", updated);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<label className="text-[10px] font-bold text-muted-foreground">
|
||
|
|
{t("hosts.sourcePort")}
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
className="h-7 text-xs [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||
|
|
type="number"
|
||
|
|
value={tun.sourcePort}
|
||
|
|
onChange={(e) => {
|
||
|
|
const updated = [...form.serverTunnels];
|
||
|
|
updated[i] = {
|
||
|
|
...updated[i],
|
||
|
|
sourcePort: Number(e.target.value),
|
||
|
|
};
|
||
|
|
setField("serverTunnels", updated);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<label className="text-[10px] font-bold text-muted-foreground">
|
||
|
|
{t("hosts.maxRetries")}
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
className="h-7 text-xs [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||
|
|
type="number"
|
||
|
|
value={tun.maxRetries}
|
||
|
|
onChange={(e) => {
|
||
|
|
const updated = [...form.serverTunnels];
|
||
|
|
updated[i] = {
|
||
|
|
...updated[i],
|
||
|
|
maxRetries: Number(e.target.value),
|
||
|
|
};
|
||
|
|
setField("serverTunnels", updated);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<label className="text-[10px] font-bold text-muted-foreground">
|
||
|
|
{t("hosts.retryIntervalS")}
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
className="h-7 text-xs [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||
|
|
type="number"
|
||
|
|
value={tun.retryInterval}
|
||
|
|
onChange={(e) => {
|
||
|
|
const updated = [...form.serverTunnels];
|
||
|
|
updated[i] = {
|
||
|
|
...updated[i],
|
||
|
|
retryInterval: Number(e.target.value),
|
||
|
|
};
|
||
|
|
setField("serverTunnels", updated);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<SettingRow
|
||
|
|
label={t("hosts.autoStartLabel")}
|
||
|
|
description={t("hosts.autoStartDesc")}
|
||
|
|
>
|
||
|
|
<FakeSwitch
|
||
|
|
checked={tun.autoStart}
|
||
|
|
onChange={(v) => {
|
||
|
|
const updated = [...form.serverTunnels];
|
||
|
|
updated[i] = { ...updated[i], autoStart: v };
|
||
|
|
setField("serverTunnels", updated);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</SettingRow>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</SectionCard>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === "docker" && (
|
||
|
|
<HostDockerTab form={form} setField={setField} />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === "files" && (
|
||
|
|
<HostFilesTab form={form} setField={setField} />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === "stats" && (
|
||
|
|
<HostStatsTab form={form} setField={setField} snippets={snippets} />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === "rdp" && (
|
||
|
|
<HostEditorRdpTab
|
||
|
|
form={form}
|
||
|
|
setField={setField}
|
||
|
|
setGuacField={setGuacField}
|
||
|
|
host={host}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === "vnc" && (
|
||
|
|
<HostEditorVncTab
|
||
|
|
form={form}
|
||
|
|
setField={setField}
|
||
|
|
setGuacField={setGuacField}
|
||
|
|
host={host}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{activeTab === "telnet" && (
|
||
|
|
<HostEditorTelnetTab
|
||
|
|
form={form}
|
||
|
|
setField={setField}
|
||
|
|
setGuacField={setGuacField}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex justify-end gap-3 mt-3 mb-6">
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
onClick={() => {
|
||
|
|
setPreviewTerminalTheme(null);
|
||
|
|
onBack();
|
||
|
|
}}
|
||
|
|
disabled={saving}
|
||
|
|
>
|
||
|
|
{t("hosts.guac.cancelBtn")}
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand px-8"
|
||
|
|
onClick={handleSave}
|
||
|
|
disabled={saving}
|
||
|
|
>
|
||
|
|
{saving
|
||
|
|
? t("hosts.guac.savingBtn")
|
||
|
|
: host
|
||
|
|
? t("hosts.guac.updateHostBtn")
|
||
|
|
: t("hosts.guac.addHostBtn")}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|