ui

# What does this PR do? ## Test Plan # What does this PR do? ## Test Plan # What does this PR do? ## Test Plan
2025-07-02 20:40:36 +00:00 · 2025-06-25 20:10:45 -07:00 · 2025-06-25 20:10:45 -07:00 · a4d84f7805
commit a4d84f7805
parent 114946ae88
22 changed files with 821 additions and 38 deletions
--- a/llama_stack/ui/app/auth/github/callback/page.tsx
+++ b/llama_stack/ui/app/auth/github/callback/page.tsx
@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useAuth } from "@/contexts/auth-context";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export default function AuthCallbackPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { login } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(true);
+
+  useEffect(() => {
+    const processCallback = async () => {
+      // Get token from URL fragment (hash)
+      const hash = window.location.hash.substring(1); // Remove the #
+      const params = new URLSearchParams(hash);
+      const token = params.get("token");
+
+      if (!token) {
+        setError("Missing authentication token");
+        setIsProcessing(false);
+        return;
+      }
+
+      try {
+        // Store the token and decode user info from JWT
+        await login(token);
+        setIsProcessing(false);
+      } catch (err) {
+        setError("Failed to complete authentication");
+        setIsProcessing(false);
+      }
+    };
+
+    processCallback();
+  }, [searchParams, login]);
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle className="text-red-600">Authentication Error</CardTitle>
+            <CardDescription>{error}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button onClick={() => router.push("/login")} className="w-full">
+              Back to Login
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Authenticating...</CardTitle>
+          <CardDescription>
+            Please wait while we complete your login.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex justify-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}