fix: add unnversiioned files
This commit is contained in:
LukeGus
@@ -0,0 +1,540 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Controller } from "react-hook-form";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/components/ui/form.tsx";
|
||||||
|
import { Button } from "@/components/ui/button.tsx";
|
||||||
|
import { PasswordInput } from "@/components/ui/password-input.tsx";
|
||||||
|
import {
|
||||||
|
Tabs,
|
||||||
|
TabsContent,
|
||||||
|
TabsList,
|
||||||
|
TabsTrigger,
|
||||||
|
} from "@/components/ui/tabs.tsx";
|
||||||
|
import CodeMirror from "@uiw/react-codemirror";
|
||||||
|
import { EditorView } from "@codemirror/view";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import type { Control, UseFormWatch, UseFormSetValue } from "react-hook-form";
|
||||||
|
|
||||||
|
interface CredentialAuthenticationTabProps {
|
||||||
|
control: Control<any>;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
setValue: UseFormSetValue<any>;
|
||||||
|
authTab: "password" | "key";
|
||||||
|
setAuthTab: (tab: "password" | "key") => void;
|
||||||
|
editorTheme: any;
|
||||||
|
detectedKeyType: string | null;
|
||||||
|
keyDetectionLoading: boolean;
|
||||||
|
detectedPublicKeyType: string | null;
|
||||||
|
publicKeyDetectionLoading: boolean;
|
||||||
|
debouncedKeyDetection: (keyValue: string, keyPassword?: string) => void;
|
||||||
|
debouncedPublicKeyDetection: (publicKeyValue: string) => void;
|
||||||
|
generateKeyPair: (
|
||||||
|
type: string,
|
||||||
|
bits?: number,
|
||||||
|
passphrase?: string,
|
||||||
|
) => Promise<{
|
||||||
|
success: boolean;
|
||||||
|
privateKey: string;
|
||||||
|
publicKey: string;
|
||||||
|
error?: string;
|
||||||
|
}>;
|
||||||
|
generatePublicKeyFromPrivate: (
|
||||||
|
privateKey: string,
|
||||||
|
passphrase?: string,
|
||||||
|
) => Promise<{ success: boolean; publicKey?: string; error?: string }>;
|
||||||
|
getFriendlyKeyTypeName: (keyType: string) => string;
|
||||||
|
t: (key: string, params?: any) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CredentialAuthenticationTab({
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
setValue,
|
||||||
|
authTab,
|
||||||
|
setAuthTab,
|
||||||
|
editorTheme,
|
||||||
|
detectedKeyType,
|
||||||
|
keyDetectionLoading,
|
||||||
|
detectedPublicKeyType,
|
||||||
|
publicKeyDetectionLoading,
|
||||||
|
debouncedKeyDetection,
|
||||||
|
debouncedPublicKeyDetection,
|
||||||
|
generateKeyPair,
|
||||||
|
generatePublicKeyFromPrivate,
|
||||||
|
getFriendlyKeyTypeName,
|
||||||
|
t,
|
||||||
|
}: CredentialAuthenticationTabProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FormLabel className="mb-2 font-bold">
|
||||||
|
{t("credentials.authentication")}
|
||||||
|
</FormLabel>
|
||||||
|
<Tabs
|
||||||
|
value={authTab}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
const newAuthType = value as "password" | "key";
|
||||||
|
setAuthTab(newAuthType);
|
||||||
|
setValue("authType", newAuthType);
|
||||||
|
|
||||||
|
setValue("password", "");
|
||||||
|
setValue("key", null);
|
||||||
|
setValue("keyPassword", "");
|
||||||
|
setValue("keyType", "auto");
|
||||||
|
}}
|
||||||
|
className="flex-1 flex flex-col h-full min-h-0"
|
||||||
|
>
|
||||||
|
<TabsList className="bg-button border border-edge-medium">
|
||||||
|
<TabsTrigger
|
||||||
|
value="password"
|
||||||
|
className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium"
|
||||||
|
>
|
||||||
|
{t("credentials.password")}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="key"
|
||||||
|
className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium"
|
||||||
|
>
|
||||||
|
{t("credentials.key")}
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<TabsContent value="password">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("credentials.password")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<PasswordInput
|
||||||
|
placeholder={t("placeholders.password")}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="key">
|
||||||
|
<div className="mt-2">
|
||||||
|
<div className="mb-3 p-3 border border-muted rounded-md">
|
||||||
|
<FormLabel className="mb-2 font-bold block">
|
||||||
|
{t("credentials.generateKeyPair")}
|
||||||
|
</FormLabel>
|
||||||
|
|
||||||
|
<div className="mb-2">
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
{t("credentials.generateKeyPairDescription")}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2 flex-wrap">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
const currentKeyPassword = watch("keyPassword");
|
||||||
|
const result = await generateKeyPair(
|
||||||
|
"ssh-ed25519",
|
||||||
|
undefined,
|
||||||
|
currentKeyPassword,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setValue("key", result.privateKey);
|
||||||
|
setValue("publicKey", result.publicKey);
|
||||||
|
debouncedKeyDetection(
|
||||||
|
result.privateKey,
|
||||||
|
currentKeyPassword,
|
||||||
|
);
|
||||||
|
debouncedPublicKeyDetection(result.publicKey);
|
||||||
|
toast.success(
|
||||||
|
t("credentials.keyPairGeneratedSuccessfully", {
|
||||||
|
keyType: "Ed25519",
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
toast.error(
|
||||||
|
result.error ||
|
||||||
|
t("credentials.failedToGenerateKeyPair"),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
"Failed to generate Ed25519 key pair:",
|
||||||
|
error,
|
||||||
|
);
|
||||||
|
toast.error(t("credentials.failedToGenerateKeyPair"));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("credentials.generateEd25519")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
const currentKeyPassword = watch("keyPassword");
|
||||||
|
const result = await generateKeyPair(
|
||||||
|
"ecdsa-sha2-nistp256",
|
||||||
|
undefined,
|
||||||
|
currentKeyPassword,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setValue("key", result.privateKey);
|
||||||
|
setValue("publicKey", result.publicKey);
|
||||||
|
debouncedKeyDetection(
|
||||||
|
result.privateKey,
|
||||||
|
currentKeyPassword,
|
||||||
|
);
|
||||||
|
debouncedPublicKeyDetection(result.publicKey);
|
||||||
|
toast.success(
|
||||||
|
t("credentials.keyPairGeneratedSuccessfully", {
|
||||||
|
keyType: "ECDSA",
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
toast.error(
|
||||||
|
result.error ||
|
||||||
|
t("credentials.failedToGenerateKeyPair"),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
"Failed to generate ECDSA key pair:",
|
||||||
|
error,
|
||||||
|
);
|
||||||
|
toast.error(t("credentials.failedToGenerateKeyPair"));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("credentials.generateECDSA")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
const currentKeyPassword = watch("keyPassword");
|
||||||
|
const result = await generateKeyPair(
|
||||||
|
"ssh-rsa",
|
||||||
|
2048,
|
||||||
|
currentKeyPassword,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setValue("key", result.privateKey);
|
||||||
|
setValue("publicKey", result.publicKey);
|
||||||
|
debouncedKeyDetection(
|
||||||
|
result.privateKey,
|
||||||
|
currentKeyPassword,
|
||||||
|
);
|
||||||
|
debouncedPublicKeyDetection(result.publicKey);
|
||||||
|
toast.success(
|
||||||
|
t("credentials.keyPairGeneratedSuccessfully", {
|
||||||
|
keyType: "RSA",
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
toast.error(
|
||||||
|
result.error ||
|
||||||
|
t("credentials.failedToGenerateKeyPair"),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to generate RSA key pair:", error);
|
||||||
|
toast.error(t("credentials.failedToGenerateKeyPair"));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("credentials.generateRSA")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3 items-start">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="key"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="mb-3 flex flex-col">
|
||||||
|
<FormLabel className="mb-1 min-h-[20px]">
|
||||||
|
{t("credentials.sshPrivateKey")}
|
||||||
|
</FormLabel>
|
||||||
|
<div className="mb-1">
|
||||||
|
<div className="relative inline-block w-full">
|
||||||
|
<input
|
||||||
|
id="key-upload"
|
||||||
|
type="file"
|
||||||
|
accept="*,.pem,.key,.txt,.ppk"
|
||||||
|
onChange={async (e) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
try {
|
||||||
|
const fileContent = await file.text();
|
||||||
|
field.onChange(fileContent);
|
||||||
|
debouncedKeyDetection(
|
||||||
|
fileContent,
|
||||||
|
watch("keyPassword"),
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
"Failed to read uploaded file:",
|
||||||
|
error,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
className="w-full justify-start text-left"
|
||||||
|
>
|
||||||
|
<span className="truncate">
|
||||||
|
{t("credentials.uploadPrivateKeyFile")}
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<CodeMirror
|
||||||
|
value={
|
||||||
|
typeof field.value === "string" ? field.value : ""
|
||||||
|
}
|
||||||
|
onChange={(value) => {
|
||||||
|
field.onChange(value);
|
||||||
|
debouncedKeyDetection(value, watch("keyPassword"));
|
||||||
|
}}
|
||||||
|
placeholder={t("placeholders.pastePrivateKey")}
|
||||||
|
theme={editorTheme}
|
||||||
|
className="border border-input rounded-md overflow-hidden"
|
||||||
|
minHeight="120px"
|
||||||
|
basicSetup={{
|
||||||
|
lineNumbers: true,
|
||||||
|
foldGutter: false,
|
||||||
|
dropCursor: false,
|
||||||
|
allowMultipleSelections: false,
|
||||||
|
highlightSelectionMatches: false,
|
||||||
|
searchKeymap: false,
|
||||||
|
scrollPastEnd: false,
|
||||||
|
}}
|
||||||
|
extensions={[
|
||||||
|
EditorView.theme({
|
||||||
|
".cm-scroller": {
|
||||||
|
overflow: "auto",
|
||||||
|
scrollbarWidth: "thin",
|
||||||
|
scrollbarColor:
|
||||||
|
"var(--scrollbar-thumb) var(--scrollbar-track)",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
{detectedKeyType && (
|
||||||
|
<div className="text-sm mt-2">
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{t("credentials.detectedKeyType")}:{" "}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`font-medium ${
|
||||||
|
detectedKeyType === "invalid" ||
|
||||||
|
detectedKeyType === "error"
|
||||||
|
? "text-destructive"
|
||||||
|
: "text-green-600"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{getFriendlyKeyTypeName(detectedKeyType)}
|
||||||
|
</span>
|
||||||
|
{keyDetectionLoading && (
|
||||||
|
<span className="ml-2 text-muted-foreground">
|
||||||
|
({t("credentials.detectingKeyType")})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="publicKey"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="mb-3 flex flex-col">
|
||||||
|
<FormLabel className="mb-1 min-h-[20px]">
|
||||||
|
{t("credentials.sshPublicKey")}
|
||||||
|
</FormLabel>
|
||||||
|
<div className="mb-1 flex gap-2">
|
||||||
|
<div className="relative inline-block flex-1">
|
||||||
|
<input
|
||||||
|
id="public-key-upload"
|
||||||
|
type="file"
|
||||||
|
accept="*,.pub,.txt"
|
||||||
|
onChange={async (e) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
try {
|
||||||
|
const fileContent = await file.text();
|
||||||
|
field.onChange(fileContent);
|
||||||
|
debouncedPublicKeyDetection(fileContent);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
"Failed to read uploaded public key file:",
|
||||||
|
error,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
className="w-full justify-start text-left"
|
||||||
|
>
|
||||||
|
<span className="truncate">
|
||||||
|
{t("credentials.uploadPublicKeyFile")}
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
className="flex-shrink-0"
|
||||||
|
onClick={async () => {
|
||||||
|
const privateKey = watch("key");
|
||||||
|
if (
|
||||||
|
!privateKey ||
|
||||||
|
typeof privateKey !== "string" ||
|
||||||
|
!privateKey.trim()
|
||||||
|
) {
|
||||||
|
toast.error(
|
||||||
|
t("credentials.privateKeyRequiredForGeneration"),
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const keyPassword = watch("keyPassword");
|
||||||
|
const result = await generatePublicKeyFromPrivate(
|
||||||
|
privateKey,
|
||||||
|
keyPassword,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (result.success && result.publicKey) {
|
||||||
|
field.onChange(result.publicKey);
|
||||||
|
debouncedPublicKeyDetection(result.publicKey);
|
||||||
|
|
||||||
|
toast.success(
|
||||||
|
t("credentials.publicKeyGeneratedSuccessfully"),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
toast.error(
|
||||||
|
result.error ||
|
||||||
|
t("credentials.failedToGeneratePublicKey"),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(
|
||||||
|
"Failed to generate public key:",
|
||||||
|
error,
|
||||||
|
);
|
||||||
|
toast.error(
|
||||||
|
t("credentials.failedToGeneratePublicKey"),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("credentials.generatePublicKey")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<CodeMirror
|
||||||
|
value={field.value || ""}
|
||||||
|
onChange={(value) => {
|
||||||
|
field.onChange(value);
|
||||||
|
debouncedPublicKeyDetection(value);
|
||||||
|
}}
|
||||||
|
placeholder={t("placeholders.pastePublicKey")}
|
||||||
|
theme={editorTheme}
|
||||||
|
className="border border-input rounded-md overflow-hidden"
|
||||||
|
minHeight="120px"
|
||||||
|
basicSetup={{
|
||||||
|
lineNumbers: true,
|
||||||
|
foldGutter: false,
|
||||||
|
dropCursor: false,
|
||||||
|
allowMultipleSelections: false,
|
||||||
|
highlightSelectionMatches: false,
|
||||||
|
searchKeymap: false,
|
||||||
|
scrollPastEnd: false,
|
||||||
|
}}
|
||||||
|
extensions={[
|
||||||
|
EditorView.theme({
|
||||||
|
".cm-scroller": {
|
||||||
|
overflow: "auto",
|
||||||
|
scrollbarWidth: "thin",
|
||||||
|
scrollbarColor:
|
||||||
|
"var(--scrollbar-thumb) var(--scrollbar-track)",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
{detectedPublicKeyType && field.value && (
|
||||||
|
<div className="text-sm mt-2">
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{t("credentials.detectedKeyType")}:{" "}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`font-medium ${
|
||||||
|
detectedPublicKeyType === "invalid" ||
|
||||||
|
detectedPublicKeyType === "error"
|
||||||
|
? "text-destructive"
|
||||||
|
: "text-green-600"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{getFriendlyKeyTypeName(detectedPublicKeyType)}
|
||||||
|
</span>
|
||||||
|
{publicKeyDetectionLoading && (
|
||||||
|
<span className="ml-2 text-muted-foreground">
|
||||||
|
({t("credentials.detectingKeyType")})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-8 gap-3 mt-3">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="keyPassword"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-8">
|
||||||
|
<FormLabel>{t("credentials.keyPassword")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<PasswordInput
|
||||||
|
placeholder={t("placeholders.keyPassword")}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,237 @@
|
|||||||
|
import React, { useRef, useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/components/ui/form.tsx";
|
||||||
|
import { Input } from "@/components/ui/input.tsx";
|
||||||
|
import { Button } from "@/components/ui/button.tsx";
|
||||||
|
import type { Control, UseFormWatch } from "react-hook-form";
|
||||||
|
|
||||||
|
interface CredentialGeneralTabProps {
|
||||||
|
control: Control<any>;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
folders: string[];
|
||||||
|
t: (key: string, params?: any) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CredentialGeneralTab({
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
folders,
|
||||||
|
t,
|
||||||
|
}: CredentialGeneralTabProps) {
|
||||||
|
const [tagInput, setTagInput] = useState("");
|
||||||
|
const [folderDropdownOpen, setFolderDropdownOpen] = useState(false);
|
||||||
|
const folderInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const folderDropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const folderValue = watch("folder");
|
||||||
|
const filteredFolders = React.useMemo(() => {
|
||||||
|
if (!folderValue) return folders;
|
||||||
|
return folders.filter((f) =>
|
||||||
|
f.toLowerCase().includes(folderValue.toLowerCase()),
|
||||||
|
);
|
||||||
|
}, [folderValue, folders]);
|
||||||
|
|
||||||
|
const handleFolderClick = (
|
||||||
|
folder: string,
|
||||||
|
onChange: (value: string) => void,
|
||||||
|
) => {
|
||||||
|
onChange(folder);
|
||||||
|
setFolderDropdownOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function handleClickOutside(event: MouseEvent) {
|
||||||
|
if (
|
||||||
|
folderDropdownRef.current &&
|
||||||
|
!folderDropdownRef.current.contains(event.target as Node) &&
|
||||||
|
folderInputRef.current &&
|
||||||
|
!folderInputRef.current.contains(event.target as Node)
|
||||||
|
) {
|
||||||
|
setFolderDropdownOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (folderDropdownOpen) {
|
||||||
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
|
} else {
|
||||||
|
document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [folderDropdownOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FormLabel className="mb-2 font-bold">
|
||||||
|
{t("credentials.basicInformation")}
|
||||||
|
</FormLabel>
|
||||||
|
<div className="grid grid-cols-12 gap-3">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-6">
|
||||||
|
<FormLabel>{t("credentials.credentialName")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("placeholders.credentialName")}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="username"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-6">
|
||||||
|
<FormLabel>{t("credentials.username")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder={t("placeholders.username")} {...field} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FormLabel className="mb-2 mt-4 font-bold">
|
||||||
|
{t("credentials.organization")}
|
||||||
|
</FormLabel>
|
||||||
|
<div className="grid grid-cols-26 gap-3">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="description"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-10">
|
||||||
|
<FormLabel>{t("credentials.description")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder={t("placeholders.description")} {...field} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="folder"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-10 relative">
|
||||||
|
<FormLabel>{t("credentials.folder")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
ref={folderInputRef}
|
||||||
|
placeholder={t("placeholders.folder")}
|
||||||
|
className="min-h-[40px]"
|
||||||
|
autoComplete="off"
|
||||||
|
value={field.value}
|
||||||
|
onFocus={() => setFolderDropdownOpen(true)}
|
||||||
|
onChange={(e) => {
|
||||||
|
field.onChange(e);
|
||||||
|
setFolderDropdownOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
{folderDropdownOpen && filteredFolders.length > 0 && (
|
||||||
|
<div
|
||||||
|
ref={folderDropdownRef}
|
||||||
|
className="absolute top-full left-0 z-50 mt-1 w-full bg-canvas border border-input rounded-md shadow-lg max-h-40 overflow-y-auto thin-scrollbar p-1"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 gap-1 p-0">
|
||||||
|
{filteredFolders.map((folder) => (
|
||||||
|
<Button
|
||||||
|
key={folder}
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
|
||||||
|
onClick={() =>
|
||||||
|
handleFolderClick(folder, field.onChange)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{folder}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="tags"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-10 overflow-visible">
|
||||||
|
<FormLabel>{t("credentials.tags")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="flex flex-wrap items-center gap-1 border border-input rounded-md px-3 py-2 bg-field focus-within:ring-2 ring-ring min-h-[40px]">
|
||||||
|
{(field.value || []).map((tag: string, idx: number) => (
|
||||||
|
<span
|
||||||
|
key={`${tag}-${idx}`}
|
||||||
|
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
const newTags = (field.value || []).filter(
|
||||||
|
(_: string, i: number) => i !== idx,
|
||||||
|
);
|
||||||
|
field.onChange(newTags);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="flex-1 min-w-[60px] border-none outline-none bg-transparent text-foreground placeholder:text-muted-foreground p-0 h-6 text-sm"
|
||||||
|
value={tagInput}
|
||||||
|
onChange={(e) => setTagInput(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === " " && tagInput.trim() !== "") {
|
||||||
|
e.preventDefault();
|
||||||
|
const currentTags = field.value || [];
|
||||||
|
if (!currentTags.includes(tagInput.trim())) {
|
||||||
|
field.onChange([...currentTags, tagInput.trim()]);
|
||||||
|
}
|
||||||
|
setTagInput("");
|
||||||
|
} else if (e.key === "Enter" && tagInput.trim() !== "") {
|
||||||
|
e.preventDefault();
|
||||||
|
const currentTags = field.value || [];
|
||||||
|
if (!currentTags.includes(tagInput.trim())) {
|
||||||
|
field.onChange([...currentTags, tagInput.trim()]);
|
||||||
|
}
|
||||||
|
setTagInput("");
|
||||||
|
} else if (
|
||||||
|
e.key === "Backspace" &&
|
||||||
|
tagInput === "" &&
|
||||||
|
(field.value || []).length > 0
|
||||||
|
) {
|
||||||
|
const currentTags = field.value || [];
|
||||||
|
field.onChange(currentTags.slice(0, -1));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder={t("credentials.addTagsSpaceToAdd")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,349 @@
|
|||||||
|
import React, { useRef, useState, useEffect } from "react";
|
||||||
|
import { Controller } from "react-hook-form";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/components/ui/form.tsx";
|
||||||
|
import { Button } from "@/components/ui/button.tsx";
|
||||||
|
import { Switch } from "@/components/ui/switch.tsx";
|
||||||
|
import { PasswordInput } from "@/components/ui/password-input.tsx";
|
||||||
|
import { Alert, AlertDescription } from "@/components/ui/alert.tsx";
|
||||||
|
import {
|
||||||
|
Tabs,
|
||||||
|
TabsContent,
|
||||||
|
TabsList,
|
||||||
|
TabsTrigger,
|
||||||
|
} from "@/components/ui/tabs.tsx";
|
||||||
|
import CodeMirror from "@uiw/react-codemirror";
|
||||||
|
import { EditorView } from "@codemirror/view";
|
||||||
|
import { CredentialSelector } from "@/ui/desktop/apps/host-manager/credentials/CredentialSelector.tsx";
|
||||||
|
import type { HostAuthenticationSectionProps } from "./shared/tab-types";
|
||||||
|
|
||||||
|
export function HostAuthenticationSection({
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
setValue,
|
||||||
|
credentials,
|
||||||
|
authTab,
|
||||||
|
setAuthTab,
|
||||||
|
keyInputMethod,
|
||||||
|
setKeyInputMethod,
|
||||||
|
editorTheme,
|
||||||
|
editingHost,
|
||||||
|
t,
|
||||||
|
}: HostAuthenticationSectionProps) {
|
||||||
|
const [keyTypeDropdownOpen, setKeyTypeDropdownOpen] = useState(false);
|
||||||
|
const keyTypeButtonRef = useRef<HTMLButtonElement>(null);
|
||||||
|
const keyTypeDropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const keyTypeOptions = [
|
||||||
|
{ value: "auto", label: t("hosts.autoDetect") },
|
||||||
|
{ value: "ssh-rsa", label: t("hosts.rsa") },
|
||||||
|
{ value: "ssh-ed25519", label: t("hosts.ed25519") },
|
||||||
|
{ value: "ecdsa-sha2-nistp256", label: t("hosts.ecdsaNistP256") },
|
||||||
|
{ value: "ecdsa-sha2-nistp384", label: t("hosts.ecdsaNistP384") },
|
||||||
|
{ value: "ecdsa-sha2-nistp521", label: t("hosts.ecdsaNistP521") },
|
||||||
|
{ value: "ssh-dss", label: t("hosts.dsa") },
|
||||||
|
{ value: "ssh-rsa-sha2-256", label: t("hosts.rsaSha2256") },
|
||||||
|
{ value: "ssh-rsa-sha2-512", label: t("hosts.rsaSha2512") },
|
||||||
|
];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function onClickOutside(event: MouseEvent) {
|
||||||
|
if (
|
||||||
|
keyTypeDropdownOpen &&
|
||||||
|
keyTypeDropdownRef.current &&
|
||||||
|
!keyTypeDropdownRef.current.contains(event.target as Node) &&
|
||||||
|
keyTypeButtonRef.current &&
|
||||||
|
!keyTypeButtonRef.current.contains(event.target as Node)
|
||||||
|
) {
|
||||||
|
setKeyTypeDropdownOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("mousedown", onClickOutside);
|
||||||
|
return () => document.removeEventListener("mousedown", onClickOutside);
|
||||||
|
}, [keyTypeDropdownOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tabs
|
||||||
|
value={authTab}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
const newAuthType = value as "password" | "key" | "credential" | "none";
|
||||||
|
setAuthTab(newAuthType);
|
||||||
|
setValue("authType", newAuthType);
|
||||||
|
}}
|
||||||
|
className="flex-1 flex flex-col h-full min-h-0"
|
||||||
|
>
|
||||||
|
<TabsList className="bg-button border border-edge-medium">
|
||||||
|
<TabsTrigger
|
||||||
|
value="password"
|
||||||
|
className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium"
|
||||||
|
>
|
||||||
|
{t("hosts.password")}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="key"
|
||||||
|
className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium"
|
||||||
|
>
|
||||||
|
{t("hosts.key")}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="credential"
|
||||||
|
className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium"
|
||||||
|
>
|
||||||
|
{t("hosts.credential")}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="none"
|
||||||
|
className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium"
|
||||||
|
>
|
||||||
|
{t("hosts.none")}
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<TabsContent value="password">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.password")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<PasswordInput
|
||||||
|
placeholder={t("placeholders.password")}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="key">
|
||||||
|
<Tabs
|
||||||
|
value={keyInputMethod}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setKeyInputMethod(value as "upload" | "paste");
|
||||||
|
if (value === "upload") {
|
||||||
|
setValue("key", null);
|
||||||
|
} else {
|
||||||
|
setValue("key", "");
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<TabsList className="inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground">
|
||||||
|
<TabsTrigger value="upload">{t("hosts.uploadFile")}</TabsTrigger>
|
||||||
|
<TabsTrigger value="paste">{t("hosts.pasteKey")}</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<TabsContent value="upload" className="mt-4">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="key"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="mb-4">
|
||||||
|
<FormLabel>{t("hosts.sshPrivateKey")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="relative inline-block">
|
||||||
|
<input
|
||||||
|
id="key-upload"
|
||||||
|
type="file"
|
||||||
|
accept=".pem,.key,.txt,.ppk"
|
||||||
|
onChange={(e) => {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
field.onChange(file || null);
|
||||||
|
}}
|
||||||
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
className="justify-start text-left"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="truncate"
|
||||||
|
title={
|
||||||
|
(field.value as File)?.name || t("hosts.upload")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{field.value === "existing_key"
|
||||||
|
? t("hosts.existingKey")
|
||||||
|
: field.value
|
||||||
|
? editingHost
|
||||||
|
? t("hosts.updateKey")
|
||||||
|
: (field.value as File).name
|
||||||
|
: t("hosts.upload")}
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="paste" className="mt-4">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="key"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="mb-4">
|
||||||
|
<FormLabel>{t("hosts.sshPrivateKey")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<CodeMirror
|
||||||
|
value={typeof field.value === "string" ? field.value : ""}
|
||||||
|
onChange={(value) => field.onChange(value)}
|
||||||
|
placeholder={t("placeholders.pastePrivateKey")}
|
||||||
|
theme={editorTheme}
|
||||||
|
className="border border-input rounded-md overflow-hidden"
|
||||||
|
minHeight="120px"
|
||||||
|
basicSetup={{
|
||||||
|
lineNumbers: true,
|
||||||
|
foldGutter: false,
|
||||||
|
dropCursor: false,
|
||||||
|
allowMultipleSelections: false,
|
||||||
|
highlightSelectionMatches: false,
|
||||||
|
}}
|
||||||
|
extensions={[
|
||||||
|
EditorView.theme({
|
||||||
|
".cm-scroller": {
|
||||||
|
overflow: "auto",
|
||||||
|
scrollbarWidth: "thin",
|
||||||
|
scrollbarColor:
|
||||||
|
"var(--scrollbar-thumb) var(--scrollbar-track)",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
<div className="grid grid-cols-15 gap-4 mt-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="keyPassword"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-8">
|
||||||
|
<FormLabel>{t("hosts.keyPassword")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<PasswordInput
|
||||||
|
placeholder={t("placeholders.keyPassword")}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="keyType"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="relative col-span-3">
|
||||||
|
<FormLabel>{t("hosts.keyType")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="relative">
|
||||||
|
<Button
|
||||||
|
ref={keyTypeButtonRef}
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
className="w-full justify-start text-left rounded-md px-2 py-2 bg-canvas border border-input text-foreground"
|
||||||
|
onClick={() => setKeyTypeDropdownOpen((open) => !open)}
|
||||||
|
>
|
||||||
|
{keyTypeOptions.find((opt) => opt.value === field.value)
|
||||||
|
?.label || t("hosts.autoDetect")}
|
||||||
|
</Button>
|
||||||
|
{keyTypeDropdownOpen && (
|
||||||
|
<div
|
||||||
|
ref={keyTypeDropdownRef}
|
||||||
|
className="absolute bottom-full left-0 z-50 mb-1 w-full bg-canvas border border-input rounded-md shadow-lg max-h-40 overflow-y-auto thin-scrollbar p-1"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 gap-1 p-0">
|
||||||
|
{keyTypeOptions.map((opt) => (
|
||||||
|
<Button
|
||||||
|
key={opt.value}
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-white/15 focus:bg-white/20 focus:outline-none"
|
||||||
|
onClick={() => {
|
||||||
|
field.onChange(opt.value);
|
||||||
|
setKeyTypeDropdownOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{opt.label}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="credential">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="credentialId"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<CredentialSelector
|
||||||
|
value={field.value}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
onCredentialSelect={(credential) => {
|
||||||
|
if (credential && !watch("overrideCredentialUsername")) {
|
||||||
|
setValue("username", credential.username);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.credentialDescription")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{watch("credentialId") && (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="overrideCredentialUsername"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.overrideCredentialUsername")}
|
||||||
|
</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.overrideCredentialUsernameDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="none">
|
||||||
|
<Alert className="mt-2">
|
||||||
|
<AlertDescription>
|
||||||
|
<strong>{t("hosts.noneAuthTitle")}</strong>
|
||||||
|
<div className="mt-2">{t("hosts.noneAuthDescription")}</div>
|
||||||
|
<div className="mt-2 text-sm">{t("hosts.noneAuthDetails")}</div>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/components/ui/form.tsx";
|
||||||
|
import { Switch } from "@/components/ui/switch.tsx";
|
||||||
|
import type { HostDockerTabProps } from "./shared/tab-types";
|
||||||
|
|
||||||
|
export function HostDockerTab({ control, t }: HostDockerTabProps) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="enableDocker"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.enableDocker")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>{t("hosts.enableDockerDesc")}</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/components/ui/form.tsx";
|
||||||
|
import { Switch } from "@/components/ui/switch.tsx";
|
||||||
|
import { Input } from "@/components/ui/input.tsx";
|
||||||
|
import type { HostFileManagerTabProps } from "./shared/tab-types";
|
||||||
|
|
||||||
|
export function HostFileManagerTab({
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
t,
|
||||||
|
}: HostFileManagerTabProps) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="enableFileManager"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.enableFileManager")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.enableFileManagerDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{watch("enableFileManager") && (
|
||||||
|
<div className="mt-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="defaultPath"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.defaultPath")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("placeholders.homePath")}
|
||||||
|
{...field}
|
||||||
|
onBlur={(e) => {
|
||||||
|
field.onChange(e.target.value.trim());
|
||||||
|
field.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>{t("hosts.defaultPathDesc")}</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
785
src/ui/desktop/apps/host-manager/hosts/tabs/HostGeneralTab.tsx
Normal file
785
src/ui/desktop/apps/host-manager/hosts/tabs/HostGeneralTab.tsx
Normal file
@@ -0,0 +1,785 @@
|
|||||||
|
import React, { useRef, useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/components/ui/form.tsx";
|
||||||
|
import { Input } from "@/components/ui/input.tsx";
|
||||||
|
import { Button } from "@/components/ui/button.tsx";
|
||||||
|
import { Switch } from "@/components/ui/switch.tsx";
|
||||||
|
import { Textarea } from "@/components/ui/textarea.tsx";
|
||||||
|
import { Separator } from "@/components/ui/separator.tsx";
|
||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionContent,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionTrigger,
|
||||||
|
} from "@/components/ui/accordion.tsx";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select.tsx";
|
||||||
|
import { Alert, AlertDescription } from "@/components/ui/alert.tsx";
|
||||||
|
import { Plus, X } from "lucide-react";
|
||||||
|
import { PasswordInput } from "@/components/ui/password-input.tsx";
|
||||||
|
import { JumpHostItem } from "./shared/JumpHostItem.tsx";
|
||||||
|
import { HostAuthenticationSection } from "./HostAuthenticationSection.tsx";
|
||||||
|
import type { HostGeneralTabProps } from "./shared/tab-types";
|
||||||
|
|
||||||
|
export function HostGeneralTab({
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
setValue,
|
||||||
|
getValues,
|
||||||
|
hosts,
|
||||||
|
credentials,
|
||||||
|
folders,
|
||||||
|
snippets,
|
||||||
|
editorTheme,
|
||||||
|
editingHost,
|
||||||
|
authTab,
|
||||||
|
setAuthTab,
|
||||||
|
keyInputMethod,
|
||||||
|
setKeyInputMethod,
|
||||||
|
proxyMode,
|
||||||
|
setProxyMode,
|
||||||
|
ipInputRef,
|
||||||
|
t,
|
||||||
|
}: HostGeneralTabProps) {
|
||||||
|
const [tagInput, setTagInput] = useState("");
|
||||||
|
const [folderDropdownOpen, setFolderDropdownOpen] = useState(false);
|
||||||
|
const folderInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const folderDropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const folderValue = watch("folder");
|
||||||
|
const filteredFolders = React.useMemo(() => {
|
||||||
|
if (!folderValue) return folders;
|
||||||
|
return folders.filter((f) =>
|
||||||
|
f.toLowerCase().includes(folderValue.toLowerCase()),
|
||||||
|
);
|
||||||
|
}, [folderValue, folders]);
|
||||||
|
|
||||||
|
const handleFolderClick = (folder: string) => {
|
||||||
|
setValue("folder", folder);
|
||||||
|
setFolderDropdownOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function handleClickOutside(event: MouseEvent) {
|
||||||
|
if (
|
||||||
|
folderDropdownRef.current &&
|
||||||
|
!folderDropdownRef.current.contains(event.target as Node) &&
|
||||||
|
folderInputRef.current &&
|
||||||
|
!folderInputRef.current.contains(event.target as Node)
|
||||||
|
) {
|
||||||
|
setFolderDropdownOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (folderDropdownOpen) {
|
||||||
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
|
} else {
|
||||||
|
document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [folderDropdownOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FormLabel className="mb-3 font-bold">
|
||||||
|
{t("hosts.connectionDetails")}
|
||||||
|
</FormLabel>
|
||||||
|
<div className="grid grid-cols-12 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="ip"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-5">
|
||||||
|
<FormLabel>{t("hosts.ipAddress")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("placeholders.ipAddress")}
|
||||||
|
{...field}
|
||||||
|
ref={(e) => {
|
||||||
|
field.ref(e);
|
||||||
|
if (ipInputRef?.current) {
|
||||||
|
ipInputRef.current = e;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onBlur={(e) => {
|
||||||
|
field.onChange(e.target.value.trim());
|
||||||
|
field.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="port"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-1">
|
||||||
|
<FormLabel>{t("hosts.port")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder={t("placeholders.port")} {...field} />
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="username"
|
||||||
|
render={({ field }) => {
|
||||||
|
const isCredentialAuth = authTab === "credential";
|
||||||
|
const hasCredential = !!watch("credentialId");
|
||||||
|
const overrideEnabled = !!watch("overrideCredentialUsername");
|
||||||
|
const shouldDisable =
|
||||||
|
isCredentialAuth && hasCredential && !overrideEnabled;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItem className="col-span-6">
|
||||||
|
<FormLabel>{t("hosts.username")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("placeholders.username")}
|
||||||
|
disabled={shouldDisable}
|
||||||
|
{...field}
|
||||||
|
onBlur={(e) => {
|
||||||
|
field.onChange(e.target.value.trim());
|
||||||
|
field.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FormLabel className="mb-3 mt-3 font-bold">
|
||||||
|
{t("hosts.organization")}
|
||||||
|
</FormLabel>
|
||||||
|
<div className="grid grid-cols-26 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-10">
|
||||||
|
<FormLabel>{t("hosts.name")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("placeholders.hostname")}
|
||||||
|
{...field}
|
||||||
|
onBlur={(e) => {
|
||||||
|
field.onChange(e.target.value.trim());
|
||||||
|
field.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="folder"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-10 relative">
|
||||||
|
<FormLabel>{t("hosts.folder")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
ref={folderInputRef}
|
||||||
|
placeholder={t("placeholders.folder")}
|
||||||
|
className="min-h-[40px]"
|
||||||
|
autoComplete="off"
|
||||||
|
value={field.value}
|
||||||
|
onFocus={() => setFolderDropdownOpen(true)}
|
||||||
|
onChange={(e) => {
|
||||||
|
field.onChange(e);
|
||||||
|
setFolderDropdownOpen(true);
|
||||||
|
}}
|
||||||
|
onBlur={(e) => {
|
||||||
|
field.onChange(e.target.value.trim());
|
||||||
|
field.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
{folderDropdownOpen && filteredFolders.length > 0 && (
|
||||||
|
<div
|
||||||
|
ref={folderDropdownRef}
|
||||||
|
className="absolute top-full left-0 z-50 mt-1 w-full bg-canvas border border-input rounded-md shadow-lg max-h-40 overflow-y-auto thin-scrollbar p-1"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 gap-1 p-0">
|
||||||
|
{filteredFolders.map((folder) => (
|
||||||
|
<Button
|
||||||
|
key={folder}
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
|
||||||
|
onClick={() => handleFolderClick(folder)}
|
||||||
|
>
|
||||||
|
{folder}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="tags"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-10 overflow-visible">
|
||||||
|
<FormLabel>{t("hosts.tags")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="flex flex-wrap items-center gap-1 border border-input rounded-md px-3 py-2 bg-field focus-within:ring-2 ring-ring min-h-[40px]">
|
||||||
|
{field.value.map((tag: string, idx: number) => (
|
||||||
|
<span
|
||||||
|
key={tag + idx}
|
||||||
|
className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
|
||||||
|
onClick={() => {
|
||||||
|
const newTags = field.value.filter(
|
||||||
|
(_: string, i: number) => i !== idx,
|
||||||
|
);
|
||||||
|
field.onChange(newTags);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="flex-1 min-w-[60px] border-none outline-none bg-transparent text-foreground placeholder:text-muted-foreground p-0 h-6"
|
||||||
|
value={tagInput}
|
||||||
|
onChange={(e) => setTagInput(e.target.value)}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === " " && tagInput.trim() !== "") {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!field.value.includes(tagInput.trim())) {
|
||||||
|
field.onChange([...field.value, tagInput.trim()]);
|
||||||
|
}
|
||||||
|
setTagInput("");
|
||||||
|
} else if (
|
||||||
|
e.key === "Backspace" &&
|
||||||
|
tagInput === "" &&
|
||||||
|
field.value.length > 0
|
||||||
|
) {
|
||||||
|
field.onChange(field.value.slice(0, -1));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder={t("hosts.addTagsSpaceToAdd")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="pin"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-6">
|
||||||
|
<FormLabel>{t("hosts.pin")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="notes"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-26">
|
||||||
|
<FormLabel>{t("hosts.notes")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Textarea
|
||||||
|
placeholder={t("placeholders.notes")}
|
||||||
|
className="resize-none"
|
||||||
|
rows={3}
|
||||||
|
value={field.value || ""}
|
||||||
|
onChange={field.onChange}
|
||||||
|
onBlur={field.onBlur}
|
||||||
|
name={field.name}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FormLabel className="mb-3 mt-3 font-bold">
|
||||||
|
{t("hosts.authentication")}
|
||||||
|
</FormLabel>
|
||||||
|
<HostAuthenticationSection
|
||||||
|
control={control}
|
||||||
|
watch={watch}
|
||||||
|
setValue={setValue}
|
||||||
|
credentials={credentials}
|
||||||
|
authTab={authTab}
|
||||||
|
setAuthTab={setAuthTab}
|
||||||
|
keyInputMethod={keyInputMethod}
|
||||||
|
setKeyInputMethod={setKeyInputMethod}
|
||||||
|
editorTheme={editorTheme}
|
||||||
|
editingHost={editingHost}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
<Separator className="my-6" />
|
||||||
|
<Accordion type="multiple" className="w-full">
|
||||||
|
<AccordionItem value="advanced-auth">
|
||||||
|
<AccordionTrigger>{t("hosts.advancedAuthSettings")}</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pt-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="forceKeyboardInteractive"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>{t("hosts.forceKeyboardInteractive")}</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.forceKeyboardInteractiveDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="jump-hosts">
|
||||||
|
<AccordionTrigger>{t("hosts.jumpHosts")}</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pt-4">
|
||||||
|
<Alert>
|
||||||
|
<AlertDescription>
|
||||||
|
{t("hosts.jumpHostsDescription")}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="jumpHosts"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.jumpHostChain")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{field.value.map((jumpHost, index) => (
|
||||||
|
<JumpHostItem
|
||||||
|
key={index}
|
||||||
|
jumpHost={jumpHost}
|
||||||
|
index={index}
|
||||||
|
hosts={hosts}
|
||||||
|
editingHost={editingHost}
|
||||||
|
onUpdate={(hostId) => {
|
||||||
|
const newJumpHosts = [...field.value];
|
||||||
|
newJumpHosts[index] = { hostId };
|
||||||
|
field.onChange(newJumpHosts);
|
||||||
|
}}
|
||||||
|
onRemove={() => {
|
||||||
|
const newJumpHosts = field.value.filter(
|
||||||
|
(_, i) => i !== index,
|
||||||
|
);
|
||||||
|
field.onChange(newJumpHosts);
|
||||||
|
}}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
field.onChange([...field.value, { hostId: 0 }]);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
{t("hosts.addJumpHost")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>{t("hosts.jumpHostsOrder")}</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="socks5">
|
||||||
|
<AccordionTrigger>{t("hosts.socks5Proxy")}</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pt-4">
|
||||||
|
<Alert>
|
||||||
|
<AlertDescription>
|
||||||
|
{t("hosts.socks5Description")}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="useSocks5"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>{t("hosts.enableSocks5")}</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.enableSocks5Description")}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{watch("useSocks5") && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<FormLabel>{t("hosts.socks5ProxyMode")}</FormLabel>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant={proxyMode === "single" ? "default" : "outline"}
|
||||||
|
onClick={() => setProxyMode("single")}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
{t("hosts.socks5UseSingleProxy")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant={proxyMode === "chain" ? "default" : "outline"}
|
||||||
|
onClick={() => setProxyMode("chain")}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
{t("hosts.socks5UseProxyChain")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{proxyMode === "single" && (
|
||||||
|
<div className="space-y-4 p-4 border rounded-lg">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="socks5Host"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.socks5Host")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("placeholders.socks5Host")}
|
||||||
|
{...field}
|
||||||
|
onBlur={(e) => {
|
||||||
|
field.onChange(e.target.value.trim());
|
||||||
|
field.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.socks5HostDescription")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="socks5Port"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.socks5Port")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder={t("placeholders.socks5Port")}
|
||||||
|
{...field}
|
||||||
|
onChange={(e) =>
|
||||||
|
field.onChange(parseInt(e.target.value) || 1080)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.socks5PortDescription")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="socks5Username"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.socks5Username")} {t("hosts.optional")}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("hosts.username")}
|
||||||
|
{...field}
|
||||||
|
onBlur={(e) => {
|
||||||
|
field.onChange(e.target.value.trim());
|
||||||
|
field.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="socks5Password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.socks5Password")} {t("hosts.optional")}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<PasswordInput
|
||||||
|
placeholder={t("hosts.password")}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{proxyMode === "chain" && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<FormLabel>{t("hosts.socks5ProxyChain")}</FormLabel>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
const currentChain = watch("socks5ProxyChain") || [];
|
||||||
|
setValue("socks5ProxyChain", [
|
||||||
|
...currentChain,
|
||||||
|
{
|
||||||
|
host: "",
|
||||||
|
port: 1080,
|
||||||
|
type: 5 as 4 | 5,
|
||||||
|
username: "",
|
||||||
|
password: "",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
{t("hosts.addProxyNode")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(watch("socks5ProxyChain") || []).length === 0 && (
|
||||||
|
<div className="text-sm text-muted-foreground text-center p-4 border rounded-lg border-dashed">
|
||||||
|
{t("hosts.noProxyNodes")}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(watch("socks5ProxyChain") || []).map(
|
||||||
|
(node: any, index: number) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="p-4 border rounded-lg space-y-3 relative"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{t("hosts.proxyNode")} {index + 1}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => {
|
||||||
|
const currentChain =
|
||||||
|
watch("socks5ProxyChain") || [];
|
||||||
|
setValue(
|
||||||
|
"socks5ProxyChain",
|
||||||
|
currentChain.filter(
|
||||||
|
(_: any, i: number) => i !== index,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<FormLabel>{t("hosts.socks5Host")}</FormLabel>
|
||||||
|
<Input
|
||||||
|
placeholder={t("placeholders.socks5Host")}
|
||||||
|
value={node.host}
|
||||||
|
onChange={(e) => {
|
||||||
|
const currentChain =
|
||||||
|
watch("socks5ProxyChain") || [];
|
||||||
|
const newChain = [...currentChain];
|
||||||
|
newChain[index] = {
|
||||||
|
...newChain[index],
|
||||||
|
host: e.target.value,
|
||||||
|
};
|
||||||
|
setValue("socks5ProxyChain", newChain);
|
||||||
|
}}
|
||||||
|
onBlur={(e) => {
|
||||||
|
const currentChain =
|
||||||
|
watch("socks5ProxyChain") || [];
|
||||||
|
const newChain = [...currentChain];
|
||||||
|
newChain[index] = {
|
||||||
|
...newChain[index],
|
||||||
|
host: e.target.value.trim(),
|
||||||
|
};
|
||||||
|
setValue("socks5ProxyChain", newChain);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<FormLabel>{t("hosts.socks5Port")}</FormLabel>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder={t("placeholders.socks5Port")}
|
||||||
|
value={node.port}
|
||||||
|
onChange={(e) => {
|
||||||
|
const currentChain =
|
||||||
|
watch("socks5ProxyChain") || [];
|
||||||
|
const newChain = [...currentChain];
|
||||||
|
newChain[index] = {
|
||||||
|
...newChain[index],
|
||||||
|
port: parseInt(e.target.value) || 1080,
|
||||||
|
};
|
||||||
|
setValue("socks5ProxyChain", newChain);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<FormLabel>{t("hosts.proxyType")}</FormLabel>
|
||||||
|
<Select
|
||||||
|
value={String(node.type)}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
const currentChain =
|
||||||
|
watch("socks5ProxyChain") || [];
|
||||||
|
const newChain = [...currentChain];
|
||||||
|
newChain[index] = {
|
||||||
|
...newChain[index],
|
||||||
|
type: parseInt(value) as 4 | 5,
|
||||||
|
};
|
||||||
|
setValue("socks5ProxyChain", newChain);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="4">
|
||||||
|
{t("hosts.socks4")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="5">
|
||||||
|
{t("hosts.socks5")}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.socks5Username")}{" "}
|
||||||
|
{t("hosts.optional")}
|
||||||
|
</FormLabel>
|
||||||
|
<Input
|
||||||
|
placeholder={t("hosts.username")}
|
||||||
|
value={node.username || ""}
|
||||||
|
onChange={(e) => {
|
||||||
|
const currentChain =
|
||||||
|
watch("socks5ProxyChain") || [];
|
||||||
|
const newChain = [...currentChain];
|
||||||
|
newChain[index] = {
|
||||||
|
...newChain[index],
|
||||||
|
username: e.target.value,
|
||||||
|
};
|
||||||
|
setValue("socks5ProxyChain", newChain);
|
||||||
|
}}
|
||||||
|
onBlur={(e) => {
|
||||||
|
const currentChain =
|
||||||
|
watch("socks5ProxyChain") || [];
|
||||||
|
const newChain = [...currentChain];
|
||||||
|
newChain[index] = {
|
||||||
|
...newChain[index],
|
||||||
|
username: e.target.value.trim(),
|
||||||
|
};
|
||||||
|
setValue("socks5ProxyChain", newChain);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.socks5Password")}{" "}
|
||||||
|
{t("hosts.optional")}
|
||||||
|
</FormLabel>
|
||||||
|
<PasswordInput
|
||||||
|
placeholder={t("hosts.password")}
|
||||||
|
value={node.password || ""}
|
||||||
|
onChange={(e) => {
|
||||||
|
const currentChain =
|
||||||
|
watch("socks5ProxyChain") || [];
|
||||||
|
const newChain = [...currentChain];
|
||||||
|
newChain[index] = {
|
||||||
|
...newChain[index],
|
||||||
|
password: e.target.value,
|
||||||
|
};
|
||||||
|
setValue("socks5ProxyChain", newChain);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,284 @@
|
|||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/components/ui/form.tsx";
|
||||||
|
import { Switch } from "@/components/ui/switch.tsx";
|
||||||
|
import { Input } from "@/components/ui/input.tsx";
|
||||||
|
import { Button } from "@/components/ui/button.tsx";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select.tsx";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox.tsx";
|
||||||
|
import { Alert, AlertDescription } from "@/components/ui/alert.tsx";
|
||||||
|
import { Plus } from "lucide-react";
|
||||||
|
import { QuickActionItem } from "./shared/QuickActionItem.tsx";
|
||||||
|
import type { HostStatisticsTabProps } from "./shared/tab-types";
|
||||||
|
|
||||||
|
export function HostStatisticsTab({
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
setValue,
|
||||||
|
statusIntervalUnit,
|
||||||
|
setStatusIntervalUnit,
|
||||||
|
metricsIntervalUnit,
|
||||||
|
setMetricsIntervalUnit,
|
||||||
|
t,
|
||||||
|
}: HostStatisticsTabProps) {
|
||||||
|
// For quick actions - need to get snippets from parent
|
||||||
|
const snippets = watch("snippets") || [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 px-3 text-xs"
|
||||||
|
onClick={() =>
|
||||||
|
window.open("https://docs.termix.site/server-stats", "_blank")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{t("common.documentation")}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="statsConfig.statusCheckEnabled"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>{t("hosts.statusCheckEnabled")}</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.statusCheckEnabledDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{watch("statsConfig.statusCheckEnabled") && (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="statsConfig.statusCheckInterval"
|
||||||
|
render={({ field }) => {
|
||||||
|
const displayValue =
|
||||||
|
statusIntervalUnit === "minutes"
|
||||||
|
? Math.round((field.value || 30) / 60)
|
||||||
|
: field.value || 30;
|
||||||
|
|
||||||
|
const handleIntervalChange = (value: string) => {
|
||||||
|
const numValue = parseInt(value) || 0;
|
||||||
|
const seconds =
|
||||||
|
statusIntervalUnit === "minutes" ? numValue * 60 : numValue;
|
||||||
|
field.onChange(seconds);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.statusCheckInterval")}</FormLabel>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={displayValue}
|
||||||
|
onChange={(e) => handleIntervalChange(e.target.value)}
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<Select
|
||||||
|
value={statusIntervalUnit}
|
||||||
|
onValueChange={(value: "seconds" | "minutes") => {
|
||||||
|
setStatusIntervalUnit(value);
|
||||||
|
const currentSeconds = field.value || 30;
|
||||||
|
if (value === "minutes") {
|
||||||
|
const minutes = Math.round(currentSeconds / 60);
|
||||||
|
field.onChange(minutes * 60);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-[120px]">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="seconds">
|
||||||
|
{t("hosts.intervalSeconds")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="minutes">
|
||||||
|
{t("hosts.intervalMinutes")}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.statusCheckIntervalDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="statsConfig.metricsEnabled"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>{t("hosts.metricsEnabled")}</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.metricsEnabledDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{watch("statsConfig.metricsEnabled") && (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="statsConfig.metricsInterval"
|
||||||
|
render={({ field }) => {
|
||||||
|
const displayValue =
|
||||||
|
metricsIntervalUnit === "minutes"
|
||||||
|
? Math.round((field.value || 30) / 60)
|
||||||
|
: field.value || 30;
|
||||||
|
|
||||||
|
const handleIntervalChange = (value: string) => {
|
||||||
|
const numValue = parseInt(value) || 0;
|
||||||
|
const seconds =
|
||||||
|
metricsIntervalUnit === "minutes"
|
||||||
|
? numValue * 60
|
||||||
|
: numValue;
|
||||||
|
field.onChange(seconds);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.metricsInterval")}</FormLabel>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={displayValue}
|
||||||
|
onChange={(e) => handleIntervalChange(e.target.value)}
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<Select
|
||||||
|
value={metricsIntervalUnit}
|
||||||
|
onValueChange={(value: "seconds" | "minutes") => {
|
||||||
|
setMetricsIntervalUnit(value);
|
||||||
|
const currentSeconds = field.value || 30;
|
||||||
|
if (value === "minutes") {
|
||||||
|
const minutes = Math.round(currentSeconds / 60);
|
||||||
|
field.onChange(minutes * 60);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-[120px]">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="seconds">
|
||||||
|
{t("hosts.intervalSeconds")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="minutes">
|
||||||
|
{t("hosts.intervalMinutes")}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.metricsIntervalDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{watch("statsConfig.metricsEnabled") && (
|
||||||
|
<>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="statsConfig.enabledWidgets"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.enabledWidgets")}</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.enabledWidgetsDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
<div className="space-y-3 mt-3">
|
||||||
|
{(
|
||||||
|
[
|
||||||
|
"cpu",
|
||||||
|
"memory",
|
||||||
|
"disk",
|
||||||
|
"network",
|
||||||
|
"uptime",
|
||||||
|
"processes",
|
||||||
|
"system",
|
||||||
|
"login_stats",
|
||||||
|
] as const
|
||||||
|
).map((widget) => (
|
||||||
|
<div key={widget} className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
checked={field.value?.includes(widget)}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
const currentWidgets = field.value || [];
|
||||||
|
if (checked) {
|
||||||
|
field.onChange([...currentWidgets, widget]);
|
||||||
|
} else {
|
||||||
|
field.onChange(
|
||||||
|
currentWidgets.filter((w) => w !== widget),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||||
|
{widget === "cpu" && t("serverStats.cpuUsage")}
|
||||||
|
{widget === "memory" && t("serverStats.memoryUsage")}
|
||||||
|
{widget === "disk" && t("serverStats.diskUsage")}
|
||||||
|
{widget === "network" &&
|
||||||
|
t("serverStats.networkInterfaces")}
|
||||||
|
{widget === "uptime" && t("serverStats.uptime")}
|
||||||
|
{widget === "processes" && t("serverStats.processes")}
|
||||||
|
{widget === "system" && t("serverStats.systemInfo")}
|
||||||
|
{widget === "login_stats" &&
|
||||||
|
t("serverStats.loginStats")}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
646
src/ui/desktop/apps/host-manager/hosts/tabs/HostTerminalTab.tsx
Normal file
646
src/ui/desktop/apps/host-manager/hosts/tabs/HostTerminalTab.tsx
Normal file
@@ -0,0 +1,646 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/components/ui/form.tsx";
|
||||||
|
import { Switch } from "@/components/ui/switch.tsx";
|
||||||
|
import { Input } from "@/components/ui/input.tsx";
|
||||||
|
import { Button } from "@/components/ui/button.tsx";
|
||||||
|
import { PasswordInput } from "@/components/ui/password-input.tsx";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select.tsx";
|
||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionContent,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionTrigger,
|
||||||
|
} from "@/components/ui/accordion.tsx";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover.tsx";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
} from "@/components/ui/command.tsx";
|
||||||
|
import { Slider } from "@/components/ui/slider.tsx";
|
||||||
|
import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils.ts";
|
||||||
|
import type { HostTerminalTabProps } from "./shared/tab-types";
|
||||||
|
|
||||||
|
export function HostTerminalTab({
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
setValue,
|
||||||
|
snippets,
|
||||||
|
t,
|
||||||
|
}: HostTerminalTabProps) {
|
||||||
|
return (
|
||||||
|
<Accordion
|
||||||
|
type="multiple"
|
||||||
|
className="w-full"
|
||||||
|
defaultValue={["appearance", "behavior", "advanced"]}
|
||||||
|
>
|
||||||
|
<AccordionItem value="appearance">
|
||||||
|
<AccordionTrigger>{t("hosts.appearance")}</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pt-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.letterSpacing"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.letterSpacingValue", {
|
||||||
|
value: field.value,
|
||||||
|
})}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Slider
|
||||||
|
min={-2}
|
||||||
|
max={10}
|
||||||
|
step={0.5}
|
||||||
|
value={[field.value]}
|
||||||
|
onValueChange={([value]) => field.onChange(value)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.adjustLetterSpacing")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.lineHeight"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.lineHeightValue", {
|
||||||
|
value: field.value,
|
||||||
|
})}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Slider
|
||||||
|
min={1}
|
||||||
|
max={2}
|
||||||
|
step={0.1}
|
||||||
|
value={[field.value]}
|
||||||
|
onValueChange={([value]) => field.onChange(value)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>{t("hosts.adjustLineHeight")}</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.cursorStyle"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.cursorStyle")}</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} value={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t("hosts.selectCursorStyle")} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="block">
|
||||||
|
{t("hosts.cursorStyleBlock")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="underline">
|
||||||
|
{t("hosts.cursorStyleUnderline")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="bar">
|
||||||
|
{t("hosts.cursorStyleBar")}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.chooseCursorAppearance")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.cursorBlink"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>{t("hosts.cursorBlink")}</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.enableCursorBlink")}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="behavior">
|
||||||
|
<AccordionTrigger>{t("hosts.behavior")}</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pt-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.scrollback"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.scrollbackBufferValue", {
|
||||||
|
value: field.value,
|
||||||
|
})}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Slider
|
||||||
|
min={1000}
|
||||||
|
max={100000}
|
||||||
|
step={1000}
|
||||||
|
value={[field.value]}
|
||||||
|
onValueChange={([value]) => field.onChange(value)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.scrollbackBufferDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.bellStyle"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.bellStyle")}</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} value={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t("hosts.selectBellStyle")} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="none">
|
||||||
|
{t("hosts.bellStyleNone")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="sound">
|
||||||
|
{t("hosts.bellStyleSound")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="visual">
|
||||||
|
{t("hosts.bellStyleVisual")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="both">
|
||||||
|
{t("hosts.bellStyleBoth")}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription>{t("hosts.bellStyleDesc")}</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.rightClickSelectsWord"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>{t("hosts.rightClickSelectsWord")}</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.rightClickSelectsWordDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.fastScrollModifier"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.fastScrollModifier")}</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} value={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t("hosts.selectModifier")} />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="alt">
|
||||||
|
{t("hosts.modifierAlt")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="ctrl">
|
||||||
|
{t("hosts.modifierCtrl")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="shift">
|
||||||
|
{t("hosts.modifierShift")}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.fastScrollModifierDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.fastScrollSensitivity"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.fastScrollSensitivityValue", {
|
||||||
|
value: field.value,
|
||||||
|
})}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Slider
|
||||||
|
min={1}
|
||||||
|
max={10}
|
||||||
|
step={1}
|
||||||
|
value={[field.value]}
|
||||||
|
onValueChange={([value]) => field.onChange(value)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.fastScrollSensitivityDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.minimumContrastRatio"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.minimumContrastRatioValue", {
|
||||||
|
value: field.value,
|
||||||
|
})}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Slider
|
||||||
|
min={1}
|
||||||
|
max={21}
|
||||||
|
step={1}
|
||||||
|
value={[field.value]}
|
||||||
|
onValueChange={([value]) => field.onChange(value)}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.minimumContrastRatioDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
|
||||||
|
<AccordionItem value="advanced">
|
||||||
|
<AccordionTrigger>{t("hosts.advanced")}</AccordionTrigger>
|
||||||
|
<AccordionContent className="space-y-4 pt-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.agentForwarding"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>{t("hosts.sshAgentForwarding")}</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.sshAgentForwardingDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.backspaceMode"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.backspaceMode")}</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} value={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue
|
||||||
|
placeholder={t("hosts.selectBackspaceMode")}
|
||||||
|
/>
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="normal">
|
||||||
|
{t("hosts.backspaceModeNormal")}
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="control-h">
|
||||||
|
{t("hosts.backspaceModeControlH")}
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.backspaceModeDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.startupSnippetId"
|
||||||
|
render={({ field }) => {
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const selectedSnippet = snippets.find(
|
||||||
|
(s) => s.id === field.value,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.startupSnippet")}</FormLabel>
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<FormControl>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
aria-expanded={open}
|
||||||
|
className="w-full justify-between"
|
||||||
|
>
|
||||||
|
{selectedSnippet
|
||||||
|
? selectedSnippet.name
|
||||||
|
: t("hosts.selectSnippet")}
|
||||||
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent
|
||||||
|
className="p-0"
|
||||||
|
style={{
|
||||||
|
width: "var(--radix-popover-trigger-width)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder={t("hosts.searchSnippets")} />
|
||||||
|
<CommandEmpty>{t("hosts.noSnippetFound")}</CommandEmpty>
|
||||||
|
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
|
||||||
|
<CommandItem
|
||||||
|
value="none"
|
||||||
|
onSelect={() => {
|
||||||
|
field.onChange(null);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-4 w-4",
|
||||||
|
!field.value ? "opacity-100" : "opacity-0",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{t("hosts.snippetNone")}
|
||||||
|
</CommandItem>
|
||||||
|
{snippets.map((snippet) => (
|
||||||
|
<CommandItem
|
||||||
|
key={snippet.id}
|
||||||
|
value={`${snippet.name} ${snippet.content} ${snippet.id}`}
|
||||||
|
onSelect={() => {
|
||||||
|
field.onChange(snippet.id);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-4 w-4",
|
||||||
|
field.value === snippet.id
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="font-medium">
|
||||||
|
{snippet.name}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground truncate max-w-[350px]">
|
||||||
|
{snippet.content}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.executeSnippetOnConnect")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.autoMosh"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>{t("hosts.autoMosh")}</FormLabel>
|
||||||
|
<FormDescription>{t("hosts.autoMoshDesc")}</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{watch("terminalConfig.autoMosh") && (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.moshCommand"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.moshCommand")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("placeholders.moshCommand")}
|
||||||
|
{...field}
|
||||||
|
onBlur={(e) => {
|
||||||
|
field.onChange(e.target.value.trim());
|
||||||
|
field.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.moshCommandDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.sudoPasswordAutoFill"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>{t("hosts.sudoPasswordAutoFill")}</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.sudoPasswordAutoFillDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{watch("terminalConfig.sudoPasswordAutoFill") && (
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="terminalConfig.sudoPassword"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.sudoPassword")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<PasswordInput
|
||||||
|
placeholder={t("placeholders.sudoPassword")}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.sudoPasswordDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">
|
||||||
|
{t("hosts.environmentVariables")}
|
||||||
|
</label>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.environmentVariablesDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
{watch("terminalConfig.environmentVariables")?.map((_, index) => (
|
||||||
|
<div key={index} className="flex gap-2">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`terminalConfig.environmentVariables.${index}.key`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex-1">
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("hosts.variableName")}
|
||||||
|
{...field}
|
||||||
|
onBlur={(e) => {
|
||||||
|
field.onChange(e.target.value.trim());
|
||||||
|
field.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`terminalConfig.environmentVariables.${index}.value`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex-1">
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("hosts.variableValue")}
|
||||||
|
{...field}
|
||||||
|
onBlur={(e) => {
|
||||||
|
field.onChange(e.target.value.trim());
|
||||||
|
field.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={() => {
|
||||||
|
const current = watch(
|
||||||
|
"terminalConfig.environmentVariables",
|
||||||
|
);
|
||||||
|
setValue(
|
||||||
|
"terminalConfig.environmentVariables",
|
||||||
|
current.filter((_, i) => i !== index),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
const current =
|
||||||
|
watch("terminalConfig.environmentVariables") || [];
|
||||||
|
setValue("terminalConfig.environmentVariables", [
|
||||||
|
...current,
|
||||||
|
{ key: "", value: "" },
|
||||||
|
]);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
{t("hosts.addVariable")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
);
|
||||||
|
}
|
||||||
441
src/ui/desktop/apps/host-manager/hosts/tabs/HostTunnelTab.tsx
Normal file
441
src/ui/desktop/apps/host-manager/hosts/tabs/HostTunnelTab.tsx
Normal file
@@ -0,0 +1,441 @@
|
|||||||
|
import React, { useRef, useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
} from "@/components/ui/form.tsx";
|
||||||
|
import { Switch } from "@/components/ui/switch.tsx";
|
||||||
|
import { Input } from "@/components/ui/input.tsx";
|
||||||
|
import { Button } from "@/components/ui/button.tsx";
|
||||||
|
import { Alert, AlertDescription } from "@/components/ui/alert.tsx";
|
||||||
|
import type { HostTunnelTabProps } from "./shared/tab-types";
|
||||||
|
|
||||||
|
export function HostTunnelTab({
|
||||||
|
control,
|
||||||
|
watch,
|
||||||
|
setValue,
|
||||||
|
getValues,
|
||||||
|
sshConfigurations,
|
||||||
|
editingHost,
|
||||||
|
t,
|
||||||
|
}: HostTunnelTabProps) {
|
||||||
|
const [sshConfigDropdownOpen, setSshConfigDropdownOpen] = useState<{
|
||||||
|
[key: number]: boolean;
|
||||||
|
}>({});
|
||||||
|
const sshConfigInputRefs = useRef<{
|
||||||
|
[key: number]: HTMLInputElement | null;
|
||||||
|
}>({});
|
||||||
|
const sshConfigDropdownRefs = useRef<{
|
||||||
|
[key: number]: HTMLDivElement | null;
|
||||||
|
}>({});
|
||||||
|
|
||||||
|
const getFilteredSshConfigs = (index: number) => {
|
||||||
|
const value = watch(`tunnelConnections.${index}.endpointHost`);
|
||||||
|
const currentHostId = editingHost?.id;
|
||||||
|
|
||||||
|
let filtered = sshConfigurations;
|
||||||
|
|
||||||
|
if (currentHostId) {
|
||||||
|
const currentHostName = editingHost?.name;
|
||||||
|
if (currentHostName) {
|
||||||
|
filtered = sshConfigurations.filter(
|
||||||
|
(config) => config !== currentHostName,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const currentHostName =
|
||||||
|
watch("name") || `${watch("username")}@${watch("ip")}`;
|
||||||
|
filtered = sshConfigurations.filter(
|
||||||
|
(config) => config !== currentHostName,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value) {
|
||||||
|
filtered = filtered.filter((config) =>
|
||||||
|
config.toLowerCase().includes(value.toLowerCase()),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return filtered;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSshConfigClick = (config: string, index: number) => {
|
||||||
|
setValue(`tunnelConnections.${index}.endpointHost`, config);
|
||||||
|
setSshConfigDropdownOpen((prev) => ({ ...prev, [index]: false }));
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function handleSshConfigClickOutside(event: MouseEvent) {
|
||||||
|
const openDropdowns = Object.keys(sshConfigDropdownOpen).filter(
|
||||||
|
(key) => sshConfigDropdownOpen[parseInt(key)],
|
||||||
|
);
|
||||||
|
|
||||||
|
openDropdowns.forEach((indexStr: string) => {
|
||||||
|
const index = parseInt(indexStr);
|
||||||
|
if (
|
||||||
|
sshConfigDropdownRefs.current[index] &&
|
||||||
|
!sshConfigDropdownRefs.current[index]?.contains(
|
||||||
|
event.target as Node,
|
||||||
|
) &&
|
||||||
|
sshConfigInputRefs.current[index] &&
|
||||||
|
!sshConfigInputRefs.current[index]?.contains(event.target as Node)
|
||||||
|
) {
|
||||||
|
setSshConfigDropdownOpen((prev) => ({ ...prev, [index]: false }));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasOpenDropdowns = Object.values(sshConfigDropdownOpen).some(
|
||||||
|
(open) => open,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (hasOpenDropdowns) {
|
||||||
|
document.addEventListener("mousedown", handleSshConfigClickOutside);
|
||||||
|
} else {
|
||||||
|
document.removeEventListener("mousedown", handleSshConfigClickOutside);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("mousedown", handleSshConfigClickOutside);
|
||||||
|
};
|
||||||
|
}, [sshConfigDropdownOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="enableTunnel"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>{t("hosts.enableTunnel")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Switch checked={field.value} onCheckedChange={field.onChange} />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>{t("hosts.enableTunnelDesc")}</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{watch("enableTunnel") && (
|
||||||
|
<>
|
||||||
|
<Alert className="mt-4">
|
||||||
|
<AlertDescription>
|
||||||
|
<strong>{t("hosts.sshpassRequired")}</strong>
|
||||||
|
<div>
|
||||||
|
{t("hosts.sshpassRequiredDesc")}{" "}
|
||||||
|
<code className="bg-muted px-1 rounded inline">
|
||||||
|
sudo apt install sshpass
|
||||||
|
</code>{" "}
|
||||||
|
{t("hosts.debianUbuntuEquivalent")}
|
||||||
|
</div>
|
||||||
|
<div className="mt-2">
|
||||||
|
<strong>{t("hosts.otherInstallMethods")}</strong>
|
||||||
|
<div>
|
||||||
|
• {t("hosts.centosRhelFedora")}{" "}
|
||||||
|
<code className="bg-muted px-1 rounded inline">
|
||||||
|
sudo yum install sshpass
|
||||||
|
</code>{" "}
|
||||||
|
{t("hosts.or")}{" "}
|
||||||
|
<code className="bg-muted px-1 rounded inline">
|
||||||
|
sudo dnf install sshpass
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
• {t("hosts.macos")}{" "}
|
||||||
|
<code className="bg-muted px-1 rounded inline">
|
||||||
|
brew install hudochenkov/sshpass/sshpass
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<div>• {t("hosts.windows")}</div>
|
||||||
|
</div>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
<Alert className="mt-4">
|
||||||
|
<AlertDescription>
|
||||||
|
<strong>{t("hosts.sshServerConfigRequired")}</strong>
|
||||||
|
<div>{t("hosts.sshServerConfigDesc")}</div>
|
||||||
|
<div>
|
||||||
|
•{" "}
|
||||||
|
<code className="bg-muted px-1 rounded inline">
|
||||||
|
GatewayPorts yes
|
||||||
|
</code>{" "}
|
||||||
|
{t("hosts.gatewayPortsYes")}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
•{" "}
|
||||||
|
<code className="bg-muted px-1 rounded inline">
|
||||||
|
AllowTcpForwarding yes
|
||||||
|
</code>{" "}
|
||||||
|
{t("hosts.allowTcpForwardingYes")}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
•{" "}
|
||||||
|
<code className="bg-muted px-1 rounded inline">
|
||||||
|
PermitRootLogin yes
|
||||||
|
</code>{" "}
|
||||||
|
{t("hosts.permitRootLoginYes")}
|
||||||
|
</div>
|
||||||
|
<div className="mt-2">{t("hosts.editSshConfig")}</div>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
<div className="mt-3 flex justify-between">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 px-3 text-xs"
|
||||||
|
onClick={() =>
|
||||||
|
window.open("https://docs.termix.site/tunnels", "_blank")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{t("common.documentation")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name="tunnelConnections"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="mt-4">
|
||||||
|
<FormLabel>{t("hosts.tunnelConnections")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{field.value.map((connection, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="p-4 border rounded-lg bg-muted/50"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<h4 className="text-sm font-bold">
|
||||||
|
{t("hosts.connection")} {index + 1}
|
||||||
|
</h4>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
const newConnections = field.value.filter(
|
||||||
|
(_, i) => i !== index,
|
||||||
|
);
|
||||||
|
field.onChange(newConnections);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("hosts.remove")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-12 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`tunnelConnections.${index}.sourcePort`}
|
||||||
|
render={({ field: sourcePortField }) => (
|
||||||
|
<FormItem className="col-span-4">
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.sourcePort")}
|
||||||
|
{t("hosts.sourcePortDesc")}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("placeholders.defaultPort")}
|
||||||
|
{...sourcePortField}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`tunnelConnections.${index}.endpointPort`}
|
||||||
|
render={({ field: endpointPortField }) => (
|
||||||
|
<FormItem className="col-span-4">
|
||||||
|
<FormLabel>{t("hosts.endpointPort")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t(
|
||||||
|
"placeholders.defaultEndpointPort",
|
||||||
|
)}
|
||||||
|
{...endpointPortField}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`tunnelConnections.${index}.endpointHost`}
|
||||||
|
render={({ field: endpointHostField }) => (
|
||||||
|
<FormItem className="col-span-4 relative">
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.endpointSshConfig")}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
ref={(el) => {
|
||||||
|
sshConfigInputRefs.current[index] = el;
|
||||||
|
}}
|
||||||
|
placeholder={t("placeholders.sshConfig")}
|
||||||
|
className="min-h-[40px]"
|
||||||
|
autoComplete="off"
|
||||||
|
value={endpointHostField.value}
|
||||||
|
onFocus={() =>
|
||||||
|
setSshConfigDropdownOpen((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[index]: true,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
onChange={(e) => {
|
||||||
|
endpointHostField.onChange(e);
|
||||||
|
setSshConfigDropdownOpen((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[index]: true,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
onBlur={(e) => {
|
||||||
|
endpointHostField.onChange(
|
||||||
|
e.target.value.trim(),
|
||||||
|
);
|
||||||
|
endpointHostField.onBlur();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
{sshConfigDropdownOpen[index] &&
|
||||||
|
getFilteredSshConfigs(index).length > 0 && (
|
||||||
|
<div
|
||||||
|
ref={(el) => {
|
||||||
|
sshConfigDropdownRefs.current[index] =
|
||||||
|
el;
|
||||||
|
}}
|
||||||
|
className="absolute top-full left-0 z-50 mt-1 w-full bg-canvas border border-input rounded-md shadow-lg max-h-40 overflow-y-auto thin-scrollbar p-1"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 gap-1 p-0">
|
||||||
|
{getFilteredSshConfigs(index).map(
|
||||||
|
(config) => (
|
||||||
|
<Button
|
||||||
|
key={config}
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
|
||||||
|
onClick={() =>
|
||||||
|
handleSshConfigClick(
|
||||||
|
config,
|
||||||
|
index,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{config}
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-muted-foreground mt-2">
|
||||||
|
{t("hosts.tunnelForwardDescription", {
|
||||||
|
sourcePort:
|
||||||
|
watch(`tunnelConnections.${index}.sourcePort`) ||
|
||||||
|
"22",
|
||||||
|
endpointPort:
|
||||||
|
watch(
|
||||||
|
`tunnelConnections.${index}.endpointPort`,
|
||||||
|
) || "224",
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-12 gap-4 mt-4">
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`tunnelConnections.${index}.maxRetries`}
|
||||||
|
render={({ field: maxRetriesField }) => (
|
||||||
|
<FormItem className="col-span-4">
|
||||||
|
<FormLabel>{t("hosts.maxRetries")}</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t("placeholders.maxRetries")}
|
||||||
|
{...maxRetriesField}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.maxRetriesDescription")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`tunnelConnections.${index}.retryInterval`}
|
||||||
|
render={({ field: retryIntervalField }) => (
|
||||||
|
<FormItem className="col-span-4">
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.retryInterval")}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder={t(
|
||||||
|
"placeholders.retryInterval",
|
||||||
|
)}
|
||||||
|
{...retryIntervalField}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.retryIntervalDescription")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={control}
|
||||||
|
name={`tunnelConnections.${index}.autoStart`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="col-span-4">
|
||||||
|
<FormLabel>
|
||||||
|
{t("hosts.autoStartContainer")}
|
||||||
|
</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
{t("hosts.autoStartDesc")}
|
||||||
|
</FormDescription>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
field.onChange([
|
||||||
|
...field.value,
|
||||||
|
{
|
||||||
|
sourcePort: 22,
|
||||||
|
endpointPort: 224,
|
||||||
|
endpointHost: "",
|
||||||
|
maxRetries: 3,
|
||||||
|
retryInterval: 10,
|
||||||
|
autoStart: false,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t("hosts.addConnection")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Button } from "@/components/ui/button.tsx";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover.tsx";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
} from "@/components/ui/command.tsx";
|
||||||
|
import { Check, ChevronsUpDown, X } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils.ts";
|
||||||
|
import type { JumpHostItemProps } from "./tab-types";
|
||||||
|
|
||||||
|
export function JumpHostItem({
|
||||||
|
jumpHost,
|
||||||
|
index,
|
||||||
|
hosts,
|
||||||
|
editingHost,
|
||||||
|
onUpdate,
|
||||||
|
onRemove,
|
||||||
|
t,
|
||||||
|
}: JumpHostItemProps) {
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const selectedHost = hosts.find((h) => h.id === jumpHost.hostId);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2 p-3 border rounded-lg bg-muted/30">
|
||||||
|
<div className="flex items-center gap-2 flex-1">
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">
|
||||||
|
{index + 1}.
|
||||||
|
</span>
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild className="flex-1">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
aria-expanded={open}
|
||||||
|
className="w-full justify-between"
|
||||||
|
>
|
||||||
|
{selectedHost
|
||||||
|
? `${selectedHost.name || `${selectedHost.username}@${selectedHost.ip}`}`
|
||||||
|
: t("hosts.selectServer")}
|
||||||
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent
|
||||||
|
className="p-0"
|
||||||
|
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||||
|
>
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder={t("hosts.searchServers")} />
|
||||||
|
<CommandEmpty>{t("hosts.noServerFound")}</CommandEmpty>
|
||||||
|
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
|
||||||
|
{hosts
|
||||||
|
.filter((h) => !editingHost || h.id !== editingHost.id)
|
||||||
|
.map((host) => (
|
||||||
|
<CommandItem
|
||||||
|
key={host.id}
|
||||||
|
value={`${host.name} ${host.ip} ${host.username} ${host.id}`}
|
||||||
|
onSelect={() => {
|
||||||
|
onUpdate(host.id);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-4 w-4",
|
||||||
|
jumpHost.hostId === host.id
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="font-medium">
|
||||||
|
{host.name || `${host.username}@${host.ip}`}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{host.username}@{host.ip}:{host.port}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={onRemove}
|
||||||
|
className="ml-2"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Button } from "@/components/ui/button.tsx";
|
||||||
|
import { Input } from "@/components/ui/input.tsx";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover.tsx";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
} from "@/components/ui/command.tsx";
|
||||||
|
import { Check, ChevronsUpDown, X } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils.ts";
|
||||||
|
import type { QuickActionItemProps } from "./tab-types";
|
||||||
|
|
||||||
|
export function QuickActionItem({
|
||||||
|
quickAction,
|
||||||
|
index,
|
||||||
|
snippets,
|
||||||
|
onUpdate,
|
||||||
|
onRemove,
|
||||||
|
t,
|
||||||
|
}: QuickActionItemProps) {
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const selectedSnippet = snippets.find((s) => s.id === quickAction.snippetId);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2 p-3 border rounded-lg bg-muted/30">
|
||||||
|
<div className="flex flex-col gap-2 flex-1">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm font-medium text-muted-foreground">
|
||||||
|
{index + 1}.
|
||||||
|
</span>
|
||||||
|
<Input
|
||||||
|
placeholder={t("hosts.quickActionName")}
|
||||||
|
value={quickAction.name}
|
||||||
|
onChange={(e) => onUpdate(e.target.value, quickAction.snippetId)}
|
||||||
|
onBlur={(e) =>
|
||||||
|
onUpdate(e.target.value.trim(), quickAction.snippetId)
|
||||||
|
}
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild className="w-full">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
aria-expanded={open}
|
||||||
|
className="w-full justify-between"
|
||||||
|
>
|
||||||
|
{selectedSnippet
|
||||||
|
? selectedSnippet.name
|
||||||
|
: t("hosts.selectSnippet")}
|
||||||
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent
|
||||||
|
className="p-0"
|
||||||
|
style={{ width: "var(--radix-popover-trigger-width)" }}
|
||||||
|
>
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder={t("hosts.searchSnippets")} />
|
||||||
|
<CommandEmpty>{t("hosts.noSnippetFound")}</CommandEmpty>
|
||||||
|
<CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
|
||||||
|
{snippets.map((snippet) => (
|
||||||
|
<CommandItem
|
||||||
|
key={snippet.id}
|
||||||
|
value={`${snippet.name} ${snippet.content} ${snippet.id}`}
|
||||||
|
onSelect={() => {
|
||||||
|
onUpdate(quickAction.name, snippet.id);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
"mr-2 h-4 w-4",
|
||||||
|
quickAction.snippetId === snippet.id
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="font-medium">{snippet.name}</span>
|
||||||
|
<span className="text-xs text-muted-foreground truncate max-w-[350px]">
|
||||||
|
{snippet.content}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={onRemove}
|
||||||
|
className="ml-2"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
175
src/ui/desktop/apps/host-manager/hosts/tabs/shared/tab-types.ts
Normal file
175
src/ui/desktop/apps/host-manager/hosts/tabs/shared/tab-types.ts
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
import type {
|
||||||
|
Control,
|
||||||
|
UseFormWatch,
|
||||||
|
UseFormSetValue,
|
||||||
|
UseFormGetValues,
|
||||||
|
} from "react-hook-form";
|
||||||
|
import type { SSHHost, Credential } from "@/types";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Minimal props for simple tabs (Docker, File Manager)
|
||||||
|
*/
|
||||||
|
export interface MinimalTabProps<TFormData = any> {
|
||||||
|
control: Control<TFormData>;
|
||||||
|
t: (key: string, params?: any) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Base props that all HostManager tabs receive
|
||||||
|
*/
|
||||||
|
export interface BaseHostTabProps<TFormData = any> {
|
||||||
|
// Form integration
|
||||||
|
control: Control<TFormData>;
|
||||||
|
watch: UseFormWatch<TFormData>;
|
||||||
|
setValue: UseFormSetValue<TFormData>;
|
||||||
|
getValues: UseFormGetValues<TFormData>;
|
||||||
|
|
||||||
|
// Shared state (read-only for tabs)
|
||||||
|
hosts: SSHHost[];
|
||||||
|
credentials: Credential[];
|
||||||
|
folders: string[];
|
||||||
|
snippets: Array<{ id: number; name: string; content: string }>;
|
||||||
|
|
||||||
|
// Theme context
|
||||||
|
editorTheme: any; // CodeMirror theme
|
||||||
|
|
||||||
|
// Translation
|
||||||
|
t: (key: string, params?: any) => string;
|
||||||
|
|
||||||
|
// Current editing context
|
||||||
|
editingHost?: SSHHost | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for tabs that need tab state management
|
||||||
|
*/
|
||||||
|
export interface TabWithStateProps<
|
||||||
|
TFormData = any,
|
||||||
|
> extends BaseHostTabProps<TFormData> {
|
||||||
|
// Tab-specific state setters (for nested tabs like auth)
|
||||||
|
activeAuthTab?: "password" | "key" | "credential" | "none";
|
||||||
|
onAuthTabChange?: (tab: "password" | "key" | "credential" | "none") => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for tabs that need conditional rendering based on form state
|
||||||
|
*/
|
||||||
|
export interface ConditionalTabProps<
|
||||||
|
TFormData = any,
|
||||||
|
> extends BaseHostTabProps<TFormData> {
|
||||||
|
// For tabs that show/hide content based on form.watch()
|
||||||
|
isNewHost: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for the Docker tab
|
||||||
|
*/
|
||||||
|
export interface HostDockerTabProps extends MinimalTabProps {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for the File Manager tab
|
||||||
|
*/
|
||||||
|
export interface HostFileManagerTabProps {
|
||||||
|
control: Control<any>;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
t: (key: string, params?: any) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for the Tunnel tab
|
||||||
|
*/
|
||||||
|
export interface HostTunnelTabProps {
|
||||||
|
control: Control<any>;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
setValue: UseFormSetValue<any>;
|
||||||
|
getValues: UseFormGetValues<any>;
|
||||||
|
sshConfigurations: string[];
|
||||||
|
editingHost?: SSHHost | null;
|
||||||
|
t: (key: string, params?: any) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for the Statistics tab
|
||||||
|
*/
|
||||||
|
export interface HostStatisticsTabProps {
|
||||||
|
control: Control<any>;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
setValue: UseFormSetValue<any>;
|
||||||
|
statusIntervalUnit: "seconds" | "minutes";
|
||||||
|
setStatusIntervalUnit: (unit: "seconds" | "minutes") => void;
|
||||||
|
metricsIntervalUnit: "seconds" | "minutes";
|
||||||
|
setMetricsIntervalUnit: (unit: "seconds" | "minutes") => void;
|
||||||
|
t: (key: string, params?: any) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for the Terminal tab
|
||||||
|
*/
|
||||||
|
export interface HostTerminalTabProps {
|
||||||
|
control: Control<any>;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
setValue: UseFormSetValue<any>;
|
||||||
|
snippets: Array<{ id: number; name: string; content: string }>;
|
||||||
|
editorTheme: any;
|
||||||
|
t: (key: string, params?: any) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for the General tab
|
||||||
|
*/
|
||||||
|
export interface HostGeneralTabProps extends BaseHostTabProps {
|
||||||
|
// Auth state
|
||||||
|
authTab: "password" | "key" | "credential" | "none";
|
||||||
|
setAuthTab: (tab: "password" | "key" | "credential" | "none") => void;
|
||||||
|
keyInputMethod: "upload" | "paste";
|
||||||
|
setKeyInputMethod: (method: "upload" | "paste") => void;
|
||||||
|
|
||||||
|
// Proxy mode state
|
||||||
|
proxyMode: "single" | "chain";
|
||||||
|
setProxyMode: (mode: "single" | "chain") => void;
|
||||||
|
|
||||||
|
// Ref for IP input focus
|
||||||
|
ipInputRef?: React.RefObject<HTMLInputElement>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for the Authentication Section (nested in General tab)
|
||||||
|
*/
|
||||||
|
export interface HostAuthenticationSectionProps {
|
||||||
|
control: Control<any>;
|
||||||
|
watch: UseFormWatch<any>;
|
||||||
|
setValue: UseFormSetValue<any>;
|
||||||
|
credentials: Credential[];
|
||||||
|
authTab: "password" | "key" | "credential" | "none";
|
||||||
|
setAuthTab: (tab: "password" | "key" | "credential" | "none") => void;
|
||||||
|
keyInputMethod: "upload" | "paste";
|
||||||
|
setKeyInputMethod: (method: "upload" | "paste") => void;
|
||||||
|
editorTheme: any;
|
||||||
|
editingHost?: SSHHost | null;
|
||||||
|
t: (key: string, params?: any) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for JumpHostItem component
|
||||||
|
*/
|
||||||
|
export interface JumpHostItemProps {
|
||||||
|
jumpHost: { hostId: number };
|
||||||
|
index: number;
|
||||||
|
hosts: SSHHost[];
|
||||||
|
editingHost?: SSHHost | null;
|
||||||
|
onUpdate: (hostId: number) => void;
|
||||||
|
onRemove: () => void;
|
||||||
|
t: (key: string) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for QuickActionItem component
|
||||||
|
*/
|
||||||
|
export interface QuickActionItemProps {
|
||||||
|
quickAction: { name: string; snippetId: number };
|
||||||
|
index: number;
|
||||||
|
snippets: Array<{ id: number; name: string; content: string }>;
|
||||||
|
onUpdate: (name: string, snippetId: number) => void;
|
||||||
|
onRemove: () => void;
|
||||||
|
t: (key: string) => string;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user