Improve login UI with error handling and callback page

crawler/frontend/src/components/AuthCallback.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react';
+import { handleCallback, login, type AuthError } from '@/auth/authService';
+import { Loader2, CheckCircle, AlertCircle, Home } from 'lucide-react';
+import { Button } from './ui/button';
+
+type CallbackState = 'processing' | 'success' | 'error';
+
+const AuthCallback: React.FC = () => {
+  const [state, setState] = useState<CallbackState>('processing');
+  const [error, setError] = useState<AuthError | null>(null);
+
+  useEffect(() => {
+    const processCallback = async () => {
+      try {
+        await handleCallback();
+        setState('success');
+        // Auto-redirect after success
+        setTimeout(() => {
+          window.location.href = '/';
+        }, 1500);
+      } catch (err) {
+        setError(err as AuthError);
+        setState('error');
+      }
+    };
+
+    processCallback();
+  }, []);
+
+  const handleRetry = async () => {
+    setState('processing');
+    setError(null);
+    try {
+      await login();
+    } catch (err) {
+      setError(err as AuthError);
+      setState('error');
+    }
+  };
+
+  const handleGoHome = () => {
+    window.location.href = '/';
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md">
+        <div className="bg-card border rounded-xl shadow-lg p-8">
+          {state === 'processing' && (
+            <div className="text-center space-y-4">
+              <div className="flex justify-center">
+                <div className="p-4 bg-primary/10 rounded-full">
+                  <Loader2 className="h-8 w-8 text-primary animate-spin" />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <h1 className="text-xl font-semibold">Completing Sign In</h1>
+                <p className="text-muted-foreground">
+                  Please wait while we verify your credentials...
+                </p>
+              </div>
+            </div>
+          )}
+
+          {state === 'success' && (
+            <div className="text-center space-y-4">
+              <div className="flex justify-center">
+                <div className="p-4 bg-green-500/10 rounded-full">
+                  <CheckCircle className="h-8 w-8 text-green-500" />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <h1 className="text-xl font-semibold">Welcome Back!</h1>
+                <p className="text-muted-foreground">
+                  Redirecting you to the dashboard...
+                </p>
+              </div>
+            </div>
+          )}
+
+          {state === 'error' && (
+            <div className="text-center space-y-6">
+              <div className="flex justify-center">
+                <div className="p-4 bg-destructive/10 rounded-full">
+                  <AlertCircle className="h-8 w-8 text-destructive" />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <h1 className="text-xl font-semibold">Sign In Failed</h1>
+                <p className="text-muted-foreground">
+                  {error?.message || 'An unexpected error occurred.'}
+                </p>
+              </div>
+              <div className="flex flex-col sm:flex-row gap-3 justify-center">
+                <Button onClick={handleRetry} className="gap-2">
+                  Try Again
+                </Button>
+                <Button variant="outline" onClick={handleGoHome} className="gap-2">
+                  <Home className="h-4 w-4" />
+                  Go Home
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthCallback;