diff --git a/src/app/(auth)/login/actions.ts b/src/app/(auth)/login/actions.ts index d245e2e..3f99baa 100644 --- a/src/app/(auth)/login/actions.ts +++ b/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 { 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') diff --git a/src/app/(auth)/login/login-form.tsx b/src/app/(auth)/login/login-form.tsx new file mode 100644 index 0000000..0b39fc5 --- /dev/null +++ b/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 ( + + ) +} + +export function LoginForm() { + const [state, formAction] = useFormState(login, initialState) + + return ( +
+ {state?.error && ( +
+ Hata: {state.error} +
+ )} + +
+ + +
+ +
+ + +
+ + + + ) +} diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx index 8ca6c4b..fca29da 100644 --- a/src/app/(auth)/login/page.tsx +++ b/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 -
- -
- - -
-
- - -
-
- - - -
+ + + )