User registration.

pages/api/hello.ts

@@ -1,13 +1,13 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from "next";
 
 type Data = {
-  name: string
-}
+  name: string;
+};
 
-export default function handler(
+export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  console.log("Triggered hello.ts");
+  res.status(200).json({ name: "John Doe" });
 }

pages/api/register.ts

@@ -0,0 +1,43 @@
+import { prisma } from "@/lib/db";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+interface Data {
+  name: string;
+}
+
+interface User {
+  name: string;
+  username: string;
+  password: string;
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  const data: User = req.body;
+
+  const createUser = await prisma.user.create({
+    data: {
+      name: data.name,
+      username: data.username,
+      password: data.password,
+      collections: {
+        create: [
+          {
+            role: "owner",
+            collection: {
+              create: {
+                name: "First Collection",
+              },
+            },
+          },
+        ],
+      },
+    },
+  });
+
+  console.log(createUser);
+
+  res.status(200).json(createUser);
+}

pages/index.tsx

@@ -1,9 +1,7 @@
 export default function Home() {
   return (
-    <>
-      <main>
-        <h1 className="underline">Linkwarden</h1>
-      </main>
-    </>
+    <div className="p-5">
+      <p className="text-3xl font-bold text-center mb-10">Linkwarden</p>
+    </div>
   );
 }

pages/register.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+interface FormData {
+  name: string;
+  username: string;
+  password: string;
+}
+
+export default function Register() {
+  const [form, setForm] = useState<FormData>({
+    name: "",
+    username: "",
+    password: "",
+  });
+
+  function registerUser() {
+    console.log(form);
+    if (form.name != "" && form.username != "" && form.password != "") {
+      fetch("/api/register", {
+        body: JSON.stringify(form),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      });
+
+      setForm({
+        name: "",
+        username: "",
+        password: "",
+      });
+    } else {
+      console.log("Please fill out all the fields.");
+    }
+  }
+
+  return (
+    <div className="p-5">
+      <p className="text-3xl font-bold text-center mb-10">Linkwarden</p>
+      <input
+        type="text"
+        placeholder="Name"
+        value={form.name}
+        onChange={(e) => setForm({ ...form, name: e.target.value })}
+        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+      />
+      <input
+        type="text"
+        placeholder="Username"
+        value={form.username}
+        onChange={(e) => setForm({ ...form, username: e.target.value })}
+        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+      />
+      <input
+        type="text"
+        placeholder="Password"
+        value={form.password}
+        onChange={(e) => setForm({ ...form, password: e.target.value })}
+        className="border border-gray-700 rounded block m-2 mx-auto p-2"
+      />
+      <div
+        className="mx-auto bg-gray-700 w-min p-3 m-5 text-white rounded cursor-pointer"
+        onClick={registerUser}
+      >
+        Register
+      </div>
+    </div>
+  );
+}