updated login/signup form to shadcn

components/EventInfoQuickView.tsx

@@ -7,7 +7,7 @@ export default function EventInfoQuickView(props: EventProps) {
             <div className='hover:cursor-pointer rounded-lg p-2 bg-brand-primary-900 hover:bg-brand-primary-800 transition-colors duration-200'>
                 <h3 className='text-md font-semibold'>{props.name}</h3>
                 <p>Date: {props.date ? props.date.toDateString() : 'null'}</p>
-                <p>Location: {props.location ? props.location : 'null'}</p>
+                <p>Location: {props.location ? props.location.name : 'null'}</p>
                 <p className='text-xs mt-2'>Created By: {props.creator.username}</p>                                    
             </div>
         </Link>

components/events/EditEventDialog.tsx

@@ -0,0 +1,8 @@
+'use client'
+import React from 'react'
+
+export default function EditEventDialog() {
+    return (
+        <div>EditEventDialog</div>
+    )
+}

components/events/EventInfo.tsx

@@ -24,9 +24,9 @@ export default function EventInfo({ event }: EventProps) {
             <Card className='py-0'>
                 <CardContent className='p-4'>
                     <h2 className='text-xl font-semibold'>Event Info</h2>
-                    <p className='text-sm mt-2'>Nmae: {event.name}</p>
+                    <p className='text-sm mt-2'>Name: {event.name}</p>
                     <p className='text-sm'>Date: {event.date ? event.date.toDateString() : 'Upcoming'}</p>
-                    <p className='text-sm'>Location: {event.location ? event.location : 'No location yet'}</p>
+                    <p className='text-sm'>Location: {event.location ? event.location.name : 'No location yet'}</p>
                     {daysLeft !== null && (
                         <p className='text-sm mt-2 font-medium text-brand-primary-400'>
                             {daysLeft} days until this event!

components/forms/FormWrapper.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+
+export default function FormWrapper({
+    title,
+    description,
+    form
+}: {
+    title: string,
+    description?: string,
+    form: React.ReactNode
+}) {
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{title}</CardTitle>
+                {description && (
+                    <CardDescription>Enter your email below to login</CardDescription>
+                )}
+            </CardHeader>
+            <CardContent>
+                {form}
+            </CardContent>
+        </Card>
+    )
+}

components/forms/LoginForm.tsx

@@ -0,0 +1,77 @@
+'use client'
+import React, { useState } from 'react'
+import { Label } from '../ui/label'
+import { Input } from '../ui/input'
+import Link from 'next/link'
+import { Button } from '../ui/button'
+import { signIn } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+
+export default function LoginForm() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('')
+    const [error, setError] = useState('');
+    const router = useRouter();
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+
+        const result = await signIn('credentials', {
+            redirect: false,
+            email,
+            password,
+        })
+
+        console.log('[CLIENT] signIn result:', result)
+
+        if (result?.error) {
+            setError(result.error)
+        } else {
+            router.push('/dashboard')
+        }
+    }
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className='flex flex-col gap-6'>
+                <div className='grid gap-3'>
+                    <Label htmlFor='email'>Email</Label>
+                    <Input
+                        id='email'
+                        type='email'
+                        placeholder='m@example.com'
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        required
+                    />
+                </div>
+                <div className='grid gap-3'>
+                    <div className='flex items-center'>
+                        <Label htmlFor='password'>Password</Label>
+                        <Link 
+                            href={'#'}
+                            className='ml-auto inline-block text-sm underline-offset-4 hover:underline'
+                        >
+                            Forgot your password?
+                        </Link>
+                    </div>
+                    <Input 
+                        id='password' 
+                        type='password' 
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required 
+                    />
+                </div>
+                <div className='flex flex-col gap-3'>
+                    <Button 
+                        type="submit" 
+                        className="w-full bg-brand-primary-600 hover:bg-brand-primary-400"
+                    >
+                        Login
+                    </Button>
+                    {error && <p className="text-red-500">{error}</p>}
+                </div>
+            </div>
+        </form>
+    )
+}

components/forms/SignUpForm.tsx

@@ -0,0 +1,78 @@
+'use client'
+import { useRouter } from 'next/navigation'
+import React, { useState } from 'react'
+import { Label } from '../ui/label'
+import { Input } from '../ui/input'
+import { Button } from '../ui/button'
+
+interface Props {
+    invite: {
+        token: string
+        email: string
+        role: 'COUPLE' | 'PLANNER' | 'GUEST'
+    }
+}
+
+export default function SignUpForm({ invite }: Props) {
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+    const [error, setError] = useState('')
+    const router = useRouter()
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault()
+
+       const res = await fetch('/api/signup/from-invite', {
+            method: 'POST',
+            body: JSON.stringify({ token: invite.token, username, password }),
+            headers: { 'Content-Type': 'application/json' },
+        })
+
+        if (res.ok) {
+            router.push('/login')
+        } else {
+            const { message } = await res.json()
+            setError(message || 'Signup failed')
+        }
+    }
+    return (
+        <form onSubmit={handleSubmit}>
+            <p className="text-sm text-gray-600">
+                Invited as <strong>{invite.email}</strong> ({invite.role})
+            </p>
+
+            <div className='flex flex-col gap-6'>
+                <div className='grid gap-3'>
+                    <Label htmlFor='username'>Username</Label>
+                    <Input
+                        id='username'
+                        type='text'
+                        placeholder='Choose a username'
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
+                        required
+                    />
+                </div>
+                <div className='grid gap-3'>
+                    <Label htmlFor='password'>Password</Label>
+                    <Input
+                        id='password'
+                        type='password'
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
+                    />
+                </div>
+                <div className='flex flex-col gap-3'>
+                    <Button
+                        type="submit" 
+                        className="w-full bg-brand-primary-600 hover:bg-brand-primary-400"
+                    >
+                        Sign Up
+                    </Button>
+                    {error && <p className="text-red-500">{error}</p>}
+                </div>
+            </div>
+        </form>
+    )
+}

components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:cursor-pointer",
   {
     variants: {
       variant: {