feat: setup entire login

package.json

@@ -20,6 +20,7 @@
     "@auth/prisma-adapter": "^1.0.6",
     "@discordjs/core": "^1.1.1",
     "@discordjs/next": "^0.1.1-dev.1673526225-a580768.0",
+    "@hookform/resolvers": "^3.3.4",
     "@prisma/client": "^5.6.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -45,7 +46,7 @@
     "notion-client": "^6.16.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-hook-form": "^7.50.1",
+    "react-hook-form": "^7.51.0",
     "react-notion-x": "^6.16.0",
     "react-resizable-panels": "^1.0.7",
     "recoil": "^0.7.7",

prisma/migrations/20240310064022_add_password_field/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "password" TEXT;

prisma/migrations/20240310064345_add_is_verified_field/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "isVerified" BOOLEAN NOT NULL DEFAULT false;

prisma/schema.prisma

@@ -118,6 +118,8 @@ model User {
   id             String          @id @default(cuid())
   name           String?
   email          String?         @unique
+  password       String?
+  isVerified     Boolean         @default(false)
   token          String?
   sessions       Session[]
   purchases      UserPurchases[]

src/app/api/auth/register/route.ts

@@ -0,0 +1,35 @@
+import { NextResponse } from 'next/server';
+import prisma from '@/db';
+import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
+
+export async function POST(request: Request) {
+  try {
+    const { name, email, password } = await request.json();
+
+    // TODO: Verify User
+    // TODO: Hash password
+    await prisma.user.create({
+      data: {
+        email,
+        name,
+        password,
+      },
+    });
+
+    return NextResponse.json(
+      { message: 'Account created sucessfully' },
+      { status: 201 },
+    );
+  } catch (e) {
+    if (e instanceof PrismaClientKnownRequestError) {
+      return NextResponse.json(
+        { error: 'Email already taken.' },
+        { status: 400 },
+      );
+    }
+    return NextResponse.json(
+      { error: 'Failed to parse JSON input' },
+      { status: 400 },
+    );
+  }
+}

src/app/signup/page.tsx

@@ -0,0 +1,16 @@
+import { SignupForm } from '@/components/Signup';
+import { authOptions } from '@/lib/auth';
+import { getServerSession } from 'next-auth';
+import { redirect } from 'next/navigation';
+import React from 'react';
+
+const SigninPage = async () => {
+  const session = await getServerSession(authOptions);
+  if (session?.user) {
+    redirect('/');
+  }
+
+  return <SignupForm />;
+};
+
+export default SigninPage;

src/components/Appbar.tsx

@@ -64,10 +64,7 @@ export const Appbar = () => {
                 <AppbarAuth />
 
                 <Button size={'sm'} asChild>
-                  <Link
-                    href={'https://harkirat.classx.co.in/new-courses'}
-                    target="_blank"
-                  >
+                  <Link href={'/signup'}>
                     <p className="text-white">Join now</p>{' '}
                     <Sparkles className="text-white ml-2 h-4 w-4 hover:translate-x-0.5 ease-linear duration-200" />
                   </Link>

src/components/Signup.tsx

@@ -0,0 +1,109 @@
+'use client';
+import { zodResolver } from '@hookform/resolvers/zod';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+
+const signupFormSchema = z.object({
+  fullName: z.string().min(2).max(50),
+  email: z.string().email(),
+  password: z.string().min(8).max(20),
+});
+
+export function SignupForm() {
+  const form = useForm<z.infer<typeof signupFormSchema>>({
+    resolver: zodResolver(signupFormSchema),
+    defaultValues: {
+      fullName: '',
+      email: '',
+      password: '',
+    },
+  });
+
+  async function onSubmit(values: z.infer<typeof signupFormSchema>) {
+    const res = await fetch('/api/auth/register', {
+      method: 'POST',
+      body: JSON.stringify({ ...values }),
+    });
+
+    const data = await res.json();
+    console.log(data);
+
+    if (res.status === 201) {
+      toast.info(data.message, {
+        description: 'Go to login to access the site',
+      });
+    } else {
+      console.log('here');
+      toast.error(data.error, {
+        description: 'Something went wrong. Uh oh!',
+      });
+    }
+  }
+
+  return (
+    <>
+      <main className="flex justify-center w-full mt-10 px-5">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-8 max-w-lg w-full"
+          >
+            <FormField
+              control={form.control}
+              name="fullName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Full Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="sargam" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="[email protected]" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder="password" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit">Submit</Button>
+          </form>
+        </Form>
+      </main>
+    </>
+  );
+}

src/components/landing/appbar/nav-menu.tsx

@@ -66,10 +66,7 @@ export function NavigationMenu() {
               <div className="flex flex-col items-center justify-center space-y-2">
                 <Button size={'lg'} variant={'navLink'} asChild>
                   <DrawerClose>
-                    <Link
-                      href={'https://harkirat.classx.co.in/new-courses'}
-                      target="_blank"
-                    >
+                    <Link href={'/signup'}>
                       <p className="text-zinc-950 dark:text-white">Join now</p>
                     </Link>
                   </DrawerClose>

src/components/landing/footer/pre-footer/pre-footer.tsx

@@ -19,10 +19,7 @@ const PreFooterSection = () => {
       </div>
 
       <Button size={'lg'} className="text-lg rounded-full" asChild>
-        <Link
-          href={'https://harkirat.classx.co.in/new-courses'}
-          target="_blank"
-        >
+        <Link href={'/signup'}>
           <p className="text-white">Join now</p>{' '}
           <Sparkles className="text-white ml-2 h-4 w-4 hover:translate-x-0.5 ease-linear duration-200" />
         </Link>