mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-03 13:07:43 +00:00
feat(settings): refactor settings components and move API Git settings tabs
- Replaced old settings components with new tab-based structure for API, Git, and Tasks settings. - Introduced hooks for managing credentials and Git settings. - Created new sections for API keys and GitHub credentials with appropriate UI components.
This commit is contained in:
Haileyesus
@@ -1,421 +1,3 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import CredentialsSettingsTab from './settings/view/tabs/api-settings/CredentialsSettingsTab';
|
||||||
import { Button } from './ui/button';
|
|
||||||
import { Input } from './ui/input';
|
|
||||||
import { Key, Plus, Trash2, Eye, EyeOff, Copy, Check, Github, ExternalLink } from 'lucide-react';
|
|
||||||
import { useVersionCheck } from '../hooks/useVersionCheck';
|
|
||||||
import { version } from '../../package.json';
|
|
||||||
import { authenticatedFetch } from '../utils/api';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
function CredentialsSettings() {
|
export default CredentialsSettingsTab;
|
||||||
const { t } = useTranslation('settings');
|
|
||||||
const [apiKeys, setApiKeys] = useState([]);
|
|
||||||
const [githubCredentials, setGithubCredentials] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [showNewKeyForm, setShowNewKeyForm] = useState(false);
|
|
||||||
const [showNewGithubForm, setShowNewGithubForm] = useState(false);
|
|
||||||
const [newKeyName, setNewKeyName] = useState('');
|
|
||||||
const [newGithubName, setNewGithubName] = useState('');
|
|
||||||
const [newGithubToken, setNewGithubToken] = useState('');
|
|
||||||
const [newGithubDescription, setNewGithubDescription] = useState('');
|
|
||||||
const [showToken, setShowToken] = useState({});
|
|
||||||
const [copiedKey, setCopiedKey] = useState(null);
|
|
||||||
const [newlyCreatedKey, setNewlyCreatedKey] = useState(null);
|
|
||||||
|
|
||||||
// Version check hook
|
|
||||||
const { updateAvailable, latestVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
|
|
||||||
// Fetch API keys
|
|
||||||
const apiKeysRes = await authenticatedFetch('/api/settings/api-keys');
|
|
||||||
const apiKeysData = await apiKeysRes.json();
|
|
||||||
setApiKeys(apiKeysData.apiKeys || []);
|
|
||||||
|
|
||||||
// Fetch GitHub credentials only
|
|
||||||
const credentialsRes = await authenticatedFetch('/api/settings/credentials?type=github_token');
|
|
||||||
const credentialsData = await credentialsRes.json();
|
|
||||||
setGithubCredentials(credentialsData.credentials || []);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching settings:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const createApiKey = async () => {
|
|
||||||
if (!newKeyName.trim()) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await authenticatedFetch('/api/settings/api-keys', {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify({ keyName: newKeyName })
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.success) {
|
|
||||||
setNewlyCreatedKey(data.apiKey);
|
|
||||||
setNewKeyName('');
|
|
||||||
setShowNewKeyForm(false);
|
|
||||||
fetchData();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error creating API key:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteApiKey = async (keyId) => {
|
|
||||||
if (!confirm(t('apiKeys.confirmDelete'))) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await authenticatedFetch(`/api/settings/api-keys/${keyId}`, {
|
|
||||||
method: 'DELETE'
|
|
||||||
});
|
|
||||||
fetchData();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error deleting API key:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleApiKey = async (keyId, isActive) => {
|
|
||||||
try {
|
|
||||||
await authenticatedFetch(`/api/settings/api-keys/${keyId}/toggle`, {
|
|
||||||
method: 'PATCH',
|
|
||||||
body: JSON.stringify({ isActive: !isActive })
|
|
||||||
});
|
|
||||||
fetchData();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error toggling API key:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const createGithubCredential = async () => {
|
|
||||||
if (!newGithubName.trim() || !newGithubToken.trim()) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await authenticatedFetch('/api/settings/credentials', {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify({
|
|
||||||
credentialName: newGithubName,
|
|
||||||
credentialType: 'github_token',
|
|
||||||
credentialValue: newGithubToken,
|
|
||||||
description: newGithubDescription
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.success) {
|
|
||||||
setNewGithubName('');
|
|
||||||
setNewGithubToken('');
|
|
||||||
setNewGithubDescription('');
|
|
||||||
setShowNewGithubForm(false);
|
|
||||||
fetchData();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error creating GitHub credential:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteGithubCredential = async (credentialId) => {
|
|
||||||
if (!confirm(t('apiKeys.github.confirmDelete'))) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await authenticatedFetch(`/api/settings/credentials/${credentialId}`, {
|
|
||||||
method: 'DELETE'
|
|
||||||
});
|
|
||||||
fetchData();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error deleting GitHub credential:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleGithubCredential = async (credentialId, isActive) => {
|
|
||||||
try {
|
|
||||||
await authenticatedFetch(`/api/settings/credentials/${credentialId}/toggle`, {
|
|
||||||
method: 'PATCH',
|
|
||||||
body: JSON.stringify({ isActive: !isActive })
|
|
||||||
});
|
|
||||||
fetchData();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error toggling GitHub credential:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const copyToClipboard = (text, id) => {
|
|
||||||
navigator.clipboard.writeText(text);
|
|
||||||
setCopiedKey(id);
|
|
||||||
setTimeout(() => setCopiedKey(null), 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return <div className="text-muted-foreground">{t('apiKeys.loading')}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-8">
|
|
||||||
{/* New API Key Alert */}
|
|
||||||
{newlyCreatedKey && (
|
|
||||||
<div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
|
|
||||||
<h4 className="font-semibold text-yellow-500 mb-2">{t('apiKeys.newKey.alertTitle')}</h4>
|
|
||||||
<p className="text-sm text-muted-foreground mb-3">
|
|
||||||
{t('apiKeys.newKey.alertMessage')}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<code className="flex-1 px-3 py-2 bg-background/50 rounded font-mono text-sm break-all">
|
|
||||||
{newlyCreatedKey.apiKey}
|
|
||||||
</code>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => copyToClipboard(newlyCreatedKey.apiKey, 'new')}
|
|
||||||
>
|
|
||||||
{copiedKey === 'new' ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
className="mt-3"
|
|
||||||
onClick={() => setNewlyCreatedKey(null)}
|
|
||||||
>
|
|
||||||
{t('apiKeys.newKey.iveSavedIt')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* API Keys Section */}
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Key className="h-5 w-5" />
|
|
||||||
<h3 className="text-lg font-semibold">{t('apiKeys.title')}</h3>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowNewKeyForm(!showNewKeyForm)}
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4 mr-1" />
|
|
||||||
{t('apiKeys.newButton')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<p className="text-sm text-muted-foreground mb-2">
|
|
||||||
{t('apiKeys.description')}
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href="/api-docs.html"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-sm text-primary hover:underline inline-flex items-center gap-1"
|
|
||||||
>
|
|
||||||
{t('apiKeys.apiDocsLink')}
|
|
||||||
<ExternalLink className="h-3 w-3" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{showNewKeyForm && (
|
|
||||||
<div className="mb-4 p-4 border rounded-lg bg-card">
|
|
||||||
<Input
|
|
||||||
placeholder={t('apiKeys.form.placeholder')}
|
|
||||||
value={newKeyName}
|
|
||||||
onChange={(e) => setNewKeyName(e.target.value)}
|
|
||||||
className="mb-2"
|
|
||||||
/>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button onClick={createApiKey}>{t('apiKeys.form.createButton')}</Button>
|
|
||||||
<Button variant="outline" onClick={() => setShowNewKeyForm(false)}>
|
|
||||||
{t('apiKeys.form.cancelButton')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
{apiKeys.length === 0 ? (
|
|
||||||
<p className="text-sm text-muted-foreground italic">{t('apiKeys.empty')}</p>
|
|
||||||
) : (
|
|
||||||
apiKeys.map((key) => (
|
|
||||||
<div
|
|
||||||
key={key.id}
|
|
||||||
className="flex items-center justify-between p-3 border rounded-lg"
|
|
||||||
>
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="font-medium">{key.key_name}</div>
|
|
||||||
<code className="text-xs text-muted-foreground">{key.api_key}</code>
|
|
||||||
<div className="text-xs text-muted-foreground mt-1">
|
|
||||||
{t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
|
|
||||||
{key.last_used && ` • ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant={key.is_active ? 'outline' : 'secondary'}
|
|
||||||
onClick={() => toggleApiKey(key.id, key.is_active)}
|
|
||||||
>
|
|
||||||
{key.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => deleteApiKey(key.id)}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* GitHub Credentials Section */}
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Github className="h-5 w-5" />
|
|
||||||
<h3 className="text-lg font-semibold">{t('apiKeys.github.title')}</h3>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowNewGithubForm(!showNewGithubForm)}
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4 mr-1" />
|
|
||||||
{t('apiKeys.github.addButton')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-sm text-muted-foreground mb-4">
|
|
||||||
{t('apiKeys.github.descriptionAlt')}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{showNewGithubForm && (
|
|
||||||
<div className="mb-4 p-4 border rounded-lg bg-card space-y-3">
|
|
||||||
<Input
|
|
||||||
placeholder={t('apiKeys.github.form.namePlaceholder')}
|
|
||||||
value={newGithubName}
|
|
||||||
onChange={(e) => setNewGithubName(e.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type={showToken['new'] ? 'text' : 'password'}
|
|
||||||
placeholder={t('apiKeys.github.form.tokenPlaceholder')}
|
|
||||||
value={newGithubToken}
|
|
||||||
onChange={(e) => setNewGithubToken(e.target.value)}
|
|
||||||
className="pr-10"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowToken({ ...showToken, new: !showToken['new'] })}
|
|
||||||
className="absolute right-3 top-2.5 text-muted-foreground hover:text-foreground"
|
|
||||||
>
|
|
||||||
{showToken['new'] ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
placeholder={t('apiKeys.github.form.descriptionPlaceholder')}
|
|
||||||
value={newGithubDescription}
|
|
||||||
onChange={(e) => setNewGithubDescription(e.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button onClick={createGithubCredential}>{t('apiKeys.github.form.addButton')}</Button>
|
|
||||||
<Button variant="outline" onClick={() => {
|
|
||||||
setShowNewGithubForm(false);
|
|
||||||
setNewGithubName('');
|
|
||||||
setNewGithubToken('');
|
|
||||||
setNewGithubDescription('');
|
|
||||||
}}>
|
|
||||||
{t('apiKeys.github.form.cancelButton')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href="https://github.com/settings/tokens"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-xs text-primary hover:underline block"
|
|
||||||
>
|
|
||||||
{t('apiKeys.github.form.howToCreate')}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
{githubCredentials.length === 0 ? (
|
|
||||||
<p className="text-sm text-muted-foreground italic">{t('apiKeys.github.empty')}</p>
|
|
||||||
) : (
|
|
||||||
githubCredentials.map((credential) => (
|
|
||||||
<div
|
|
||||||
key={credential.id}
|
|
||||||
className="flex items-center justify-between p-3 border rounded-lg"
|
|
||||||
>
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="font-medium">{credential.credential_name}</div>
|
|
||||||
{credential.description && (
|
|
||||||
<div className="text-xs text-muted-foreground">{credential.description}</div>
|
|
||||||
)}
|
|
||||||
<div className="text-xs text-muted-foreground mt-1">
|
|
||||||
{t('apiKeys.github.added')} {new Date(credential.created_at).toLocaleDateString()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant={credential.is_active ? 'outline' : 'secondary'}
|
|
||||||
onClick={() => toggleGithubCredential(credential.id, credential.is_active)}
|
|
||||||
>
|
|
||||||
{credential.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => deleteGithubCredential(credential.id)}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Version Information */}
|
|
||||||
<div className="pt-6 border-t border-border/50">
|
|
||||||
<div className="flex items-center justify-between text-xs italic text-muted-foreground/60">
|
|
||||||
<a
|
|
||||||
href={releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases'}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="hover:text-muted-foreground transition-colors"
|
|
||||||
>
|
|
||||||
v{version}
|
|
||||||
</a>
|
|
||||||
{updateAvailable && latestVersion && (
|
|
||||||
<a
|
|
||||||
href={releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases'}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="flex items-center gap-1.5 px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full hover:bg-green-500/20 transition-colors not-italic font-medium"
|
|
||||||
>
|
|
||||||
<span className="text-[10px]">{t('apiKeys.version.updateAvailable', { version: latestVersion })}</span>
|
|
||||||
<ExternalLink className="h-2.5 w-2.5" />
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CredentialsSettings;
|
|
||||||
|
|||||||
@@ -1,131 +1,3 @@
|
|||||||
import { useState, useEffect } from 'react';
|
import GitSettingsTab from './settings/view/tabs/git-settings/GitSettingsTab';
|
||||||
import { Button } from './ui/button';
|
|
||||||
import { Input } from './ui/input';
|
|
||||||
import { GitBranch, Check } from 'lucide-react';
|
|
||||||
import { authenticatedFetch } from '../utils/api';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
function GitSettings() {
|
export default GitSettingsTab;
|
||||||
const { t } = useTranslation('settings');
|
|
||||||
const [gitName, setGitName] = useState('');
|
|
||||||
const [gitEmail, setGitEmail] = useState('');
|
|
||||||
const [gitConfigLoading, setGitConfigLoading] = useState(false);
|
|
||||||
const [gitConfigSaving, setGitConfigSaving] = useState(false);
|
|
||||||
const [saveStatus, setSaveStatus] = useState(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadGitConfig();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const loadGitConfig = async () => {
|
|
||||||
try {
|
|
||||||
setGitConfigLoading(true);
|
|
||||||
const response = await authenticatedFetch('/api/user/git-config');
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
setGitName(data.gitName || '');
|
|
||||||
setGitEmail(data.gitEmail || '');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading git config:', error);
|
|
||||||
} finally {
|
|
||||||
setGitConfigLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveGitConfig = async () => {
|
|
||||||
try {
|
|
||||||
setGitConfigSaving(true);
|
|
||||||
const response = await authenticatedFetch('/api/user/git-config', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ gitName, gitEmail })
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
setSaveStatus('success');
|
|
||||||
setTimeout(() => setSaveStatus(null), 3000);
|
|
||||||
} else {
|
|
||||||
const data = await response.json();
|
|
||||||
setSaveStatus('error');
|
|
||||||
console.error('Failed to save git config:', data.error);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error saving git config:', error);
|
|
||||||
setSaveStatus('error');
|
|
||||||
} finally {
|
|
||||||
setGitConfigSaving(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-8">
|
|
||||||
<div>
|
|
||||||
<div className="flex items-center gap-2 mb-4">
|
|
||||||
<GitBranch className="h-5 w-5" />
|
|
||||||
<h3 className="text-lg font-semibold">{t('git.title')}</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-sm text-muted-foreground mb-4">
|
|
||||||
{t('git.description')}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="p-4 border rounded-lg bg-card space-y-3">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="settings-git-name" className="block text-sm font-medium text-foreground mb-2">
|
|
||||||
{t('git.name.label')}
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
id="settings-git-name"
|
|
||||||
type="text"
|
|
||||||
value={gitName}
|
|
||||||
onChange={(e) => setGitName(e.target.value)}
|
|
||||||
placeholder="John Doe"
|
|
||||||
disabled={gitConfigLoading}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
<p className="mt-1 text-xs text-muted-foreground">
|
|
||||||
{t('git.name.help')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="settings-git-email" className="block text-sm font-medium text-foreground mb-2">
|
|
||||||
{t('git.email.label')}
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
id="settings-git-email"
|
|
||||||
type="email"
|
|
||||||
value={gitEmail}
|
|
||||||
onChange={(e) => setGitEmail(e.target.value)}
|
|
||||||
placeholder="john@example.com"
|
|
||||||
disabled={gitConfigLoading}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
<p className="mt-1 text-xs text-muted-foreground">
|
|
||||||
{t('git.email.help')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
onClick={saveGitConfig}
|
|
||||||
disabled={gitConfigSaving || !gitName || !gitEmail}
|
|
||||||
>
|
|
||||||
{gitConfigSaving ? t('git.actions.saving') : t('git.actions.save')}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{saveStatus === 'success' && (
|
|
||||||
<div className="text-sm text-green-600 dark:text-green-400 flex items-center gap-2">
|
|
||||||
<Check className="w-4 h-4" />
|
|
||||||
{t('git.status.success')}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default GitSettings;
|
|
||||||
|
|||||||
@@ -1,109 +1,3 @@
|
|||||||
import { Zap } from 'lucide-react';
|
import TasksSettingsTab from './settings/view/tabs/tasks-settings/TasksSettingsTab';
|
||||||
import { useTasksSettings } from '../contexts/TasksSettingsContext';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
function TasksSettings() {
|
export default TasksSettingsTab;
|
||||||
const { t } = useTranslation('settings');
|
|
||||||
const {
|
|
||||||
tasksEnabled,
|
|
||||||
setTasksEnabled,
|
|
||||||
isTaskMasterInstalled,
|
|
||||||
isCheckingInstallation
|
|
||||||
} = useTasksSettings();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-8">
|
|
||||||
{/* Installation Status Check */}
|
|
||||||
{isCheckingInstallation ? (
|
|
||||||
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full"></div>
|
|
||||||
<span className="text-sm text-muted-foreground">{t('tasks.checking')}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{/* TaskMaster Not Installed Warning */}
|
|
||||||
{!isTaskMasterInstalled && (
|
|
||||||
<div className="bg-orange-50 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div className="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
||||||
<svg className="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="font-medium text-orange-900 dark:text-orange-100 mb-2">
|
|
||||||
{t('tasks.notInstalled.title')}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-orange-800 dark:text-orange-200 space-y-3">
|
|
||||||
<p>{t('tasks.notInstalled.description')}</p>
|
|
||||||
|
|
||||||
<div className="bg-orange-100 dark:bg-orange-900/50 rounded-lg p-3 font-mono text-sm">
|
|
||||||
<code>{t('tasks.notInstalled.installCommand')}</code>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<a
|
|
||||||
href="https://github.com/eyaltoledano/claude-task-master"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
{t('tasks.notInstalled.viewOnGitHub')}
|
|
||||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<p className="font-medium">{t('tasks.notInstalled.afterInstallation')}</p>
|
|
||||||
<ol className="list-decimal list-inside space-y-1 text-xs">
|
|
||||||
<li>{t('tasks.notInstalled.steps.restart')}</li>
|
|
||||||
<li>{t('tasks.notInstalled.steps.autoAvailable')}</li>
|
|
||||||
<li>{t('tasks.notInstalled.steps.initCommand')}</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* TaskMaster Settings */}
|
|
||||||
{isTaskMasterInstalled && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<div className="font-medium text-foreground">
|
|
||||||
{t('tasks.settings.enableLabel')}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-muted-foreground mt-1">
|
|
||||||
{t('tasks.settings.enableDescription')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<label className="relative inline-flex items-center cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={tasksEnabled}
|
|
||||||
onChange={(e) => setTasksEnabled(e.target.checked)}
|
|
||||||
className="sr-only peer"
|
|
||||||
/>
|
|
||||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TasksSettings;
|
|
||||||
|
|||||||
@@ -1,15 +1,15 @@
|
|||||||
import { Settings as SettingsIcon, X } from 'lucide-react';
|
import { Settings as SettingsIcon, X } from 'lucide-react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import CredentialsSettings from '../CredentialsSettings';
|
|
||||||
import GitSettings from '../GitSettings';
|
|
||||||
import LoginModal from '../LoginModal';
|
import LoginModal from '../LoginModal';
|
||||||
import TasksSettings from '../TasksSettings';
|
|
||||||
import { Button } from '../ui/button';
|
import { Button } from '../ui/button';
|
||||||
import ClaudeMcpFormModal from './view/modals/ClaudeMcpFormModal';
|
import ClaudeMcpFormModal from './view/modals/ClaudeMcpFormModal';
|
||||||
import CodexMcpFormModal from './view/modals/CodexMcpFormModal';
|
import CodexMcpFormModal from './view/modals/CodexMcpFormModal';
|
||||||
import SettingsMainTabs from './view/SettingsMainTabs';
|
import SettingsMainTabs from './view/SettingsMainTabs';
|
||||||
import AgentsSettingsTab from './view/tabs/agents-settings/AgentsSettingsTab';
|
import AgentsSettingsTab from './view/tabs/agents-settings/AgentsSettingsTab';
|
||||||
import AppearanceSettingsTab from './view/tabs/AppearanceSettingsTab';
|
import AppearanceSettingsTab from './view/tabs/AppearanceSettingsTab';
|
||||||
|
import CredentialsSettingsTab from './view/tabs/api-settings/CredentialsSettingsTab';
|
||||||
|
import GitSettingsTab from './view/tabs/git-settings/GitSettingsTab';
|
||||||
|
import TasksSettingsTab from './view/tabs/tasks-settings/TasksSettingsTab';
|
||||||
import { useSettingsController } from './hooks/useSettingsController';
|
import { useSettingsController } from './hooks/useSettingsController';
|
||||||
import type { AgentProvider, SettingsProject, SettingsProps } from './types/types';
|
import type { AgentProvider, SettingsProject, SettingsProps } from './types/types';
|
||||||
|
|
||||||
@@ -129,7 +129,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{activeTab === 'git' && <GitSettings />}
|
{activeTab === 'git' && <GitSettingsTab />}
|
||||||
|
|
||||||
{activeTab === 'agents' && (
|
{activeTab === 'agents' && (
|
||||||
<AgentsSettingsTab
|
<AgentsSettingsTab
|
||||||
@@ -162,13 +162,13 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
|
|||||||
|
|
||||||
{activeTab === 'tasks' && (
|
{activeTab === 'tasks' && (
|
||||||
<div className="space-y-6 md:space-y-8">
|
<div className="space-y-6 md:space-y-8">
|
||||||
<TasksSettings />
|
<TasksSettingsTab />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{activeTab === 'api' && (
|
{activeTab === 'api' && (
|
||||||
<div className="space-y-6 md:space-y-8">
|
<div className="space-y-6 md:space-y-8">
|
||||||
<CredentialsSettings />
|
<CredentialsSettingsTab />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
272
src/components/settings/hooks/useCredentialsSettings.ts
Normal file
272
src/components/settings/hooks/useCredentialsSettings.ts
Normal file
@@ -0,0 +1,272 @@
|
|||||||
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
import { authenticatedFetch } from '../../../utils/api';
|
||||||
|
import type {
|
||||||
|
ApiKeyItem,
|
||||||
|
ApiKeysResponse,
|
||||||
|
CreatedApiKey,
|
||||||
|
GithubCredentialItem,
|
||||||
|
GithubCredentialsResponse,
|
||||||
|
} from '../view/tabs/api-settings/types';
|
||||||
|
|
||||||
|
type UseCredentialsSettingsArgs = {
|
||||||
|
confirmDeleteApiKeyText: string;
|
||||||
|
confirmDeleteGithubCredentialText: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getApiError = (payload: { error?: string } | undefined, fallback: string) => (
|
||||||
|
payload?.error || fallback
|
||||||
|
);
|
||||||
|
|
||||||
|
export function useCredentialsSettings({
|
||||||
|
confirmDeleteApiKeyText,
|
||||||
|
confirmDeleteGithubCredentialText,
|
||||||
|
}: UseCredentialsSettingsArgs) {
|
||||||
|
const [apiKeys, setApiKeys] = useState<ApiKeyItem[]>([]);
|
||||||
|
const [githubCredentials, setGithubCredentials] = useState<GithubCredentialItem[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const [showNewKeyForm, setShowNewKeyForm] = useState(false);
|
||||||
|
const [newKeyName, setNewKeyName] = useState('');
|
||||||
|
|
||||||
|
const [showNewGithubForm, setShowNewGithubForm] = useState(false);
|
||||||
|
const [newGithubName, setNewGithubName] = useState('');
|
||||||
|
const [newGithubToken, setNewGithubToken] = useState('');
|
||||||
|
const [newGithubDescription, setNewGithubDescription] = useState('');
|
||||||
|
|
||||||
|
const [showToken, setShowToken] = useState<Record<string, boolean>>({});
|
||||||
|
const [copiedKey, setCopiedKey] = useState<string | null>(null);
|
||||||
|
const [newlyCreatedKey, setNewlyCreatedKey] = useState<CreatedApiKey | null>(null);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const [apiKeysResponse, credentialsResponse] = await Promise.all([
|
||||||
|
authenticatedFetch('/api/settings/api-keys'),
|
||||||
|
authenticatedFetch('/api/settings/credentials?type=github_token'),
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [apiKeysPayload, credentialsPayload] = await Promise.all([
|
||||||
|
apiKeysResponse.json() as Promise<ApiKeysResponse>,
|
||||||
|
credentialsResponse.json() as Promise<GithubCredentialsResponse>,
|
||||||
|
]);
|
||||||
|
|
||||||
|
setApiKeys(apiKeysPayload.apiKeys || []);
|
||||||
|
setGithubCredentials(credentialsPayload.credentials || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching settings:', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const createApiKey = useCallback(async () => {
|
||||||
|
if (!newKeyName.trim()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authenticatedFetch('/api/settings/api-keys', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ keyName: newKeyName.trim() }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const payload = await response.json() as ApiKeysResponse;
|
||||||
|
if (!response.ok || !payload.success) {
|
||||||
|
console.error('Error creating API key:', getApiError(payload, 'Failed to create API key'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (payload.apiKey) {
|
||||||
|
setNewlyCreatedKey(payload.apiKey);
|
||||||
|
}
|
||||||
|
setNewKeyName('');
|
||||||
|
setShowNewKeyForm(false);
|
||||||
|
await fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating API key:', error);
|
||||||
|
}
|
||||||
|
}, [fetchData, newKeyName]);
|
||||||
|
|
||||||
|
const deleteApiKey = useCallback(async (keyId: string) => {
|
||||||
|
if (!window.confirm(confirmDeleteApiKeyText)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authenticatedFetch(`/api/settings/api-keys/${keyId}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const payload = await response.json() as ApiKeysResponse;
|
||||||
|
console.error('Error deleting API key:', getApiError(payload, 'Failed to delete API key'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting API key:', error);
|
||||||
|
}
|
||||||
|
}, [confirmDeleteApiKeyText, fetchData]);
|
||||||
|
|
||||||
|
const toggleApiKey = useCallback(async (keyId: string, isActive: boolean) => {
|
||||||
|
try {
|
||||||
|
const response = await authenticatedFetch(`/api/settings/api-keys/${keyId}/toggle`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
body: JSON.stringify({ isActive: !isActive }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const payload = await response.json() as ApiKeysResponse;
|
||||||
|
console.error('Error toggling API key:', getApiError(payload, 'Failed to toggle API key'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error toggling API key:', error);
|
||||||
|
}
|
||||||
|
}, [fetchData]);
|
||||||
|
|
||||||
|
const createGithubCredential = useCallback(async () => {
|
||||||
|
if (!newGithubName.trim() || !newGithubToken.trim()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authenticatedFetch('/api/settings/credentials', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
credentialName: newGithubName.trim(),
|
||||||
|
credentialType: 'github_token',
|
||||||
|
credentialValue: newGithubToken,
|
||||||
|
description: newGithubDescription.trim(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const payload = await response.json() as GithubCredentialsResponse;
|
||||||
|
if (!response.ok || !payload.success) {
|
||||||
|
console.error('Error creating GitHub credential:', getApiError(payload, 'Failed to create GitHub credential'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setNewGithubName('');
|
||||||
|
setNewGithubToken('');
|
||||||
|
setNewGithubDescription('');
|
||||||
|
setShowNewGithubForm(false);
|
||||||
|
setShowToken((prev) => ({ ...prev, new: false }));
|
||||||
|
await fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating GitHub credential:', error);
|
||||||
|
}
|
||||||
|
}, [fetchData, newGithubDescription, newGithubName, newGithubToken]);
|
||||||
|
|
||||||
|
const deleteGithubCredential = useCallback(async (credentialId: string) => {
|
||||||
|
if (!window.confirm(confirmDeleteGithubCredentialText)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authenticatedFetch(`/api/settings/credentials/${credentialId}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const payload = await response.json() as GithubCredentialsResponse;
|
||||||
|
console.error('Error deleting GitHub credential:', getApiError(payload, 'Failed to delete GitHub credential'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting GitHub credential:', error);
|
||||||
|
}
|
||||||
|
}, [confirmDeleteGithubCredentialText, fetchData]);
|
||||||
|
|
||||||
|
const toggleGithubCredential = useCallback(async (credentialId: string, isActive: boolean) => {
|
||||||
|
try {
|
||||||
|
const response = await authenticatedFetch(`/api/settings/credentials/${credentialId}/toggle`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
body: JSON.stringify({ isActive: !isActive }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const payload = await response.json() as GithubCredentialsResponse;
|
||||||
|
console.error('Error toggling GitHub credential:', getApiError(payload, 'Failed to toggle GitHub credential'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error toggling GitHub credential:', error);
|
||||||
|
}
|
||||||
|
}, [fetchData]);
|
||||||
|
|
||||||
|
const copyToClipboard = useCallback(async (text: string, id: string) => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
setCopiedKey(id);
|
||||||
|
window.setTimeout(() => setCopiedKey(null), 2000);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to copy to clipboard:', error);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const dismissNewlyCreatedKey = useCallback(() => {
|
||||||
|
setNewlyCreatedKey(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const cancelNewApiKeyForm = useCallback(() => {
|
||||||
|
setShowNewKeyForm(false);
|
||||||
|
setNewKeyName('');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const cancelNewGithubForm = useCallback(() => {
|
||||||
|
setShowNewGithubForm(false);
|
||||||
|
setNewGithubName('');
|
||||||
|
setNewGithubToken('');
|
||||||
|
setNewGithubDescription('');
|
||||||
|
setShowToken((prev) => ({ ...prev, new: false }));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const toggleNewGithubTokenVisibility = useCallback(() => {
|
||||||
|
setShowToken((prev) => ({ ...prev, new: !prev.new }));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void fetchData();
|
||||||
|
}, [fetchData]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
apiKeys,
|
||||||
|
githubCredentials,
|
||||||
|
loading,
|
||||||
|
showNewKeyForm,
|
||||||
|
setShowNewKeyForm,
|
||||||
|
newKeyName,
|
||||||
|
setNewKeyName,
|
||||||
|
showNewGithubForm,
|
||||||
|
setShowNewGithubForm,
|
||||||
|
newGithubName,
|
||||||
|
setNewGithubName,
|
||||||
|
newGithubToken,
|
||||||
|
setNewGithubToken,
|
||||||
|
newGithubDescription,
|
||||||
|
setNewGithubDescription,
|
||||||
|
showToken,
|
||||||
|
copiedKey,
|
||||||
|
newlyCreatedKey,
|
||||||
|
createApiKey,
|
||||||
|
deleteApiKey,
|
||||||
|
toggleApiKey,
|
||||||
|
createGithubCredential,
|
||||||
|
deleteGithubCredential,
|
||||||
|
toggleGithubCredential,
|
||||||
|
copyToClipboard,
|
||||||
|
dismissNewlyCreatedKey,
|
||||||
|
cancelNewApiKeyForm,
|
||||||
|
cancelNewGithubForm,
|
||||||
|
toggleNewGithubTokenVisibility,
|
||||||
|
};
|
||||||
|
}
|
||||||
96
src/components/settings/hooks/useGitSettings.ts
Normal file
96
src/components/settings/hooks/useGitSettings.ts
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
|
import { authenticatedFetch } from '../../../utils/api';
|
||||||
|
|
||||||
|
type GitConfigResponse = {
|
||||||
|
gitName?: string;
|
||||||
|
gitEmail?: string;
|
||||||
|
error?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type SaveStatus = 'success' | 'error' | null;
|
||||||
|
|
||||||
|
export function useGitSettings() {
|
||||||
|
const [gitName, setGitName] = useState('');
|
||||||
|
const [gitEmail, setGitEmail] = useState('');
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
const [saveStatus, setSaveStatus] = useState<SaveStatus>(null);
|
||||||
|
const clearStatusTimerRef = useRef<number | null>(null);
|
||||||
|
|
||||||
|
const clearSaveStatus = useCallback(() => {
|
||||||
|
if (clearStatusTimerRef.current !== null) {
|
||||||
|
window.clearTimeout(clearStatusTimerRef.current);
|
||||||
|
clearStatusTimerRef.current = null;
|
||||||
|
}
|
||||||
|
setSaveStatus(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadGitConfig = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
setIsLoading(true);
|
||||||
|
const response = await authenticatedFetch('/api/user/git-config');
|
||||||
|
if (!response.ok) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json() as GitConfigResponse;
|
||||||
|
setGitName(data.gitName || '');
|
||||||
|
setGitEmail(data.gitEmail || '');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading git config:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const saveGitConfig = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
setIsSaving(true);
|
||||||
|
const response = await authenticatedFetch('/api/user/git-config', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ gitName, gitEmail }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
setSaveStatus('success');
|
||||||
|
clearStatusTimerRef.current = window.setTimeout(() => {
|
||||||
|
setSaveStatus(null);
|
||||||
|
clearStatusTimerRef.current = null;
|
||||||
|
}, 3000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json() as GitConfigResponse;
|
||||||
|
console.error('Failed to save git config:', data.error);
|
||||||
|
setSaveStatus('error');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error saving git config:', error);
|
||||||
|
setSaveStatus('error');
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
|
}, [gitEmail, gitName]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void loadGitConfig();
|
||||||
|
}, [loadGitConfig]);
|
||||||
|
|
||||||
|
useEffect(() => () => {
|
||||||
|
if (clearStatusTimerRef.current !== null) {
|
||||||
|
window.clearTimeout(clearStatusTimerRef.current);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
gitName,
|
||||||
|
setGitName,
|
||||||
|
gitEmail,
|
||||||
|
setGitEmail,
|
||||||
|
isLoading,
|
||||||
|
isSaving,
|
||||||
|
saveStatus,
|
||||||
|
clearSaveStatus,
|
||||||
|
saveGitConfig,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useVersionCheck } from '../../../../../hooks/useVersionCheck';
|
||||||
|
import { useCredentialsSettings } from '../../../hooks/useCredentialsSettings';
|
||||||
|
import ApiKeysSection from './sections/ApiKeysSection';
|
||||||
|
import GithubCredentialsSection from './sections/GithubCredentialsSection';
|
||||||
|
import NewApiKeyAlert from './sections/NewApiKeyAlert';
|
||||||
|
import VersionInfoSection from './sections/VersionInfoSection';
|
||||||
|
|
||||||
|
export default function CredentialsSettingsTab() {
|
||||||
|
const { t } = useTranslation('settings');
|
||||||
|
const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
|
||||||
|
const {
|
||||||
|
apiKeys,
|
||||||
|
githubCredentials,
|
||||||
|
loading,
|
||||||
|
showNewKeyForm,
|
||||||
|
setShowNewKeyForm,
|
||||||
|
newKeyName,
|
||||||
|
setNewKeyName,
|
||||||
|
showNewGithubForm,
|
||||||
|
setShowNewGithubForm,
|
||||||
|
newGithubName,
|
||||||
|
setNewGithubName,
|
||||||
|
newGithubToken,
|
||||||
|
setNewGithubToken,
|
||||||
|
newGithubDescription,
|
||||||
|
setNewGithubDescription,
|
||||||
|
showToken,
|
||||||
|
copiedKey,
|
||||||
|
newlyCreatedKey,
|
||||||
|
createApiKey,
|
||||||
|
deleteApiKey,
|
||||||
|
toggleApiKey,
|
||||||
|
createGithubCredential,
|
||||||
|
deleteGithubCredential,
|
||||||
|
toggleGithubCredential,
|
||||||
|
copyToClipboard,
|
||||||
|
dismissNewlyCreatedKey,
|
||||||
|
cancelNewApiKeyForm,
|
||||||
|
cancelNewGithubForm,
|
||||||
|
toggleNewGithubTokenVisibility,
|
||||||
|
} = useCredentialsSettings({
|
||||||
|
confirmDeleteApiKeyText: t('apiKeys.confirmDelete'),
|
||||||
|
confirmDeleteGithubCredentialText: t('apiKeys.github.confirmDelete'),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="text-muted-foreground">{t('apiKeys.loading')}</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{newlyCreatedKey && (
|
||||||
|
<NewApiKeyAlert
|
||||||
|
apiKey={newlyCreatedKey}
|
||||||
|
copiedKey={copiedKey}
|
||||||
|
onCopy={copyToClipboard}
|
||||||
|
onDismiss={dismissNewlyCreatedKey}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<ApiKeysSection
|
||||||
|
apiKeys={apiKeys}
|
||||||
|
showNewKeyForm={showNewKeyForm}
|
||||||
|
newKeyName={newKeyName}
|
||||||
|
onShowNewKeyFormChange={setShowNewKeyForm}
|
||||||
|
onNewKeyNameChange={setNewKeyName}
|
||||||
|
onCreateApiKey={createApiKey}
|
||||||
|
onCancelCreateApiKey={cancelNewApiKeyForm}
|
||||||
|
onToggleApiKey={toggleApiKey}
|
||||||
|
onDeleteApiKey={deleteApiKey}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<GithubCredentialsSection
|
||||||
|
githubCredentials={githubCredentials}
|
||||||
|
showNewGithubForm={showNewGithubForm}
|
||||||
|
showNewTokenPlainText={Boolean(showToken.new)}
|
||||||
|
newGithubName={newGithubName}
|
||||||
|
newGithubToken={newGithubToken}
|
||||||
|
newGithubDescription={newGithubDescription}
|
||||||
|
onShowNewGithubFormChange={setShowNewGithubForm}
|
||||||
|
onNewGithubNameChange={setNewGithubName}
|
||||||
|
onNewGithubTokenChange={setNewGithubToken}
|
||||||
|
onNewGithubDescriptionChange={setNewGithubDescription}
|
||||||
|
onToggleNewTokenVisibility={toggleNewGithubTokenVisibility}
|
||||||
|
onCreateGithubCredential={createGithubCredential}
|
||||||
|
onCancelCreateGithubCredential={cancelNewGithubForm}
|
||||||
|
onToggleGithubCredential={toggleGithubCredential}
|
||||||
|
onDeleteGithubCredential={deleteGithubCredential}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<VersionInfoSection
|
||||||
|
currentVersion={currentVersion}
|
||||||
|
updateAvailable={updateAvailable}
|
||||||
|
latestVersion={latestVersion}
|
||||||
|
releaseInfo={releaseInfo}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
import { ExternalLink, Key, Plus, Trash2 } from 'lucide-react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '../../../../../ui/button';
|
||||||
|
import { Input } from '../../../../../ui/input';
|
||||||
|
import type { ApiKeyItem } from '../types';
|
||||||
|
|
||||||
|
type ApiKeysSectionProps = {
|
||||||
|
apiKeys: ApiKeyItem[];
|
||||||
|
showNewKeyForm: boolean;
|
||||||
|
newKeyName: string;
|
||||||
|
onShowNewKeyFormChange: (value: boolean) => void;
|
||||||
|
onNewKeyNameChange: (value: string) => void;
|
||||||
|
onCreateApiKey: () => void;
|
||||||
|
onCancelCreateApiKey: () => void;
|
||||||
|
onToggleApiKey: (keyId: string, isActive: boolean) => void;
|
||||||
|
onDeleteApiKey: (keyId: string) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ApiKeysSection({
|
||||||
|
apiKeys,
|
||||||
|
showNewKeyForm,
|
||||||
|
newKeyName,
|
||||||
|
onShowNewKeyFormChange,
|
||||||
|
onNewKeyNameChange,
|
||||||
|
onCreateApiKey,
|
||||||
|
onCancelCreateApiKey,
|
||||||
|
onToggleApiKey,
|
||||||
|
onDeleteApiKey,
|
||||||
|
}: ApiKeysSectionProps) {
|
||||||
|
const { t } = useTranslation('settings');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Key className="h-5 w-5" />
|
||||||
|
<h3 className="text-lg font-semibold">{t('apiKeys.title')}</h3>
|
||||||
|
</div>
|
||||||
|
<Button size="sm" onClick={() => onShowNewKeyFormChange(!showNewKeyForm)}>
|
||||||
|
<Plus className="h-4 w-4 mr-1" />
|
||||||
|
{t('apiKeys.newButton')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<p className="text-sm text-muted-foreground mb-2">{t('apiKeys.description')}</p>
|
||||||
|
<a
|
||||||
|
href="/api-docs.html"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-sm text-primary hover:underline inline-flex items-center gap-1"
|
||||||
|
>
|
||||||
|
{t('apiKeys.apiDocsLink')}
|
||||||
|
<ExternalLink className="h-3 w-3" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showNewKeyForm && (
|
||||||
|
<div className="mb-4 p-4 border rounded-lg bg-card">
|
||||||
|
<Input
|
||||||
|
placeholder={t('apiKeys.form.placeholder')}
|
||||||
|
value={newKeyName}
|
||||||
|
onChange={(event) => onNewKeyNameChange(event.target.value)}
|
||||||
|
className="mb-2"
|
||||||
|
/>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button onClick={onCreateApiKey}>{t('apiKeys.form.createButton')}</Button>
|
||||||
|
<Button variant="outline" onClick={onCancelCreateApiKey}>
|
||||||
|
{t('apiKeys.form.cancelButton')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{apiKeys.length === 0 ? (
|
||||||
|
<p className="text-sm text-muted-foreground italic">{t('apiKeys.empty')}</p>
|
||||||
|
) : (
|
||||||
|
apiKeys.map((key) => (
|
||||||
|
<div key={key.id} className="flex items-center justify-between p-3 border rounded-lg">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="font-medium">{key.key_name}</div>
|
||||||
|
<code className="text-xs text-muted-foreground">{key.api_key}</code>
|
||||||
|
<div className="text-xs text-muted-foreground mt-1">
|
||||||
|
{t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
|
||||||
|
{key.last_used
|
||||||
|
? ` - ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`
|
||||||
|
: ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant={key.is_active ? 'outline' : 'secondary'}
|
||||||
|
onClick={() => onToggleApiKey(key.id, key.is_active)}
|
||||||
|
>
|
||||||
|
{key.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="ghost" onClick={() => onDeleteApiKey(key.id)}>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
import { Eye, EyeOff, Github, Plus, Trash2 } from 'lucide-react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '../../../../../ui/button';
|
||||||
|
import { Input } from '../../../../../ui/input';
|
||||||
|
import type { GithubCredentialItem } from '../types';
|
||||||
|
|
||||||
|
type GithubCredentialsSectionProps = {
|
||||||
|
githubCredentials: GithubCredentialItem[];
|
||||||
|
showNewGithubForm: boolean;
|
||||||
|
showNewTokenPlainText: boolean;
|
||||||
|
newGithubName: string;
|
||||||
|
newGithubToken: string;
|
||||||
|
newGithubDescription: string;
|
||||||
|
onShowNewGithubFormChange: (value: boolean) => void;
|
||||||
|
onNewGithubNameChange: (value: string) => void;
|
||||||
|
onNewGithubTokenChange: (value: string) => void;
|
||||||
|
onNewGithubDescriptionChange: (value: string) => void;
|
||||||
|
onToggleNewTokenVisibility: () => void;
|
||||||
|
onCreateGithubCredential: () => void;
|
||||||
|
onCancelCreateGithubCredential: () => void;
|
||||||
|
onToggleGithubCredential: (credentialId: string, isActive: boolean) => void;
|
||||||
|
onDeleteGithubCredential: (credentialId: string) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function GithubCredentialsSection({
|
||||||
|
githubCredentials,
|
||||||
|
showNewGithubForm,
|
||||||
|
showNewTokenPlainText,
|
||||||
|
newGithubName,
|
||||||
|
newGithubToken,
|
||||||
|
newGithubDescription,
|
||||||
|
onShowNewGithubFormChange,
|
||||||
|
onNewGithubNameChange,
|
||||||
|
onNewGithubTokenChange,
|
||||||
|
onNewGithubDescriptionChange,
|
||||||
|
onToggleNewTokenVisibility,
|
||||||
|
onCreateGithubCredential,
|
||||||
|
onCancelCreateGithubCredential,
|
||||||
|
onToggleGithubCredential,
|
||||||
|
onDeleteGithubCredential,
|
||||||
|
}: GithubCredentialsSectionProps) {
|
||||||
|
const { t } = useTranslation('settings');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Github className="h-5 w-5" />
|
||||||
|
<h3 className="text-lg font-semibold">{t('apiKeys.github.title')}</h3>
|
||||||
|
</div>
|
||||||
|
<Button size="sm" onClick={() => onShowNewGithubFormChange(!showNewGithubForm)}>
|
||||||
|
<Plus className="h-4 w-4 mr-1" />
|
||||||
|
{t('apiKeys.github.addButton')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-muted-foreground mb-4">{t('apiKeys.github.descriptionAlt')}</p>
|
||||||
|
|
||||||
|
{showNewGithubForm && (
|
||||||
|
<div className="mb-4 p-4 border rounded-lg bg-card space-y-3">
|
||||||
|
<Input
|
||||||
|
placeholder={t('apiKeys.github.form.namePlaceholder')}
|
||||||
|
value={newGithubName}
|
||||||
|
onChange={(event) => onNewGithubNameChange(event.target.value)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
type={showNewTokenPlainText ? 'text' : 'password'}
|
||||||
|
placeholder={t('apiKeys.github.form.tokenPlaceholder')}
|
||||||
|
value={newGithubToken}
|
||||||
|
onChange={(event) => onNewGithubTokenChange(event.target.value)}
|
||||||
|
className="pr-10"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onToggleNewTokenVisibility}
|
||||||
|
className="absolute right-3 top-2.5 text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
{showNewTokenPlainText ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
placeholder={t('apiKeys.github.form.descriptionPlaceholder')}
|
||||||
|
value={newGithubDescription}
|
||||||
|
onChange={(event) => onNewGithubDescriptionChange(event.target.value)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button onClick={onCreateGithubCredential}>{t('apiKeys.github.form.addButton')}</Button>
|
||||||
|
<Button variant="outline" onClick={onCancelCreateGithubCredential}>
|
||||||
|
{t('apiKeys.github.form.cancelButton')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://github.com/settings/tokens"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-xs text-primary hover:underline block"
|
||||||
|
>
|
||||||
|
{t('apiKeys.github.form.howToCreate')}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{githubCredentials.length === 0 ? (
|
||||||
|
<p className="text-sm text-muted-foreground italic">{t('apiKeys.github.empty')}</p>
|
||||||
|
) : (
|
||||||
|
githubCredentials.map((credential) => (
|
||||||
|
<div key={credential.id} className="flex items-center justify-between p-3 border rounded-lg">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="font-medium">{credential.credential_name}</div>
|
||||||
|
{credential.description && (
|
||||||
|
<div className="text-xs text-muted-foreground">{credential.description}</div>
|
||||||
|
)}
|
||||||
|
<div className="text-xs text-muted-foreground mt-1">
|
||||||
|
{t('apiKeys.github.added')} {new Date(credential.created_at).toLocaleDateString()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant={credential.is_active ? 'outline' : 'secondary'}
|
||||||
|
onClick={() => onToggleGithubCredential(credential.id, credential.is_active)}
|
||||||
|
>
|
||||||
|
{credential.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="ghost" onClick={() => onDeleteGithubCredential(credential.id)}>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import { Check, Copy } from 'lucide-react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '../../../../../ui/button';
|
||||||
|
import type { CreatedApiKey } from '../types';
|
||||||
|
|
||||||
|
type NewApiKeyAlertProps = {
|
||||||
|
apiKey: CreatedApiKey;
|
||||||
|
copiedKey: string | null;
|
||||||
|
onCopy: (text: string, id: string) => void;
|
||||||
|
onDismiss: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function NewApiKeyAlert({
|
||||||
|
apiKey,
|
||||||
|
copiedKey,
|
||||||
|
onCopy,
|
||||||
|
onDismiss,
|
||||||
|
}: NewApiKeyAlertProps) {
|
||||||
|
const { t } = useTranslation('settings');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
|
||||||
|
<h4 className="font-semibold text-yellow-500 mb-2">{t('apiKeys.newKey.alertTitle')}</h4>
|
||||||
|
<p className="text-sm text-muted-foreground mb-3">{t('apiKeys.newKey.alertMessage')}</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="flex-1 px-3 py-2 bg-background/50 rounded font-mono text-sm break-all">
|
||||||
|
{apiKey.apiKey}
|
||||||
|
</code>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onCopy(apiKey.apiKey, 'new')}
|
||||||
|
>
|
||||||
|
{copiedKey === 'new' ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Button size="sm" variant="ghost" className="mt-3" onClick={onDismiss}>
|
||||||
|
{t('apiKeys.newKey.iveSavedIt')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { ExternalLink } from 'lucide-react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import type { ReleaseInfo } from '../../../../../../types/sharedTypes';
|
||||||
|
|
||||||
|
type VersionInfoSectionProps = {
|
||||||
|
currentVersion: string;
|
||||||
|
updateAvailable: boolean;
|
||||||
|
latestVersion: string | null;
|
||||||
|
releaseInfo: ReleaseInfo | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function VersionInfoSection({
|
||||||
|
currentVersion,
|
||||||
|
updateAvailable,
|
||||||
|
latestVersion,
|
||||||
|
releaseInfo,
|
||||||
|
}: VersionInfoSectionProps) {
|
||||||
|
const { t } = useTranslation('settings');
|
||||||
|
const releasesUrl = releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-6 border-t border-border/50">
|
||||||
|
<div className="flex items-center justify-between text-xs italic text-muted-foreground/60">
|
||||||
|
<a
|
||||||
|
href={releasesUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="hover:text-muted-foreground transition-colors"
|
||||||
|
>
|
||||||
|
v{currentVersion}
|
||||||
|
</a>
|
||||||
|
{updateAvailable && latestVersion && (
|
||||||
|
<a
|
||||||
|
href={releasesUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-1.5 px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full hover:bg-green-500/20 transition-colors not-italic font-medium"
|
||||||
|
>
|
||||||
|
<span className="text-[10px]">{t('apiKeys.version.updateAvailable', { version: latestVersion })}</span>
|
||||||
|
<ExternalLink className="h-2.5 w-2.5" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
36
src/components/settings/view/tabs/api-settings/types.ts
Normal file
36
src/components/settings/view/tabs/api-settings/types.ts
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
export type ApiKeyItem = {
|
||||||
|
id: string;
|
||||||
|
key_name: string;
|
||||||
|
api_key: string;
|
||||||
|
created_at: string;
|
||||||
|
last_used?: string | null;
|
||||||
|
is_active: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type CreatedApiKey = {
|
||||||
|
id: string;
|
||||||
|
keyName: string;
|
||||||
|
apiKey: string;
|
||||||
|
createdAt?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type GithubCredentialItem = {
|
||||||
|
id: string;
|
||||||
|
credential_name: string;
|
||||||
|
description?: string | null;
|
||||||
|
created_at: string;
|
||||||
|
is_active: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ApiKeysResponse = {
|
||||||
|
apiKeys?: ApiKeyItem[];
|
||||||
|
success?: boolean;
|
||||||
|
error?: string;
|
||||||
|
apiKey?: CreatedApiKey;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type GithubCredentialsResponse = {
|
||||||
|
credentials?: GithubCredentialItem[];
|
||||||
|
success?: boolean;
|
||||||
|
error?: string;
|
||||||
|
};
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
import { Check, GitBranch } from 'lucide-react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useGitSettings } from '../../../hooks/useGitSettings';
|
||||||
|
import { Button } from '../../../../ui/button';
|
||||||
|
import { Input } from '../../../../ui/input';
|
||||||
|
|
||||||
|
export default function GitSettingsTab() {
|
||||||
|
const { t } = useTranslation('settings');
|
||||||
|
const {
|
||||||
|
gitName,
|
||||||
|
setGitName,
|
||||||
|
gitEmail,
|
||||||
|
setGitEmail,
|
||||||
|
isLoading,
|
||||||
|
isSaving,
|
||||||
|
saveStatus,
|
||||||
|
saveGitConfig,
|
||||||
|
} = useGitSettings();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<GitBranch className="h-5 w-5" />
|
||||||
|
<h3 className="text-lg font-semibold">{t('git.title')}</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-muted-foreground mb-4">{t('git.description')}</p>
|
||||||
|
|
||||||
|
<div className="p-4 border rounded-lg bg-card space-y-3">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="settings-git-name" className="block text-sm font-medium text-foreground mb-2">
|
||||||
|
{t('git.name.label')}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
id="settings-git-name"
|
||||||
|
type="text"
|
||||||
|
value={gitName}
|
||||||
|
onChange={(event) => setGitName(event.target.value)}
|
||||||
|
placeholder="John Doe"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-muted-foreground">{t('git.name.help')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="settings-git-email" className="block text-sm font-medium text-foreground mb-2">
|
||||||
|
{t('git.email.label')}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
id="settings-git-email"
|
||||||
|
type="email"
|
||||||
|
value={gitEmail}
|
||||||
|
onChange={(event) => setGitEmail(event.target.value)}
|
||||||
|
placeholder="john@example.com"
|
||||||
|
disabled={isLoading}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-muted-foreground">{t('git.email.help')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
onClick={saveGitConfig}
|
||||||
|
disabled={isSaving || !gitName.trim() || !gitEmail.trim()}
|
||||||
|
>
|
||||||
|
{isSaving ? t('git.actions.saving') : t('git.actions.save')}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{saveStatus === 'success' && (
|
||||||
|
<div className="text-sm text-green-600 dark:text-green-400 flex items-center gap-2">
|
||||||
|
<Check className="w-4 h-4" />
|
||||||
|
{t('git.status.success')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useTasksSettings } from '../../../../../contexts/TasksSettingsContext';
|
||||||
|
|
||||||
|
type TasksSettingsContextValue = {
|
||||||
|
tasksEnabled: boolean;
|
||||||
|
setTasksEnabled: (enabled: boolean) => void;
|
||||||
|
isTaskMasterInstalled: boolean | null;
|
||||||
|
isCheckingInstallation: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function TasksSettingsTab() {
|
||||||
|
const { t } = useTranslation('settings');
|
||||||
|
const {
|
||||||
|
tasksEnabled,
|
||||||
|
setTasksEnabled,
|
||||||
|
isTaskMasterInstalled,
|
||||||
|
isCheckingInstallation,
|
||||||
|
} = useTasksSettings() as TasksSettingsContextValue;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{isCheckingInstallation ? (
|
||||||
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full" />
|
||||||
|
<span className="text-sm text-muted-foreground">{t('tasks.checking')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{!isTaskMasterInstalled && (
|
||||||
|
<div className="bg-orange-50 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||||
|
<svg className="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="font-medium text-orange-900 dark:text-orange-100 mb-2">
|
||||||
|
{t('tasks.notInstalled.title')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-orange-800 dark:text-orange-200 space-y-3">
|
||||||
|
<p>{t('tasks.notInstalled.description')}</p>
|
||||||
|
|
||||||
|
<div className="bg-orange-100 dark:bg-orange-900/50 rounded-lg p-3 font-mono text-sm">
|
||||||
|
<code>{t('tasks.notInstalled.installCommand')}</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href="https://github.com/eyaltoledano/claude-task-master"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
{t('tasks.notInstalled.viewOnGitHub')}
|
||||||
|
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="font-medium">{t('tasks.notInstalled.afterInstallation')}</p>
|
||||||
|
<ol className="list-decimal list-inside space-y-1 text-xs">
|
||||||
|
<li>{t('tasks.notInstalled.steps.restart')}</li>
|
||||||
|
<li>{t('tasks.notInstalled.steps.autoAvailable')}</li>
|
||||||
|
<li>{t('tasks.notInstalled.steps.initCommand')}</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isTaskMasterInstalled && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-foreground">{t('tasks.settings.enableLabel')}</div>
|
||||||
|
<div className="text-sm text-muted-foreground mt-1">{t('tasks.settings.enableDescription')}</div>
|
||||||
|
</div>
|
||||||
|
<label className="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={tasksEnabled}
|
||||||
|
onChange={(event) => setTasksEnabled(event.target.checked)}
|
||||||
|
className="sr-only peer"
|
||||||
|
/>
|
||||||
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user