JustAPI Bot fix: comprehensive UI, docs, security, and deployment improvements · 7/14/2026
381467d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getCsrfToken } from "@/middleware/csrf";
if (Astro.locals.user) {
return Astro.redirect("/dashboard");
}
const { token, cookie } = getCsrfToken(Astro.request);
Astro.response.headers.append("Set-Cookie", cookie);
---
<BaseLayout title="Sign up for OpenCodeHub">
<div class="flex min-h-[calc(100vh-4rem)] items-center justify-center py-12">
<div class="w-full max-w-md">
<!-- Logo -->
<div class="text-center mb-8">
<a href="/" class="inline-flex items-center gap-2">
<div class="p-2 rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600">
<svg class="h-8 w-8 text-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</div>
<span class="text-2xl font-bold text-foreground">OpenCodeHub</span>
</a>
</div>
<!-- Register Card -->
<div class="relative">
<div class="absolute -inset-[1px] bg-gradient-to-r from-green-500/30 via-cyan-500/20 to-purple-500/30 rounded-2xl blur-sm"></div>
<div class="relative rounded-2xl border border-border bg-card/90 backdrop-blur-xl p-8">
<div class="text-center mb-6">
<h1 class="text-2xl font-bold text-foreground mb-2">Create an account</h1>
<p class="text-muted-foreground text-sm">Join OpenCodeHub and start building</p>
</div>
<form id="register-form" class="space-y-5">
<div class="space-y-2">
<label for="username" class="block text-sm font-medium text-muted-foreground">
Username
</label>
<input
id="username"
name="username"
type="text"
placeholder="johndoe"
required
minlength="2"
maxlength="39"
class="w-full rounded-lg border border-border bg-secondary px-4 py-3 text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-green-500/50 focus:ring-2 focus:ring-green-500/20 transition-all"
/>
<p class="text-xs text-muted-foreground">Only letters, numbers, and hyphens.</p>
</div>
<div class="space-y-2">
<label for="email" class="block text-sm font-medium text-muted-foreground">
Email
</label>
<input
id="email"
name="email"
type="email"
placeholder="[email protected]"
required
class="w-full rounded-lg border border-border bg-secondary px-4 py-3 text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-green-500/50 focus:ring-2 focus:ring-green-500/20 transition-all"
/>
</div>
<div class="space-y-2">
<label for="password" class="block text-sm font-medium text-muted-foreground">
Password
</label>
<input
id="password"
name="password"
type="password"
placeholder="At least 8 characters"
required
minlength="8"
class="w-full rounded-lg border border-border bg-secondary px-4 py-3 text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-green-500/50 focus:ring-2 focus:ring-green-500/20 transition-all"
/>
<p class="text-xs text-muted-foreground">Must be at least 8 characters long.</p>
</div>
<div id="error-message" class="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg p-3 hidden" role="alert"></div>
<input type="hidden" name="_csrf" id="csrf-token" value={token} />
<button
type="submit"
class="w-full py-3 px-4 rounded-lg bg-gradient-to-r from-green-500 to-emerald-600 text-foreground font-medium shadow-lg shadow-green-500/25 hover:shadow-green-500/40 transition-all focus:outline-none focus:ring-2 focus:ring-green-500/50"
>
Create account
</button>
</form>
<!-- Terms -->
<p class="text-xs text-muted-foreground text-center mt-4">
By creating an account, you agree to our{" "}
<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">Terms</a> and{" "}
<a href="#" class="text-muted-foreground hover:text-foreground transition-colors">Privacy Policy</a>
</p>
<!-- Footer -->
<p class="text-center text-sm text-muted-foreground mt-6">
Already have an account?{" "}
<a href="/login" class="text-green-400 hover:text-green-300 font-medium transition-colors">
Sign in
</a>
</p>
</div>
</div>
</div>
</div>
</BaseLayout>
<script>
const form = document.getElementById("register-form") as HTMLFormElement;
const errorMessage = document.getElementById("error-message");
form?.addEventListener("submit", async (e) => {
e.preventDefault();
errorMessage?.classList.add("hidden");
errorMessage!.textContent = "";
const formData = new FormData(form);
const data = Object.fromEntries(formData);
try {
const csrfToken = (document.getElementById("csrf-token") as HTMLInputElement)?.value || "";
const response = await fetch("/api/auth/register", {
method: "POST",
headers: {
"Content-Type": "application/json",
"x-csrf-token": csrfToken,
},
body: JSON.stringify(data),
});
const result = await response.json();
if (result.success) {
window.location.href = "/dashboard";
} else {
errorMessage?.classList.remove("hidden");
errorMessage!.textContent = result.error?.message || "Failed to create account";
}
} catch (error) {
errorMessage?.classList.remove("hidden");
errorMessage!.textContent = "An unexpected error occurred";
}
});
</script>