840 lines
37 KiB
TypeScript
840 lines
37 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { ChevronDown, Eye, EyeOff, FileKey, FolderLock, FolderOpen, Key, KeyRound, MapPin, Plus, Shapes, Shield, Trash2, User, X } from "lucide-react";
|
||
|
|
import type { Host } from "../types";
|
||
|
|
import { applyHostAuthMethodSelection } from "../domain/sshAuth";
|
||
|
|
import { HostIconPicker } from "./HostIconPicker";
|
||
|
|
import { Button } from "./ui/button";
|
||
|
|
import { Combobox } from "./ui/combobox";
|
||
|
|
import { HostDetailsSection, HostDetailsSettingRow } from "./host-details";
|
||
|
|
import { Input } from "./ui/input";
|
||
|
|
import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./ui/popover";
|
||
|
|
import { ScrollArea } from "./ui/scroll-area";
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
|
||
|
|
import { Switch } from "./ui/switch";
|
||
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
|
||
|
|
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
type HostDetailsConnectionSectionsProps = Record<string, any>;
|
||
|
|
|
||
|
|
export const HOST_AUTH_METHOD_CHOICES = [
|
||
|
|
["auto", "hostDetails.auth.auto"],
|
||
|
|
["password", "hostDetails.auth.passwordOnly"],
|
||
|
|
["key", "hostDetails.auth.key"],
|
||
|
|
["certificate", "hostDetails.auth.certificate"],
|
||
|
|
] as const;
|
||
|
|
|
||
|
|
export function shouldForceAuthMethodReselect(
|
||
|
|
nextMethod: "auto" | "password" | "key" | "certificate",
|
||
|
|
currentMethod: "auto" | "password" | "key" | "certificate",
|
||
|
|
): boolean {
|
||
|
|
// Radix Select skips onValueChange when the value is unchanged. Key/certificate
|
||
|
|
// still need that path so re-opening the chooser keeps working.
|
||
|
|
return (
|
||
|
|
nextMethod === currentMethod
|
||
|
|
&& (nextMethod === "key" || nextMethod === "certificate")
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export const applyEffectiveHostAuthMethodSelection = (
|
||
|
|
host: Host,
|
||
|
|
authMethod: "auto" | "password" | "key" | "certificate",
|
||
|
|
effectiveAuthMethod: "auto" | "password" | "key" | "certificate",
|
||
|
|
effectiveUsername?: string,
|
||
|
|
): Host => {
|
||
|
|
if (authMethod === effectiveAuthMethod) return host;
|
||
|
|
const selected = applyHostAuthMethodSelection(host, authMethod, effectiveAuthMethod);
|
||
|
|
return !selected.username?.trim() && effectiveUsername?.trim()
|
||
|
|
? { ...selected, username: effectiveUsername }
|
||
|
|
: selected;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const detachEffectiveHostIdentity = (host: Host, effectiveUsername?: string): Host => ({
|
||
|
|
...host,
|
||
|
|
identityId: "",
|
||
|
|
...(!host.username?.trim() && effectiveUsername?.trim()
|
||
|
|
? { username: effectiveUsername }
|
||
|
|
: {}),
|
||
|
|
});
|
||
|
|
|
||
|
|
export const removeSelectedHostCredential = (
|
||
|
|
host: Host,
|
||
|
|
effectiveAuthMethod: "auto" | "password" | "key" | "certificate",
|
||
|
|
effectiveUsername?: string,
|
||
|
|
): Host => {
|
||
|
|
const authMethod = host.password ? "password" : "auto";
|
||
|
|
const selected = applyHostAuthMethodSelection(host, authMethod, effectiveAuthMethod);
|
||
|
|
return !selected.username?.trim() && effectiveUsername?.trim()
|
||
|
|
? { ...selected, username: effectiveUsername }
|
||
|
|
: selected;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const HostDetailsConnectionSections: React.FC<HostDetailsConnectionSectionsProps> = ({
|
||
|
|
t,
|
||
|
|
form,
|
||
|
|
setForm,
|
||
|
|
update,
|
||
|
|
groupDefaults,
|
||
|
|
effectiveAuthMethod,
|
||
|
|
effectiveUsername,
|
||
|
|
effectiveIdentityId,
|
||
|
|
selectedIdentity,
|
||
|
|
clearIdentity,
|
||
|
|
identities,
|
||
|
|
identitySuggestionsOpen,
|
||
|
|
filteredIdentitySuggestions,
|
||
|
|
setIdentitySuggestionsOpen,
|
||
|
|
availableKeys,
|
||
|
|
applyIdentity,
|
||
|
|
showPassword,
|
||
|
|
setShowPassword,
|
||
|
|
pendingReferenceKeyPath,
|
||
|
|
setPendingReferenceKeyPath,
|
||
|
|
selectedCredentialType,
|
||
|
|
setSelectedCredentialType,
|
||
|
|
credentialPopoverOpen,
|
||
|
|
setCredentialPopoverOpen,
|
||
|
|
keysByCategory,
|
||
|
|
newKeyFilePath,
|
||
|
|
setNewKeyFilePath,
|
||
|
|
addLocalKeyFilePath,
|
||
|
|
distroOptions,
|
||
|
|
effectiveFormDistro,
|
||
|
|
getDistroOptionLabel,
|
||
|
|
}) => {
|
||
|
|
const selectAuthMethod = (authMethod: "auto" | "password" | "key" | "certificate") => {
|
||
|
|
setForm((previous: Host) => applyEffectiveHostAuthMethodSelection(
|
||
|
|
previous,
|
||
|
|
authMethod,
|
||
|
|
effectiveAuthMethod,
|
||
|
|
effectiveUsername,
|
||
|
|
));
|
||
|
|
if (authMethod === "auto" || authMethod === "password") {
|
||
|
|
setPendingReferenceKeyPath(null);
|
||
|
|
setSelectedCredentialType(null);
|
||
|
|
setCredentialPopoverOpen(false);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setSelectedCredentialType(authMethod);
|
||
|
|
setCredentialPopoverOpen(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
const resolvedAuthMethod = HOST_AUTH_METHOD_CHOICES.some(([value]) => value === effectiveAuthMethod)
|
||
|
|
? effectiveAuthMethod
|
||
|
|
: "auto";
|
||
|
|
const selectedAuthMethodLabel = t(
|
||
|
|
HOST_AUTH_METHOD_CHOICES.find(([value]) => value === resolvedAuthMethod)?.[1] ?? "hostDetails.auth.auto",
|
||
|
|
);
|
||
|
|
const effectiveEtEnabled = form.etEnabled ?? groupDefaults?.etEnabled;
|
||
|
|
const effectiveProtocol = form.protocol ?? groupDefaults?.protocol;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<HostDetailsSection
|
||
|
|
icon={<MapPin size={14} className="text-muted-foreground" />}
|
||
|
|
title={t("hostDetails.section.address")}
|
||
|
|
>
|
||
|
|
<Input
|
||
|
|
placeholder={t("hostDetails.hostname.placeholder")}
|
||
|
|
value={form.hostname}
|
||
|
|
onChange={(e) => update("hostname", e.target.value)}
|
||
|
|
className="h-10 w-full"
|
||
|
|
/>
|
||
|
|
</HostDetailsSection>
|
||
|
|
|
||
|
|
<HostDetailsSection
|
||
|
|
icon={<KeyRound size={14} className="text-muted-foreground" />}
|
||
|
|
title={t("hostDetails.section.portCredentials")}
|
||
|
|
className="overflow-hidden"
|
||
|
|
>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<div className="flex-1 min-w-0 h-10 flex items-center gap-2 bg-secondary/70 border border-border/70 rounded-md px-3">
|
||
|
|
<span className="text-xs text-muted-foreground">SSH on</span>
|
||
|
|
<div className="ml-auto w-1/2 min-w-0 flex items-center gap-2 justify-end">
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
value={form.port ?? ""}
|
||
|
|
onChange={(e) => update("port", e.target.value ? Number(e.target.value) : undefined)}
|
||
|
|
placeholder={groupDefaults?.port ? String(groupDefaults.port) : "22"}
|
||
|
|
className="h-8 flex-1 min-w-0 text-center"
|
||
|
|
/>
|
||
|
|
<span className="text-xs text-muted-foreground">
|
||
|
|
{t("hostDetails.port")}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="grid gap-2">
|
||
|
|
<HostDetailsSettingRow
|
||
|
|
label={t("hostDetails.auth.method")}
|
||
|
|
hint={t(`hostDetails.auth.${resolvedAuthMethod}.desc`)}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={resolvedAuthMethod}
|
||
|
|
onValueChange={(val) => selectAuthMethod(val as "auto" | "password" | "key" | "certificate")}
|
||
|
|
>
|
||
|
|
<SelectTrigger
|
||
|
|
className="h-8 w-32 gap-2"
|
||
|
|
aria-label={t("hostDetails.auth.method")}
|
||
|
|
>
|
||
|
|
{/*
|
||
|
|
Radix Select only mirrors the selected item text after the
|
||
|
|
closed control is measured. Render the current label directly
|
||
|
|
so the default value is never blank on first paint.
|
||
|
|
*/}
|
||
|
|
<span className="min-w-0 flex-1 truncate text-left">
|
||
|
|
{selectedAuthMethodLabel}
|
||
|
|
</span>
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{HOST_AUTH_METHOD_CHOICES.map(([value, labelKey]) => (
|
||
|
|
<SelectItem
|
||
|
|
key={value}
|
||
|
|
value={value}
|
||
|
|
textValue={t(labelKey)}
|
||
|
|
onPointerUp={() => {
|
||
|
|
// Radix skips consumer onValueChange for an unchanged value.
|
||
|
|
// Key/certificate still need the same-item path to reopen the chooser.
|
||
|
|
if (shouldForceAuthMethodReselect(value, resolvedAuthMethod)) {
|
||
|
|
selectAuthMethod(value);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onKeyDown={(event) => {
|
||
|
|
if (
|
||
|
|
(event.key === "Enter" || event.key === " ")
|
||
|
|
&& shouldForceAuthMethodReselect(value, resolvedAuthMethod)
|
||
|
|
) {
|
||
|
|
selectAuthMethod(value);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t(labelKey)}
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</HostDetailsSettingRow>
|
||
|
|
{!effectiveEtEnabled && effectiveProtocol !== "et" && (
|
||
|
|
<HostDetailsSettingRow
|
||
|
|
label={t("hostDetails.auth.mfaFirst")}
|
||
|
|
hint={t("hostDetails.auth.mfaFirst.desc")}
|
||
|
|
>
|
||
|
|
<Switch
|
||
|
|
checked={!!form.requiresMfa}
|
||
|
|
onCheckedChange={(val) => update("requiresMfa" as keyof Host, val)}
|
||
|
|
/>
|
||
|
|
</HostDetailsSettingRow>
|
||
|
|
)}
|
||
|
|
{selectedIdentity ? (
|
||
|
|
<div className="flex items-center gap-2 h-10 px-3 rounded-md border border-border/70 bg-secondary/60">
|
||
|
|
<User size={16} className="text-muted-foreground" />
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
<div className="text-sm font-medium truncate">
|
||
|
|
{selectedIdentity.label}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8 shrink-0"
|
||
|
|
onClick={clearIdentity}
|
||
|
|
>
|
||
|
|
<X size={14} />
|
||
|
|
</Button>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent>{t("common.clear")}</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
</div>
|
||
|
|
) : effectiveIdentityId ? (
|
||
|
|
<div className="flex items-center gap-2 h-10 px-3 rounded-md border border-border/70 bg-secondary/60">
|
||
|
|
<User size={16} className="text-muted-foreground" />
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
<div className="text-sm font-medium truncate">
|
||
|
|
{t("hostDetails.identity.missing")}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8 shrink-0"
|
||
|
|
onClick={clearIdentity}
|
||
|
|
>
|
||
|
|
<X size={14} />
|
||
|
|
</Button>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent>{t("common.clear")}</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
(() => {
|
||
|
|
const hasIdentities = identities.length > 0;
|
||
|
|
if (!hasIdentities) {
|
||
|
|
return (
|
||
|
|
<Input
|
||
|
|
placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
|
||
|
|
value={form.username}
|
||
|
|
onChange={(e) => update("username", e.target.value)}
|
||
|
|
className="h-10"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Popover
|
||
|
|
open={
|
||
|
|
identitySuggestionsOpen &&
|
||
|
|
filteredIdentitySuggestions.length > 0
|
||
|
|
}
|
||
|
|
onOpenChange={setIdentitySuggestionsOpen}
|
||
|
|
>
|
||
|
|
{/*
|
||
|
|
Anchor (not Trigger): wrapping the username Input in
|
||
|
|
PopoverTrigger races focus→open with the same click's
|
||
|
|
toggle→close, which flashes saved identities then closes.
|
||
|
|
Anchor is not exempt from Radix outside dismissal (only
|
||
|
|
Trigger is), so tag it and ignore those events below.
|
||
|
|
*/}
|
||
|
|
<PopoverAnchor asChild>
|
||
|
|
<div
|
||
|
|
className="relative"
|
||
|
|
data-identity-suggestions-anchor=""
|
||
|
|
>
|
||
|
|
<Input
|
||
|
|
placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
|
||
|
|
value={form.username}
|
||
|
|
onChange={(e) => {
|
||
|
|
const next = e.target.value;
|
||
|
|
update("username", next);
|
||
|
|
const q = next.toLowerCase().trim();
|
||
|
|
const matches = q
|
||
|
|
? identities.filter(
|
||
|
|
(i) =>
|
||
|
|
i.label.toLowerCase().includes(q) ||
|
||
|
|
i.username.toLowerCase().includes(q),
|
||
|
|
)
|
||
|
|
: identities;
|
||
|
|
setIdentitySuggestionsOpen(matches.length > 0);
|
||
|
|
}}
|
||
|
|
onFocus={() => {
|
||
|
|
const q = (form.username || "").toLowerCase().trim();
|
||
|
|
const matches = q
|
||
|
|
? identities.filter(
|
||
|
|
(i) =>
|
||
|
|
i.label.toLowerCase().includes(q) ||
|
||
|
|
i.username.toLowerCase().includes(q),
|
||
|
|
)
|
||
|
|
: identities;
|
||
|
|
setIdentitySuggestionsOpen(matches.length > 0);
|
||
|
|
}}
|
||
|
|
className="h-10 pr-9"
|
||
|
|
/>
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger asChild>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
|
||
|
|
onClick={() => {
|
||
|
|
setIdentitySuggestionsOpen((prev) => {
|
||
|
|
if (prev) return false;
|
||
|
|
const q = (form.username || "")
|
||
|
|
.toLowerCase()
|
||
|
|
.trim();
|
||
|
|
const matches = q
|
||
|
|
? identities.filter(
|
||
|
|
(i) =>
|
||
|
|
i.label.toLowerCase().includes(q) ||
|
||
|
|
i.username.toLowerCase().includes(q),
|
||
|
|
)
|
||
|
|
: identities;
|
||
|
|
return matches.length > 0;
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ChevronDown size={16} />
|
||
|
|
</button>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent>{t("hostDetails.identity.suggestions")}</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
</div>
|
||
|
|
</PopoverAnchor>
|
||
|
|
<PopoverContent
|
||
|
|
className="p-0 border-border/60"
|
||
|
|
align="start"
|
||
|
|
sideOffset={4}
|
||
|
|
onOpenAutoFocus={(e) => e.preventDefault()}
|
||
|
|
onInteractOutside={(e) => {
|
||
|
|
const target = e.target as Element | null;
|
||
|
|
if (target?.closest("[data-identity-suggestions-anchor]")) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||
|
|
>
|
||
|
|
<ScrollArea className="max-h-[280px]">
|
||
|
|
<div className="p-1">
|
||
|
|
{filteredIdentitySuggestions.length === 0 ? (
|
||
|
|
<div className="py-4 text-center text-sm text-muted-foreground">
|
||
|
|
{t("common.noResultsFound")}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-1">
|
||
|
|
{filteredIdentitySuggestions.map((identity) => {
|
||
|
|
const keyLabel = identity.keyId
|
||
|
|
? availableKeys.find(
|
||
|
|
(k) => k.id === identity.keyId,
|
||
|
|
)?.label
|
||
|
|
: undefined;
|
||
|
|
const methodLabel =
|
||
|
|
identity.authMethod === "certificate"
|
||
|
|
? t("hostDetails.credential.certificate")
|
||
|
|
: identity.authMethod === "key"
|
||
|
|
? t("hostDetails.credential.key")
|
||
|
|
: t("keychain.identity.method.passwordOnly");
|
||
|
|
const summaryParts = [
|
||
|
|
identity.username,
|
||
|
|
identity.password ? "******" : undefined,
|
||
|
|
keyLabel,
|
||
|
|
].filter(Boolean);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={identity.id}
|
||
|
|
type="button"
|
||
|
|
className="w-full flex items-center gap-3 px-3 py-2 rounded-md hover:bg-secondary/80 transition-colors text-left"
|
||
|
|
onMouseDown={(e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
applyIdentity(identity);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="h-8 w-8 rounded-md bg-green-500/15 text-green-500 flex items-center justify-center shrink-0">
|
||
|
|
<User size={16} />
|
||
|
|
</div>
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
<div className="text-sm font-medium truncate">
|
||
|
|
{identity.label}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-muted-foreground truncate">
|
||
|
|
{methodLabel}
|
||
|
|
{summaryParts.length
|
||
|
|
? ` - ${summaryParts.join(", ")}`
|
||
|
|
: ""}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</ScrollArea>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
})()
|
||
|
|
)}
|
||
|
|
|
||
|
|
{!selectedIdentity && !form.identityId && (
|
||
|
|
<div className="relative">
|
||
|
|
<Input
|
||
|
|
placeholder={t("hostDetails.password.placeholder")}
|
||
|
|
type={showPassword ? "text" : "password"}
|
||
|
|
value={form.password || ""}
|
||
|
|
onChange={(e) => update("password", e.target.value)}
|
||
|
|
className="h-10 pr-10"
|
||
|
|
/>
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger asChild>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setShowPassword(!showPassword)}
|
||
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground transition-colors"
|
||
|
|
>
|
||
|
|
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||
|
|
</button>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent>{showPassword ? t("hostDetails.password.hide") : t("hostDetails.password.show")}</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Save Password toggle - shown when password is entered */}
|
||
|
|
{!selectedIdentity && !form.identityId && form.password && (
|
||
|
|
<div className="flex items-center justify-between py-1">
|
||
|
|
<span className="text-xs text-muted-foreground">
|
||
|
|
{t("hostDetails.password.save")}
|
||
|
|
</span>
|
||
|
|
<Switch
|
||
|
|
checked={form.savePassword ?? true}
|
||
|
|
onCheckedChange={(val) => update("savePassword" as keyof Host, val)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Local key file paths display */}
|
||
|
|
{!selectedIdentity && !form.identityFileId && form.identityFilePaths && form.identityFilePaths.length > 0 && (
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
{form.identityFilePaths.map((keyPath, idx) => (
|
||
|
|
<div key={idx} className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60 overflow-hidden">
|
||
|
|
<FileKey size={14} className="text-primary shrink-0" />
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger asChild>
|
||
|
|
<span className="text-xs w-0 flex-1 truncate font-mono cursor-default">
|
||
|
|
{keyPath}
|
||
|
|
</span>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent>{keyPath}</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-6 w-6 shrink-0"
|
||
|
|
onClick={() => {
|
||
|
|
const paths = form.identityFilePaths?.filter((_, i) => i !== idx) || [];
|
||
|
|
update("identityFilePaths", paths.length > 0 ? paths : undefined);
|
||
|
|
if (keyPath === pendingReferenceKeyPath) {
|
||
|
|
setPendingReferenceKeyPath(null);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Trash2 size={12} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Selected credential display */}
|
||
|
|
{!selectedIdentity && form.identityFileId && (
|
||
|
|
<div className="flex items-center gap-2 min-w-0 overflow-hidden p-2 rounded-md bg-secondary/50 border border-border/60">
|
||
|
|
{form.authMethod === "certificate" ? (
|
||
|
|
<Shield size={14} className="text-primary shrink-0" />
|
||
|
|
) : (
|
||
|
|
<Key size={14} className="text-primary shrink-0" />
|
||
|
|
)}
|
||
|
|
<span className="text-sm min-w-0 flex-1 truncate">
|
||
|
|
{availableKeys.find((k) => k.id === form.identityFileId)
|
||
|
|
?.label || "Key"}
|
||
|
|
</span>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-6 w-6 shrink-0"
|
||
|
|
onClick={() => {
|
||
|
|
setForm((previous: Host) => removeSelectedHostCredential(
|
||
|
|
previous,
|
||
|
|
effectiveAuthMethod,
|
||
|
|
effectiveUsername,
|
||
|
|
));
|
||
|
|
setPendingReferenceKeyPath(null);
|
||
|
|
setSelectedCredentialType(null);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<X size={12} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Credential type selection with inline popover - hidden when credential is selected */}
|
||
|
|
{!selectedIdentity &&
|
||
|
|
!form.identityFileId &&
|
||
|
|
!selectedCredentialType && (
|
||
|
|
<Popover
|
||
|
|
open={credentialPopoverOpen}
|
||
|
|
onOpenChange={setCredentialPopoverOpen}
|
||
|
|
>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors py-1"
|
||
|
|
>
|
||
|
|
<Plus size={12} />
|
||
|
|
<span>{t("hostDetails.credential.keyCertificate")}</span>
|
||
|
|
</button>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent
|
||
|
|
className="w-[200px] p-1"
|
||
|
|
align="start"
|
||
|
|
sideOffset={4}
|
||
|
|
>
|
||
|
|
<div className="space-y-0.5">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-secondary/80 transition-colors text-left"
|
||
|
|
onClick={() => {
|
||
|
|
setSelectedCredentialType("key");
|
||
|
|
setCredentialPopoverOpen(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Key size={16} className="text-muted-foreground" />
|
||
|
|
<span className="text-sm font-medium">
|
||
|
|
{t("hostDetails.credential.key")}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-secondary/80 transition-colors text-left"
|
||
|
|
onClick={() => {
|
||
|
|
setSelectedCredentialType("certificate");
|
||
|
|
setCredentialPopoverOpen(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Shield size={16} className="text-muted-foreground" />
|
||
|
|
<span className="text-sm font-medium">
|
||
|
|
{t("hostDetails.credential.certificate")}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-secondary/80 transition-colors text-left"
|
||
|
|
onClick={() => {
|
||
|
|
setSelectedCredentialType("localKeyFile");
|
||
|
|
setCredentialPopoverOpen(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<FileKey size={16} className="text-muted-foreground" />
|
||
|
|
<span className="text-sm font-medium">
|
||
|
|
{t("hostDetails.credential.localKeyFile")}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Key selection combobox - appears after selecting "Key" type */}
|
||
|
|
{!selectedIdentity &&
|
||
|
|
selectedCredentialType === "key" &&
|
||
|
|
!form.identityFileId && (
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Combobox
|
||
|
|
options={keysByCategory.key.map((k) => ({
|
||
|
|
value: k.id,
|
||
|
|
label: k.label,
|
||
|
|
sublabel: `${k.type}${k.keySize ? ` ${k.keySize}` : ""}`,
|
||
|
|
icon: <Key size={14} className="text-muted-foreground" />,
|
||
|
|
}))}
|
||
|
|
value={form.identityFileId}
|
||
|
|
onValueChange={(val) => {
|
||
|
|
update("identityFileId", val);
|
||
|
|
update("authMethod", "key");
|
||
|
|
update("identityFilePaths", undefined);
|
||
|
|
setPendingReferenceKeyPath(null);
|
||
|
|
setSelectedCredentialType(null);
|
||
|
|
}}
|
||
|
|
placeholder={t("hostDetails.keys.search")}
|
||
|
|
emptyText={t("hostDetails.keys.empty")}
|
||
|
|
icon={<Key size={14} className="text-muted-foreground" />}
|
||
|
|
className="flex-1"
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8 shrink-0"
|
||
|
|
onClick={() => setSelectedCredentialType(null)}
|
||
|
|
>
|
||
|
|
<X size={14} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Certificate selection combobox - appears after selecting "Certificate" type */}
|
||
|
|
{!selectedIdentity &&
|
||
|
|
selectedCredentialType === "certificate" &&
|
||
|
|
!form.identityFileId && (
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<Combobox
|
||
|
|
options={keysByCategory.certificate.map((k) => ({
|
||
|
|
value: k.id,
|
||
|
|
label: k.label,
|
||
|
|
icon: (
|
||
|
|
<Shield size={14} className="text-muted-foreground" />
|
||
|
|
),
|
||
|
|
}))}
|
||
|
|
value={form.identityFileId}
|
||
|
|
onValueChange={(val) => {
|
||
|
|
update("identityFileId", val);
|
||
|
|
update("authMethod", "certificate");
|
||
|
|
update("identityFilePaths", undefined);
|
||
|
|
setPendingReferenceKeyPath(null);
|
||
|
|
setSelectedCredentialType(null);
|
||
|
|
}}
|
||
|
|
placeholder={t("hostDetails.certs.search")}
|
||
|
|
emptyText={t("hostDetails.certs.empty")}
|
||
|
|
icon={
|
||
|
|
<Shield size={14} className="text-muted-foreground" />
|
||
|
|
}
|
||
|
|
className="flex-1"
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8 shrink-0"
|
||
|
|
onClick={() => setSelectedCredentialType(null)}
|
||
|
|
>
|
||
|
|
<X size={14} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Local key file path input - appears after selecting "Local Key File" type */}
|
||
|
|
{!selectedIdentity &&
|
||
|
|
selectedCredentialType === "localKeyFile" &&
|
||
|
|
!form.identityFileId && (
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
<div className="flex items-center gap-1 min-w-0">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="flex-1 min-w-0 h-8 px-2 text-xs font-mono bg-background border border-border/60 rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
|
||
|
|
placeholder={t("hostDetails.credential.localKeyFilePlaceholder")}
|
||
|
|
value={newKeyFilePath}
|
||
|
|
onChange={(e) => setNewKeyFilePath(e.target.value)}
|
||
|
|
onKeyDown={(e) => {
|
||
|
|
if (e.key === "Enter" && newKeyFilePath.trim()) {
|
||
|
|
e.preventDefault();
|
||
|
|
addLocalKeyFilePath(newKeyFilePath);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="secondary"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8 shrink-0"
|
||
|
|
onClick={async () => {
|
||
|
|
const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
|
||
|
|
if (!bridge?.selectFile) return;
|
||
|
|
const filePath = await bridge.selectFile(
|
||
|
|
"Select SSH Private Key",
|
||
|
|
undefined,
|
||
|
|
[{ name: "All Files", extensions: ["*"] }]
|
||
|
|
);
|
||
|
|
if (filePath) {
|
||
|
|
addLocalKeyFilePath(filePath);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<FolderOpen size={14} />
|
||
|
|
</Button>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent>{t("hostDetails.credential.browseKeyFile")}</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8 shrink-0"
|
||
|
|
onClick={() => {
|
||
|
|
setSelectedCredentialType(null);
|
||
|
|
setNewKeyFilePath("");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<X size={14} />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</HostDetailsSection>
|
||
|
|
|
||
|
|
<HostDetailsSection
|
||
|
|
icon={<FolderLock size={14} className="text-muted-foreground" />}
|
||
|
|
title={t("hostDetails.section.sftp")}
|
||
|
|
>
|
||
|
|
<HostDetailsSettingRow
|
||
|
|
label={t("hostDetails.sftp.fileProtocol")}
|
||
|
|
hint={t("hostDetails.sftp.fileProtocol.desc")}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={form.sftpFileProtocol || "auto"}
|
||
|
|
onValueChange={(val) => {
|
||
|
|
const protocol = val as Host["sftpFileProtocol"];
|
||
|
|
update("sftpFileProtocol", protocol);
|
||
|
|
// SCP mode has no sudo-sftp elevation path; clear a contradictory saved flag.
|
||
|
|
if (protocol === "scp" && form.sftpSudo) {
|
||
|
|
update("sftpSudo", false);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-8 w-32">
|
||
|
|
<SelectValue placeholder={t("hostDetails.sftp.fileProtocol.auto")} />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="auto">{t("hostDetails.sftp.fileProtocol.auto")}</SelectItem>
|
||
|
|
<SelectItem value="sftp">{t("hostDetails.sftp.fileProtocol.sftp")}</SelectItem>
|
||
|
|
<SelectItem value="scp">{t("hostDetails.sftp.fileProtocol.scp")}</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</HostDetailsSettingRow>
|
||
|
|
<HostDetailsSettingRow
|
||
|
|
label={t("hostDetails.sftp.sudo")}
|
||
|
|
hint={t("hostDetails.sftp.sudo.desc")}
|
||
|
|
>
|
||
|
|
<Switch
|
||
|
|
checked={form.sftpSudo || false}
|
||
|
|
onCheckedChange={(val) => update("sftpSudo", val)}
|
||
|
|
disabled={form.sftpFileProtocol === "scp"}
|
||
|
|
/>
|
||
|
|
</HostDetailsSettingRow>
|
||
|
|
{form.sftpSudo && !form.password && !selectedIdentity?.password && (
|
||
|
|
<p className="text-xs text-amber-500">
|
||
|
|
{t("hostDetails.sftp.sudo.passwordWarning")}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
<HostDetailsSettingRow
|
||
|
|
label={t("hostDetails.sftp.encoding")}
|
||
|
|
hint={t("hostDetails.sftp.encoding.desc")}
|
||
|
|
>
|
||
|
|
<Select
|
||
|
|
value={form.sftpEncoding || "auto"}
|
||
|
|
onValueChange={(val) => update("sftpEncoding", val as Host["sftpEncoding"])}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-8 w-32">
|
||
|
|
<SelectValue placeholder={t("sftp.encoding.label")} />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="auto">{t("sftp.encoding.auto")}</SelectItem>
|
||
|
|
<SelectItem value="utf-8">{t("sftp.encoding.utf8")}</SelectItem>
|
||
|
|
<SelectItem value="gb18030">{t("sftp.encoding.gb18030")}</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</HostDetailsSettingRow>
|
||
|
|
</HostDetailsSection>
|
||
|
|
|
||
|
|
<HostDetailsSection
|
||
|
|
icon={<Shapes size={14} className="text-muted-foreground" />}
|
||
|
|
title={t("hostDetails.icon.sectionTitle")}
|
||
|
|
hint={t("hostDetails.icon.desc")}
|
||
|
|
>
|
||
|
|
<HostIconPicker
|
||
|
|
previewHost={form as Host}
|
||
|
|
distroMode={form.distroMode}
|
||
|
|
manualDistro={form.manualDistro}
|
||
|
|
effectiveDistro={effectiveFormDistro}
|
||
|
|
distroOptions={distroOptions}
|
||
|
|
getDistroOptionLabel={getDistroOptionLabel}
|
||
|
|
iconMode={form.iconMode}
|
||
|
|
iconId={form.iconId}
|
||
|
|
iconColorMode={form.iconColorMode}
|
||
|
|
iconColor={form.iconColor}
|
||
|
|
iconColorCustom={form.iconColorCustom}
|
||
|
|
onChange={(next) => {
|
||
|
|
if ("distroMode" in next) update("distroMode", next.distroMode);
|
||
|
|
if ("manualDistro" in next) update("manualDistro", next.manualDistro);
|
||
|
|
if ("iconMode" in next) update("iconMode", next.iconMode);
|
||
|
|
if ("iconId" in next) update("iconId", next.iconId);
|
||
|
|
if ("iconColorMode" in next) update("iconColorMode", next.iconColorMode);
|
||
|
|
if ("iconColor" in next) update("iconColor", next.iconColor);
|
||
|
|
if ("iconColorCustom" in next) update("iconColorCustom", next.iconColorCustom);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</HostDetailsSection>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|