save apikey

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<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()) {
@@ -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);