b1226cdbf8
* chore: add engineering improvements - Configure Prettier with unified code style rules - Add husky + lint-staged for automated pre-commit checks - Add commitlint to enforce conventional commit messages - Add PR check workflow for CI automation - Auto-format all files with Prettier - Fix TypeScript any types in field-crypto.ts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * chore: enhance development environment - Add .editorconfig for unified editor settings - Add .nvmrc to specify Node.js version (20) - Add useful npm scripts: format, format:check, lint, lint:fix, type-check * chore: add IDE and Git configuration - Add VS Code workspace settings for consistent development experience - Add VS Code extension recommendations (ESLint, Prettier, EditorConfig) - Add .gitattributes to enforce LF line endings * refactor: clean up unused variables and empty blocks - database.ts: Remove unused variables (authManager, format, HTTPS_PORT, etc.) - database.ts: Fix empty catch blocks with descriptive comments - database.ts: Add eslint-disable for required middleware parameter - db/index.ts: Remove unused variables and fix empty catch blocks - Temporarily remove ESLint from pre-commit to allow incremental fixes Reduced total errors from 947 to 913 (34 fixes) * refactor: clean up unused variables and empty blocks in routes Routes updated: - credentials.ts: Remove 12 unused variables/imports - alerts.ts: Remove 1 unused variable - users.ts: Remove 9 unused variables/imports Changes: - Remove unused imports (NextFunction, jwt, UserCrypto, detectKeyType) - Fix empty catch blocks with descriptive comments - Prefix reserved parameters with underscore - Clean up unused error variables in catch blocks Reduced errors from 913 to 886 (27 fixes) * refactor: clean up unused variables in routes/ssh.ts - Remove unused imports (NextFunction, jwt) - Remove 6 unused variables (result, updateResult, name x3) - All 8 no-unused-vars errors fixed * refactor: clean up unused variables and empty blocks in file-manager.ts - Remove 22 unused variables (linkCount, hostId, userId, content, escapedTempFile, index, code) - Fix 1 empty catch block - Simplify multiple route handlers by removing unused destructured parameters Reduced errors from 878 to 855 (23 fixes) * refactor: clean up unused variables and empty blocks in utils database-migration.ts: - Remove 3 unused variables (encryptedSize, totalOriginalRows, totalMemoryRows) lazy-field-encryption.ts: - Fix 6 empty catch blocks with descriptive comments - Keep error variables where they are used in logging tunnel.ts: - Fix multiple empty catch blocks - Remove empty else blocks - Partially fixed (10/21 issues resolved) Reduced errors from 855 to 833 (22 fixes) * fix: restore error variable in catch block for logging Fix TypeScript error where error variable was removed from catch block but still used in logging statements. The error variable is needed for proper error logging and re-throwing. * fix: clean up tunnel.ts empty blocks and unused variables 移除了 tunnel.ts 中的空块和未使用的变量： - 移除 2 个空 else 块 - 修复 2 个空 if 块并添加注释 - 修复空错误处理器并添加注释 - 将未使用的 err 参数重命名为 _err 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: clean up empty blocks and unused variables in backend utils 修复了后端工具文件中的空块和未使用的变量： - auth-manager.ts: 移除空 else 块 - system-crypto.ts: 修复空 catch 块并添加注释 - starter.ts: 修复空 catch 块并添加注释 - server-stats.ts: 将未使用的 reject 参数重命名为 _reject - credentials.ts: 将 connectionTimeout 从 let 改为 const 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: clean up empty catch blocks in frontend components 修复了前端组件中的空 catch 块： - Tunnel.tsx: 修复空 catch 块并添加注释 - ServerConfig.tsx: 修复空 catch 块并添加注释 - TerminalKeyboard.tsx: 修复空 catch 块并添加注释 - system-crypto.ts: 修复遗漏的空 catch 块 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: clean up empty catch blocks in backend utilities 修复了后端工具文件中的 10 个空 catch 块： - system-crypto.ts: 修复 1 个空 catch 块 - server-stats.ts: 修复 4 个空 catch 块 - auto-ssl-setup.ts: 修复 1 个空 catch 块 - ssh-key-utils.ts: 修复 4 个空 catch 块 所有空块都添加了描述性注释说明为何忽略错误。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: clean up empty catch blocks in UI hooks and components 修复了 5 个 UI 组件和 hooks 中的空 catch 块： - useDragToSystemDesktop.ts: 修复 2 个空 catch 块 - HomepageAuth.tsx: 修复 1 个空 catch 块 - HostManagerEditor.tsx: 修复 2 个空 catch 块 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: clean up empty blocks in file manager and credential editor 修复了 5 个空块： - FileManagerGrid.tsx: 移除 1 个空 else 块和 1 个空 if 块 - CredentialEditor.tsx: 修复 1 个空 catch 块，移除 2 个空 if/else 块 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: clean up all empty catch blocks in Terminal components 修复了 Terminal 组件中的所有 8 个空 catch 块： - Desktop/Apps/Terminal/Terminal.tsx: 修复 5 个空 catch 块 - Mobile/Apps/Terminal/Terminal.tsx: 修复 3 个空 catch 块 所有空块都添加了描述性注释。这是空块修复的最后一批。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: remove useless try/catch wrappers 移除了 3 个无用的 try/catch 包装器： - users.ts: 移除只重新抛出错误的外层 try/catch - FileManager.tsx: 移除只重新抛出错误的内层 try/catch - DiffViewer.tsx: 移除只重新抛出错误的内层 try/catch 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: remove unused imports and mark unused parameters 移除了未使用的导入和标记未使用的参数： - auto-ssl-setup.ts: 移除未使用的 crypto 导入 - user-crypto.ts: 移除未使用的 users 导入 - user-data-import.ts: 移除未使用的 nanoid 导入 - simple-db-ops.ts: 标记未使用的 userId 和 tableName 参数 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: remove unnecessary escape characters in regex patterns 移除了正则表达式中不必要的转义字符： - users.ts: 修复 5 个 \/ 不必要的转义 - TabContext.tsx: 修复 1 个 \/ 不必要的转义 在字符串形式的正则表达式中，/ 不需要转义。 --------- Co-authored-by: ZacharyZcR <zacharyzcr1984@gmail.com> Co-authored-by: Claude <noreply@anthropic.com>
1135 lines
46 KiB
TypeScript
1135 lines
46 KiB
TypeScript
import { zodResolver } from "@hookform/resolvers/zod";
|
||
import { Controller, useForm } from "react-hook-form";
|
||
import { z } from "zod";
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Form,
|
||
FormControl,
|
||
FormField,
|
||
FormItem,
|
||
FormLabel,
|
||
} from "@/components/ui/form";
|
||
import { Input } from "@/components/ui/input";
|
||
import { PasswordInput } from "@/components/ui/password-input";
|
||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
import { Separator } from "@/components/ui/separator";
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import React, { useEffect, useRef, useState } from "react";
|
||
import { toast } from "sonner";
|
||
import {
|
||
createCredential,
|
||
updateCredential,
|
||
getCredentials,
|
||
getCredentialDetails,
|
||
detectKeyType,
|
||
detectPublicKeyType,
|
||
generatePublicKeyFromPrivate,
|
||
generateKeyPair,
|
||
} from "@/ui/main-axios";
|
||
import { useTranslation } from "react-i18next";
|
||
import CodeMirror from "@uiw/react-codemirror";
|
||
import { oneDark } from "@codemirror/theme-one-dark";
|
||
import { EditorView } from "@codemirror/view";
|
||
import type {
|
||
Credential,
|
||
CredentialEditorProps,
|
||
CredentialData,
|
||
} from "../../../../types/index.js";
|
||
|
||
export function CredentialEditor({
|
||
editingCredential,
|
||
onFormSubmit,
|
||
}: CredentialEditorProps) {
|
||
const { t } = useTranslation();
|
||
const [credentials, setCredentials] = useState<Credential[]>([]);
|
||
const [folders, setFolders] = useState<string[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [fullCredentialDetails, setFullCredentialDetails] =
|
||
useState<Credential | null>(null);
|
||
|
||
const [authTab, setAuthTab] = useState<"password" | "key">("password");
|
||
const [detectedKeyType, setDetectedKeyType] = useState<string | null>(null);
|
||
const [keyDetectionLoading, setKeyDetectionLoading] = useState(false);
|
||
const keyDetectionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||
|
||
const [detectedPublicKeyType, setDetectedPublicKeyType] = useState<
|
||
string | null
|
||
>(null);
|
||
const [publicKeyDetectionLoading, setPublicKeyDetectionLoading] =
|
||
useState(false);
|
||
const publicKeyDetectionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||
|
||
useEffect(() => {
|
||
const fetchData = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const credentialsData = await getCredentials();
|
||
setCredentials(credentialsData);
|
||
|
||
const uniqueFolders = [
|
||
...new Set(
|
||
credentialsData
|
||
.filter(
|
||
(credential) =>
|
||
credential.folder && credential.folder.trim() !== "",
|
||
)
|
||
.map((credential) => credential.folder!),
|
||
),
|
||
].sort() as string[];
|
||
|
||
setFolders(uniqueFolders);
|
||
} catch {
|
||
// Failed to load credentials
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchData();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const fetchCredentialDetails = async () => {
|
||
if (editingCredential) {
|
||
try {
|
||
const fullDetails = await getCredentialDetails(editingCredential.id);
|
||
setFullCredentialDetails(fullDetails);
|
||
} catch (error) {
|
||
toast.error(t("credentials.failedToFetchCredentialDetails"));
|
||
}
|
||
} else {
|
||
setFullCredentialDetails(null);
|
||
}
|
||
};
|
||
|
||
fetchCredentialDetails();
|
||
}, [editingCredential, t]);
|
||
|
||
const formSchema = z
|
||
.object({
|
||
name: z.string().min(1),
|
||
description: z.string().optional(),
|
||
folder: z.string().optional(),
|
||
tags: z.array(z.string().min(1)).default([]),
|
||
authType: z.enum(["password", "key"]),
|
||
username: z.string().min(1),
|
||
password: z.string().optional(),
|
||
key: z.any().optional().nullable(),
|
||
publicKey: z.string().optional(),
|
||
keyPassword: z.string().optional(),
|
||
keyType: z
|
||
.enum([
|
||
"auto",
|
||
"ssh-rsa",
|
||
"ssh-ed25519",
|
||
"ecdsa-sha2-nistp256",
|
||
"ecdsa-sha2-nistp384",
|
||
"ecdsa-sha2-nistp521",
|
||
"ssh-dss",
|
||
"ssh-rsa-sha2-256",
|
||
"ssh-rsa-sha2-512",
|
||
])
|
||
.optional(),
|
||
})
|
||
.superRefine((data, ctx) => {
|
||
if (data.authType === "password") {
|
||
if (!data.password || data.password.trim() === "") {
|
||
ctx.addIssue({
|
||
code: z.ZodIssueCode.custom,
|
||
message: t("credentials.passwordRequired"),
|
||
path: ["password"],
|
||
});
|
||
}
|
||
} else if (data.authType === "key") {
|
||
if (!data.key && !editingCredential) {
|
||
ctx.addIssue({
|
||
code: z.ZodIssueCode.custom,
|
||
message: t("credentials.sshKeyRequired"),
|
||
path: ["key"],
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
type FormData = z.infer<typeof formSchema>;
|
||
|
||
const form = useForm<FormData>({
|
||
resolver: zodResolver(formSchema) as any,
|
||
defaultValues: {
|
||
name: "",
|
||
description: "",
|
||
folder: "",
|
||
tags: [],
|
||
authType: "password",
|
||
username: "",
|
||
password: "",
|
||
key: null,
|
||
publicKey: "",
|
||
keyPassword: "",
|
||
keyType: "auto",
|
||
},
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (editingCredential && fullCredentialDetails) {
|
||
const defaultAuthType = fullCredentialDetails.authType;
|
||
setAuthTab(defaultAuthType);
|
||
|
||
setTimeout(() => {
|
||
const formData = {
|
||
name: fullCredentialDetails.name || "",
|
||
description: fullCredentialDetails.description || "",
|
||
folder: fullCredentialDetails.folder || "",
|
||
tags: fullCredentialDetails.tags || [],
|
||
authType: defaultAuthType as "password" | "key",
|
||
username: fullCredentialDetails.username || "",
|
||
password: "",
|
||
key: null,
|
||
publicKey: "",
|
||
keyPassword: "",
|
||
keyType: "auto" as const,
|
||
};
|
||
|
||
if (defaultAuthType === "password") {
|
||
formData.password = fullCredentialDetails.password || "";
|
||
} else if (defaultAuthType === "key") {
|
||
formData.key = fullCredentialDetails.key || "";
|
||
formData.publicKey = fullCredentialDetails.publicKey || "";
|
||
formData.keyPassword = fullCredentialDetails.keyPassword || "";
|
||
formData.keyType =
|
||
(fullCredentialDetails.keyType as any) || ("auto" as const);
|
||
}
|
||
|
||
form.reset(formData);
|
||
setTagInput("");
|
||
}, 100);
|
||
} else if (!editingCredential) {
|
||
setAuthTab("password");
|
||
form.reset({
|
||
name: "",
|
||
description: "",
|
||
folder: "",
|
||
tags: [],
|
||
authType: "password",
|
||
username: "",
|
||
password: "",
|
||
key: null,
|
||
publicKey: "",
|
||
keyPassword: "",
|
||
keyType: "auto",
|
||
});
|
||
setTagInput("");
|
||
}
|
||
}, [editingCredential?.id, fullCredentialDetails, form]);
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
if (keyDetectionTimeoutRef.current) {
|
||
clearTimeout(keyDetectionTimeoutRef.current);
|
||
}
|
||
if (publicKeyDetectionTimeoutRef.current) {
|
||
clearTimeout(publicKeyDetectionTimeoutRef.current);
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
const handleKeyTypeDetection = async (
|
||
keyValue: string,
|
||
keyPassword?: string,
|
||
) => {
|
||
if (!keyValue || keyValue.trim() === "") {
|
||
setDetectedKeyType(null);
|
||
return;
|
||
}
|
||
|
||
setKeyDetectionLoading(true);
|
||
try {
|
||
const result = await detectKeyType(keyValue, keyPassword);
|
||
if (result.success) {
|
||
setDetectedKeyType(result.keyType);
|
||
} else {
|
||
setDetectedKeyType("invalid");
|
||
}
|
||
} catch (error) {
|
||
setDetectedKeyType("error");
|
||
console.error("Key type detection error:", error);
|
||
} finally {
|
||
setKeyDetectionLoading(false);
|
||
}
|
||
};
|
||
|
||
const debouncedKeyDetection = (keyValue: string, keyPassword?: string) => {
|
||
if (keyDetectionTimeoutRef.current) {
|
||
clearTimeout(keyDetectionTimeoutRef.current);
|
||
}
|
||
keyDetectionTimeoutRef.current = setTimeout(() => {
|
||
handleKeyTypeDetection(keyValue, keyPassword);
|
||
}, 1000);
|
||
};
|
||
|
||
const handlePublicKeyTypeDetection = async (publicKeyValue: string) => {
|
||
if (!publicKeyValue || publicKeyValue.trim() === "") {
|
||
setDetectedPublicKeyType(null);
|
||
return;
|
||
}
|
||
|
||
setPublicKeyDetectionLoading(true);
|
||
try {
|
||
const result = await detectPublicKeyType(publicKeyValue);
|
||
if (result.success) {
|
||
setDetectedPublicKeyType(result.keyType);
|
||
} else {
|
||
setDetectedPublicKeyType("invalid");
|
||
console.warn("Public key detection failed:", result.error);
|
||
}
|
||
} catch (error) {
|
||
setDetectedPublicKeyType("error");
|
||
console.error("Public key type detection error:", error);
|
||
} finally {
|
||
setPublicKeyDetectionLoading(false);
|
||
}
|
||
};
|
||
|
||
const debouncedPublicKeyDetection = (publicKeyValue: string) => {
|
||
if (publicKeyDetectionTimeoutRef.current) {
|
||
clearTimeout(publicKeyDetectionTimeoutRef.current);
|
||
}
|
||
publicKeyDetectionTimeoutRef.current = setTimeout(() => {
|
||
handlePublicKeyTypeDetection(publicKeyValue);
|
||
}, 1000);
|
||
};
|
||
|
||
const getFriendlyKeyTypeName = (keyType: string): string => {
|
||
const keyTypeMap: Record<string, string> = {
|
||
"ssh-rsa": "RSA (SSH)",
|
||
"ssh-ed25519": "Ed25519 (SSH)",
|
||
"ecdsa-sha2-nistp256": "ECDSA P-256 (SSH)",
|
||
"ecdsa-sha2-nistp384": "ECDSA P-384 (SSH)",
|
||
"ecdsa-sha2-nistp521": "ECDSA P-521 (SSH)",
|
||
"ssh-dss": "DSA (SSH)",
|
||
"rsa-sha2-256": "RSA-SHA2-256",
|
||
"rsa-sha2-512": "RSA-SHA2-512",
|
||
invalid: t("credentials.invalidKey"),
|
||
error: t("credentials.detectionError"),
|
||
unknown: t("credentials.unknown"),
|
||
};
|
||
return keyTypeMap[keyType] || keyType;
|
||
};
|
||
|
||
const onSubmit = async (data: FormData) => {
|
||
try {
|
||
if (!data.name || data.name.trim() === "") {
|
||
data.name = data.username;
|
||
}
|
||
|
||
const submitData: CredentialData = {
|
||
name: data.name,
|
||
description: data.description,
|
||
folder: data.folder,
|
||
tags: data.tags,
|
||
authType: data.authType,
|
||
username: data.username,
|
||
keyType: data.keyType,
|
||
};
|
||
|
||
submitData.password = null;
|
||
submitData.key = null;
|
||
submitData.publicKey = null;
|
||
submitData.keyPassword = null;
|
||
submitData.keyType = null;
|
||
|
||
if (data.authType === "password") {
|
||
submitData.password = data.password;
|
||
} else if (data.authType === "key") {
|
||
submitData.key = data.key;
|
||
submitData.publicKey = data.publicKey;
|
||
submitData.keyPassword = data.keyPassword;
|
||
submitData.keyType = data.keyType;
|
||
}
|
||
|
||
if (editingCredential) {
|
||
await updateCredential(editingCredential.id, submitData);
|
||
toast.success(
|
||
t("credentials.credentialUpdatedSuccessfully", { name: data.name }),
|
||
);
|
||
} else {
|
||
await createCredential(submitData);
|
||
toast.success(
|
||
t("credentials.credentialAddedSuccessfully", { name: data.name }),
|
||
);
|
||
}
|
||
|
||
if (onFormSubmit) {
|
||
onFormSubmit();
|
||
}
|
||
|
||
window.dispatchEvent(new CustomEvent("credentials:changed"));
|
||
|
||
form.reset();
|
||
} catch (error) {
|
||
console.error("Credential save error:", error);
|
||
if (error instanceof Error) {
|
||
toast.error(error.message);
|
||
} else {
|
||
toast.error(t("credentials.failedToSaveCredential"));
|
||
}
|
||
}
|
||
};
|
||
|
||
const [tagInput, setTagInput] = useState("");
|
||
|
||
const [folderDropdownOpen, setFolderDropdownOpen] = useState(false);
|
||
const folderInputRef = useRef<HTMLInputElement>(null);
|
||
const folderDropdownRef = useRef<HTMLDivElement>(null);
|
||
|
||
const folderValue = form.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) => {
|
||
form.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 (
|
||
<div
|
||
className="flex-1 flex flex-col h-full min-h-0 w-full"
|
||
key={editingCredential?.id || "new"}
|
||
>
|
||
<Form {...form}>
|
||
<form
|
||
onSubmit={form.handleSubmit(onSubmit)}
|
||
className="flex flex-col flex-1 min-h-0 h-full"
|
||
>
|
||
<ScrollArea className="flex-1 min-h-0 w-full my-1 pb-2">
|
||
<Tabs defaultValue="general" className="w-full">
|
||
<TabsList>
|
||
<TabsTrigger value="general">
|
||
{t("credentials.general")}
|
||
</TabsTrigger>
|
||
<TabsTrigger value="authentication">
|
||
{t("credentials.authentication")}
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="general" className="pt-2">
|
||
<FormLabel className="mb-2 font-bold">
|
||
{t("credentials.basicInformation")}
|
||
</FormLabel>
|
||
<div className="grid grid-cols-12 gap-3">
|
||
<FormField
|
||
control={form.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={form.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={form.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={form.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-dark-bg border border-input rounded-md shadow-lg max-h-40 overflow-y-auto 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={form.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-dark-bg-input 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 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>
|
||
</TabsContent>
|
||
<TabsContent value="authentication">
|
||
<FormLabel className="mb-2 font-bold">
|
||
{t("credentials.authentication")}
|
||
</FormLabel>
|
||
<Tabs
|
||
value={authTab}
|
||
onValueChange={(value) => {
|
||
const newAuthType = value as "password" | "key";
|
||
setAuthTab(newAuthType);
|
||
form.setValue("authType", newAuthType);
|
||
|
||
form.setValue("password", "");
|
||
form.setValue("key", null);
|
||
form.setValue("keyPassword", "");
|
||
form.setValue("keyType", "auto");
|
||
}}
|
||
className="flex-1 flex flex-col h-full min-h-0"
|
||
>
|
||
<TabsList>
|
||
<TabsTrigger value="password">
|
||
{t("credentials.password")}
|
||
</TabsTrigger>
|
||
<TabsTrigger value="key">
|
||
{t("credentials.key")}
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="password">
|
||
<FormField
|
||
control={form.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 bg-muted/20 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 =
|
||
form.watch("keyPassword");
|
||
const result = await generateKeyPair(
|
||
"ssh-ed25519",
|
||
undefined,
|
||
currentKeyPassword,
|
||
);
|
||
|
||
if (result.success) {
|
||
form.setValue("key", result.privateKey);
|
||
form.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 =
|
||
form.watch("keyPassword");
|
||
const result = await generateKeyPair(
|
||
"ecdsa-sha2-nistp256",
|
||
undefined,
|
||
currentKeyPassword,
|
||
);
|
||
|
||
if (result.success) {
|
||
form.setValue("key", result.privateKey);
|
||
form.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 =
|
||
form.watch("keyPassword");
|
||
const result = await generateKeyPair(
|
||
"ssh-rsa",
|
||
2048,
|
||
currentKeyPassword,
|
||
);
|
||
|
||
if (result.success) {
|
||
form.setValue("key", result.privateKey);
|
||
form.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={form.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,
|
||
form.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,
|
||
form.watch("keyPassword"),
|
||
);
|
||
}}
|
||
placeholder={t(
|
||
"placeholders.pastePrivateKey",
|
||
)}
|
||
theme={oneDark}
|
||
className="border border-input rounded-md"
|
||
minHeight="120px"
|
||
basicSetup={{
|
||
lineNumbers: true,
|
||
foldGutter: false,
|
||
dropCursor: false,
|
||
allowMultipleSelections: false,
|
||
highlightSelectionMatches: false,
|
||
searchKeymap: false,
|
||
scrollPastEnd: false,
|
||
}}
|
||
extensions={[
|
||
EditorView.theme({
|
||
".cm-scroller": {
|
||
overflow: "auto",
|
||
},
|
||
}),
|
||
]}
|
||
/>
|
||
</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={form.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 = form.watch("key");
|
||
if (
|
||
!privateKey ||
|
||
typeof privateKey !== "string" ||
|
||
!privateKey.trim()
|
||
) {
|
||
toast.error(
|
||
t(
|
||
"credentials.privateKeyRequiredForGeneration",
|
||
),
|
||
);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const keyPassword =
|
||
form.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={oneDark}
|
||
className="border border-input rounded-md"
|
||
minHeight="120px"
|
||
basicSetup={{
|
||
lineNumbers: true,
|
||
foldGutter: false,
|
||
dropCursor: false,
|
||
allowMultipleSelections: false,
|
||
highlightSelectionMatches: false,
|
||
searchKeymap: false,
|
||
scrollPastEnd: false,
|
||
}}
|
||
extensions={[
|
||
EditorView.theme({
|
||
".cm-scroller": {
|
||
overflow: "auto",
|
||
},
|
||
}),
|
||
]}
|
||
/>
|
||
</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={form.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>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</ScrollArea>
|
||
<footer className="shrink-0 w-full pb-0">
|
||
<Separator className="p-0.25" />
|
||
<Button className="translate-y-2" type="submit" variant="outline">
|
||
{editingCredential
|
||
? t("credentials.updateCredential")
|
||
: t("credentials.addCredential")}
|
||
</Button>
|
||
</footer>
|
||
</form>
|
||
</Form>
|
||
</div>
|
||
);
|
||
}
|