95 lines
3.9 KiB
TypeScript
95 lines
3.9 KiB
TypeScript
/**
|
|
* View Key Panel - Display SSH key details
|
|
*/
|
|
|
|
import { Check, Copy, Info } from 'lucide-react';
|
|
import React, { useCallback, useState } from 'react';
|
|
import { useI18n } from '../../application/i18n/I18nProvider';
|
|
import { SSHKey } from '../../types';
|
|
import { Button } from '../ui/button';
|
|
import { Label } from '../ui/label';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
|
|
import { copyToClipboard } from './utils';
|
|
|
|
interface ViewKeyPanelProps {
|
|
keyItem: SSHKey;
|
|
onExport: () => void;
|
|
}
|
|
|
|
export const ViewKeyPanel: React.FC<ViewKeyPanelProps> = ({
|
|
keyItem,
|
|
onExport,
|
|
}) => {
|
|
const { t } = useI18n();
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleCopyPublicKey = useCallback(async () => {
|
|
const ok = await copyToClipboard(keyItem.publicKey || '');
|
|
if (!ok) return;
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}, [keyItem.publicKey]);
|
|
|
|
return (
|
|
<>
|
|
<div className="space-y-2">
|
|
<Label className="text-muted-foreground">{t('keychain.field.label')}</Label>
|
|
<p className="text-sm">{keyItem.label}</p>
|
|
</div>
|
|
|
|
{keyItem.publicKey && (
|
|
<div className="space-y-2">
|
|
<Label className="text-muted-foreground">{t('keychain.field.publicKey')}</Label>
|
|
<div className="flex rounded-lg border border-border/80 bg-card overflow-hidden">
|
|
<div className="flex-1 min-w-0 p-3 font-mono text-xs break-all max-h-32 overflow-y-auto">
|
|
{keyItem.publicKey}
|
|
</div>
|
|
<div className="shrink-0 flex flex-col border-l border-border/60 p-1">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-7 w-7"
|
|
onClick={() => void handleCopyPublicKey()}
|
|
aria-label={
|
|
copied
|
|
? t('cloudSync.githubFlow.copied')
|
|
: t('action.copyPublicKey')
|
|
}
|
|
>
|
|
{copied ? <Check size={12} /> : <Copy size={12} />}
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="left">
|
|
{copied
|
|
? t('cloudSync.githubFlow.copied')
|
|
: t('action.copyPublicKey')}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-1">
|
|
<Label className="text-muted-foreground">{t('field.type')}</Label>
|
|
<p className="text-sm">{keyItem.type}</p>
|
|
</div>
|
|
|
|
{/* Key Export section */}
|
|
<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.export.title')}</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={onExport}>
|
|
{t('keychain.export.exportToHost')}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|