mig

frontend/src/components/sites/WordPressIntegrationForm.tsx

@@ -42,43 +42,35 @@ export default function WordPressIntegrationForm({
   const [apiKey, setApiKey] = useState<string>('');
   const [apiKeyVisible, setApiKeyVisible] = useState(false);
 
-  // Load API key from site settings on mount
+  // Load API key from integration on mount or when integration changes
   useEffect(() => {
-    loadApiKeyFromSite();
-  }, [siteId]);
-
-  const loadApiKeyFromSite = async () => {
-    try {
-      const siteData = await fetchAPI(`/v1/auth/sites/${siteId}/`);
-      if (siteData?.wp_api_key) {
-        setApiKey(siteData.wp_api_key);
-      } else {
-        // Clear API key if it doesn't exist in the backend
-        setApiKey('');
-      }
-    } catch (error) {
-      // API key might not exist yet, that's okay
+    if (integration?.api_key) {
+      setApiKey(integration.api_key);
+    } else {
       setApiKey('');
     }
-  };
+  }, [integration]);
 
   const handleGenerateApiKey = async () => {
     try {
       setGeneratingKey(true);
-      // Generate API key - format: igny8_site_{siteId}_{timestamp}_{random}
-      const timestamp = Date.now();
-      const random = Math.random().toString(36).substring(2, 15);
-      const token = `igny8_site_${siteId}_${timestamp}_${random}`;
-      setApiKey(token);
+      
+      // Call the new generate-api-key endpoint
+      const response = await fetchAPI('/v1/integration/integrations/generate-api-key/', {
+        method: 'POST',
+        body: JSON.stringify({ site_id: siteId }),
+      });
+      
+      const newKey = response.api_key;
+      setApiKey(newKey);
       setApiKeyVisible(true);
       
-      // Save API key to site settings immediately
-      await saveApiKeyToSite(token);
+      // Trigger integration update
+      if (onIntegrationUpdate && response.integration) {
+        onIntegrationUpdate(response.integration);
+      }
       
-      // Reload the API key from backend to ensure consistency
-      await loadApiKeyFromSite();
-      
-      toast.success('API key generated and saved successfully');
+      toast.success('API key generated successfully');
     } catch (error: any) {
       toast.error(`Failed to generate API key: ${error.message}`);
     } finally {
@@ -92,20 +84,23 @@ export default function WordPressIntegrationForm({
     }
     try {
       setGeneratingKey(true);
-      // Generate new API key
-      const timestamp = Date.now();
-      const random = Math.random().toString(36).substring(2, 15);
-      const token = `igny8_site_${siteId}_${timestamp}_${random}`;
-      setApiKey(token);
+      
+      // Call the generate-api-key endpoint to create a new key
+      const response = await fetchAPI('/v1/integration/integrations/generate-api-key/', {
+        method: 'POST',
+        body: JSON.stringify({ site_id: siteId }),
+      });
+      
+      const newKey = response.api_key;
+      setApiKey(newKey);
       setApiKeyVisible(true);
       
-      // Save new API key to site settings
-      await saveApiKeyToSite(token);
+      // Trigger integration update
+      if (onIntegrationUpdate && response.integration) {
+        onIntegrationUpdate(response.integration);
+      }
       
-      // Reload the API key from backend to ensure consistency
-      await loadApiKeyFromSite();
-      
-      toast.success('API key regenerated and saved successfully');
+      toast.success('API key regenerated successfully');
     } catch (error: any) {
       toast.error(`Failed to regenerate API key: ${error.message}`);
     } finally {
@@ -119,24 +114,21 @@ export default function WordPressIntegrationForm({
     }
     try {
       setGeneratingKey(true);
-      // Clear API key from site settings by setting it to empty string
-      await fetchAPI(`/v1/auth/sites/${siteId}/`, {
-        method: 'PATCH',
-        body: JSON.stringify({ wp_api_key: '' }),
-      });
+      
+      if (!integration) {
+        toast.error('No integration found');
+        return;
+      }
+      
+      // Delete the integration to revoke the API key
+      await integrationApi.deleteIntegration(integration.id);
       
       setApiKey('');
       setApiKeyVisible(false);
       
-      // Trigger integration update to reload the integration state
-      if (onIntegrationUpdate && integration) {
-        await loadApiKeyFromSite();
-        // Reload integration to reflect changes
-        const integrations = await integrationApi.getSiteIntegrations(siteId);
-        const wp = integrations.find(i => i.platform === 'wordpress');
-        if (wp) {
-          onIntegrationUpdate(wp);
-        }
+      // Trigger integration update
+      if (onIntegrationUpdate) {
+        onIntegrationUpdate(null as any);
       }
       
       toast.success('API key revoked successfully');
@@ -147,18 +139,6 @@ export default function WordPressIntegrationForm({
     }
   };
 
-  const saveApiKeyToSite = async (key: string) => {
-    try {
-      await fetchAPI(`/v1/auth/sites/${siteId}/`, {
-        method: 'PATCH',
-        body: JSON.stringify({ wp_api_key: key }),
-      });
-    } catch (error: any) {
-      console.error('Failed to save API key to site:', error);
-      throw error;
-    }
-  };
-
   const handleCopyApiKey = () => {
     if (apiKey) {
       navigator.clipboard.writeText(apiKey);

frontend/src/services/integration.api.ts

@@ -11,6 +11,7 @@ export interface SiteIntegration {
   platform_type: 'cms' | 'ecommerce' | 'custom_api';
   config_json: Record<string, any>;
   credentials_json?: Record<string, any>;
+  api_key?: string; // WordPress API key from credentials
   is_active: boolean;
   sync_enabled: boolean;
   last_sync_at?: string;