started on adding openid login

components/forms/LoginForm.tsx

@@ -1,18 +1,42 @@
 'use client'
-import React, { useState } from 'react'
+import React, { useEffect, 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 { getProviders, signIn } from 'next-auth/react'
 import { useRouter } from 'next/navigation'
+import { Separator } from '../ui/separator' 
+import KeyIcon from '../icons/KeyIcon'
+import OpenIDIcon from '../icons/OpenIDIcon'
+
+interface Provider {
+  id: string
+  name: string
+}
 
 export default function LoginForm() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('')
     const [error, setError] = useState('');
+    const [providers, setProviders] = useState<Provider[]>([])
     const router = useRouter();
 
+    useEffect(() => {
+        // Fetch available auth providers
+        const fetchProviders = async () => {
+            const authProviders = await getProviders()
+            if (authProviders) {
+                // Filter out credentials provider (email/password)
+                const filtered = Object.values(authProviders).filter(
+                    p => p.id !== 'credentials'
+                )
+                setProviders(filtered)
+            }
+        }
+        fetchProviders()
+    }, [])
+
     async function handleSubmit(e: React.FormEvent) {
         e.preventDefault();
 
@@ -30,48 +54,87 @@ export default function LoginForm() {
             router.push('/dashboard')
         }
     }
+
+    const handleOidcLogin = (providerId: string) => {
+        signIn(providerId, { callbackUrl: '/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 className="space-y-6">
+            {/* OIDC Providers Section
+            {providers.length > 0 && (
+                <>
+                    <div className="space-y-3">
+                        <h3 className="text-center text-sm font-medium text-muted-foreground">
+                            Sign in with
+                        </h3>
+                        <div className="grid grid-cols-1 gap-3">
+                            {providers.map((provider) => (
+                                <Button
+                                    key={provider.id}
+                                    type="button"
+                                    variant="outline"
+                                    className="w-full"
+                                    onClick={() => handleOidcLogin(provider.id)}
+                                >
+                                    <span className="flex items-center justify-center gap-2">
+                                        <OpenIDIcon />
+                                        {provider.name}
+                                    </span>
+                                </Button>
+                            ))}
+                        </div>
+                    </div>
+                    <Separator className="my-6" />
+                    <div className="text-center text-sm text-muted-foreground">
+                        Or continue with email
+                    </div>
+                </>
+            )} */}
+
+            {/* Email/Password Form */}
+            <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"
+                        >
+                            Sign in with Email
+                        </Button>
+                        {error && <p className="text-red-500 text-center">{error}</p>}
                     </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>
+            </form>
+        </div>
     )
 }

components/icons/KeyIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function KeyIcon() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
+            <path fillRule="evenodd" d="M15.75 1.5a6.75 6.75 0 0 0-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 0 0-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 0 0 .75-.75v-1.5h1.5A.75.75 0 0 0 9 19.5V18h1.5a.75.75 0 0 0 .53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1 0 15.75 1.5Zm0 3a.75.75 0 0 0 0 1.5A2.25 2.25 0 0 1 18 8.25a.75.75 0 0 0 1.5 0 3.75 3.75 0 0 0-3.75-3.75Z" clipRule="evenodd" />
+        </svg>
+    )
+}

components/icons/OpenIDIcon.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function OpenIDIcon() {
+    return (
+        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>OpenID</title><path d="M14.54.889l-3.63 1.773v18.17c-4.15-.52-7.27-2.78-7.27-5.5 0-2.58 2.8-4.75 6.63-5.41v-2.31C4.42 8.322 0 11.502 0 15.332c0 3.96 4.74 7.24 10.91 7.78l3.63-1.71V.888m.64 6.724v2.31c1.43.25 2.71.7 3.76 1.31l-1.97 1.11 7.03 1.53-.5-5.21-1.87 1.06c-1.74-1.06-3.96-1.81-6.45-2.11z"/></svg>
+    )
+}

components/vendor/SidebarCard.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 
 interface SidebarCardsProps {
     description?: string | null
-    events: Array<{
+    events?: Array<{
         id: string
         name: string
         date: Date | null
@@ -44,7 +44,7 @@ export function SidebarCards({ description, events, timeline, vendorId }: Sideba
             )}
 
         {/* Associated Events */}
-        {events.length > 0 && (
+        {events && events.length > 0 && (
             <Card>
                 <CardHeader>
                     <CardTitle>Associated Events</CardTitle>
@@ -108,7 +108,7 @@ export function SidebarCards({ description, events, timeline, vendorId }: Sideba
                             <div className="flex items-center justify-between">
                                 <span className="text-sm">Final Payment Due</span>
                                 <span className="text-sm text-muted-foreground">
-                                {formatDate(timeline.finalPaymentDue)}
+                                    {formatDate(timeline.finalPaymentDue)}
                                 </span>
                             </div>
                         )}
@@ -124,7 +124,7 @@ export function SidebarCards({ description, events, timeline, vendorId }: Sideba
                 <CardContent className="space-y-3">
                     <Button variant="outline" className="w-full justify-start" asChild>
                         <Link href={`/vendors/${vendorId}/edit`}>
-                        Edit Vendor Details
+                            Edit Vendor Details
                         </Link>
                     </Button>
                     <Button variant="outline" className="w-full justify-start">
@@ -135,7 +135,7 @@ export function SidebarCards({ description, events, timeline, vendorId }: Sideba
                     </Button>
                     <Button variant="outline" className="w-full justify-start" asChild>
                         <Link href={`/vendors/${vendorId}/payments`}>
-                        Record Payment
+                            Record Payment
                         </Link>
                     </Button>
                 </CardContent>