diff --git a/apps/landing/src/app/demo/tti/page.tsx b/apps/landing/src/app/demo/tti/page.tsx index 96d97ff..f954686 100644 --- a/apps/landing/src/app/demo/tti/page.tsx +++ b/apps/landing/src/app/demo/tti/page.tsx @@ -1,12 +1,13 @@ 'use client'; -import { useState, useRef, KeyboardEvent } from 'react'; +import { useState, useRef, useEffect, KeyboardEvent } from 'react'; import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey'; import { GenerationTimer } from '@/components/demo/GenerationTimer'; import { ResultCard } from '@/components/demo/ResultCard'; import { AdvancedOptionsModal, AdvancedOptionsData } from '@/components/demo/AdvancedOptionsModal'; const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'; +const API_KEY_STORAGE_KEY = 'banatie_demo_api_key'; interface GenerationResult { id: string; @@ -76,6 +77,56 @@ export default function DemoTTIPage() { const textareaRef = useRef(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()) { @@ -97,6 +148,10 @@ export default function DemoTTIPage() { 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({ @@ -124,6 +179,10 @@ export default function DemoTTIPage() { // Revoke API Key const revokeApiKey = () => { + // Clear localStorage + localStorage.removeItem(API_KEY_STORAGE_KEY); + + // Clear state setApiKey(''); setApiKeyValidated(false); setApiKeyInfo(null);