swadhin / opencodehub public

✨ feat: update ssh-keys.astro page

swadhinbiswas committed 3 months ago
ce0ba87
1 parent ba5ff9f
commit ce0ba87
1 file changed
+47 -3
Showing 1 changed file+47-3
src/pages/settings/ssh-keys.astro
▼src/pages/settings/ssh-keys.astro
+47-3
@@ -5,6 +5,9 @@ import { sshKeys } from "@/db/schema";
5
5
import { eq, desc } from "drizzle-orm";
6
6
7
7
const user = Astro.locals.user;
8
+const rawUrl = process.env.SITE_URL || "your-server.com";
9
+// Extract hostname for SSH commands
10
+const sshHost = rawUrl.replace(/^https?:\/\//, "").split(":")[0].split("/")[0];
8
11
9
12
if (!user) {
10
13
return Astro.redirect("/login");
@@ -49,6 +52,46 @@ try {
49
52
</button>
50
53
</div>
51
54
55
+ <!-- Documentation -->
56
+ <div class="rounded-lg border border-border bg-card/80 p-5">
57
+ <h4 class="text-sm font-semibold text-foreground mb-3">How to add an SSH key</h4>
58
+ <div class="space-y-3 text-sm text-muted-foreground">
59
+ <div class="flex items-start gap-3">
60
+ <span class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/20 text-primary text-xs flex items-center justify-center font-bold">1</span>
61
+ <div>
62
+ <p class="font-medium text-foreground">Generate an SSH key pair</p>
63
+ <p class="mt-1">Run this command in your terminal:</p>
64
+ <pre class="mt-2 p-3 rounded-lg bg-muted font-mono text-xs text-foreground overflow-x-auto">ssh-keygen -t ed25519 -C "[email protected]"</pre>
65
+ <p class="mt-1">Or for RSA:</p>
66
+ <pre class="mt-2 p-3 rounded-lg bg-muted font-mono text-xs text-foreground overflow-x-auto">ssh-keygen -t rsa -b 4096 -C "[email protected]"</pre>
67
+ </div>
68
+ </div>
69
+ <div class="flex items-start gap-3">
70
+ <span class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/20 text-primary text-xs flex items-center justify-center font-bold">2</span>
71
+ <div>
72
+ <p class="font-medium text-foreground">Copy your public key</p>
73
+ <pre class="mt-2 p-3 rounded-lg bg-muted font-mono text-xs text-foreground overflow-x-auto">cat ~/.ssh/id_ed25519.pub</pre>
74
+ <p class="mt-1">Copy the entire output (starts with <code class="px-1 py-0.5 rounded bg-muted text-foreground">ssh-ed25519</code> or <code class="px-1 py-0.5 rounded bg-muted text-foreground">ssh-rsa</code>).</p>
75
+ </div>
76
+ </div>
77
+ <div class="flex items-start gap-3">
78
+ <span class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/20 text-primary text-xs flex items-center justify-center font-bold">3</span>
79
+ <div>
80
+ <p class="font-medium text-foreground">Add the key to OpenCodeHub</p>
81
+ <p class="mt-1">Click "New SSH Key" above, paste your public key, and give it a descriptive title.</p>
82
+ </div>
83
+ </div>
84
+ <div class="flex items-start gap-3">
85
+ <span class="flex-shrink-0 w-5 h-5 rounded-full bg-primary/20 text-primary text-xs flex items-center justify-center font-bold">4</span>
86
+ <div>
87
+ <p class="font-medium text-foreground">Test your SSH connection</p>
88
+ <pre class="mt-2 p-3 rounded-lg bg-muted font-mono text-xs text-foreground overflow-x-auto">ssh -T git@{sshHost}</pre>
89
+ <p class="mt-1">You should see: <code class="px-1 py-0.5 rounded bg-muted text-foreground">Hi username! You've successfully authenticated</code></p>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
52
95
<!-- Keys List -->
53
96
<div class="relative">
54
97
<div class="absolute -inset-[1px] bg-gradient-to-r from-green-500/20 via-transparent to-emerald-500/20 rounded-xl opacity-50"></div>
@@ -161,6 +204,7 @@ try {
161
204
</SettingsLayout>
162
205
163
206
<script>
207
+ import { toast } from "sonner";
164
208
const addBtn = document.getElementById("add-key-btn");
165
209
const addFirstBtn = document.getElementById("add-first-key-btn");
166
210
const modal = document.getElementById("add-key-modal");
@@ -195,11 +239,11 @@ try {
195
239
window.location.reload();
196
240
} else {
197
241
const error = await response.json();
198
- alert(error.message || "Failed to add SSH key");
242
+ toast.error(error.message || "Failed to add SSH key");
199
243
}
200
244
} catch (error) {
201
245
console.error("Error adding SSH key:", error);
202
- alert("An error occurred");
246
+ toast.error("An error occurred");
203
247
}
204
248
});
205
249
@@ -212,7 +256,7 @@ try {
212
256
if (response.ok) {
213
257
window.location.reload();
214
258
} else {
215
- alert("Failed to delete SSH key");
259
+ toast.error("Failed to delete SSH key");
216
260
}
217
261
} catch (error) {
218
262
console.error("Error deleting SSH key:", error);
219
263