feat: refactoring, soem work on forms

routes/(guest)/_middleware.ts

@@ -0,0 +1,9 @@
+import { define } from "../../utils.ts";
+
+export default define.middleware((ctx) => {
+  if (ctx.state.loggedIn) {
+    return ctx.redirect("/dashboard", 303);
+  }
+
+  return ctx.next();
+});

routes/(guest)/sign-in.tsx

@@ -0,0 +1,74 @@
+import { z } from "zod";
+import { backendSignIn } from "../../backend/sign-in.ts";
+import Headline from "../../components/Headline.tsx";
+import { SignInForm } from "../../components/SignInForm.tsx";
+import { setAuthCookie } from "../../lib/auth.ts";
+import { define } from "../../utils.ts";
+
+const loginSchema = z.object({
+  email: z.string(),
+  password: z.string().min(8),
+});
+
+export const handler = define.handlers({
+  GET(_ctx) {
+    return {
+      data: {
+        email: "",
+        error: undefined,
+      },
+    };
+  },
+
+  async POST(ctx) {
+    const formData = await ctx.req.formData();
+    const request = loginSchema.safeParse({
+      email: formData.get("email"),
+      password: formData.get("password"),
+    });
+
+    if (!request.success) {
+      return {
+        data: {
+          email: formData.get("email") as string,
+          error: request.error.issues[0].message,
+        },
+      };
+    }
+    const { email, password } = request.data;
+
+    // Super secure authorization method
+    if (!await backendSignIn(email, password)) {
+      return {
+        data: {
+          email,
+        },
+      };
+    }
+
+    const headers = new Headers();
+    setAuthCookie(headers);
+
+    const url = new URL(ctx.req.url);
+    url.pathname = "/dashboard";
+    headers.set("location", url.toString());
+    return new Response(null, {
+      status: 303,
+      headers,
+    });
+  },
+});
+
+export default define.page<typeof handler>(function SignInPage(ctx) {
+  const email = ctx.data.email || "";
+  const error = ctx.data.error;
+
+  return (
+    <div class="p-4">
+      <div class="max-w-96 mx-auto p-4 flex flex-col gap-4 border rounded">
+        <Headline>Sign in</Headline>
+        <SignInForm email={email} error={error} />
+      </div>
+    </div>
+  );
+});

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>
+  );
+});