120 lines
3.6 KiB
TypeScript
120 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
|
|
import { useState } from "react"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Loader2, AlertCircle, CheckCircle2 } from "lucide-react"
|
|
import { loginAction } from "@/lib/actions/auth.actions"
|
|
|
|
export function LoginForm() {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const setupSuccess = searchParams.get("setup") === "success"
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
setError(null)
|
|
setLoading(true)
|
|
|
|
const formData = new FormData(e.currentTarget)
|
|
|
|
try {
|
|
const result = await loginAction(formData)
|
|
|
|
if (!result.success) {
|
|
setError(result.message)
|
|
setLoading(false)
|
|
return
|
|
}
|
|
|
|
// Redirect based on callback URL or user role
|
|
const callbackUrl = searchParams.get("callbackUrl")
|
|
|
|
if (callbackUrl) {
|
|
router.push(callbackUrl)
|
|
} else if (result.redirectTo) {
|
|
// Use the role-based redirect from the server
|
|
router.push(result.redirectTo)
|
|
} else {
|
|
// Fallback to home
|
|
router.push("/")
|
|
}
|
|
|
|
router.refresh()
|
|
} catch (err) {
|
|
setError("Hiba történt a bejelentkezés során")
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Üdvözöljük vissza</CardTitle>
|
|
<CardDescription>Adja meg bejelentkezési adatait</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{setupSuccess && (
|
|
<div className="flex items-center gap-2 p-3 mb-4 bg-brand-50 border border-brand-200 rounded-lg text-brand-700">
|
|
<CheckCircle2 className="w-5 h-5 flex-shrink-0" />
|
|
<p className="text-sm">Rendszer sikeresen inicializálva! Jelentkezzen be.</p>
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email cím</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
required
|
|
placeholder="pelda@email.hu"
|
|
disabled={loading}
|
|
autoComplete="email"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Jelszó</Label>
|
|
<Input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
required
|
|
placeholder="••••••••"
|
|
disabled={loading}
|
|
autoComplete="current-password"
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="flex items-center gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive">
|
|
<AlertCircle className="w-5 h-5 flex-shrink-0" />
|
|
<p className="text-sm">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
<Button type="submit" className="w-full" size="lg" disabled={loading}>
|
|
{loading ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Bejelentkezés...
|
|
</>
|
|
) : (
|
|
"Bejelentkezés"
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|