mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-02-03 21:03:08 +00:00
26236d3d5b
- Updated ESLint configuration to include support for `.mjs` and `.cjs` file types, adding necessary global variables for Node.js and browser environments. - Introduced a new `vite-env.d.ts` file to define environment variables for Vite, improving type safety. - Refactored error handling in `file-browser-dialog.tsx`, `description-image-dropzone.tsx`, and `feature-image-upload.tsx` to omit error parameters, simplifying the catch blocks. - Removed unused bug report button functionality from the sidebar, streamlining the component structure. - Adjusted various components to improve code readability and maintainability, including updates to type imports and component props. These changes aim to enhance the development experience by improving linting support and simplifying error handling across components.
84 lines
3.4 KiB
TypeScript
84 lines
3.4 KiB
TypeScript
import { Label } from '@/components/ui/label';
|
|
import { CheckCircle2, AlertCircle, Info, Terminal } from 'lucide-react';
|
|
import type { ClaudeAuthStatus } from '@/store/setup-store';
|
|
|
|
interface AuthenticationStatusDisplayProps {
|
|
claudeAuthStatus: ClaudeAuthStatus | null;
|
|
apiKeyStatus: {
|
|
hasAnthropicKey: boolean;
|
|
hasGoogleKey: boolean;
|
|
} | null;
|
|
apiKeys: {
|
|
anthropic: string;
|
|
google: string;
|
|
};
|
|
}
|
|
|
|
export function AuthenticationStatusDisplay({
|
|
claudeAuthStatus,
|
|
apiKeyStatus,
|
|
apiKeys,
|
|
}: AuthenticationStatusDisplayProps) {
|
|
return (
|
|
<div className="space-y-4 pt-4 border-t border-border">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Info className="w-4 h-4 text-brand-500" />
|
|
<Label className="text-foreground font-semibold">
|
|
Current Authentication Configuration
|
|
</Label>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Claude Authentication Status */}
|
|
<div className="p-3 rounded-lg bg-card border border-border">
|
|
<div className="flex items-center gap-2 mb-1.5">
|
|
<Terminal className="w-4 h-4 text-brand-500" />
|
|
<span className="text-sm font-medium text-foreground">Claude (Anthropic)</span>
|
|
</div>
|
|
<div className="space-y-1.5 text-xs min-h-12">
|
|
{claudeAuthStatus?.authenticated ? (
|
|
<>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
|
|
<span className="text-green-400 font-medium">Authenticated</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Info className="w-3 h-3 shrink-0" />
|
|
<span>
|
|
{claudeAuthStatus.method === 'oauth_token'
|
|
? 'Using stored OAuth token (subscription)'
|
|
: claudeAuthStatus.method === 'api_key_env'
|
|
? 'Using ANTHROPIC_API_KEY'
|
|
: claudeAuthStatus.method === 'api_key'
|
|
? 'Using stored API key'
|
|
: claudeAuthStatus.method === 'credentials_file'
|
|
? 'Using credentials file'
|
|
: claudeAuthStatus.method === 'cli_authenticated'
|
|
? 'Using Claude CLI authentication'
|
|
: `Using ${claudeAuthStatus.method || 'detected'} authentication`}
|
|
</span>
|
|
</div>
|
|
</>
|
|
) : apiKeyStatus?.hasAnthropicKey ? (
|
|
<div className="flex items-center gap-2 text-blue-400">
|
|
<Info className="w-3 h-3 shrink-0" />
|
|
<span>Using environment variable (ANTHROPIC_API_KEY)</span>
|
|
</div>
|
|
) : apiKeys.anthropic ? (
|
|
<div className="flex items-center gap-2 text-blue-400">
|
|
<Info className="w-3 h-3 shrink-0" />
|
|
<span>Using manual API key from settings</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-1.5 text-yellow-500 py-0.5">
|
|
<AlertCircle className="w-3 h-3 shrink-0" />
|
|
<span className="text-xs">Not configured</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|