feat: refactoring, soem work on forms

routes/(guest)/sign-up.tsx

@@ -0,0 +1,97 @@
+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>
+  );
+});