User registration.

.env

@@ -0,0 +1 @@
+DATABASE_URL="postgresql://daniel:password@localhost:5432/mydb?schema=public"

lib/db.ts

@@ -0,0 +1,11 @@
+import { PrismaClient } from "@prisma/client";
+
+const globalForPrisma = global as unknown as { prisma: PrismaClient };
+
+export const prisma =
+  globalForPrisma.prisma ||
+  new PrismaClient({
+    log: ["query"],
+  });
+
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@next/font": "13.1.6",
+    "@prisma/client": "^4.9.0",
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
@@ -27,6 +28,7 @@
   "devDependencies": {
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
+    "prisma": "^4.9.0",
     "tailwindcss": "^3.2.4"
   }
 }

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

prisma/migrations/20230130215222_/migration.sql

@@ -0,0 +1,32 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "username" TEXT NOT NULL,
+    "password" TEXT NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Collection" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+
+    CONSTRAINT "Collection_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "UserAndCollection" (
+    "userId" TEXT NOT NULL,
+    "collectionId" TEXT NOT NULL,
+    "role" TEXT NOT NULL,
+
+    CONSTRAINT "UserAndCollection_pkey" PRIMARY KEY ("userId","collectionId")
+);
+
+-- AddForeignKey
+ALTER TABLE "UserAndCollection" ADD CONSTRAINT "UserAndCollection_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserAndCollection" ADD CONSTRAINT "UserAndCollection_collectionId_fkey" FOREIGN KEY ("collectionId") REFERENCES "Collection"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -0,0 +1,37 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id String @id @default(cuid())
+  name String
+  username String
+  password String
+  collections UserAndCollection[]
+}
+
+model Collection {
+  id String @id @default(cuid())
+  name String
+  users UserAndCollection[]
+}
+
+model UserAndCollection {
+  user User @relation(fields: [userId], references: [id])
+  userId String
+
+  collection Collection @relation(fields: [collectionId], references: [id])
+  collectionId String
+
+  role String
+
+  @@id([userId, collectionId])
+}

yarn.lock

@@ -158,6 +158,23 @@
     tiny-glob "^0.2.9"
     tslib "^2.4.0"
 
+"@prisma/client@^4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-4.9.0.tgz#4a4068f3540732ea5723c008d49ed684d20f9340"
+  integrity sha512-bz6QARw54sWcbyR1lLnF2QHvRW5R/Jxnbbmwh3u+969vUKXtBkXgSgjDA85nji31ZBlf7+FrHDy5x+5ydGyQDg==
+  dependencies:
+    "@prisma/engines-version" "4.9.0-42.ceb5c99003b99c9ee2c1d2e618e359c14aef2ea5"
+
+"@prisma/engines-version@4.9.0-42.ceb5c99003b99c9ee2c1d2e618e359c14aef2ea5":
+  version "4.9.0-42.ceb5c99003b99c9ee2c1d2e618e359c14aef2ea5"
+  resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-4.9.0-42.ceb5c99003b99c9ee2c1d2e618e359c14aef2ea5.tgz#9d817a5779fc05b107eb02f63d197ad296d60b3c"
+  integrity sha512-M16aibbxi/FhW7z1sJCX8u+0DriyQYY5AyeTH7plQm9MLnURoiyn3CZBqAyIoQ+Z1pS77usCIibYJWSgleBMBA==
+
+"@prisma/engines@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-4.9.0.tgz#05a1411964e047c1bc43f777c7a1c69f86a2a26c"
+  integrity sha512-t1pt0Gsp+HcgPJrHFc+d/ZSAaKKWar2G/iakrE07yeKPNavDP3iVKPpfXP22OTCHZUWf7OelwKJxQgKAm5hkgw==
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
@@ -1863,6 +1880,13 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prisma@^4.9.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/prisma/-/prisma-4.9.0.tgz#295954b2a89cd35a0e6bcf66b2b036dbf80c75ee"
+  integrity sha512-bS96oZ5oDFXYgoF2l7PJ3Mp1wWWfLOo8B/jAfbA2Pn0Wm5Z/owBHzaMQKS3i1CzVBDWWPVnOohmbJmjvkcHS5w==
+  dependencies:
+    "@prisma/engines" "4.9.0"
+
 prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"