117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import React, { useState } from "react"
|
|
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 { useAuth } from "@/lib/auth-context"
|
|
import { Mail, Lock, LogIn, AlertCircle } from "lucide-react"
|
|
|
|
interface LoginFormProps {
|
|
onSwitchToRegister: () => void
|
|
}
|
|
|
|
export function LoginForm({ onSwitchToRegister }: LoginFormProps) {
|
|
const { login } = useAuth()
|
|
const [email, setEmail] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [error, setError] = useState("")
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setError("")
|
|
setIsLoading(true)
|
|
|
|
const success = await login(email, password)
|
|
if (!success) {
|
|
setError("Ungültige E-Mail oder Passwort")
|
|
}
|
|
setIsLoading(false)
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full max-w-md border-border/60 shadow-lg">
|
|
<CardHeader className="space-y-1 pb-6">
|
|
<CardTitle className="text-2xl font-semibold tracking-tight">Willkommen zurück</CardTitle>
|
|
<CardDescription className="text-muted-foreground">
|
|
Bitte melden Sie sich an
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<form onSubmit={handleSubmit}>
|
|
<CardContent className="space-y-4">
|
|
{error && (
|
|
<div className="flex items-center gap-2 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
{error}
|
|
</div>
|
|
)}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className="text-sm font-medium">
|
|
E-Mail
|
|
</Label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="name@schule.de"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="pl-10"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password" className="text-sm font-medium">
|
|
Kennwort
|
|
</Label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
placeholder="Kennwort eingeben"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="pl-10"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-lg bg-muted/50 p-3 text-sm text-muted-foreground">
|
|
<p className="font-medium text-foreground mb-1">Hinweis:</p>
|
|
<p>Nutzen Sie Ihre registrierten Zugangsdaten.</p>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex flex-col gap-4 pt-2">
|
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
|
{isLoading ? (
|
|
<span className="flex items-center gap-2">
|
|
<span className="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent" />
|
|
Anmelden...
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-2">
|
|
<LogIn className="h-4 w-4" />
|
|
Anmelden
|
|
</span>
|
|
)}
|
|
</Button>
|
|
<p className="text-sm text-muted-foreground">
|
|
{"Noch kein Konto? "}
|
|
<button
|
|
type="button"
|
|
onClick={onSwitchToRegister}
|
|
className="font-medium text-primary underline-offset-4 hover:underline"
|
|
>
|
|
Registrieren
|
|
</button>
|
|
</p>
|
|
</CardFooter>
|
|
</form>
|
|
</Card>
|
|
)
|
|
}
|