Feat/signup

src/components/button.astro

@@ -1,7 +1,7 @@
 ---
-interface Props {
+interface Props extends astroHTML.JSX.ButtonHTMLAttributes {
   variant?: ButtonVariant;
-  link: boolean;
+  link?: boolean;
 }
 
 type ButtonVariant = keyof typeof buttonVariants;
@@ -15,11 +15,16 @@ const buttonVariants = {
     "border border-primary text-primary hover:opacity-80 transition-opacity",
 };
 
-const { variant = "primary", link = false } = Astro.props;
+const {
+  variant = "primary",
+  link = false,
+  class: className,
+  ...rest
+} = Astro.props;
 
-const buttonClass = `${baseButton} ${buttonVariants[variant]} ${link ? "cursor-pointer" : ""}`;
+const buttonClass = `${baseButton} ${buttonVariants[variant]} ${link ? "cursor-pointer" : ""} ${className || ""}`;
 ---
 
-<button class={buttonClass}>
+<button class={buttonClass} {...rest}>
     <slot />
 </button>

src/components/input.astro

@@ -0,0 +1,7 @@
+---
+interface Props extends astroHTML.JSX.InputHTMLAttributes {}
+const { ...rest } = Astro.props;
+---
+
+<input class="border p-2" {...rest} />
+<slot />

src/layouts/layout.astro

@@ -19,7 +19,7 @@ import "../styles/global.css";
             <div class="max-w-2xl w-full p-4">
                 <a href="/" class="block w-fit mb-8">
                     <InitLogo
-                        transition:name={"logo"}
+                        transition:name="logo"
                         class="hover:opacity-80 transition-opacity"
                         width={60}
                         height={24}

src/pages/api/signup.ts

@@ -0,0 +1,15 @@
+import type { APIRoute } from "astro";
+
+export const prerender = false;
+
+export const POST: APIRoute = async ({ request }) => {
+  const data = await request.formData();
+  const email = data.get("email");
+  const name = data.get("name");
+
+  console.log(email, name);
+
+  return new Response(JSON.stringify({ email, name }), {
+    headers: { "Content-Type": "application/json" },
+  });
+};

src/pages/contact.astro

@@ -19,7 +19,7 @@ import "../styles/global.css";
         <p>
             You can reach us by contacting <a
                 href="mailto:init@kth.it"
-                class="hover:underline underline-offset-4">init@kth.it</a
+                class="underline underline-offset-4">init@kth.it</a
             >.
         </p>
     </section>

src/pages/join/index.astro

@@ -0,0 +1,79 @@
+---
+export const prerender = false; // Not needed in 'server' mode
+
+class ValidationError extends Error {}
+
+if (Astro.request.method === "POST") {
+  try {
+    const data = await Astro.request.formData();
+    const name = data.get("name");
+    const email = data.get("email");
+
+    const schema = z.object({
+      name: z.string().min(2).max(100),
+      email: z.string().email(),
+    });
+
+    const result = schema.safeParse({ name, email });
+
+    if (!result.success) {
+      console.error(result.error);
+      throw new ValidationError("Invalid input");
+    }
+
+    return Astro.redirect("/join/success");
+  } catch (error) {
+    if (error instanceof Error) {
+      console.error(error.message);
+      return Astro.redirect("/join?error=Internal+server+error");
+    }
+
+    if (error instanceof ValidationError) {
+      return Astro.redirect("/join?error=Missing+or+invalid+fields");
+    }
+  }
+}
+
+import { z } from "astro:content";
+import Button from "../../components/button.astro";
+import Input from "../../components/input.astro";
+import Layout from "../../layouts/layout.astro";
+
+const error = Astro.url.searchParams.get("error");
+---
+
+<Layout>
+    <section class="space-y-4">
+        {
+            error && (
+                <div class="mb-8">
+                    <p class="text-red-700">Error.</p>
+                    <p>{error}</p>
+                </div>
+            )
+        }
+
+        <form transition:persist transition:name="form" method="POST" class="space-y-4">
+            <div class="flex flex-col gap-2">
+                <label class="text-xs" for="email">Email:</label>
+                <Input type="email" id="email" name="email" required />
+            </div>
+            <div class="flex flex-col gap-2">
+                <label class="text-xs" for="name">Name:</label>
+                <Input type="text" id="name" name="name" required />
+            </div>
+            <p class="text-sm">
+                By submitting this form, you agree to the <a
+                    href="https://www.kth.it/privacy"
+                    class="underline underline-offset-4"
+                    target="blank"
+                >
+                    IT Chapter's GDPR Policy.
+                </a>
+            </p>
+            <Button transition:name="join" class="mt-8" type="submit"
+                >Join</Button
+            >
+        </form>
+    </section>
+</Layout>

src/pages/join/success.astro

@@ -0,0 +1,10 @@
+---
+import Layout from "../../layouts/layout.astro";
+---
+
+<Layout>
+    <section class="space-y-4">
+        <p>Thank you for applying.</p>
+        <p>We will reach out to you shortly.</p>
+    </section>
+</Layout>