hata mesajları eklendi

src/app/(auth)/login/actions.ts

@@ -4,7 +4,12 @@ import { revalidatePath } from 'next/cache'
 import { redirect } from 'next/navigation'
 import { createClient } from '@/lib/supabase/server'
 
-export async function login(formData: FormData) {
+export type LoginState = {
+    error?: string
+    success?: boolean
+} | undefined
+
+export async function login(prevState: LoginState, formData: FormData): Promise<LoginState> {
     const supabase = await createClient()
 
     const email = formData.get('email') as string
@@ -16,7 +21,7 @@ export async function login(formData: FormData) {
     })
 
     if (error) {
-        redirect('/error')
+        return { error: error.message }
     }
 
     revalidatePath('/', 'layout')

src/app/(auth)/login/login-form.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useFormState, useFormStatus } from 'react-dom'
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { login, LoginState } from "./actions"
+
+const initialState: LoginState = {
+    error: undefined,
+    success: false
+}
+
+function SubmitButton() {
+    const { pending } = useFormStatus()
+    return (
+        <Button className="w-full" disabled={pending}>
+            {pending ? 'Giriş Yapılıyor...' : 'Giriş Yap'}
+        </Button>
+    )
+}
+
+export function LoginForm() {
+    const [state, formAction] = useFormState(login, initialState)
+
+    return (
+        <form action={formAction} className="space-y-4">
+            {state?.error && (
+                <div className="bg-red-50 text-red-900 border border-red-200 p-3 rounded-md text-sm font-medium">
+                    Hata: {state.error}
+                </div>
+            )}
+
+            <div className="space-y-2">
+                <Label htmlFor="email">E-posta</Label>
+                <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    placeholder="ornek@isletme.com"
+                    required
+                    defaultValue="demo@dugunsalonu.com"
+                />
+            </div>
+
+            <div className="space-y-2">
+                <Label htmlFor="password">Şifre</Label>
+                <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    required
+                />
+            </div>
+
+            <SubmitButton />
+        </form>
+    )
+}

src/app/(auth)/login/page.tsx

@@ -1,8 +1,5 @@
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { login } from "./actions"
+import { LoginForm } from "./login-form"
 
 export default function LoginPage() {
     return (
@@ -14,21 +11,9 @@ export default function LoginPage() {
                         Düğün Salonu Yönetim Paneli
                     </CardDescription>
                 </CardHeader>
-                <form>
+                <CardContent>
-                    <CardContent className="space-y-4">
+                    <LoginForm />
-                        <div className="space-y-2">
+                </CardContent>
-                            <Label htmlFor="email">E-posta</Label>
-                            <Input id="email" name="email" type="email" placeholder="ornek@isletme.com" required />
-                        </div>
-                        <div className="space-y-2">
-                            <Label htmlFor="password">Şifre</Label>
-                            <Input id="password" name="password" type="password" required />
-                        </div>
-                    </CardContent>
-                    <CardFooter>
-                        <Button formAction={login} className="w-full">Giriş Yap</Button>
-                    </CardFooter>
-                </form>
             </Card>
         </div>
     )