mirror of
https://github.com/tiennm99/ccs.git
synced 2026-10-11 12:09:03 +00:00
491 lines
16 KiB
TypeScript
491 lines
16 KiB
TypeScript
/**
|
|
* Auth Section
|
|
* Settings section for CLIProxy auth tokens (API key and management secret)
|
|
*/
|
|
|
|
import { useEffect, useState, useCallback } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import {
|
|
RefreshCw,
|
|
CheckCircle2,
|
|
AlertCircle,
|
|
Eye,
|
|
EyeOff,
|
|
RotateCcw,
|
|
Sparkles,
|
|
Copy,
|
|
Check,
|
|
KeyRound,
|
|
ShieldCheck,
|
|
ShieldAlert,
|
|
Save,
|
|
} from 'lucide-react';
|
|
import { useRawConfig } from '../hooks';
|
|
|
|
interface TokenInfo {
|
|
value: string;
|
|
isCustom: boolean;
|
|
}
|
|
|
|
interface AuthTokens {
|
|
apiKey: TokenInfo;
|
|
managementSecret: TokenInfo;
|
|
}
|
|
|
|
export default function AuthSection() {
|
|
const { fetchRawConfig } = useRawConfig();
|
|
|
|
// State
|
|
const [tokens, setTokens] = useState<AuthTokens | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState<string | null>(null);
|
|
|
|
// Edit state
|
|
const [showApiKey, setShowApiKey] = useState(false);
|
|
const [showSecret, setShowSecret] = useState(false);
|
|
const [editedApiKey, setEditedApiKey] = useState<string | null>(null);
|
|
const [editedSecret, setEditedSecret] = useState<string | null>(null);
|
|
const [copiedApiKey, setCopiedApiKey] = useState(false);
|
|
const [copiedSecret, setCopiedSecret] = useState(false);
|
|
const [agyAckBypass, setAgyAckBypass] = useState(false);
|
|
const [agyAckBypassLoading, setAgyAckBypassLoading] = useState(true);
|
|
const [agyAckBypassSaving, setAgyAckBypassSaving] = useState(false);
|
|
|
|
// Fetch tokens
|
|
const fetchTokens = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
// Use /raw to get unmasked values for editing
|
|
const response = await fetch('/api/settings/auth/tokens/raw');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch auth tokens');
|
|
}
|
|
const data = await response.json();
|
|
setTokens(data);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unknown error');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
const fetchAgyAckBypass = useCallback(async () => {
|
|
try {
|
|
setAgyAckBypassLoading(true);
|
|
const response = await fetch('/api/settings/auth/antigravity-risk');
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load Antigravity power user settings');
|
|
}
|
|
const data = (await response.json()) as { antigravityAckBypass?: boolean };
|
|
setAgyAckBypass(data.antigravityAckBypass === true);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unknown error');
|
|
} finally {
|
|
setAgyAckBypassLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
// Load on mount
|
|
useEffect(() => {
|
|
fetchTokens();
|
|
fetchAgyAckBypass();
|
|
fetchRawConfig();
|
|
}, [fetchTokens, fetchAgyAckBypass, fetchRawConfig]);
|
|
|
|
// Clear success after timeout
|
|
useEffect(() => {
|
|
if (success) {
|
|
const timer = setTimeout(() => setSuccess(null), 3000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [success]);
|
|
|
|
// Clear error after timeout
|
|
useEffect(() => {
|
|
if (error) {
|
|
const timer = setTimeout(() => setError(null), 5000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [error]);
|
|
|
|
// Save all changes
|
|
const saveChanges = async () => {
|
|
const hasApiKeyChange = editedApiKey !== null && editedApiKey !== tokens?.apiKey.value;
|
|
const hasSecretChange =
|
|
editedSecret !== null && editedSecret !== tokens?.managementSecret.value;
|
|
|
|
if (!hasApiKeyChange && !hasSecretChange) return;
|
|
|
|
try {
|
|
setSaving(true);
|
|
setError(null);
|
|
|
|
const payload: { apiKey?: string; managementSecret?: string } = {};
|
|
if (hasApiKeyChange) payload.apiKey = editedApiKey;
|
|
if (hasSecretChange) payload.managementSecret = editedSecret;
|
|
|
|
const response = await fetch('/api/settings/auth/tokens', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to save tokens');
|
|
}
|
|
|
|
setSuccess('Tokens updated. Restart CLIProxy to apply.');
|
|
setEditedApiKey(null);
|
|
setEditedSecret(null);
|
|
await fetchTokens();
|
|
await fetchRawConfig();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unknown error');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
// Regenerate management secret
|
|
const regenerateSecret = async () => {
|
|
try {
|
|
setSaving(true);
|
|
setError(null);
|
|
const response = await fetch('/api/settings/auth/tokens/regenerate-secret', {
|
|
method: 'POST',
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to regenerate secret');
|
|
}
|
|
|
|
setSuccess('New management secret generated. Restart CLIProxy to apply.');
|
|
await fetchTokens();
|
|
await fetchRawConfig();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unknown error');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
// Reset to defaults
|
|
const resetToDefaults = async () => {
|
|
try {
|
|
setSaving(true);
|
|
setError(null);
|
|
const response = await fetch('/api/settings/auth/tokens/reset', {
|
|
method: 'POST',
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to reset tokens');
|
|
}
|
|
|
|
setSuccess('Tokens reset to defaults. Restart CLIProxy to apply.');
|
|
setEditedApiKey(null);
|
|
setEditedSecret(null);
|
|
await fetchTokens();
|
|
await fetchRawConfig();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unknown error');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
// Copy to clipboard helpers
|
|
const copyApiKey = async () => {
|
|
if (!tokens) return;
|
|
await navigator.clipboard.writeText(tokens.apiKey.value);
|
|
setCopiedApiKey(true);
|
|
setTimeout(() => setCopiedApiKey(false), 2000);
|
|
};
|
|
|
|
const copySecret = async () => {
|
|
if (!tokens) return;
|
|
await navigator.clipboard.writeText(tokens.managementSecret.value);
|
|
setCopiedSecret(true);
|
|
setTimeout(() => setCopiedSecret(false), 2000);
|
|
};
|
|
|
|
const saveAgyAckBypass = async (nextValue: boolean) => {
|
|
if (nextValue) {
|
|
const confirmed = window.confirm(
|
|
'Enable Antigravity power user mode?\n\nThis disables AGY responsibility checklist prompts in CLI and dashboard. You accept full responsibility for OAuth/account risk.'
|
|
);
|
|
if (!confirmed) return;
|
|
}
|
|
|
|
try {
|
|
setAgyAckBypassSaving(true);
|
|
setError(null);
|
|
|
|
const response = await fetch('/api/settings/auth/antigravity-risk', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ antigravityAckBypass: nextValue }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = (await response.json()) as { error?: string };
|
|
throw new Error(data.error || 'Failed to update Antigravity power user mode');
|
|
}
|
|
|
|
setAgyAckBypass(nextValue);
|
|
setSuccess(
|
|
nextValue ? 'Antigravity power user mode enabled.' : 'Antigravity power user mode disabled.'
|
|
);
|
|
await fetchRawConfig();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unknown error');
|
|
} finally {
|
|
setAgyAckBypassSaving(false);
|
|
}
|
|
};
|
|
|
|
if (loading || !tokens) {
|
|
return (
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<div className="flex items-center gap-3 text-muted-foreground">
|
|
<RefreshCw className="w-5 h-5 animate-spin" />
|
|
<span>Loading...</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Display values
|
|
const displayApiKey = editedApiKey ?? tokens.apiKey.value;
|
|
const displaySecret = editedSecret ?? tokens.managementSecret.value;
|
|
|
|
// Check for unsaved changes
|
|
const hasChanges =
|
|
(editedApiKey !== null && editedApiKey !== tokens.apiKey.value) ||
|
|
(editedSecret !== null && editedSecret !== tokens.managementSecret.value);
|
|
|
|
return (
|
|
<>
|
|
{/* Toast-style alerts */}
|
|
<div
|
|
className={`absolute left-5 right-5 top-20 z-10 transition-all duration-200 ease-out ${
|
|
error || success
|
|
? 'opacity-100 translate-y-0'
|
|
: 'opacity-0 -translate-y-2 pointer-events-none'
|
|
}`}
|
|
>
|
|
{error && (
|
|
<Alert variant="destructive" className="py-2 shadow-lg">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
{success && (
|
|
<div className="flex items-center gap-2 px-3 py-2 rounded-md border border-green-200 bg-green-50 text-green-700 shadow-lg dark:border-green-900/50 dark:bg-green-900/90 dark:text-green-300">
|
|
<CheckCircle2 className="h-4 w-4 shrink-0" />
|
|
<span className="text-sm font-medium">{success}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Scrollable Content */}
|
|
<ScrollArea className="flex-1">
|
|
<div className="p-5 space-y-6">
|
|
<p className="text-sm text-muted-foreground">
|
|
Configure CLIProxy authentication tokens. Changes require CLIProxy restart.
|
|
</p>
|
|
|
|
{/* API Key Section */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<KeyRound className="w-4 h-4 text-primary" />
|
|
<h3 className="text-base font-medium">API Key</h3>
|
|
{tokens.apiKey.isCustom && (
|
|
<span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300">
|
|
Custom
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Used by Claude Code to authenticate with CLIProxy
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<div className="relative flex-1">
|
|
<Input
|
|
type={showApiKey ? 'text' : 'password'}
|
|
value={displayApiKey}
|
|
onChange={(e) => setEditedApiKey(e.target.value)}
|
|
placeholder="API key"
|
|
disabled={saving}
|
|
className="pr-20 font-mono text-sm"
|
|
/>
|
|
<div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 w-7 p-0"
|
|
onClick={() => setShowApiKey(!showApiKey)}
|
|
>
|
|
{showApiKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 w-7 p-0"
|
|
onClick={copyApiKey}
|
|
disabled={!tokens.apiKey.value}
|
|
>
|
|
{copiedApiKey ? (
|
|
<Check className="w-4 h-4 text-green-600" />
|
|
) : (
|
|
<Copy className="w-4 h-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Management Secret Section */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<ShieldCheck className="w-4 h-4 text-primary" />
|
|
<h3 className="text-base font-medium">Management Secret</h3>
|
|
{tokens.managementSecret.isCustom && (
|
|
<span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300">
|
|
Custom
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Used by CCS dashboard to access CLIProxy management APIs
|
|
</p>
|
|
<div className="flex gap-2">
|
|
<div className="relative flex-1">
|
|
<Input
|
|
type={showSecret ? 'text' : 'password'}
|
|
value={displaySecret}
|
|
onChange={(e) => setEditedSecret(e.target.value)}
|
|
placeholder="Management secret"
|
|
disabled={saving}
|
|
className="pr-20 font-mono text-sm"
|
|
/>
|
|
<div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 w-7 p-0"
|
|
onClick={() => setShowSecret(!showSecret)}
|
|
>
|
|
{showSecret ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 w-7 p-0"
|
|
onClick={copySecret}
|
|
disabled={!tokens.managementSecret.value}
|
|
>
|
|
{copiedSecret ? (
|
|
<Check className="w-4 h-4 text-green-600" />
|
|
) : (
|
|
<Copy className="w-4 h-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={regenerateSecret}
|
|
disabled={saving}
|
|
title="Generate new secure secret"
|
|
>
|
|
<Sparkles className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="space-y-3 rounded-lg border border-amber-400/35 bg-amber-50/70 p-4 dark:border-amber-800/60 dark:bg-amber-950/25">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<ShieldAlert className="w-4 h-4 text-amber-700 dark:text-amber-300" />
|
|
<h3 className="text-base font-medium">Antigravity Power User Mode</h3>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Skip AGY responsibility checklists in Add Account and `ccs agy` flows.
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
checked={agyAckBypass}
|
|
disabled={agyAckBypassLoading || agyAckBypassSaving || saving}
|
|
onCheckedChange={saveAgyAckBypass}
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-amber-800/90 dark:text-amber-200/90">
|
|
Use only if you fully understand the OAuth suspension/ban risk pattern (#622). CCS
|
|
cannot assume responsibility for account loss.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={resetToDefaults}
|
|
disabled={saving || (!tokens.apiKey.isCustom && !tokens.managementSecret.isCustom)}
|
|
className="gap-2"
|
|
>
|
|
<RotateCcw className="w-4 h-4" />
|
|
Reset to Defaults
|
|
</Button>
|
|
<p className="text-xs text-muted-foreground mt-2">
|
|
Resets both API key and management secret to their default values.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
{/* Footer */}
|
|
<div className="p-4 border-t bg-background flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
fetchTokens();
|
|
fetchAgyAckBypass();
|
|
fetchRawConfig();
|
|
}}
|
|
disabled={loading || saving}
|
|
className="flex-1"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
|
Refresh
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
onClick={saveChanges}
|
|
disabled={!hasChanges || saving}
|
|
className="flex-1"
|
|
>
|
|
<Save className={`w-4 h-4 mr-2 ${saving ? 'animate-pulse' : ''}`} />
|
|
{saving ? 'Saving...' : 'Save'}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|