Improve login UI with error handling and callback page

crawler/frontend/src/components/LoginModal.tsx

@@ -1,43 +1,127 @@
-import { login } from '@/auth/authService';
+import { login, type AuthError } from '@/auth/authService';
 import { Button } from "@/components/ui/button";
 import { DialogDescription } from '@radix-ui/react-dialog';
 import React, { useState } from 'react';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog';
+import { Home, LogIn, AlertCircle, Loader2 } from 'lucide-react';
 
-interface ModalProps {
-    isOpen: boolean;
+interface LoginModalProps {
+  isOpen: boolean;
 }
 
-const Modal: React.FC<ModalProps> = ({
-    isOpen,
-}) => {
-    if (!isOpen) return null;
-    const [isLoading, setIsLoading] = useState(false)
+const LoginModal: React.FC<LoginModalProps> = ({ isOpen }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<AuthError | null>(null);
 
-    return (
-        <Dialog open={isOpen}>
-            <form>
-                <DialogContent className="sm:max-w-[425px]">
-                    <DialogHeader>
-                        <DialogTitle>Login to Wrongmove</DialogTitle>
-                        <DialogDescription>(We are currently in closed beta; ask Viktor to send you an invitation)</DialogDescription>
+  if (!isOpen) return null;
 
-                    </DialogHeader>
-                    <DialogFooter>
-                        {isLoading && (
-                            <div>Signing in. Please wait...</div>
-                        )
-                        }
-                        <Button onClick={
-                            () => {
-                                setIsLoading(true)
-                                login()
-                            }} disabled={isLoading}>Login</Button>
-                    </DialogFooter>
-                </DialogContent>
-            </form>
-        </Dialog>
-    )
+  const handleLogin = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      await login();
+    } catch (err) {
+      setError(err as AuthError);
+      setIsLoading(false);
+    }
+  };
+
+  const handleRetry = () => {
+    setError(null);
+    handleLogin();
+  };
+
+  const handleCancel = () => {
+    setError(null);
+    setIsLoading(false);
+  };
+
+  return (
+    <Dialog open={isOpen}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader className="space-y-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-primary/10 rounded-lg">
+              <Home className="h-6 w-6 text-primary" />
+            </div>
+            <div>
+              <DialogTitle className="text-xl">Wrongmove</DialogTitle>
+              <DialogDescription className="text-sm text-muted-foreground">
+                Your smart property search companion
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="py-4 space-y-4">
+          {/* Beta Notice */}
+          <div className="bg-muted/50 border rounded-lg p-4 text-sm">
+            <p className="text-muted-foreground">
+              We are currently in closed beta. Please contact Viktor to request an invitation.
+            </p>
+          </div>
+
+          {/* Error State */}
+          {error && (
+            <div className="bg-destructive/10 border border-destructive/30 rounded-lg p-4 flex items-start gap-3">
+              <AlertCircle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
+              <div className="flex-1 space-y-2">
+                <p className="text-sm text-destructive">{error.message}</p>
+                <div className="flex gap-2">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={handleRetry}
+                    className="text-destructive border-destructive/30 hover:bg-destructive/10"
+                  >
+                    Try Again
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={handleCancel}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Loading State */}
+          {isLoading && !error && (
+            <div className="flex items-center justify-center gap-3 py-4 text-muted-foreground">
+              <Loader2 className="h-5 w-5 animate-spin" />
+              <span>Redirecting to login...</span>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          {!error && (
+            <Button
+              onClick={handleLogin}
+              disabled={isLoading}
+              className="w-full gap-2"
+              size="lg"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Signing in...
+                </>
+              ) : (
+                <>
+                  <LogIn className="h-4 w-4" />
+                  Sign in with SSO
+                </>
+              )}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
 };
 
-export default Modal;
+export default LoginModal;