mirror of
https://github.com/Termix-SSH/Termix.git
synced 2026-10-28 14:15:24 +00:00
Luke GustafsonandZacharyZcR
6b708106e1
* fix(sso): send the PKCE verifier for GitHub login (#1534) * fix(remote-desktop): clip cursor overflow without disabling zoom (#1535) * test(remote-desktop): preserve sessions beyond one hour (#1536) * fix(hosts): expose controls for overflowing editor tabs (#1537) * fix(hosts): expose controls for overflowing editor tabs * test(hosts): mock resize observation in admin panel tests * fix(status): skip TCP probes while host sessions are active (#1538) * fix(database): batch session activity persistence (#1539) * docs(api): describe cookie and API key authentication (#1540) * fix(snippets): repair missing note column on SQLite upgrades (#1541) * fix(docker): retain stored SSH credential association (#1543) * fix(file-manager): render transfer toasts without plugin hooks (#1546) * feat(hosts): keep compact row actions inline (#1547) * fix(auth): allow retrying unavailable second-factor interfaces (#1549) * fix(auth): reject unresolved legacy identity provisioning (#1550) * fix(desktop): ship the plugin SDK inside Mac App Store builds (#1551) * fix(tmux): pass full session info to the terminal's session picker (#1552) The tmux.sessions service reduced detected sessions to bare names, but the picker reads session.name, so every entry rendered blank and selecting one sent an empty name, which created a new session instead of attaching. * fix(ssh): read force keyboard-interactive as a boolean when resolving hosts (#1553) The column holds the text "true"/"false", and the resolver passed it through as-is. The string "false" is truthy, so the password provider treated every saved host as forced keyboard-interactive and left the password out. Jump hops are built straight from the resolved host, so a password hop whose server doesn't offer keyboard-interactive failed with "All configured authentication methods failed". * fix(database): batch database saves for bulk host writes (#1554) * fix(database): yield to the event loop between database saves Each SQLite save serializes and encrypts the whole database into new buffers, which V8 only releases once the event loop turns. Boot migrations and bulk host import write plugin settings per host and per key in an awaited loop, so hundreds of full copies piled up and the container ran out of memory. * fix(database): save once per bulk host write instead of once per row On SQLite every repository write force-saves the whole database. Boot plugin data migrations, host defaults materialization and the bulk host routes write one row per host per setting, so they serialized and encrypted the full database hundreds of times in a row. DatabaseSaveTrigger.batched wraps a function so force saves made while it runs collapse into a single save when it finishes. Nested scopes fold into the outer one, and work that outlives its scope saves normally. * feat(hosts): add instance-wide predefined tag suggestions (#1548) * feat(hosts): add shared predefined tag suggestions * style(hosts): format tag catalog routes * test(database): advance fake timers past the save yield (#1555) * fix(i18n): complete Simplified Chinese core and plugin translations (#1542) * fix(i18n): complete Chinese onboarding and navigation labels * fix(i18n): translate remaining Chinese core and plugin interfaces * fix(i18n): translate host editor tab overflow controls * fix(i18n): use consistent Chinese fleet terminology * fix(i18n): localize hardcoded controls and plugin views * fix(i18n): translate built-in homepage widget catalog * test(homepage): follow translated timezone placeholder * fix(i18n): translate plugin-provided homepage widgets * fix(i18n): localize feature settings section titles * fix: 2.8 oidc accounts unable to sign in after upgrading (#1381) * fix: plugins losing the saved ssh login when copying a host (#1391) * fix: fleets, proxmox and automations not getting the host sudo password * fix: host imports running a defaults pass and metrics restart per host (#1384) * fix: high cpu from status probes and full database saves on every sample (#1300) * fix: user data export freezing the server (#1393) * fix: op:// secret references rejected as ssh keys on credentials (#1394) * fix: slow file deletes from the trash lookups on every delete (#1390) * fix: add openapi docs and error handling to host tag routes * test: compare download stream buffers directly so it stops timing out * chore: drop em dash from host row comment * chore: update release notes for 2.9.1 * fix: restore space to add host tags and redesign predefined tags editor * fix: host key silently accepted when the host is missing from the database (#1397) * fix: clearer host login failed status label and fix its translations (#1396) * chore: add host key and status label fixes to release notes * fix: sso and ldap provider dialogs overflowing the screen and using mismatched toggles * chore: increment ver * fix(audit): store plugin entries with no acting user as a null user_id (#1556) Plugin audit entries written outside a request used the literal "system" as user_id. That column references users.id, so the insert was refused (Postgres logs it as an FK violation) and the entry was silently dropped. Write null instead and keep "system" / plugin:<id> in username. * chore: add sso/ldap dialog and audit log fixes to release notes * fix: tunnels and host settings missing from shared hosts on desktop * fix: remote desktop logins missing from shared hosts on desktop * fix: simplify host status to online/offline and keep it live without a refresh * chore: sync Crowdin translations for 2.9.1 --------- Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com>
946 lines
39 KiB
TypeScript
946 lines
39 KiB
TypeScript
import React from "react";
|
|
import { getHostTags } from "@/api/host-tags-api";
|
|
import type { ProxyNode } from "@/types/index";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Button } from "@/components/button";
|
|
import { Input } from "@/components/input";
|
|
import { PasswordInput } from "@/components/password-input";
|
|
import { FakeSwitch, SectionCard, SettingRow } from "@/components/section-card";
|
|
import type { Host } from "@/types/ui-types";
|
|
import { Activity, Globe, Plus, Tag, Terminal, Trash2, X } from "lucide-react";
|
|
import { FolderPathPicker } from "./FolderPathPicker";
|
|
import { HostParentPicker } from "./HostParentPicker";
|
|
import { getSSHFolders, isElectron } from "@/main-axios";
|
|
import { connectionOriginAppliesTo } from "./HostEditorData";
|
|
import { useSyncStatus } from "@/hooks/use-sync-status";
|
|
import type { HostEditorForm, HostProtocols } from "./HostEditorData";
|
|
import { Select2 } from "@/components/select2";
|
|
import { useHostProtocols } from "./host-protocols";
|
|
import {
|
|
DefaultsOnly,
|
|
HostDefaultBadge,
|
|
HostOnly,
|
|
} from "@/lib/host-defaults-context";
|
|
|
|
type HostEditorSetField = <K extends keyof HostEditorForm>(
|
|
key: K,
|
|
value: HostEditorForm[K],
|
|
) => void;
|
|
|
|
export function HostEditorGeneralTab({
|
|
form,
|
|
setField,
|
|
protocols,
|
|
handleProtocolToggle,
|
|
hosts,
|
|
host,
|
|
simpleMode = false,
|
|
}: {
|
|
form: HostEditorForm;
|
|
setField: HostEditorSetField;
|
|
protocols: HostProtocols;
|
|
handleProtocolToggle: (proto: keyof HostProtocols, value: boolean) => void;
|
|
hosts: Host[];
|
|
host: Host | null;
|
|
/** Hides organizational/advanced fields; their values still save unchanged. */
|
|
simpleMode?: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const syncLinked = !!useSyncStatus()?.linked;
|
|
const pluginProtocols = useHostProtocols();
|
|
const [predefinedTags, setPredefinedTags] = React.useState<string[]>([]);
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
const load = () => {
|
|
void getHostTags()
|
|
.then((tags) => {
|
|
if (!cancelled) setPredefinedTags(tags);
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
load();
|
|
window.addEventListener("termix:host-tags-changed", load);
|
|
return () => {
|
|
cancelled = true;
|
|
window.removeEventListener("termix:host-tags-changed", load);
|
|
};
|
|
}, []);
|
|
const suggestedTags = [
|
|
...new Set([
|
|
...predefinedTags,
|
|
...hosts.flatMap((item) => item.tags ?? []),
|
|
]),
|
|
].filter(
|
|
(tag) =>
|
|
!form.tags.includes(tag) &&
|
|
tag
|
|
.toLocaleLowerCase()
|
|
.includes(form.tagInput.trim().toLocaleLowerCase()),
|
|
);
|
|
const addTag = (tag: string) => {
|
|
if (!form.tags.includes(tag)) setField("tags", [...form.tags, tag]);
|
|
setField("tagInput", "");
|
|
};
|
|
|
|
// Tracks which picker is shown, independent of whether a value is set yet
|
|
// -- switching to "parent host" mode with nothing picked shouldn't bounce
|
|
// back to the folder picker just because parentHostId is still empty.
|
|
const [placementMode, setPlacementMode] = React.useState<
|
|
"folder" | "parentHost"
|
|
>(form.parentHostId ? "parentHost" : "folder");
|
|
|
|
const [folderMeta, setFolderMeta] = React.useState<
|
|
Map<string, { color?: string; icon?: string }>
|
|
>(new Map());
|
|
|
|
React.useEffect(() => {
|
|
let cancelled = false;
|
|
const load = () => {
|
|
getSSHFolders()
|
|
.then((folders) => {
|
|
if (cancelled) return;
|
|
const map = new Map<string, { color?: string; icon?: string }>();
|
|
for (const f of folders) {
|
|
map.set(f.name, {
|
|
color: f.color ?? undefined,
|
|
icon: f.icon ?? undefined,
|
|
});
|
|
}
|
|
setFolderMeta(map);
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
load();
|
|
window.addEventListener("termix:hosts-changed", load);
|
|
return () => {
|
|
cancelled = true;
|
|
window.removeEventListener("termix:hosts-changed", load);
|
|
};
|
|
}, []);
|
|
|
|
// Folders come from two sources: paths referenced by existing hosts, and
|
|
// standalone folder records (including empty ones just created).
|
|
// Intermediate ancestor paths are expanded so "A" appears even when only
|
|
// "A / B" is directly stored on a host.
|
|
const folderPaths = React.useMemo(() => {
|
|
const set = new Set<string>();
|
|
const addWithAncestors = (path: string) => {
|
|
const parts = path.split(" / ");
|
|
let accumulated = "";
|
|
for (const part of parts) {
|
|
accumulated = accumulated ? `${accumulated} / ${part}` : part;
|
|
set.add(accumulated);
|
|
}
|
|
};
|
|
for (const h of hosts) {
|
|
if (h.folder) addWithAncestors(h.folder);
|
|
}
|
|
for (const path of folderMeta.keys()) addWithAncestors(path);
|
|
return [...set];
|
|
}, [hosts, folderMeta]);
|
|
|
|
return (
|
|
<>
|
|
<HostOnly>
|
|
{/* Protocols — enable/disable each connection type */}
|
|
<SectionCard
|
|
title={t("hosts.protocols")}
|
|
icon={<Globe className="size-3.5" />}
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 py-3">
|
|
{[
|
|
{
|
|
proto: "enableSsh",
|
|
label: t("hosts.tabSsh"),
|
|
desc: t("hosts.secureShell"),
|
|
icon: <Terminal className="size-4" />,
|
|
},
|
|
...pluginProtocols.map((protocol) => {
|
|
const Icon = protocol.icon;
|
|
return {
|
|
proto: protocol.settingKey,
|
|
label: t(protocol.titleKey),
|
|
desc: protocol.descriptionKey
|
|
? t(protocol.descriptionKey)
|
|
: "",
|
|
icon: <Icon className="size-4" />,
|
|
};
|
|
}),
|
|
].map(({ proto, label, desc, icon }) => {
|
|
const enabled = !!protocols[proto];
|
|
return (
|
|
<div
|
|
key={proto}
|
|
className={`flex items-center gap-3 p-3 border transition-colors ${enabled ? "border-accent-brand/20 bg-accent-brand/5" : "border-border bg-muted/10"}`}
|
|
>
|
|
<div
|
|
className={`size-8 flex items-center justify-center shrink-0 ${enabled ? "text-accent-brand" : "text-muted-foreground/30"}`}
|
|
>
|
|
{icon}
|
|
</div>
|
|
<div className="flex flex-col gap-1 flex-1 min-w-0">
|
|
<span
|
|
className={`text-xs font-bold ${enabled ? "text-foreground" : "text-muted-foreground/50"}`}
|
|
>
|
|
{label}
|
|
</span>
|
|
<span className="text-[10px] text-muted-foreground/50">
|
|
{desc}
|
|
</span>
|
|
</div>
|
|
<FakeSwitch
|
|
checked={enabled}
|
|
onChange={(v: boolean) => handleProtocolToggle(proto, v)}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</SectionCard>
|
|
|
|
<SectionCard
|
|
title={t("hosts.connectionDetails")}
|
|
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.addressIp")}
|
|
</label>
|
|
<Input
|
|
placeholder={t("placeholders.hostAddress")}
|
|
value={form.ip}
|
|
onChange={(e) => setField("ip", e.target.value)}
|
|
/>
|
|
</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.friendlyName")}
|
|
</label>
|
|
<Input
|
|
placeholder={t("placeholders.hostName")}
|
|
value={form.name}
|
|
onChange={(e) => setField("name", e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SectionCard>
|
|
|
|
{!Object.values(protocols).some(Boolean) && (
|
|
<div className="flex items-center gap-3 p-3 border border-border bg-muted/20 text-xs text-muted-foreground">
|
|
<Globe className="size-4 shrink-0 text-muted-foreground/40" />
|
|
<span>{t("hosts.enableAtLeastOneProtocol")}</span>
|
|
</div>
|
|
)}
|
|
</HostOnly>
|
|
|
|
<SectionCard
|
|
title={t("hosts.folderAndAdvanced")}
|
|
icon={<Tag className="size-3.5" />}
|
|
className={simpleMode ? "hidden" : undefined}
|
|
>
|
|
<HostOnly>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 py-3">
|
|
<div className="flex flex-col gap-1.5 col-span-2 md:col-span-1">
|
|
<div className="flex items-center justify-between">
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{placementMode === "parentHost"
|
|
? t("hosts.parentHost")
|
|
: t("hosts.folder")}
|
|
</label>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (placementMode === "parentHost") {
|
|
setPlacementMode("folder");
|
|
setField("parentHostId", "");
|
|
} else {
|
|
setPlacementMode("parentHost");
|
|
setField("folder", "");
|
|
}
|
|
}}
|
|
className="text-[10px] text-accent-brand hover:underline"
|
|
>
|
|
{placementMode === "parentHost"
|
|
? t("hosts.useFolderInstead")
|
|
: t("hosts.useParentHostInstead")}
|
|
</button>
|
|
</div>
|
|
{placementMode === "parentHost" ? (
|
|
<HostParentPicker
|
|
value={String(form.parentHostId)}
|
|
onChange={(hostId) => setField("parentHostId", hostId)}
|
|
hosts={hosts}
|
|
excludeHostId={host?.id}
|
|
/>
|
|
) : (
|
|
<FolderPathPicker
|
|
value={form.folder}
|
|
onChange={(path) => setField("folder", path)}
|
|
folderPaths={folderPaths}
|
|
folderMeta={folderMeta}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.tags")}
|
|
</label>
|
|
<div className="flex flex-wrap items-center gap-1 min-h-9 px-2 py-1 border border-border bg-background focus-within:ring-1 focus-within:ring-ring">
|
|
{form.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] bg-muted border border-border/60 text-foreground"
|
|
>
|
|
{tag}
|
|
<button
|
|
type="button"
|
|
onClick={() =>
|
|
setField(
|
|
"tags",
|
|
form.tags.filter((tg) => tg !== tag),
|
|
)
|
|
}
|
|
className="text-muted-foreground hover:text-destructive ml-0.5"
|
|
>
|
|
<X className="size-2.5" />
|
|
</button>
|
|
</span>
|
|
))}
|
|
<input
|
|
className="flex-1 min-w-16 text-xs bg-transparent outline-none placeholder:text-muted-foreground/50"
|
|
placeholder={form.tags.length === 0 ? t("hosts.addTag") : ""}
|
|
value={form.tagInput}
|
|
onChange={(e) => setField("tagInput", e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (
|
|
(e.key === " " || e.key === "Enter") &&
|
|
!e.nativeEvent.isComposing &&
|
|
form.tagInput.trim()
|
|
) {
|
|
e.preventDefault();
|
|
addTag(form.tagInput.trim());
|
|
} else if (
|
|
e.key === "Backspace" &&
|
|
!form.tagInput &&
|
|
form.tags.length > 0
|
|
) {
|
|
setField("tags", form.tags.slice(0, -1));
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{suggestedTags.length > 0 && (
|
|
<div
|
|
className="col-span-2 flex flex-wrap gap-1 max-h-24 overflow-y-auto"
|
|
aria-label={t("admin.hostTags")}
|
|
>
|
|
{suggestedTags.map((tag) => (
|
|
<button
|
|
type="button"
|
|
key={tag}
|
|
onClick={() => addTag(tag)}
|
|
className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-foreground/40 transition-colors"
|
|
>
|
|
<Plus className="size-2.5" />
|
|
{tag}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col gap-1.5 col-span-2">
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.privateNotes")}
|
|
</label>
|
|
<textarea
|
|
rows={3}
|
|
placeholder={t("hosts.privateNotesPlaceholder")}
|
|
className="w-full px-3 py-2 text-xs bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring"
|
|
value={form.notes}
|
|
onChange={(e) => setField("notes", e.target.value)}
|
|
/>
|
|
</div>
|
|
<SettingRow
|
|
label={t("hosts.pinToTop")}
|
|
description={t("hosts.pinToTopDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={form.pin}
|
|
onChange={(v) => setField("pin", v)}
|
|
/>
|
|
</SettingRow>
|
|
{syncLinked && (
|
|
<SettingRow
|
|
label={t("hosts.localOnly")}
|
|
description={t("hosts.localOnlyDesc")}
|
|
>
|
|
<FakeSwitch
|
|
checked={form.localOnly}
|
|
onChange={(v) => setField("localOnly", v)}
|
|
/>
|
|
</SettingRow>
|
|
)}
|
|
</div>
|
|
</HostOnly>
|
|
<div className="flex flex-col gap-3 border-t border-border pt-4 pb-0">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.portKnockingSequence")}
|
|
</span>
|
|
<HostDefaultBadge settingKey="core.portKnockSequence" />
|
|
<a
|
|
href="https://docs.termix.site/features/networking/port-knocking"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-[10px] text-accent-brand hover:underline"
|
|
>
|
|
{t("hosts.docsLink")}
|
|
</a>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-6 text-[10px] px-2 border-accent-brand/40 text-accent-brand"
|
|
onClick={() =>
|
|
setField("portKnockSequence", [
|
|
...form.portKnockSequence,
|
|
{ port: 0, protocol: "tcp" as const, delay: 0 },
|
|
])
|
|
}
|
|
>
|
|
<Plus className="size-3 mr-1" /> {t("hosts.addKnockBtn")}
|
|
</Button>
|
|
</div>
|
|
{form.portKnockSequence.length === 0 && (
|
|
<p className="text-[10px] text-muted-foreground/50">
|
|
{t("hosts.noPortKnocking")}
|
|
</p>
|
|
)}
|
|
<div className="flex flex-col gap-2">
|
|
{form.portKnockSequence.map((knock, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-end gap-1.5 p-1.5 bg-muted/30 border border-border"
|
|
>
|
|
<span className="text-[9px] font-bold text-muted-foreground/50 mb-1.5 shrink-0">
|
|
{i + 1}.
|
|
</span>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-[9px] text-muted-foreground/60 uppercase font-bold tracking-wide px-0.5">
|
|
{t("hosts.knockPort")}
|
|
</span>
|
|
<Input
|
|
className="h-7 text-xs w-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
|
placeholder="8080"
|
|
type="number"
|
|
value={knock.port}
|
|
onChange={(e) => {
|
|
const updated = [...form.portKnockSequence];
|
|
updated[i] = {
|
|
...updated[i],
|
|
port: Number(e.target.value),
|
|
};
|
|
setField("portKnockSequence", updated);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-[9px] text-muted-foreground/60 uppercase font-bold tracking-wide px-0.5">
|
|
{t("hosts.protocol")}
|
|
</span>
|
|
<Select2
|
|
className="h-7 text-[10px] bg-background border border-border px-1"
|
|
value={knock.protocol}
|
|
onChange={(e) => {
|
|
const updated = [...form.portKnockSequence];
|
|
updated[i] = {
|
|
...updated[i],
|
|
protocol: e.target.value as "tcp" | "udp",
|
|
};
|
|
setField("portKnockSequence", updated);
|
|
}}
|
|
>
|
|
<option value="tcp">TCP</option>
|
|
<option value="udp">UDP</option>
|
|
</Select2>
|
|
</div>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-[9px] text-muted-foreground/60 uppercase font-bold tracking-wide px-0.5">
|
|
{t("hosts.delayAfterMs")}
|
|
</span>
|
|
<Input
|
|
className="h-7 text-xs w-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
|
placeholder="100"
|
|
type="number"
|
|
value={knock.delay}
|
|
onChange={(e) => {
|
|
const updated = [...form.portKnockSequence];
|
|
updated[i] = {
|
|
...updated[i],
|
|
delay: Number(e.target.value),
|
|
};
|
|
setField("portKnockSequence", updated);
|
|
}}
|
|
/>
|
|
</div>
|
|
<button
|
|
className="text-destructive p-1 mb-0.5"
|
|
onClick={() =>
|
|
setField(
|
|
"portKnockSequence",
|
|
form.portKnockSequence.filter((_, idx) => idx !== i),
|
|
)
|
|
}
|
|
>
|
|
<X className="size-3" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-4 border-t border-border pt-4 pb-2">
|
|
<SettingRow
|
|
label={t("hosts.useSocks5Proxy")}
|
|
description={t("hosts.useSocks5ProxyDesc")}
|
|
defaultKey="core.socks5"
|
|
>
|
|
<FakeSwitch
|
|
checked={form.useSocks5}
|
|
onChange={(v) => setField("useSocks5", v)}
|
|
/>
|
|
</SettingRow>
|
|
{form.useSocks5 && (
|
|
<div className="flex flex-col gap-3">
|
|
{/* Single / Chain mode toggle */}
|
|
<div className="flex gap-2">
|
|
{(["single", "chain"] as const).map((m) => (
|
|
<button
|
|
key={m}
|
|
type="button"
|
|
onClick={() => setField("socks5ProxyMode", m)}
|
|
className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest border transition-colors ${form.socks5ProxyMode === m ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
|
|
>
|
|
{m === "single"
|
|
? t("hosts.proxySingleMode")
|
|
: t("hosts.proxyChainMode")}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{form.socks5ProxyMode === "single" && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-3 bg-muted/20 border border-border">
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.proxyHost")}
|
|
</label>
|
|
<Input
|
|
className="h-7 text-xs"
|
|
placeholder="proxy.example.com"
|
|
value={form.socks5Host}
|
|
onChange={(e) => setField("socks5Host", 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.proxyPort")}
|
|
</label>
|
|
<Input
|
|
className="h-7 text-xs"
|
|
type="number"
|
|
placeholder="1080"
|
|
value={form.socks5Port}
|
|
onChange={(e) =>
|
|
setField("socks5Port", Number(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.proxyUsername")}
|
|
</label>
|
|
<Input
|
|
className="h-7 text-xs"
|
|
placeholder={t("hosts.optional")}
|
|
value={form.socks5Username}
|
|
onChange={(e) =>
|
|
setField("socks5Username", e.target.value)
|
|
}
|
|
/>
|
|
</div>
|
|
<HostOnly>
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.proxyPassword")}
|
|
</label>
|
|
<PasswordInput
|
|
className="h-7 text-xs pr-8"
|
|
placeholder={t("hosts.optional")}
|
|
value={form.socks5Password}
|
|
onChange={(e) =>
|
|
setField("socks5Password", e.target.value)
|
|
}
|
|
/>
|
|
</div>
|
|
</HostOnly>
|
|
</div>
|
|
)}
|
|
|
|
{form.socks5ProxyMode === "chain" && (
|
|
<div className="flex flex-col gap-2">
|
|
{form.socks5ProxyChain.map((node, ni) => (
|
|
<div
|
|
key={ni}
|
|
className="flex flex-col gap-2 p-3 bg-muted/20 border border-border"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] font-bold text-muted-foreground">
|
|
{t("hosts.proxyNode")} {ni + 1}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
className="text-destructive"
|
|
onClick={() =>
|
|
setField(
|
|
"socks5ProxyChain",
|
|
form.socks5ProxyChain.filter(
|
|
(_, idx) => idx !== ni,
|
|
),
|
|
)
|
|
}
|
|
>
|
|
<X className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.proxyHost")}
|
|
</label>
|
|
<Input
|
|
className="h-7 text-xs"
|
|
placeholder="proxy.example.com"
|
|
value={node.host}
|
|
onChange={(e) => {
|
|
const u = [...form.socks5ProxyChain];
|
|
u[ni] = { ...u[ni], host: e.target.value };
|
|
setField("socks5ProxyChain", u);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.proxyPort")}
|
|
</label>
|
|
<Input
|
|
className="h-7 text-xs"
|
|
type="number"
|
|
placeholder="1080"
|
|
value={node.port}
|
|
onChange={(e) => {
|
|
const u = [...form.socks5ProxyChain];
|
|
u[ni] = {
|
|
...u[ni],
|
|
port: Number(e.target.value),
|
|
};
|
|
setField("socks5ProxyChain", u);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.proxyType")}
|
|
</label>
|
|
<Select2
|
|
className="h-7 text-xs border border-border bg-background px-2 outline-none focus:ring-1 focus:ring-ring"
|
|
value={node.type}
|
|
onChange={(e) => {
|
|
const u = [...form.socks5ProxyChain];
|
|
u[ni] = {
|
|
...u[ni],
|
|
type: e.target.value as ProxyNode["type"],
|
|
};
|
|
setField("socks5ProxyChain", u);
|
|
}}
|
|
>
|
|
<option value="socks5">SOCKS5</option>
|
|
<option value="socks4">SOCKS4</option>
|
|
<option value="http">HTTP</option>
|
|
</Select2>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<label className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.proxyUsername")}
|
|
</label>
|
|
<Input
|
|
className="h-7 text-xs"
|
|
placeholder={t("hosts.optional")}
|
|
value={node.username}
|
|
onChange={(e) => {
|
|
const u = [...form.socks5ProxyChain];
|
|
u[ni] = {
|
|
...u[ni],
|
|
username: e.target.value,
|
|
};
|
|
setField("socks5ProxyChain", u);
|
|
}}
|
|
/>
|
|
</div>
|
|
<HostOnly>
|
|
<div className="flex flex-col gap-1 col-span-2">
|
|
<label className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.proxyPassword")}
|
|
</label>
|
|
<PasswordInput
|
|
className="h-7 text-xs pr-8"
|
|
placeholder={t("hosts.optional")}
|
|
value={node.password}
|
|
onChange={(e) => {
|
|
const u = [...form.socks5ProxyChain];
|
|
u[ni] = {
|
|
...u[ni],
|
|
password: e.target.value,
|
|
};
|
|
setField("socks5ProxyChain", u);
|
|
}}
|
|
/>
|
|
</div>
|
|
</HostOnly>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-6 text-[10px] px-2 border-accent-brand/40 text-accent-brand self-start"
|
|
onClick={() =>
|
|
setField("socks5ProxyChain", [
|
|
...form.socks5ProxyChain,
|
|
{
|
|
host: "",
|
|
port: 1080,
|
|
type: "socks5",
|
|
username: "",
|
|
password: "",
|
|
},
|
|
])
|
|
}
|
|
>
|
|
<Plus className="size-3 mr-1" /> {t("hosts.addProxyNode")}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Connection path visualization */}
|
|
{(form.socks5ProxyMode === "single" && form.socks5Host) ||
|
|
(form.socks5ProxyMode === "chain" &&
|
|
form.socks5ProxyChain.length > 0) ? (
|
|
<div className="flex items-center gap-1 flex-wrap p-2 bg-muted/30 border border-border text-[10px]">
|
|
<span className="px-2 py-0.5 bg-background border border-border text-foreground font-mono">
|
|
{t("hosts.you")}
|
|
</span>
|
|
{form.socks5ProxyMode === "single" && form.socks5Host ? (
|
|
<>
|
|
<span className="text-muted-foreground">→</span>
|
|
<span className="px-2 py-0.5 bg-muted border border-border text-muted-foreground font-mono">
|
|
{form.socks5Host}:{form.socks5Port}
|
|
</span>
|
|
</>
|
|
) : (
|
|
form.socks5ProxyChain
|
|
.filter((n) => n.host)
|
|
.map((n, ni) => (
|
|
<React.Fragment key={ni}>
|
|
<span className="text-muted-foreground">→</span>
|
|
<span className="px-2 py-0.5 bg-muted border border-border text-muted-foreground font-mono">
|
|
{n.host}:{n.port}
|
|
</span>
|
|
</React.Fragment>
|
|
))
|
|
)}
|
|
{form.jumpHosts
|
|
.filter((j) => j.hostId)
|
|
.map((j, ji) => {
|
|
const jh = hosts.find((h) => h.id === j.hostId);
|
|
return jh ? (
|
|
<React.Fragment key={`j${ji}`}>
|
|
<span className="text-muted-foreground">→</span>
|
|
<span className="px-2 py-0.5 bg-muted border border-border text-muted-foreground font-mono">
|
|
{jh.name || jh.ip}
|
|
</span>
|
|
</React.Fragment>
|
|
) : null;
|
|
})}
|
|
<span className="text-muted-foreground">→</span>
|
|
<span className="px-2 py-0.5 bg-accent-brand/10 border border-accent-brand/30 text-accent-brand font-mono">
|
|
{form.ip || "target"}:{form.sshPort}
|
|
</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
{isElectron() && connectionOriginAppliesTo(protocols) && (
|
|
<HostOnly>
|
|
<SettingRow
|
|
label={t("hosts.connectionOrigin")}
|
|
description={[
|
|
t("hosts.connectionOriginDesc"),
|
|
...new Set(
|
|
pluginProtocols
|
|
.filter(
|
|
(protocol) =>
|
|
protocols[protocol.settingKey] &&
|
|
protocol.connectionOriginNoteKey,
|
|
)
|
|
.map((protocol) => t(protocol.connectionOriginNoteKey!)),
|
|
),
|
|
].join(" ")}
|
|
>
|
|
<select
|
|
className="flex h-7 border border-border bg-background px-2 py-0 text-xs outline-none focus:ring-1 focus:ring-ring"
|
|
value={form.connectionOrigin ?? ""}
|
|
onChange={(e) =>
|
|
setField(
|
|
"connectionOrigin",
|
|
(e.target.value || null) as "local" | "remote" | null,
|
|
)
|
|
}
|
|
>
|
|
<option value="">{t("hosts.connectionOriginDefault")}</option>
|
|
<option value="local">
|
|
{t("hosts.connectionOriginLocal")}
|
|
</option>
|
|
<option value="remote">
|
|
{t("hosts.connectionOriginRemote")}
|
|
</option>
|
|
</select>
|
|
</SettingRow>
|
|
</HostOnly>
|
|
)}
|
|
<DefaultsOnly settingKey="core.jumpHosts">
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
|
|
{t("hosts.jumpHostChainLabel")}
|
|
<HostDefaultBadge settingKey="core.jumpHosts" />
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-6 text-[10px] px-2 border-accent-brand/40 text-accent-brand"
|
|
onClick={() =>
|
|
setField("jumpHosts", [...form.jumpHosts, { hostId: "" }])
|
|
}
|
|
>
|
|
<Plus className="size-3 mr-1" /> {t("hosts.addJumpBtn")}
|
|
</Button>
|
|
</div>
|
|
{form.jumpHosts.length === 0 && (
|
|
<p className="text-[10px] text-muted-foreground/50">
|
|
{t("hosts.noJumpHosts")}
|
|
</p>
|
|
)}
|
|
<div className="flex flex-col gap-2">
|
|
{form.jumpHosts.map((jh, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center gap-2 p-2 bg-background border border-border"
|
|
>
|
|
<span className="text-[10px] font-bold text-muted-foreground shrink-0">
|
|
{i + 1}.
|
|
</span>
|
|
<Select2
|
|
className="flex h-7 flex-1 border border-border bg-background px-2 py-0 text-xs outline-none focus:ring-1 focus:ring-ring"
|
|
value={jh.hostId}
|
|
onChange={(e) => {
|
|
const updated = [...form.jumpHosts];
|
|
updated[i] = { hostId: e.target.value };
|
|
setField("jumpHosts", updated);
|
|
}}
|
|
>
|
|
<option value="">{t("hosts.selectAServer")}</option>
|
|
{hosts
|
|
.filter((h) => (host ? h.id !== host.id : true))
|
|
.map((h) => (
|
|
<option key={h.id} value={h.id}>
|
|
{h.name || h.ip}
|
|
</option>
|
|
))}
|
|
</Select2>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7 text-destructive"
|
|
onClick={() =>
|
|
setField(
|
|
"jumpHosts",
|
|
form.jumpHosts.filter((_, idx) => idx !== i),
|
|
)
|
|
}
|
|
>
|
|
<Trash2 className="size-3.5" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</DefaultsOnly>
|
|
</div>
|
|
</SectionCard>
|
|
|
|
<SectionCard
|
|
title={t("hosts.statusChecksLabel")}
|
|
icon={<Activity className="size-3.5" />}
|
|
>
|
|
<div className="flex flex-col gap-0 py-1">
|
|
<SettingRow
|
|
label={t("hosts.enableStatusChecks")}
|
|
description={t("hosts.enableStatusChecksDesc")}
|
|
defaultKey="core.statusCheckEnabled"
|
|
>
|
|
<FakeSwitch
|
|
checked={form.statusCheckEnabled}
|
|
onChange={(value) => setField("statusCheckEnabled", value)}
|
|
/>
|
|
</SettingRow>
|
|
{form.statusCheckEnabled && (
|
|
<SettingRow
|
|
label={t("hosts.useGlobalInterval")}
|
|
description={t("hosts.useGlobalIntervalDesc")}
|
|
defaultKey="core.statusCheckInterval"
|
|
>
|
|
<FakeSwitch
|
|
checked={form.statusCheckInterval === null}
|
|
onChange={(useGlobal) =>
|
|
setField("statusCheckInterval", useGlobal ? null : 60)
|
|
}
|
|
/>
|
|
</SettingRow>
|
|
)}
|
|
{form.statusCheckEnabled && form.statusCheckInterval !== null && (
|
|
<SettingRow
|
|
label={t("hosts.checkIntervalS")}
|
|
description={t("hosts.checkIntervalDesc")}
|
|
>
|
|
<Input
|
|
type="number"
|
|
min={5}
|
|
max={86400}
|
|
value={form.statusCheckInterval}
|
|
onChange={(e) =>
|
|
setField("statusCheckInterval", Number(e.target.value))
|
|
}
|
|
className="w-20 h-7 text-xs text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
|
/>
|
|
</SettingRow>
|
|
)}
|
|
</div>
|
|
</SectionCard>
|
|
</>
|
|
);
|
|
}
|