75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
import { useState } from 'react';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
export default function Login() {
|
|
const { login } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
setError('');
|
|
|
|
if (!email.trim() || !password.trim()) {
|
|
setError('Bitte E-Mail und Passwort eingeben.');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await login(email.trim(), password);
|
|
navigate('/', { replace: true });
|
|
} catch (err) {
|
|
if (err.code === 401) {
|
|
setError('E-Mail oder Passwort falsch.');
|
|
} else {
|
|
setError('Verbindungsfehler. Bitte erneut versuchen.');
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="login-page">
|
|
<div className="login-card">
|
|
<div className="login-header">
|
|
<div className="logo">Defekt<span>Track</span></div>
|
|
<p className="login-subtitle">Lager & Logistik · Defekte Ware im Griff</p>
|
|
</div>
|
|
<form className="login-form" onSubmit={handleSubmit}>
|
|
<div className="form-group">
|
|
<label>E-Mail</label>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="name@firma.de"
|
|
autoComplete="email"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<label>Passwort</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="Passwort eingeben"
|
|
autoComplete="current-password"
|
|
/>
|
|
</div>
|
|
{error && <div className="login-error">{error}</div>}
|
|
<button type="submit" className="btn-submit" disabled={loading}>
|
|
{loading ? 'Anmelden...' : 'Anmelden'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|