user creation and invites

components/Navbar.tsx

@@ -24,10 +24,12 @@ export default function Navbar() {
             </div>
             
             <div className="flex items-center space-x-2">
-                <UserIcon />
-                <span className="text-sm text-gray-600">
-                    {session.user.email} ({session.user.role})
-                </span>
+                <Link href={`/user/${session.user.username}`} className="flex items-center space-x-2">
+                    <UserIcon />
+                    <span className="text-sm text-gray-600">
+                        {session.user.email} ({session.user.role})
+                    </span>
+                </Link>
                 <button
                     className="text-sm text-blue-600 underline"
                     onClick={() => signOut({ callbackUrl: '/login' })}

components/SendInviteForm.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function SendInviteForm() {
+    const [email, setEmail] = useState('')
+    const [role, setRole] = useState<'GUEST' | 'COUPLE' | 'PLANNER'>('GUEST')
+    const [message, setMessage] = useState('')
+    const [error, setError] = useState('')
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault()
+        setError('')
+        setMessage('')
+
+        const res = await fetch('/api/invite/send', {
+            method: 'POST',
+            body: JSON.stringify({ email, role }),
+            headers: { 'Content-Type': 'application/json' },
+        })
+
+        if (res.ok) {
+        setMessage('Invite sent successfully!')
+            setEmail('')
+        } else {
+        const { message } = await res.json()
+            setError(message || 'Failed to send invite')
+        }
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
+            <h2 className="text-xl font-bold">Send an Invite</h2>
+
+            {message && <p className="text-green-600">{message}</p>}
+            {error && <p className="text-red-600">{error}</p>}
+
+            <input
+                type="email"
+                className="input input-bordered w-full"
+                placeholder="Recipient email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+            />
+
+            <select
+                className="select select-bordered w-full"
+                value={role}
+                onChange={(e) => setRole(e.target.value as 'COUPLE' | 'PLANNER' | 'GUEST')}
+            >
+                <option value="GUEST">Guest</option>
+                <option value="PLANNER">Planner</option>
+                <option value="COUPLE">Couple</option>
+            </select>
+
+            <button type="submit" className="btn btn-primary w-full">
+                Send Invite
+            </button>
+        </form>
+    )
+}

components/SignupForm.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+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} className="space-y-4">
+            <p className="text-sm text-gray-600">
+                Invited as <strong>{invite.email}</strong> ({invite.role})
+            </p>
+
+            <input
+                type="text"
+                placeholder="Choose a username"
+                className="input input-bordered w-full"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                required
+            />
+
+            <input
+                type="password"
+                placeholder="Choose a password"
+                className="input input-bordered w-full"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+            />
+
+            {error && <p className="text-red-500 text-sm">{error}</p>}
+
+            <button type="submit" className="btn btn-primary w-full">
+                Create Account
+            </button>
+        </form>
+    )
+}