From 71335a61935971c7621fefcef973cc2b42e313fd Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Thu, 25 Dec 2025 14:37:03 -0500
Subject: [PATCH] feat(ui): add auth tokens settings tab

- Add AuthSection component with API key and management secret inputs
- Show/hide toggle, copy to clipboard, regenerate secret button
- Reset to defaults action with disabled state when using defaults
- Add Auth tab to settings navigation with KeyRound icon
- Update SettingsTab type to include 'auth'
---
 .../settings/components/tab-navigation.tsx    |   6 +-
 .../pages/settings/hooks/use-settings-tab.ts  |   8 +-
 ui/src/pages/settings/index.tsx               |   2 +
 .../pages/settings/sections/auth-section.tsx  | 426 ++++++++++++++++++
 ui/src/pages/settings/types.ts                |   2 +-
 5 files changed, 441 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/pages/settings/sections/auth-section.tsx

diff --git a/ui/src/pages/settings/components/tab-navigation.tsx b/ui/src/pages/settings/components/tab-navigation.tsx
index 0755e437..a318d81d 100644
--- a/ui/src/pages/settings/components/tab-navigation.tsx
+++ b/ui/src/pages/settings/components/tab-navigation.tsx
@@ -4,7 +4,7 @@
  */
 
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Globe, Settings2, Server } from 'lucide-react';
+import { Globe, Settings2, Server, KeyRound } from 'lucide-react';
 import type { SettingsTab } from '../types';
 
 interface TabNavigationProps {
@@ -28,6 +28,10 @@ export function TabNavigation({ activeTab, onTabChange }: TabNavigationProps) {
           <Server className="w-4 h-4" />
           Proxy
         </TabsTrigger>
+        <TabsTrigger value="auth" className="flex-1 gap-2">
+          <KeyRound className="w-4 h-4" />
+          Auth
+        </TabsTrigger>
       </TabsList>
     </Tabs>
   );
diff --git a/ui/src/pages/settings/hooks/use-settings-tab.ts b/ui/src/pages/settings/hooks/use-settings-tab.ts
index 444b13e3..9ec10395 100644
--- a/ui/src/pages/settings/hooks/use-settings-tab.ts
+++ b/ui/src/pages/settings/hooks/use-settings-tab.ts
@@ -10,7 +10,13 @@ export function useSettingsTab() {
   const [searchParams, setSearchParams] = useSearchParams();
   const tabParam = searchParams.get('tab');
   const activeTab: SettingsTab =
-    tabParam === 'globalenv' ? 'globalenv' : tabParam === 'proxy' ? 'proxy' : 'websearch';
+    tabParam === 'globalenv'
+      ? 'globalenv'
+      : tabParam === 'proxy'
+        ? 'proxy'
+        : tabParam === 'auth'
+          ? 'auth'
+          : 'websearch';
 
   const setActiveTab = useCallback(
     (tab: SettingsTab) => {
diff --git a/ui/src/pages/settings/index.tsx b/ui/src/pages/settings/index.tsx
index d658bc51..ce86a63c 100644
--- a/ui/src/pages/settings/index.tsx
+++ b/ui/src/pages/settings/index.tsx
@@ -18,6 +18,7 @@ import type { SettingsTab } from './types';
 const WebSearchSection = lazy(() => import('./sections/websearch'));
 const GlobalEnvSection = lazy(() => import('./sections/globalenv-section'));
 const ProxySection = lazy(() => import('./sections/proxy'));
+const AuthSection = lazy(() => import('./sections/auth-section'));
 
 // Inner component that uses context
 function SettingsPageInner() {
@@ -57,6 +58,7 @@ function SettingsPageInner() {
               {activeTab === 'websearch' && <WebSearchSection />}
               {activeTab === 'globalenv' && <GlobalEnvSection />}
               {activeTab === 'proxy' && <ProxySection />}
+              {activeTab === 'auth' && <AuthSection />}
             </Suspense>
           </div>
         </Panel>
diff --git a/ui/src/pages/settings/sections/auth-section.tsx b/ui/src/pages/settings/sections/auth-section.tsx
new file mode 100644
index 00000000..07e070a7
--- /dev/null
+++ b/ui/src/pages/settings/sections/auth-section.tsx
@@ -0,0 +1,426 @@
+/**
+ * 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 {
+  RefreshCw,
+  CheckCircle2,
+  AlertCircle,
+  Eye,
+  EyeOff,
+  RotateCcw,
+  Sparkles,
+  Copy,
+  Check,
+  KeyRound,
+  ShieldCheck,
+} 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);
+
+  // 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);
+    }
+  }, []);
+
+  // Load on mount
+  useEffect(() => {
+    fetchTokens();
+    fetchRawConfig();
+  }, [fetchTokens, 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 API key
+  const saveApiKey = async () => {
+    if (editedApiKey === null) return;
+
+    try {
+      setSaving(true);
+      setError(null);
+      const response = await fetch('/api/settings/auth/tokens', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKey: editedApiKey }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to save API key');
+      }
+
+      setSuccess('API key updated. Restart CLIProxy to apply.');
+      setEditedApiKey(null);
+      await fetchTokens();
+      await fetchRawConfig();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Save management secret
+  const saveSecret = async () => {
+    if (editedSecret === null) return;
+
+    try {
+      setSaving(true);
+      setError(null);
+      const response = await fetch('/api/settings/auth/tokens', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ managementSecret: editedSecret }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to save management secret');
+      }
+
+      setSuccess('Management secret updated. Restart CLIProxy to apply.');
+      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);
+  };
+
+  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;
+
+  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)}
+                  onBlur={() => {
+                    if (editedApiKey !== null && editedApiKey !== tokens.apiKey.value) {
+                      saveApiKey();
+                    } else {
+                      setEditedApiKey(null);
+                    }
+                  }}
+                  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)}
+                  onBlur={() => {
+                    if (editedSecret !== null && editedSecret !== tokens.managementSecret.value) {
+                      saveSecret();
+                    } else {
+                      setEditedSecret(null);
+                    }
+                  }}
+                  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="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">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            fetchTokens();
+            fetchRawConfig();
+          }}
+          disabled={loading || saving}
+          className="w-full"
+        >
+          <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+          Refresh
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/ui/src/pages/settings/types.ts b/ui/src/pages/settings/types.ts
index 55ea8cfa..9fdd73de 100644
--- a/ui/src/pages/settings/types.ts
+++ b/ui/src/pages/settings/types.ts
@@ -49,7 +49,7 @@ export interface GlobalEnvConfig {
 
 // === Tab Types ===
 
-export type SettingsTab = 'websearch' | 'globalenv' | 'proxy';
+export type SettingsTab = 'websearch' | 'globalenv' | 'proxy' | 'auth';
 
 // === Re-exports from api-client ===