ui

# What does this PR do? ## Test Plan # What does this PR do? ## Test Plan # What does this PR do? ## Test Plan
2025-07-03 12:52:41 +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/components/auth/login-page.tsx
+++ b/llama_stack/ui/components/auth/login-page.tsx
@ -0,0 +1,99 @@
+"use client";
+
+import React from "react";
+import { useAuth } from "@/contexts/auth-context";
+import { LoginButton } from "@/components/auth/login-button";
+import { GitHubIcon } from "@/components/icons/github-icon";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { LucideIcon } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+interface AuthProvider {
+  id: string;
+  name: string;
+  icon: LucideIcon;
+  loginPath: string;
+  buttonColor?: string;
+}
+
+interface LoginPageProps {
+  backendUrl: string;
+}
+
+export function LoginPage({ backendUrl }: LoginPageProps) {
+  const { isAuthenticated, isLoading } = useAuth();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const error = searchParams.get("error");
+
+  // Define available auth providers
+  const authProviders: AuthProvider[] = [
+    {
+      id: "github",
+      name: "GitHub",
+      icon: GitHubIcon as LucideIcon,
+      loginPath: `${backendUrl}/auth/github/login`,
+      buttonColor: "bg-gray-900 hover:bg-gray-800 text-white",
+    },
+    // Future providers can be added here
+  ];
+
+  useEffect(() => {
+    if (!isLoading && isAuthenticated) {
+      router.push("/");
+    }
+  }, [isAuthenticated, isLoading, router]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold text-center">
+            Welcome to Llama Stack
+          </CardTitle>
+          <CardDescription className="text-center">
+            {error === "auth_not_configured"
+              ? "Authentication is not configured on this server"
+              : "Sign in to access your logs and resources"}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {error !== "auth_not_configured" && (
+            <>
+              {authProviders.length > 1 && (
+                <>
+                  <div className="text-sm text-muted-foreground text-center">
+                    Continue with
+                  </div>
+                  <Separator />
+                </>
+              )}
+
+              <div className="space-y-2">
+                {authProviders.map((provider) => (
+                  <LoginButton key={provider.id} provider={provider} />
+                ))}
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}