feat: refactoring, soem work on forms

routes/(app)/_middleware.ts

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

routes/(app)/dashboard.tsx

@@ -0,0 +1,10 @@
+import Headline from "../../components/Headline.tsx";
+import { define } from "../../utils.ts";
+
+export default define.page(function Dashboard() {
+  return (
+    <div class="container mx-auto p-4">
+      <Headline>Dashboard</Headline>
+    </div>
+  );
+});

routes/(app)/sign-out.tsx

@@ -1,13 +1,12 @@
-import { define, unsetAuthCookie } from "../utils.ts";
+import { unsetAuthCookie } from "../../lib/auth.ts";
+import { define } from "../../utils.ts";
 
 export const handler = define.handlers({
-  GET(ctx) {
+  POST(ctx) {
     const headers = new Headers();
     unsetAuthCookie(headers);
 
-    const url = new URL(ctx.req.url);
-    url.pathname = "/";
-    headers.set("location", url.toString());
+    headers.set("location", new URL("/", ctx.req.url).toString());
     return new Response(null, {
       status: 303,
       headers,

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

@@ -1,8 +1,9 @@
 import { z } from "zod";
-import { backendSignIn } from "../backend/sign-in.ts";
-import Headline from "../components/Headline.tsx";
-import { SignInForm } from "../components/SignInForm.tsx";
-import { define, isLoggedIn, setAuthCookie } from "../utils.ts";
+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(),
@@ -10,13 +11,7 @@ const loginSchema = z.object({
 });
 
 export const handler = define.handlers({
-  GET(ctx) {
-    if (isLoggedIn(ctx.req)) {
-      const url = new URL(ctx.req.url);
-      url.pathname = "/dashboard";
-      return Response.redirect(url, 303);
-    }
-
+  GET(_ctx) {
     return {
       data: {
         email: "",
@@ -52,7 +47,7 @@ export const handler = define.handlers({
     }
 
     const headers = new Headers();
-    setAuthCookie(ctx.req, headers);
+    setAuthCookie(headers);
 
     const url = new URL(ctx.req.url);
     url.pathname = "/dashboard";

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

routes/(public)/index.tsx

@@ -1,7 +1,7 @@
 import { useSignal } from "@preact/signals";
 import { Head } from "fresh/runtime";
-import Counter from "../islands/Counter.tsx";
-import { define } from "../utils.ts";
+import Counter from "../../islands/Counter.tsx";
+import { define } from "../../utils.ts";
 
 export default define.page(function Home(ctx) {
   const count = useSignal(3);

routes/_app.tsx

@@ -1,9 +1,8 @@
 import Header from "../components/Header.tsx";
-import { define, isLoggedIn } from "../utils.ts";
+import { define } from "../utils.ts";
 
 export default define.page(function App(ctx) {
   const Component = ctx.Component;
-  const loggedIn = isLoggedIn(ctx.req);
 
   return (
     <html data-theme="light">
@@ -13,7 +12,7 @@ export default define.page(function App(ctx) {
         <title>Deno Fresh Dummy</title>
       </head>
       <body>
-        <Header loggedIn={loggedIn} />
+        <Header loggedIn={ctx.state.loggedIn} />
         <Component />
       </body>
     </html>

routes/_middleware.ts

@@ -0,0 +1,7 @@
+import { isLoggedIn } from "../lib/auth.ts";
+import { define } from "../utils.ts";
+
+export default define.middleware((ctx) => {
+  ctx.state.loggedIn = isLoggedIn(ctx.req);
+  return ctx.next();
+});

routes/api/[name].tsx

@@ -1,10 +0,0 @@
-import { define } from "../../utils.ts";
-
-export const handler = define.handlers({
-  GET(ctx) {
-    const name = ctx.params.name;
-    return new Response(
-      `Hello, ${name.charAt(0).toUpperCase() + name.slice(1)}!`,
-    );
-  },
-});

routes/dashboard.tsx

@@ -1,23 +0,0 @@
-import Headline from "../components/Headline.tsx";
-import { define, isLoggedIn } from "../utils.ts";
-
-export const handler = define.handlers({
-  GET(ctx) {
-    console.log("ASDF");
-    if (!isLoggedIn(ctx.req)) {
-      const url = new URL(ctx.req.url);
-      url.pathname = "/sign-in";
-      return Response.redirect(url, 303);
-    }
-
-    return { data: {} };
-  },
-});
-
-export default define.page<typeof handler>(function Dashboard(_ctx) {
-  return (
-    <div class="container mx-auto p-4">
-      <Headline>Dashboard</Headline>
-    </div>
-  );
-});

routes/sign-up.tsx

@@ -1,33 +0,0 @@
-import Headline from "../components/Headline.tsx";
-import { define } from "../utils.ts";
-
-export default define.page(function SignUpPage(ctx) {
-  return (
-    <form class="container mx-auto p-4 flex flex-col gap-4">
-      <Headline>Sign up</Headline>
-      <input
-        type="email"
-        name="email"
-        placeholder="E-Mail"
-        class="input w-full"
-      />
-      <div class="flex flex-row gap-4">
-        <input
-          type="text"
-          name="firstName"
-          placeholder="First name"
-          class="input w-full"
-        />
-        <input
-          type="text"
-          name="lastName"
-          placeholder="Last name"
-          class="input w-full"
-        />
-      </div>
-      <button type="submit" class="btn btn-primary self-start">
-        Sign up
-      </button>
-    </form>
-  );
-});