usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: switch to sections

This commit is contained in:
Oleg Proskurin 2025-10-26 16:33:18 +07:00
parent ab85b5e1fa
commit 2f8d239da0
4 changed files with 91 additions and 590 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
apps/landing/src/app/demo/gallery/page.tsx
View File

@ -1,13 +1,13 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
import { useApiKey } from '@/components/shared/ApiKeyWidget/apikey-context';
import { Section } from '@/components/shared/Section';
import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
import { ImageGrid } from '@/components/demo/gallery/ImageGrid';
import { EmptyGalleryState } from '@/components/demo/gallery/EmptyGalleryState';
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
const API_KEY_STORAGE_KEY = 'banatie_demo_api_key';
const IMAGES_PER_PAGE = 30;
type ImageItem = {
@ -31,22 +31,13 @@ type ImagesResponse = {
message?: string;
};
type ApiKeyInfo = {
organizationSlug?: string;
projectSlug?: string;
};
type DownloadTimeMap = {
[imageId: string]: number;
};
export default function GalleryPage() {
const [apiKey, setApiKey] = useState('');
const [apiKeyVisible, setApiKeyVisible] = useState(false);
const [apiKeyValidated, setApiKeyValidated] = useState(false);
const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
const [apiKeyError, setApiKeyError] = useState('');
const [validatingKey, setValidatingKey] = useState(false);
// API Key from context
const { apiKey, apiKeyValidated, focus } = useApiKey();
const [images, setImages] = useState<ImageItem[]>([]);
const [offset, setOffset] = useState(0);
@ -59,110 +50,10 @@ export default function GalleryPage() {
const [downloadTimes, setDownloadTimes] = useState<DownloadTimeMap>({});
useEffect(() => {
const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
if (storedApiKey) {
setApiKey(storedApiKey);
validateStoredApiKey(storedApiKey);
if (apiKeyValidated) {
fetchImages(apiKey, 0);
}
}, []);
const validateStoredApiKey = async (keyToValidate: string) => {
setValidatingKey(true);
setApiKeyError('');
try {
const response = await fetch(`${API_BASE_URL}/api/info`, {
headers: {
'X-API-Key': keyToValidate,
},
});
if (response.ok) {
const data = await response.json();
setApiKeyValidated(true);
if (data.keyInfo) {
setApiKeyInfo({
organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
});
} else {
setApiKeyInfo({
organizationSlug: 'Unknown',
projectSlug: 'Unknown',
});
}
await fetchImages(keyToValidate, 0);
} else {
localStorage.removeItem(API_KEY_STORAGE_KEY);
setApiKeyError('Stored API key is invalid or expired');
setApiKeyValidated(false);
}
} catch (error) {
setApiKeyError('Failed to validate stored API key');
setApiKeyValidated(false);
} finally {
setValidatingKey(false);
}
};
const validateApiKey = async () => {
if (!apiKey.trim()) {
setApiKeyError('Please enter an API key');
return;
}
setValidatingKey(true);
setApiKeyError('');
try {
const response = await fetch(`${API_BASE_URL}/api/info`, {
headers: {
'X-API-Key': apiKey,
},
});
if (response.ok) {
const data = await response.json();
setApiKeyValidated(true);
localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
if (data.keyInfo) {
setApiKeyInfo({
organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
});
} else {
setApiKeyInfo({
organizationSlug: 'Unknown',
projectSlug: 'Unknown',
});
}
await fetchImages(apiKey, 0);
} else {
const error = await response.json();
setApiKeyError(error.message || 'Invalid API key');
setApiKeyValidated(false);
}
} catch (error) {
setApiKeyError('Failed to validate API key. Please check your connection.');
setApiKeyValidated(false);
} finally {
setValidatingKey(false);
}
};
const revokeApiKey = () => {
localStorage.removeItem(API_KEY_STORAGE_KEY);
setApiKey('');
setApiKeyValidated(false);
setApiKeyInfo(null);
setApiKeyError('');
setImages([]);
setOffset(0);
setHasMore(false);
setError('');
};
}, [apiKeyValidated]);
const fetchImages = async (keyToUse: string, fetchOffset: number) => {
if (fetchOffset === 0) {
@ -223,16 +114,7 @@ export default function GalleryPage() {
}, []);
return (
<div className="relative z-10 max-w-7xl mx-auto px-6 py-12 md:py-16 min-h-screen">
{apiKeyValidated && apiKeyInfo && (
<MinimizedApiKey
organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
apiKey={apiKey}
onRevoke={revokeApiKey}
/>
)}
<Section className="py-12 md:py-16 min-h-screen">
<header className="mb-8 md:mb-12">
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
Image Gallery
@ -242,83 +124,23 @@ export default function GalleryPage() {
</p>
</header>
{/* API Key Required Notice - Only show when not validated */}
{!apiKeyValidated && (
<section
className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
aria-label="API Key Validation"
>
<h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
<div className="flex gap-3">
<div className="flex-1 relative">
<input
type={apiKeyVisible ? 'text' : 'password'}
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
validateApiKey();
}
}}
placeholder="Enter your API key"
className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent pr-12"
aria-label="API key input"
/>
<button
type="button"
onClick={() => setApiKeyVisible(!apiKeyVisible)}
className="absolute right-3 top-1/2 -translate-y-1/2 p-2 text-gray-400 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-amber-500 rounded"
aria-label={apiKeyVisible ? 'Hide API key' : 'Show API key'}
>
{apiKeyVisible ? (
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
/>
</svg>
) : (
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
)}
</button>
<div className="mb-6 p-5 bg-amber-900/10 border border-amber-700/50 rounded-2xl">
<div className="flex items-center justify-between flex-wrap gap-4">
<div>
<h3 className="text-lg font-semibold text-white mb-1">API Key Required</h3>
<p className="text-sm text-gray-400">Enter your API key to browse your images</p>
</div>
<button
onClick={validateApiKey}
disabled={validatingKey}
className="px-6 py-3 rounded-lg bg-amber-600 text-white font-semibold hover:bg-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
aria-busy={validatingKey}
onClick={focus}
className="px-5 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
>
{validatingKey ? 'Validating...' : 'Validate'}
Enter API Key
</button>
</div>
{apiKeyError && (
<div className="mt-3 p-3 bg-red-900/20 border border-red-700/50 rounded-lg" role="alert" aria-live="assertive">
<p className="text-sm text-red-400 font-medium mb-1">{apiKeyError}</p>
<p className="text-xs text-red-300/80">
{apiKeyError.includes('Invalid')
? 'Please check your API key and try again. You can create a new key in the admin dashboard.'
: 'Please check your internet connection and try again.'}
</p>
</div>
)}
</section>
)}
{apiKeyValidated && (
<section aria-label="Image Gallery">
@ -372,6 +194,6 @@ export default function GalleryPage() {
)}
<ImageZoomModal imageUrl={zoomedImageUrl} onClose={() => setZoomedImageUrl(null)} />
</div>
</Section>
);
}

39
apps/landing/src/app/demo/layout.tsx Normal file
View File

@ -0,0 +1,39 @@
'use client';
import { ReactNode } from 'react';
import { usePathname } from 'next/navigation';
import { SubsectionNav } from '@/components/shared/SubsectionNav';
import { ApiKeyWidget } from '@/components/shared/ApiKeyWidget/apikey-widget';
import { ApiKeyProvider } from '@/components/shared/ApiKeyWidget/apikey-context';
interface DemoLayoutProps {
children: ReactNode;
}
const navItems = [
{ label: 'Text to Image', href: '/demo/tti' },
{ label: 'Upload', href: '/demo/upload' },
{ label: 'Gallery', href: '/demo/gallery' },
];
export default function DemoLayout({ children }: DemoLayoutProps) {
const pathname = usePathname();
return (
<ApiKeyProvider>
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
{/* Animated gradient background */}
<div className="fixed inset-0 overflow-hidden pointer-events-none">
<div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-600/10 rounded-full blur-3xl animate-pulse"></div>
<div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl animate-pulse delay-700"></div>
</div>
{/* Subsection Navigation */}
<SubsectionNav items={navItems} currentPath={pathname} rightSlot={<ApiKeyWidget />} />
{/* Page Content */}
<div className="relative z-10">{children}</div>
</div>
</ApiKeyProvider>
);
}

221
apps/landing/src/app/demo/tti/page.tsx
View File

@ -1,14 +1,14 @@
'use client';
import { useState, useRef, useEffect, KeyboardEvent } from 'react';
import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
import { useState, useRef, KeyboardEvent } from 'react';
import { useApiKey } from '@/components/shared/ApiKeyWidget/apikey-context';
import { Section } from '@/components/shared/Section';
import { GenerationTimer } from '@/components/demo/GenerationTimer';
import { ResultCard } from '@/components/demo/ResultCard';
import { AdvancedOptionsModal, AdvancedOptionsData } from '@/components/demo/AdvancedOptionsModal';
import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
const API_KEY_STORAGE_KEY = 'banatie_demo_api_key';
// Generate random 6-character uppercase ID for pairing images
function generatePairId(): string {
@ -51,19 +51,9 @@ interface GenerationResult {
} & AdvancedOptionsData;
}
interface ApiKeyInfo {
organizationSlug?: string;
projectSlug?: string;
}
export default function DemoTTIPage() {
// API Key State
const [apiKey, setApiKey] = useState('');
const [apiKeyVisible, setApiKeyVisible] = useState(false);
const [apiKeyValidated, setApiKeyValidated] = useState(false);
const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
const [apiKeyError, setApiKeyError] = useState('');
const [validatingKey, setValidatingKey] = useState(false);
// API Key from context
const { apiKey, apiKeyValidated, focus } = useApiKey();
// Prompt State
const [prompt, setPrompt] = useState('');
@ -85,118 +75,6 @@ export default function DemoTTIPage() {
const textareaRef = useRef<HTMLTextAreaElement>(null);
// Load API key from localStorage on mount
useEffect(() => {
const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
if (storedApiKey) {
setApiKey(storedApiKey);
// Auto-validate the stored key
validateStoredApiKey(storedApiKey);
}
}, []);
// Validate stored API key (without user interaction)
const validateStoredApiKey = async (keyToValidate: string) => {
setValidatingKey(true);
setApiKeyError('');
try {
const response = await fetch(`${API_BASE_URL}/api/info`, {
headers: {
'X-API-Key': keyToValidate,
},
});
if (response.ok) {
const data = await response.json();
setApiKeyValidated(true);
if (data.keyInfo) {
setApiKeyInfo({
organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
});
} else {
setApiKeyInfo({
organizationSlug: 'Unknown',
projectSlug: 'Unknown',
});
}
} else {
// Stored key is invalid, clear it
localStorage.removeItem(API_KEY_STORAGE_KEY);
setApiKeyError('Stored API key is invalid or expired');
setApiKeyValidated(false);
}
} catch (error) {
setApiKeyError('Failed to validate stored API key');
setApiKeyValidated(false);
} finally {
setValidatingKey(false);
}
};
// Validate API Key
const validateApiKey = async () => {
if (!apiKey.trim()) {
setApiKeyError('Please enter an API key');
return;
}
setValidatingKey(true);
setApiKeyError('');
try {
// Test API key with a minimal request to /api/info or similar
const response = await fetch(`${API_BASE_URL}/api/info`, {
headers: {
'X-API-Key': apiKey,
},
});
if (response.ok) {
const data = await response.json();
setApiKeyValidated(true);
// Save to localStorage on successful validation
localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
// Extract org/project info from API response
if (data.keyInfo) {
setApiKeyInfo({
organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
});
} else {
setApiKeyInfo({
organizationSlug: 'Unknown',
projectSlug: 'Unknown',
});
}
} else {
const error = await response.json();
setApiKeyError(error.message || 'Invalid API key');
setApiKeyValidated(false);
}
} catch (error) {
setApiKeyError('Failed to validate API key. Please check your connection.');
setApiKeyValidated(false);
} finally {
setValidatingKey(false);
}
};
// Revoke API Key
const revokeApiKey = () => {
// Clear localStorage
localStorage.removeItem(API_KEY_STORAGE_KEY);
// Clear state
setApiKey('');
setApiKeyValidated(false);
setApiKeyInfo(null);
setApiKeyError('');
};
// Generate Images
const generateImages = async () => {
if (!prompt.trim()) {
@ -380,17 +258,7 @@ export default function DemoTTIPage() {
};
return (
<div className="relative z-10 max-w-7xl mx-auto px-6 py-12 md:py-16 min-h-screen">
{/* Minimized API Key Badge */}
{apiKeyValidated && apiKeyInfo && (
<MinimizedApiKey
organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
apiKey={apiKey}
onRevoke={revokeApiKey}
/>
)}
<Section className="py-12 md:py-16 min-h-screen">
{/* Page Header */}
<header className="mb-8 md:mb-12">
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
@ -401,77 +269,22 @@ export default function DemoTTIPage() {
</p>
</header>
{/* API Key Section - Only show when not validated */}
{/* API Key Required Notice - Only show when not validated */}
{!apiKeyValidated && (
<section
className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
aria-label="API Key Validation"
>
<h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
<div className="flex gap-3">
<div className="flex-1 relative">
<input
type={apiKeyVisible ? 'text' : 'password'}
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
validateApiKey();
}
}}
placeholder="Enter your API key"
className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent pr-12"
aria-label="API key input"
/>
<button
type="button"
onClick={() => setApiKeyVisible(!apiKeyVisible)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
aria-label={apiKeyVisible ? 'Hide API key' : 'Show API key'}
>
{apiKeyVisible ? (
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
/>
</svg>
) : (
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
)}
</button>
<div className="mb-6 p-5 bg-amber-900/10 border border-amber-700/50 rounded-2xl">
<div className="flex items-center justify-between flex-wrap gap-4">
<div>
<h3 className="text-lg font-semibold text-white mb-1">API Key Required</h3>
<p className="text-sm text-gray-400">Enter your API key to use this workbench</p>
</div>
<button
onClick={validateApiKey}
disabled={validatingKey}
className="px-6 py-3 rounded-lg bg-amber-600 text-white font-semibold hover:bg-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-amber-500"
onClick={focus}
className="px-5 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
>
{validatingKey ? 'Validating...' : 'Validate'}
Enter API Key
</button>
</div>
{apiKeyError && (
<p className="mt-3 text-sm text-red-400" role="alert">
{apiKeyError}
</p>
)}
</section>
</div>
)}
{/* Unified Prompt & Generation Card */}
@ -623,6 +436,6 @@ export default function DemoTTIPage() {
{/* Zoom Modal */}
<ImageZoomModal imageUrl={zoomedImage} onClose={() => setZoomedImage(null)} />
</div>
</Section>
);
}

205
apps/landing/src/app/demo/upload/page.tsx
View File

@ -1,7 +1,8 @@
'use client';
import { useState, useEffect, useRef, DragEvent, ChangeEvent } from 'react';
import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
import { useApiKey } from '@/components/shared/ApiKeyWidget/apikey-context';
import { Section } from '@/components/shared/Section';
import { CodeExamplesWidget } from '@/components/demo/CodeExamplesWidget';
import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
import { SelectedFileCodePreview } from '@/components/demo/SelectedFileCodePreview';
@ -10,7 +11,6 @@ import { ImageCard } from '@/components/shared/ImageCard';
import { calculateAspectRatio } from '@/utils/imageUtils';
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
const API_KEY_STORAGE_KEY = 'banatie_demo_api_key';
const UPLOAD_HISTORY_KEY = 'banatie_upload_history';
const ALLOWED_FILE_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'];
@ -46,19 +46,9 @@ interface UploadHistoryItem {
downloadMs?: number;
}
interface ApiKeyInfo {
organizationSlug?: string;
projectSlug?: string;
}
export default function DemoUploadPage() {
// API Key State
const [apiKey, setApiKey] = useState('');
const [apiKeyVisible, setApiKeyVisible] = useState(false);
const [apiKeyValidated, setApiKeyValidated] = useState(false);
const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
const [apiKeyError, setApiKeyError] = useState('');
const [validatingKey, setValidatingKey] = useState(false);
// API Key from context
const { apiKey, apiKeyValidated, focus } = useApiKey();
// Upload State
const [selectedFile, setSelectedFile] = useState<File | null>(null);
@ -85,15 +75,6 @@ export default function DemoUploadPage() {
// Refs
const fileInputRef = useRef<HTMLInputElement>(null);
// Load API key from localStorage on mount
useEffect(() => {
const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
if (storedApiKey) {
setApiKey(storedApiKey);
validateStoredApiKey(storedApiKey);
}
}, []);
// Load upload history from sessionStorage
useEffect(() => {
const storedHistory = sessionStorage.getItem(UPLOAD_HISTORY_KEY);
@ -119,97 +100,6 @@ export default function DemoUploadPage() {
}
}, [uploadHistory]);
const validateStoredApiKey = async (keyToValidate: string) => {
setValidatingKey(true);
setApiKeyError('');
try {
const response = await fetch(`${API_BASE_URL}/api/info`, {
headers: {
'X-API-Key': keyToValidate,
},
});
if (response.ok) {
const data = await response.json();
setApiKeyValidated(true);
if (data.keyInfo) {
setApiKeyInfo({
organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
});
} else {
setApiKeyInfo({
organizationSlug: 'Unknown',
projectSlug: 'Unknown',
});
}
} else {
localStorage.removeItem(API_KEY_STORAGE_KEY);
setApiKeyError('Stored API key is invalid or expired');
setApiKeyValidated(false);
}
} catch (error) {
setApiKeyError('Failed to validate stored API key');
setApiKeyValidated(false);
} finally {
setValidatingKey(false);
}
};
const validateApiKey = async () => {
if (!apiKey.trim()) {
setApiKeyError('Please enter an API key');
return;
}
setValidatingKey(true);
setApiKeyError('');
try {
const response = await fetch(`${API_BASE_URL}/api/info`, {
headers: {
'X-API-Key': apiKey,
},
});
if (response.ok) {
const data = await response.json();
setApiKeyValidated(true);
localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
if (data.keyInfo) {
setApiKeyInfo({
organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
});
} else {
setApiKeyInfo({
organizationSlug: 'Unknown',
projectSlug: 'Unknown',
});
}
} else {
const error = await response.json();
setApiKeyError(error.message || 'Invalid API key');
setApiKeyValidated(false);
}
} catch (error) {
setApiKeyError('Failed to validate API key. Please check your connection.');
setApiKeyValidated(false);
} finally {
setValidatingKey(false);
}
};
const revokeApiKey = () => {
localStorage.removeItem(API_KEY_STORAGE_KEY);
setApiKey('');
setApiKeyValidated(false);
setApiKeyInfo(null);
setApiKeyError('');
};
const validateFile = (file: File): string | null => {
if (!ALLOWED_FILE_TYPES.includes(file.type)) {
return `Invalid file type. Allowed: PNG, JPEG, JPG, WebP`;
@ -407,16 +297,7 @@ Body (form-data):
};
return (
<div className="relative z-10 max-w-7xl mx-auto px-6 py-12 md:py-16 min-h-screen">
{apiKeyValidated && apiKeyInfo && (
<MinimizedApiKey
organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
apiKey={apiKey}
onRevoke={revokeApiKey}
/>
)}
<Section className="py-12 md:py-16 min-h-screen">
<header className="mb-8 md:mb-12">
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
File Upload Workbench
@ -426,76 +307,22 @@ Body (form-data):
</p>
</header>
{/* API Key Required Notice - Only show when not validated */}
{!apiKeyValidated && (
<section
className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
aria-label="API Key Validation"
>
<h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
<div className="flex gap-3">
<div className="flex-1 relative">
<input
type={apiKeyVisible ? 'text' : 'password'}
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
validateApiKey();
}
}}
placeholder="Enter your API key"
className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent pr-12"
aria-label="API key input"
/>
<button
type="button"
onClick={() => setApiKeyVisible(!apiKeyVisible)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
aria-label={apiKeyVisible ? 'Hide API key' : 'Show API key'}
>
{apiKeyVisible ? (
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
/>
</svg>
) : (
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
)}
</button>
<div className="mb-6 p-5 bg-amber-900/10 border border-amber-700/50 rounded-2xl">
<div className="flex items-center justify-between flex-wrap gap-4">
<div>
<h3 className="text-lg font-semibold text-white mb-1">API Key Required</h3>
<p className="text-sm text-gray-400">Enter your API key to use this workbench</p>
</div>
<button
onClick={validateApiKey}
disabled={validatingKey}
className="px-6 py-3 rounded-lg bg-amber-600 text-white font-semibold hover:bg-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-amber-500"
onClick={focus}
className="px-5 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-medium rounded-lg transition-colors"
>
{validatingKey ? 'Validating...' : 'Validate'}
Enter API Key
</button>
</div>
{apiKeyError && (
<p className="mt-3 text-sm text-red-400" role="alert">
{apiKeyError}
</p>
)}
</section>
</div>
)}
<section
@ -664,6 +491,6 @@ Body (form-data):
{/* Image Zoom Modal */}
<ImageZoomModal imageUrl={zoomedImageUrl} onClose={() => setZoomedImageUrl(null)} />
</div>
</Section>
);
}