mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-07-13 00:26:10 +00:00
ui
# What does this PR do? ## Test Plan # What does this PR do? ## Test Plan # What does this PR do? ## Test Plan
This commit is contained in:
Eric Huang
parent
114946ae88
commit
a4d84f7805
22 changed files with 821 additions and 38 deletions
40
llama_stack/ui/components/auth/login-button.tsx
Normal file
40
llama_stack/ui/components/auth/login-button.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import React from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { LucideIcon } from "lucide-react";
|
||||
|
||||
interface LoginButtonProps {
|
||||
provider: {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: LucideIcon;
|
||||
loginPath: string;
|
||||
buttonColor?: string;
|
||||
};
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function LoginButton({ provider, className }: LoginButtonProps) {
|
||||
const handleLogin = async () => {
|
||||
// Add redirect_url parameter to tell backend where to redirect after OAuth
|
||||
const redirectUrl = `${window.location.origin}/auth/github/callback`;
|
||||
const loginUrl = `${provider.loginPath}?redirect_url=${encodeURIComponent(redirectUrl)}`;
|
||||
window.location.href = loginUrl;
|
||||
};
|
||||
|
||||
const Icon = provider.icon;
|
||||
|
||||
return (
|
||||
<Button
|
||||
onClick={handleLogin}
|
||||
className={cn(
|
||||
"w-full flex items-center justify-center gap-3",
|
||||
provider.buttonColor || "bg-gray-900 hover:bg-gray-800",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
<span>Continue with {provider.name}</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
99
llama_stack/ui/components/auth/login-page.tsx
Normal file
99
llama_stack/ui/components/auth/login-page.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
156
llama_stack/ui/components/auth/user-menu.tsx
Normal file
156
llama_stack/ui/components/auth/user-menu.tsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
import { useAuthConfig } from "@/hooks/use-auth-config";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { User, LogOut, Key, Clock } from "lucide-react";
|
||||
import { getAuthToken, isTokenExpired } from "@/lib/auth";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function UserMenu() {
|
||||
const { user, logout, isAuthenticated } = useAuth();
|
||||
const { isAuthConfigured } = useAuthConfig();
|
||||
|
||||
const handleCopyToken = async () => {
|
||||
const token = getAuthToken();
|
||||
if (!token) {
|
||||
toast.error("No authentication token found");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(token);
|
||||
toast.success("API token copied to clipboard");
|
||||
} catch (error) {
|
||||
toast.error("Failed to copy token to clipboard");
|
||||
}
|
||||
};
|
||||
|
||||
const getTokenExpiryInfo = () => {
|
||||
const token = getAuthToken();
|
||||
if (!token) return null;
|
||||
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split(".")[1]));
|
||||
const exp = payload.exp;
|
||||
if (!exp) return null;
|
||||
|
||||
const expiryDate = new Date(exp * 1000);
|
||||
const now = new Date();
|
||||
const hoursRemaining = Math.max(
|
||||
0,
|
||||
(expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60),
|
||||
);
|
||||
|
||||
if (hoursRemaining < 1) {
|
||||
return `Expires in ${Math.round(hoursRemaining * 60)} minutes`;
|
||||
} else if (hoursRemaining < 24) {
|
||||
return `Expires in ${Math.round(hoursRemaining)} hours`;
|
||||
} else {
|
||||
return `Expires in ${Math.round(hoursRemaining / 24)} days`;
|
||||
}
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAuthenticated || !user) {
|
||||
if (!isAuthConfigured) {
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="inline-block">
|
||||
<Button variant="outline" size="sm" disabled>
|
||||
Sign In
|
||||
</Button>
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Authentication is not configured on this server</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<a href="/login">Sign In</a>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="rounded-full">
|
||||
{user.avatar_url ? (
|
||||
<img
|
||||
src={user.avatar_url}
|
||||
alt={user.name || user.username}
|
||||
className="h-8 w-8 rounded-full"
|
||||
/>
|
||||
) : (
|
||||
<User className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel>
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-sm font-medium leading-none">
|
||||
{user.name || user.username}
|
||||
</p>
|
||||
{user.email && (
|
||||
<p className="text-xs leading-none text-muted-foreground">
|
||||
{user.email}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleCopyToken} className="cursor-pointer">
|
||||
<Key className="mr-2 h-4 w-4" />
|
||||
<span>Copy API Token</span>
|
||||
</DropdownMenuItem>
|
||||
{getTokenExpiryInfo() && (
|
||||
<DropdownMenuItem disabled className="text-xs text-muted-foreground">
|
||||
<Clock className="mr-2 h-3 w-3" />
|
||||
<span>{getTokenExpiryInfo()}</span>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
{user.organizations && user.organizations.length > 0 && (
|
||||
<>
|
||||
<DropdownMenuLabel className="text-xs text-muted-foreground">
|
||||
Organizations
|
||||
</DropdownMenuLabel>
|
||||
{user.organizations.map((org) => (
|
||||
<DropdownMenuItem key={org} className="text-sm">
|
||||
{org}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
<DropdownMenuItem onClick={logout} className="cursor-pointer">
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
<span>Log out</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue