[Init] Initial commit - NetMesh terminal manager

components/KeychainEditPanel.tsx

@@ -0,0 +1,185 @@
+import React from "react";
+import { Eye, EyeOff, FileKey, Info } from "lucide-react";
+import type { SSHKey } from "../types";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Textarea } from "./ui/textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type KeychainEditPanelProps = Record<string, any>;
+
+export const KeychainEditPanel: React.FC<KeychainEditPanelProps> = ({
+  panel,
+  t,
+  draftKey,
+  setDraftKey,
+  showPassphrase,
+  setShowPassphrase,
+  openKeyExport,
+  onUpdate,
+  closePanel,
+}) => {
+  return (
+              <>
+                <div className="space-y-2">
+                  <Label>{t("keychain.edit.labelRequired")}</Label>
+                  <Input
+                    value={draftKey.label || ""}
+                    onChange={(e) =>
+                      setDraftKey({ ...draftKey, label: e.target.value })
+                    }
+                    placeholder={t("keychain.edit.keyLabelPlaceholder")}
+                  />
+                </div>
+
+                {/* Reference key: show file path read-only */}
+                {draftKey.source === 'reference' && draftKey.filePath && (
+                  <div className="space-y-2">
+                    <Label className="text-muted-foreground">
+                      {t("keychain.edit.filePath")}
+                    </Label>
+                    <div className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60">
+                      <FileKey size={14} className="text-primary shrink-0" />
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <span className="text-xs font-mono truncate cursor-default">
+                            {draftKey.filePath}
+                          </span>
+                        </TooltipTrigger>
+                        <TooltipContent>{draftKey.filePath}</TooltipContent>
+                      </Tooltip>
+                    </div>
+                  </div>
+                )}
+
+                {/* Managed key: show private key editor */}
+                {draftKey.source !== 'reference' && (
+                  <div className="space-y-2">
+                    <Label className="text-destructive">
+                      {t("keychain.edit.privateKeyRequired")}
+                    </Label>
+                    <Textarea
+                      value={draftKey.privateKey || ""}
+                      onChange={(e) =>
+                        setDraftKey({ ...draftKey, privateKey: e.target.value })
+                      }
+                      placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
+                      className="min-h-[180px] font-mono text-xs"
+                    />
+                  </div>
+                )}
+
+                {draftKey.source !== 'reference' && (
+                  <div className="space-y-2">
+                    <Label className="text-muted-foreground">
+                      {t("keychain.edit.publicKey")}
+                    </Label>
+                    <Textarea
+                      value={draftKey.publicKey || ""}
+                      onChange={(e) =>
+                        setDraftKey({ ...draftKey, publicKey: e.target.value })
+                      }
+                      placeholder="ssh-ed25519 AAAA..."
+                      className="min-h-[80px] font-mono text-xs"
+                    />
+                  </div>
+                )}
+
+                {draftKey.source !== 'reference' && (
+                  <div className="space-y-2">
+                    <Label className="text-muted-foreground">
+                      {t("keychain.edit.certificate")}
+                    </Label>
+                    <Textarea
+                      value={draftKey.certificate || ""}
+                      onChange={(e) =>
+                        setDraftKey({ ...draftKey, certificate: e.target.value })
+                      }
+                      placeholder={t("keychain.edit.certificatePlaceholder")}
+                      className="min-h-[60px] font-mono text-xs"
+                    />
+                  </div>
+                )}
+
+                {/* Passphrase section */}
+                <div className="space-y-2">
+                  <Label>{t('terminal.auth.passphrase')}</Label>
+                  <div className="relative">
+                    <Input
+                      type={showPassphrase ? 'text' : 'password'}
+                      value={draftKey.passphrase || ''}
+                      onChange={(e) =>
+                        setDraftKey({ ...draftKey, passphrase: e.target.value })
+                      }
+                      placeholder={t('keychain.generate.passphrasePlaceholder')}
+                      className="pr-10"
+                    />
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8"
+                      onClick={() => setShowPassphrase(!showPassphrase)}
+                    >
+                      {showPassphrase ? <EyeOff size={14} /> : <Eye size={14} />}
+                    </Button>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      id="editSavePassphrase"
+                      checked={draftKey.savePassphrase || false}
+                      onChange={(e) =>
+                        setDraftKey({ ...draftKey, savePassphrase: e.target.checked })
+                      }
+                      className="h-4 w-4 rounded border-border"
+                    />
+                    <Label htmlFor="editSavePassphrase" className="text-sm font-normal cursor-pointer">
+                      {t('keychain.generate.savePassphrase')}
+                    </Label>
+                  </div>
+                </div>
+
+                {/* Key Export section - only for managed keys */}
+                {draftKey.source !== 'reference' && (
+                  <div className="pt-4 mt-4 border-t border-border/60">
+                    <div className="flex items-center gap-2 mb-3">
+                      <span className="text-sm font-medium">
+                        {t("keychain.edit.keyExport")}
+                      </span>
+                      <div className="h-4 w-4 rounded-full bg-muted flex items-center justify-center">
+                        <Info size={10} className="text-muted-foreground" />
+                      </div>
+                    </div>
+                    <Button
+                      className="w-full h-11"
+                      onClick={() => openKeyExport(panel.key)}
+                    >
+                      {t("keychain.edit.exportToHost")}
+                    </Button>
+                  </div>
+                )}
+
+                {/* Save button */}
+                <Button
+                  className="w-full h-11 mt-4"
+                  disabled={
+                    !draftKey.label?.trim() ||
+                    (draftKey.source !== 'reference' && !draftKey.privateKey?.trim())
+                  }
+                  onClick={() => {
+                    if (draftKey.id) {
+                      onUpdate({
+                        ...panel.key,
+                        ...(draftKey as SSHKey),
+                      });
+                      closePanel();
+                    }
+                  }}
+                >
+                  {t("common.saveChanges")}
+                </Button>
+              </>
+  );
+};