inital

frontend/src/components/auth/LoginCallback.tsx

@@ -0,0 +1,95 @@
+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;