create signin & signup pages

Author: Ashutosh6393

package.json

@@ -11,9 +11,11 @@
     "db:migrate": "prisma migrate dev"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
     "@neondatabase/serverless": "^1.0.0",
     "@prisma/client": "^6.8.2",
     "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "better-auth": "^1.2.8",
     "class-variance-authority": "^0.7.1",
@@ -23,8 +25,10 @@
     "next": "15.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.57.0",
     "react-icons": "^5.5.0",
-    "tailwind-merge": "^3.3.0"
+    "tailwind-merge": "^3.3.0",
+    "zod": "^3.25.54"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

pnpm-lock.yaml

@@ -1,31 +1,82 @@
 'use client'
 import { Button } from '@/components/ui/button'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
 import { FcGoogle } from 'react-icons/fc'
+import { z } from 'zod'
 
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
 import { googleSignIn } from '@/lib/google-signin'
 
-// export const metadata: Metadata = {
-//   title: 'Sign In',
-//   description: 'Sign In to your account',
-// }
+const formSchema = z.object({
+  email: z.string().email({
+    message: 'Please enter a valid email address',
+  }),
+})
+
+type FormValues = z.infer<typeof formSchema>
 
 const SignInPage = () => {
-  const handleSignIn = async () => {
-    await googleSignIn()
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: '',
+    },
+  })
+
+  function onSubmit(values: FormValues) {
+    console.log(values)
   }
 
   return (
-    <div className="flex-center flex-col gap-10">
+    <div className="flex-center flex-col gap-10 lg:w-1/4">
       <div className="flex-center flex-col gap-2">
-        <h1 className="font-bold text-4xl">Welcome</h1>
-        <p className="text-lg text-muted-foreground">
+        <h1 className="font-bold text-4xl text-zinc-900">Welcome Back</h1>
+        <p className="text-center text-lg text-muted-foreground">
           Sign in to your account to continue
         </p>
       </div>
-      <Button onClick={handleSignIn} className="w-full p-6 text-lg">
-        <FcGoogle className="size-6" />
-        Sign in with Google
-      </Button>
+      <div className="flex w-full flex-col gap-4">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      placeholder="Your email"
+                      {...field}
+                      className="bg-zinc-100 p-6 lg:text-lg"
+                      type="email"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit" className="w-full p-6 text-base ">
+              Sign in
+            </Button>
+          </form>
+        </Form>
+        <p className="text-center text-zinc-500">OR</p>
+        <Button
+          onClick={async () => await googleSignIn()}
+          className="p-6 text-base"
+        >
+          <FcGoogle className="size-6" />
+          Continue with Google
+        </Button>
+      </div>
     </div>
   )
 }