98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
import { z } from "zod";
|
|
import Headline from "../../components/Headline.tsx";
|
|
import PasswordConfirmationFields from "../../islands/PasswordConfirmationFields.tsx";
|
|
import { define } from "../../utils.ts";
|
|
|
|
const signUpSchema = z.object({
|
|
email: z.email("Please enter a valid email address.").trim(),
|
|
firstName: z.string().trim().min(1, "Please enter your first name."),
|
|
lastName: z.string().trim().min(1, "Please enter your last name."),
|
|
password: z.string().min(8, "Password must be at least 8 characters long."),
|
|
passwordConfirm: z.string(),
|
|
}).refine((data) => data.password === data.passwordConfirm, {
|
|
message: "Passwords do not match.",
|
|
path: ["passwordConfirm"],
|
|
});
|
|
|
|
const emptyForm = {
|
|
email: "",
|
|
firstName: "",
|
|
lastName: "",
|
|
error: undefined as string | undefined,
|
|
};
|
|
|
|
export const handler = define.handlers({
|
|
GET() {
|
|
return { data: emptyForm };
|
|
},
|
|
|
|
async POST(ctx) {
|
|
const formData = await ctx.req.formData();
|
|
const result = signUpSchema.safeParse({
|
|
email: formData.get("email"),
|
|
firstName: formData.get("firstName"),
|
|
lastName: formData.get("lastName"),
|
|
password: formData.get("password"),
|
|
passwordConfirm: formData.get("passwordConfirm"),
|
|
});
|
|
|
|
if (!result.success) {
|
|
return {
|
|
data: {
|
|
email: formData.get("email")?.toString() ?? "",
|
|
firstName: formData.get("firstName")?.toString() ?? "",
|
|
lastName: formData.get("lastName")?.toString() ?? "",
|
|
error: result.error.issues[0].message,
|
|
},
|
|
};
|
|
}
|
|
|
|
const { passwordConfirm: _passwordConfirm, ...registration } = result.data;
|
|
// Use registration to register user
|
|
void registration;
|
|
|
|
return ctx.redirect("/sign-up", 303);
|
|
},
|
|
});
|
|
|
|
export default define.page<typeof handler>(function SignUpPage(ctx) {
|
|
const { email, firstName, lastName, error } = ctx.data;
|
|
|
|
return (
|
|
<form method="post" class="container mx-auto p-4 flex flex-col gap-4">
|
|
<Headline>Sign up</Headline>
|
|
{error && <p class="text-error" role="alert">{error}</p>}
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="E-Mail"
|
|
class="input w-full"
|
|
value={email}
|
|
required
|
|
/>
|
|
<div class="flex flex-row gap-4">
|
|
<input
|
|
type="text"
|
|
name="firstName"
|
|
placeholder="First name"
|
|
class="input min-w-0 flex-1"
|
|
value={firstName}
|
|
required
|
|
/>
|
|
<input
|
|
type="text"
|
|
name="lastName"
|
|
placeholder="Last name"
|
|
class="input min-w-0 flex-1"
|
|
value={lastName}
|
|
required
|
|
/>
|
|
</div>
|
|
<PasswordConfirmationFields />
|
|
<button type="submit" class="btn btn-primary self-start">
|
|
Sign up
|
|
</button>
|
|
</form>
|
|
);
|
|
});
|