feat: add UI ssh key pair generator

app/client/modules/repositories/components/repository-forms/sftp-repository-form.tsx

@@ -1,4 +1,5 @@
 import { useWatch, type UseFormReturn } from "react-hook-form";
+import { useState } from "react";
 import {
 	FormControl,
 	FormDescription,
@@ -11,13 +12,53 @@ import { Input } from "../../../../components/ui/input";
 import { Textarea } from "../../../../components/ui/textarea";
 import { Switch } from "../../../../components/ui/switch";
 import type { RepositoryFormValues } from "../create-repository-form";
+import { Button } from "~/client/components/ui/button";
+import { generatePrivateKeyPem, generateSshKeyPairPem } from "~/utils/ssh";
 
 type Props = {
 	form: UseFormReturn<RepositoryFormValues>;
 };
 
 export const SftpRepositoryForm = ({ 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 { 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 (
 		<>
@@ -96,6 +137,29 @@ export const SftpRepositoryForm = ({ form }: Props) => {
 						</FormControl>
 						<FormDescription>Paste the contents of your SSH private key.</FormDescription>
 						<FormMessage />
+						<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>
 				)}
 			/>

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

@@ -1,4 +1,5 @@
 import { useWatch, type UseFormReturn } from "react-hook-form";
+import { useState } from "react";
 import type { FormValues } from "../create-volume-form";
 import {
 	FormControl,
@@ -12,13 +13,53 @@ import { Input } from "../../../../components/ui/input";
 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 { generateSshKeyPairPem } from "~/utils/ssh";
 
 type Props = {
 	form: UseFormReturn<FormValues>;
 };
 
 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 { 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 (
 		<>
@@ -100,6 +141,29 @@ export const SFTPForm = ({ form }: Props) => {
 						</FormControl>
 						<FormDescription>SSH private key for authentication (optional if using password).</FormDescription>
 						<FormMessage />
+						<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>
 				)}
 			/>

app/utils/ssh.ts

@@ -0,0 +1,42 @@
+const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
+	let binary = "";
+	const bytes = new Uint8Array(buffer);
+	const chunkSize = 0x8000;
+
+	for (let i = 0; i < bytes.length; i += chunkSize) {
+		binary += String.fromCharCode(...bytes.subarray(i, i + chunkSize));
+	}
+
+	return btoa(binary);
+};
+
+const toPem = (base64: string, label: string) => {
+	const wrapped = base64.match(/.{1,64}/g)?.join("\n") ?? base64;
+	return `-----BEGIN ${label}-----\n${wrapped}\n-----END ${label}-----`;
+};
+
+export const generateSshKeyPairPem = async () => {
+	const keyPair = await crypto.subtle.generateKey(
+		{
+			name: "RSASSA-PKCS1-v1_5",
+			modulusLength: 4096,
+			publicExponent: new Uint8Array([1, 0, 1]),
+			hash: "SHA-256",
+		},
+		true,
+		["sign", "verify"],
+	);
+
+	const privateKey = await crypto.subtle.exportKey("pkcs8", keyPair.privateKey);
+	const publicKey = await crypto.subtle.exportKey("spki", keyPair.publicKey);
+
+	return {
+		privateKeyPem: toPem(arrayBufferToBase64(privateKey), "PRIVATE KEY"),
+		publicKeyPem: toPem(arrayBufferToBase64(publicKey), "PUBLIC KEY"),
+	};
+};
+
+export const generatePrivateKeyPem = async () => {
+	const keyPair = await generateSshKeyPairPem();
+	return keyPair.privateKeyPem;
+};