danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add keypair generation and public key copy button to sftp volume form

Browse source
This commit is contained in:
Antoine Jeanselme 2026-04-18 09:38:52 +02:00
parent 8fac0d752b
commit e0d1facc05
1 changed files with 42 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/client/modules/volumes/components/volume-forms/sftp-form.tsx
View file

@ -14,7 +14,7 @@ import { SecretInput } from "../../../../components/ui/secret-input";
import { Textarea } from "../../../../components/ui/textarea";
import { Switch } from "../../../../components/ui/switch";
import { Button } from "~/client/components/ui/button";
import { generatePrivateKeyPem } from "~/utils/ssh";
import { generateSshKeyPairPem } from "~/utils/ssh";
type Props = {
form: UseFormReturn<FormValues>;
@ -24,25 +24,43 @@ export const SFTPForm = ({ form }: Props) => {
const skipHostKeyCheck = useWatch({ control: form.control, name: "skipHostKeyCheck" });
const [isGeneratingKey, setIsGeneratingKey] = useState(false);
const [keyGenerationError, setKeyGenerationError] = useState<string | null>(null);
const [generatedPublicKey, setGeneratedPublicKey] = useState<string | null>(null);
const [copyPublicKeyMessage, setCopyPublicKeyMessage] = useState<string | null>(null);
const handleGenerateKey = async () => {
setIsGeneratingKey(true);
setKeyGenerationError(null);
try {
const privateKey = await generatePrivateKeyPem();
form.setValue("privateKey", privateKey, {
const { privateKeyPem, publicKeyPem } = await generateSshKeyPairPem();
form.setValue("privateKey", privateKeyPem, {
shouldDirty: true,
shouldTouch: true,
shouldValidate: true,
});
setGeneratedPublicKey(publicKeyPem);
} catch {
setGeneratedPublicKey(null);
setKeyGenerationError("Could not generate SSH key in this browser.");
} finally {
setIsGeneratingKey(false);
}
};
const handleCopyPublicKey = async () => {
setCopyPublicKeyMessage(null);
if (!generatedPublicKey) {
setKeyGenerationError("Generate a key first to copy its public key.");
return;
}
try {
await navigator.clipboard.writeText(generatedPublicKey);
setCopyPublicKeyMessage("Public key copied to clipboard.");
} catch {
setKeyGenerationError("Could not copy public key to clipboard.");
}
};
return (
<>
<FormField
@ -123,17 +141,29 @@ export const SFTPForm = ({ form }: Props) => {
</FormControl>
<FormDescription>SSH private key for authentication (optional if using password).</FormDescription>
<FormMessage />
<Button
type="button"
variant="outline"
size="sm"
onClick={() => void handleGenerateKey()}
disabled={isGeneratingKey}
>
{isGeneratingKey ? "Generating..." : "Generate SSH Private Key"}
</Button>
<div className="flex flex-wrap gap-2">
<Button
type="button"
variant="outline"
size="sm"
onClick={() => void handleGenerateKey()}
disabled={isGeneratingKey}
>
{isGeneratingKey ? "Generating..." : "Generate SSH Key Pair"}
</Button>
<Button
type="button"
variant="outline"
size="sm"
onClick={() => void handleCopyPublicKey()}
disabled={isGeneratingKey || !generatedPublicKey}
>
Copy Public Key
</Button>
</div>
<FormDescription>The key is generated privately in your browser. Don't forget to save it!</FormDescription>
{keyGenerationError && <FormMessage className="text-xs text-destructive">{keyGenerationError}</FormMessage>}
{copyPublicKeyMessage && <FormMessage className="text-xs text-success">{copyPublicKeyMessage}</FormMessage>}
</FormItem>
)}
/>