This commit introduces a new authentication mechanism for the web UI. Instead of requiring a pre-configured API key, a temporary API key is generated based on the system's UUID. This key is passed to the UI as a URL parameter and used for API requests. Changes: - Added a new utility to get the system UUID and generate a temporary API key. - Modified the `ccr ui` command to generate and pass the temporary API key. - Updated the authentication middleware to validate the temporary API key. - Adjusted the frontend to use the temporary API key from the URL. - Added a dedicated endpoint to test API access without modifying data. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
134 lines
4.2 KiB
TypeScript
134 lines
4.2 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { api } from '@/lib/api';
|
|
|
|
export function Login() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const [apiKey, setApiKey] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
// Check if user is already authenticated
|
|
useEffect(() => {
|
|
const checkAuth = async () => {
|
|
const apiKey = localStorage.getItem('apiKey');
|
|
if (apiKey) {
|
|
setIsLoading(true);
|
|
// Verify the API key is still valid
|
|
try {
|
|
await api.getConfig();
|
|
navigate('/dashboard');
|
|
} catch {
|
|
// If verification fails, remove the API key
|
|
localStorage.removeItem('apiKey');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
checkAuth();
|
|
|
|
// Listen for unauthorized events
|
|
const handleUnauthorized = () => {
|
|
navigate('/login');
|
|
};
|
|
|
|
window.addEventListener('unauthorized', handleUnauthorized);
|
|
|
|
return () => {
|
|
window.removeEventListener('unauthorized', handleUnauthorized);
|
|
};
|
|
}, [navigate]);
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
try {
|
|
// Set the API key
|
|
api.setApiKey(apiKey);
|
|
|
|
// Dispatch storage event to notify other components of the change
|
|
window.dispatchEvent(new StorageEvent('storage', {
|
|
key: 'apiKey',
|
|
newValue: apiKey,
|
|
url: window.location.href
|
|
}));
|
|
|
|
// Test the API key by fetching config
|
|
await api.getConfig();
|
|
|
|
// Navigate to dashboard
|
|
// The ConfigProvider will handle fetching the config
|
|
navigate('/dashboard');
|
|
} catch (error: any) {
|
|
// Clear the API key on failure
|
|
api.setApiKey('');
|
|
|
|
// Check if it's an unauthorized error
|
|
if (error.message && error.message.includes('401')) {
|
|
setError(t('login.invalidApiKey'));
|
|
} else {
|
|
// For other errors, still allow access (restricted mode)
|
|
navigate('/dashboard');
|
|
}
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-gray-50">
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader className="space-y-1">
|
|
<CardTitle className="text-2xl">{t('login.title')}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex justify-center py-8">
|
|
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
|
|
</div>
|
|
<p className="text-center text-sm text-gray-500">{t('login.validating')}</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-gray-50">
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader className="space-y-1">
|
|
<CardTitle className="text-2xl">{t('login.title')}</CardTitle>
|
|
<CardDescription>
|
|
{t('login.description')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<form onSubmit={handleLogin}>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="apiKey">{t('login.apiKey')}</Label>
|
|
<Input
|
|
id="apiKey"
|
|
type="password"
|
|
value={apiKey}
|
|
onChange={(e) => setApiKey(e.target.value)}
|
|
placeholder={t('login.apiKeyPlaceholder')}
|
|
/>
|
|
</div>
|
|
{error && <div className="text-sm text-red-500">{error}</div>}
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="w-full" type="submit">
|
|
{t('login.signIn')}
|
|
</Button>
|
|
</CardFooter>
|
|
</form>
|
|
</Card>
|
|
</div>
|
|
);
|
|
} |