swadhinbiswas feat: optimize Docker CI/CD builds, refine site-wide UI aesthetic, and remediate secrets · 8/19/2026
c3e5c18
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
157
158
---
import BaseLayout from "@/layouts/BaseLayout.astro";
import Logo from "@/components/ui/Logo.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-8rem)] items-center justify-center py-12 px-4">
<div class="w-full max-w-sm space-y-6">
<!-- Logo -->
<div class="text-center space-y-2">
<a href="/" class="inline-flex items-center gap-2.5 hover:opacity-90 transition-opacity">
<Logo class="h-9 w-9 text-foreground" />
<span class="text-xl font-bold text-foreground tracking-tight">OpenCodeHub</span>
</a>
<h1 class="text-xl font-semibold text-foreground">Create your account</h1>
</div>
<!-- Register Card -->
<div class="rounded-xl border border-border bg-card/60 backdrop-blur-xl p-6 sm:p-7 shadow-sm">
<form id="register-form" class="space-y-4">
<div class="space-y-1.5">
<label for="username" class="block text-xs font-medium text-muted-foreground">
Username
</label>
<input
id="username"
name="username"
type="text"
placeholder="johndoe"
required
minlength="2"
maxlength="39"
autofocus
class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-foreground focus:ring-1 focus:ring-foreground transition-all"
/>
<p class="text-[11px] text-muted-foreground">Only letters, numbers, and hyphens.</p>
</div>
<div class="space-y-1.5">
<label for="email" class="block text-xs font-medium text-muted-foreground">
Email address
</label>
<input
id="email"
name="email"
type="email"
placeholder="[email protected]"
required
class="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-foreground focus:ring-1 focus:ring-foreground transition-all"
/>
</div>
<div class="space-y-1.5">
<label for="password" class="block text-xs 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-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-foreground focus:ring-1 focus:ring-foreground transition-all"
/>
</div>
<div
id="error-message"
class="text-xs text-red-400 bg-red-500/10 border border-red-500/20 rounded-md p-2.5 hidden"
role="alert"
>
</div>
<input type="hidden" name="_csrf" id="csrf-token" value={token} />
<button
type="submit"
id="submit-btn"
class="w-full py-2 px-4 rounded-md bg-[#238636] hover:bg-[#2ea043] text-white font-semibold text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-[#238636]"
>
Create account
</button>
</form>
<p class="text-[11px] text-muted-foreground text-center mt-4">
By creating an account, you agree to our{" "}
<a href="#" class="text-muted-foreground hover:text-foreground underline">Terms</a> and{" "}
<a href="#" class="text-muted-foreground hover:text-foreground underline">Privacy Policy</a>
</p>
</div>
<!-- Footer Callout -->
<div class="rounded-xl border border-border bg-card/40 p-4 text-center text-xs text-muted-foreground">
Already have an account?{" "}
<a href="/login" class="text-[#58a6ff] hover:underline font-medium">
Sign in
</a>
</div>
</div>
</div>
</BaseLayout>
<script>
const form = document.getElementById("register-form") as HTMLFormElement;
const errorMessage = document.getElementById("error-message");
const submitBtn = document.getElementById("submit-btn");
form?.addEventListener("submit", async (e) => {
e.preventDefault();
errorMessage?.classList.add("hidden");
errorMessage!.textContent = "";
const formData = new FormData(form);
const data = Object.fromEntries(formData);
const originalBtnText = submitBtn!.textContent;
submitBtn!.textContent = "Creating account...";
submitBtn!.setAttribute("disabled", "true");
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";
submitBtn!.textContent = originalBtnText;
submitBtn!.removeAttribute("disabled");
}
} catch (error) {
errorMessage?.classList.remove("hidden");
errorMessage!.textContent = "An unexpected error occurred";
submitBtn!.textContent = originalBtnText;
submitBtn!.removeAttribute("disabled");
}
});
</script>