From 3d1ac0c5492fbcff77e5090d3100c7fff937803a Mon Sep 17 00:00:00 2001
From: Joe Clay <joeclayallday@gmail.com>
Date: Thu, 17 Oct 2024 12:22:00 -0500
Subject: [PATCH] Add extra step to ssh key instructions (#954)

---
 src/ui/shared/add-ssh-key.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/ui/shared/add-ssh-key.tsx b/src/ui/shared/add-ssh-key.tsx
index 4391d1afe..1a5fe1c16 100644
--- a/src/ui/shared/add-ssh-key.tsx
+++ b/src/ui/shared/add-ssh-key.tsx
@@ -55,13 +55,26 @@ export const AddSSHKeyForm = ({
             { text: "~/.ssh/*.pub", className: "text-white" },
           ]}
         />
-        <p className="text-gray-600 mt-2">
-          If you want to generate a new SSH key or want to learn how Aptible
-          uses your key,{" "}
+      </div>
+
+      <div className="my-4">
+        <h4 className={tokens.type.h4}>
+          If you don’t already have an SSH Public Key, generate a new SSH key
+          using this command
+        </h4>
+        <p className="text-gray-600 mb-2">
+          Need help generating a new key?{" "}
           <a href="https://www.aptible.com/docs/public-key-authentication">
-            view our docs
+            View our docs
           </a>
         </p>
+        <PreCode
+          allowCopy
+          segments={[
+            { text: "ssh-keygen -t ed25519 -C", className: "text-lime" },
+            { text: '"your_email@example.com"', className: "text-white" },
+          ]}
+        />
       </div>
 
       <div className="mt-2">