96 lines
2.2 KiB
TypeScript
96 lines
2.2 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useNavigate, useSearchParams } from 'react-router-dom';
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
import { Box, CircularProgress, Typography, Alert, Button } from '@mui/material';
|
|
|
|
const LoginCallback: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const { login } = useAuth();
|
|
const [error, setError] = useState<string>('');
|
|
|
|
useEffect(() => {
|
|
const handleCallback = async () => {
|
|
const code = searchParams.get('code');
|
|
const errorParam = searchParams.get('error');
|
|
|
|
if (errorParam) {
|
|
setError(`Authentifizierungsfehler: ${errorParam}`);
|
|
return;
|
|
}
|
|
|
|
if (!code) {
|
|
setError('Kein Autorisierungscode erhalten');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await login(code);
|
|
// Redirect to dashboard on success
|
|
navigate('/dashboard', { replace: true });
|
|
} catch (err) {
|
|
console.error('Login callback error:', err);
|
|
setError(
|
|
err instanceof Error
|
|
? err.message
|
|
: 'Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.'
|
|
);
|
|
}
|
|
};
|
|
|
|
handleCallback();
|
|
}, [searchParams, login, navigate]);
|
|
|
|
if (error) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: '100vh',
|
|
padding: 3,
|
|
}}
|
|
>
|
|
<Alert
|
|
severity="error"
|
|
sx={{
|
|
maxWidth: 500,
|
|
mb: 2,
|
|
width: '100%',
|
|
}}
|
|
>
|
|
{error}
|
|
</Alert>
|
|
<Button
|
|
variant="contained"
|
|
onClick={() => navigate('/login')}
|
|
>
|
|
Zurück zur Anmeldung
|
|
</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: '100vh',
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<CircularProgress size={60} />
|
|
<Typography variant="h6" color="text.secondary">
|
|
Anmeldung wird abgeschlossen...
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default LoginCallback;
|