mirrors/mcphub
1
0
Fork 0
mirror of https://github.com/samanhappy/mcphub.git synced 2026-01-11 09:07:01 -05:00
Code Packages Releases Activity

Add OAuth support for upstream MCP servers (#381)

Browse Source 
Co-authored-by: samanhappy <samanhappy@gmail.com>
This commit is contained in:
Copilot
2025-10-26 16:09:34 +08:00
committed by GitHub
parent 7dbd6c386e
commit 26b26a5fb1
30 changed files with 3780 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/components/ui/Badge.tsx
View File

@@ -13,24 +13,21 @@ type BadgeProps = {
const badgeVariants = {
default: 'bg-blue-500 text-white hover:bg-blue-600',
secondary: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600',
outline: 'bg-transparent border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800',
secondary:
'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600',
outline:
'bg-transparent border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800',
destructive: 'bg-red-500 text-white hover:bg-red-600',
};
export function Badge({
children,
variant = 'default',
className,
onClick
}: BadgeProps) {
export function Badge({ children, variant = 'default', className, onClick }: BadgeProps) {
return (
<span
className={cn(
'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors',
badgeVariants[variant],
onClick ? 'cursor-pointer' : '',
className
className,
)}
onClick={onClick}
>
@@ -40,27 +37,40 @@ export function Badge({
}
// For backward compatibility with existing code
export const StatusBadge = ({ status }: { status: 'connected' | 'disconnected' | 'connecting' }) => {
export const StatusBadge = ({
status,
onAuthClick,
}: {
status: 'connected' | 'disconnected' | 'connecting' | 'oauth_required';
onAuthClick?: (e: React.MouseEvent) => void;
}) => {
const { t } = useTranslation();
const colors = {
connecting: 'status-badge-connecting',
connected: 'status-badge-online',
disconnected: 'status-badge-offline',
oauth_required: 'status-badge-oauth-required',
};
// Map status to translation keys
const statusTranslations = {
connected: 'status.online',
disconnected: 'status.offline',
connecting: 'status.connecting'
connecting: 'status.connecting',
oauth_required: 'status.oauthRequired',
};
const isOAuthRequired = status === 'oauth_required';
return (
<span
className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${colors[status]}`}
className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${colors[status]} ${isOAuthRequired && onAuthClick ? 'cursor-pointer hover:opacity-80' : ''}`}
onClick={isOAuthRequired && onAuthClick ? (e) => onAuthClick(e) : undefined}
title={isOAuthRequired ? t('status.clickToAuthorize') : undefined}
>
{isOAuthRequired && '🔐 '}
{t(statusTranslations[status] || status)}
</span>
);
};
};