124 lines
3.6 KiB
TypeScript
124 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
|
|
interface LoginFormProps {
|
|
onSuccess?: () => void;
|
|
redirectTo?: string;
|
|
}
|
|
|
|
export function LoginForm({ onSuccess, redirectTo = '/dashboard' }: LoginFormProps) {
|
|
const { signIn, signInWithOAuth } = useAuth();
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const { error } = await signIn(email, password);
|
|
|
|
if (error) {
|
|
setError(getErrorMessage(error.message));
|
|
setLoading(false);
|
|
} else {
|
|
onSuccess?.();
|
|
window.location.href = redirectTo;
|
|
}
|
|
};
|
|
|
|
const handleOAuth = async (provider: 'google' | 'github') => {
|
|
setLoading(true);
|
|
await signInWithOAuth(provider);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 w-full max-w-sm">
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium mb-1">
|
|
Email
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-md"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium mb-1">
|
|
Passwort
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-md"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<p className="text-sm text-red-500">{error}</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full py-2 px-4 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
{loading ? 'Wird geladen...' : 'Anmelden'}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<span className="w-full border-t" />
|
|
</div>
|
|
<div className="relative flex justify-center text-xs uppercase">
|
|
<span className="bg-background px-2 text-muted-foreground">
|
|
Oder weiter mit
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleOAuth('google')}
|
|
disabled={loading}
|
|
className="py-2 px-4 border rounded-md hover:bg-muted disabled:opacity-50"
|
|
>
|
|
Google
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleOAuth('github')}
|
|
disabled={loading}
|
|
className="py-2 px-4 border rounded-md hover:bg-muted disabled:opacity-50"
|
|
>
|
|
GitHub
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function getErrorMessage(message: string): string {
|
|
const errorMap: Record<string, string> = {
|
|
'Invalid login credentials': 'Ungueltige Anmeldedaten',
|
|
'Email not confirmed': 'Bitte bestaetigen Sie zuerst Ihre Email',
|
|
'Too many requests': 'Zu viele Versuche. Bitte warten Sie einen Moment.',
|
|
};
|
|
return errorMap[message] || 'Ein Fehler ist aufgetreten';
|
|
}
|