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

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

@@ -13,7 +13,7 @@ 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 } from "~/utils/ssh";
+import { generatePrivateKeyPem, generateSshKeyPairPem } from "~/utils/ssh";
 
 type Props = {
 	form: UseFormReturn<RepositoryFormValues>;
@@ -23,25 +23,43 @@ 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 privateKey = await generatePrivateKeyPem();
+			const { privateKeyPem, publicKeyPem } = await generateSshKeyPairPem();
-			form.setValue("privateKey", privateKey, {
+			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
@@ -119,17 +137,29 @@ export const SftpRepositoryForm = ({ form }: Props) => {
 						</FormControl>
 						<FormDescription>Paste the contents of your SSH private key.</FormDescription>
 						<FormMessage />
-						<Button
+						<div className="flex flex-wrap gap-2">
-							type="button"
+							<Button
-							variant="outline"
+								type="button"
-							size="sm"
+								variant="outline"
-							onClick={() => void handleGenerateKey()}
+								size="sm"
-							disabled={isGeneratingKey}
+								onClick={() => void handleGenerateKey()}
-						>
+								disabled={isGeneratingKey}
-							{isGeneratingKey ? "Generating..." : "Generate SSH Private Key"}
+							>
-						</Button>
+								{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>
 				)}
 			/>