wp api

frontend/src/components/sites/WordPressIntegrationForm.tsx

@@ -6,31 +6,33 @@ import React, { useState, useEffect } from 'react';
 import { Card } from '../ui/card';
 import Button from '../ui/button/Button';
 import Label from '../form/Label';
-import Input from '../form/input/Input';
+import Input from '../form/input/InputField';
 import Checkbox from '../form/input/Checkbox';
-import Alert from '../ui/alert/Alert';
 import { useToast } from '../ui/toast/ToastContainer';
 import { integrationApi, SiteIntegration } from '../../services/integration.api';
+import { fetchAPI } from '../../services/api';
 import { 
-  Globe, 
-  Key, 
-  Download, 
-  Copy, 
-  CheckCircle, 
-  AlertCircle,
-  ExternalLink,
-  RefreshCw
-} from 'lucide-react';
+  CheckCircleIcon,
+  AlertIcon,
+  DownloadIcon,
+  PlusIcon,
+  CopyIcon
+} from '../../icons';
+import { Globe, Key, RefreshCw } from 'lucide-react';
 
 interface WordPressIntegrationFormProps {
   siteId: number;
   integration: SiteIntegration | null;
+  siteName?: string;
+  siteUrl?: string;
   onIntegrationUpdate?: (integration: SiteIntegration) => void;
 }
 
 export default function WordPressIntegrationForm({
   siteId,
   integration,
+  siteName,
+  siteUrl,
   onIntegrationUpdate,
 }: WordPressIntegrationFormProps) {
   const toast = useToast();
@@ -38,41 +40,53 @@ export default function WordPressIntegrationForm({
   const [generatingKey, setGeneratingKey] = useState(false);
   const [apiKey, setApiKey] = useState<string>('');
   const [apiKeyVisible, setApiKeyVisible] = useState(false);
-  const [formData, setFormData] = useState({
-    url: integration?.config_json?.site_url || '',
-    username: integration?.credentials_json?.username || '',
-    app_password: '',
-    is_active: integration?.is_active ?? true,
-    sync_enabled: integration?.sync_enabled ?? true,
-  });
+  const [isActive, setIsActive] = useState(integration?.is_active ?? true);
+  const [syncEnabled, setSyncEnabled] = useState(integration?.sync_enabled ?? true);
 
   useEffect(() => {
     if (integration) {
-      setFormData({
-        url: integration.config_json?.site_url || '',
-        username: integration.credentials_json?.username || '',
-        app_password: '',
-        is_active: integration.is_active ?? true,
-        sync_enabled: integration.sync_enabled ?? true,
-      });
-      // Load API key if it exists
-      if (integration.credentials_json?.api_key) {
-        setApiKey(integration.credentials_json.api_key);
-      }
+      setIsActive(integration.is_active ?? true);
+      setSyncEnabled(integration.sync_enabled ?? true);
     }
   }, [integration]);
 
+  // Load API key from site settings on mount
+  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
+      setApiKey('');
+    }
+  };
+
   const handleGenerateApiKey = async () => {
     try {
       setGeneratingKey(true);
       // Generate API key - format: igny8_site_{siteId}_{timestamp}_{random}
-      // This will be stored in the integration credentials
       const timestamp = Date.now();
       const random = Math.random().toString(36).substring(2, 15);
       const token = `igny8_site_${siteId}_${timestamp}_${random}`;
       setApiKey(token);
       setApiKeyVisible(true);
-      toast.success('API key generated successfully. Make sure to save the integration to store this key.');
+      
+      // Save API key to site settings immediately
+      await saveApiKeyToSite(token);
+      
+      // Reload the API key from backend to ensure consistency
+      await loadApiKeyFromSite();
+      
+      toast.success('API key generated and saved successfully');
     } catch (error: any) {
       toast.error(`Failed to generate API key: ${error.message}`);
     } finally {
@@ -80,6 +94,45 @@ export default function WordPressIntegrationForm({
     }
   };
 
+  const handleRegenerateApiKey = async () => {
+    if (!confirm('Are you sure you want to regenerate the API key? The old key will no longer work.')) {
+      return;
+    }
+    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);
+      setApiKeyVisible(true);
+      
+      // Save new API key to site settings
+      await saveApiKeyToSite(token);
+      
+      // Reload the API key from backend to ensure consistency
+      await loadApiKeyFromSite();
+      
+      toast.success('API key regenerated and saved successfully');
+    } catch (error: any) {
+      toast.error(`Failed to regenerate API key: ${error.message}`);
+    } finally {
+      setGeneratingKey(false);
+    }
+  };
+
+  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);
@@ -88,62 +141,69 @@ export default function WordPressIntegrationForm({
   };
 
   const handleDownloadPlugin = () => {
-    // TODO: Replace with actual plugin download URL
     const pluginUrl = `https://github.com/igny8/igny8-wp-bridge/releases/latest/download/igny8-wp-bridge.zip`;
     window.open(pluginUrl, '_blank');
     toast.success('Plugin download started');
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!formData.url || !formData.username || !formData.app_password) {
-      toast.error('Please fill in all required fields');
-      return;
-    }
-
-    if (!apiKey) {
-      toast.error('Please generate an API key first');
-      return;
-    }
-
+  const handleSaveSettings = async () => {
     try {
       setLoading(true);
-      // Save integration with API key in credentials
-      const updatedIntegration = await integrationApi.saveWordPressIntegration(siteId, {
-        url: formData.url,
-        username: formData.username,
-        app_password: formData.app_password,
-        api_key: apiKey, // Include API key in credentials
-        is_active: formData.is_active,
-        sync_enabled: formData.sync_enabled,
-      });
       
-      if (onIntegrationUpdate) {
-        onIntegrationUpdate(updatedIntegration);
+      // Update integration with active/sync settings
+      if (integration) {
+        await integrationApi.updateIntegration(integration.id, {
+          is_active: isActive,
+          sync_enabled: syncEnabled,
+        } as any);
+      } else {
+        // Create integration if it doesn't exist
+        await integrationApi.saveWordPressIntegration(siteId, {
+          url: siteUrl || '',
+          username: '',
+          app_password: '',
+          api_key: apiKey,
+          is_active: isActive,
+          sync_enabled: syncEnabled,
+        });
       }
       
-      toast.success('WordPress integration saved successfully');
+      // Reload integration
+      const updated = await integrationApi.getWordPressIntegration(siteId);
+      if (onIntegrationUpdate && updated) {
+        onIntegrationUpdate(updated);
+      }
+      
+      toast.success('Integration settings saved successfully');
     } catch (error: any) {
-      toast.error(`Failed to save integration: ${error.message}`);
+      toast.error(`Failed to save settings: ${error.message}`);
     } finally {
       setLoading(false);
     }
   };
 
   const handleTestConnection = async () => {
-    if (!integration?.id) {
-      toast.error('Please save the integration first');
+    if (!apiKey || !siteUrl) {
+      toast.error('Please ensure API key and site URL are configured');
       return;
     }
 
     try {
       setLoading(true);
-      const result = await integrationApi.testIntegration(integration.id);
-      if (result.success) {
+      // Test connection using API key and site URL
+      const result = await fetchAPI(`/v1/integration/integrations/test-connection/`, {
+        method: 'POST',
+        body: JSON.stringify({
+          site_id: siteId,
+          api_key: apiKey,
+          site_url: siteUrl,
+        }),
+      });
+      
+      if (result?.success) {
         toast.success('Connection test successful');
       } else {
-        toast.error(`Connection test failed: ${result.message}`);
+        toast.error(`Connection test failed: ${result?.message || 'Unknown error'}`);
       }
     } catch (error: any) {
       toast.error(`Connection test failed: ${error.message}`);
@@ -152,6 +212,12 @@ export default function WordPressIntegrationForm({
     }
   };
 
+  const maskApiKey = (key: string) => {
+    if (!key) return '';
+    if (key.length <= 12) return key;
+    return key.substring(0, 8) + '**********' + key.substring(key.length - 4);
+  };
+
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -169,214 +235,191 @@ export default function WordPressIntegrationForm({
         </div>
       </div>
 
-      {/* Integration Guide */}
-      <Alert
-        variant="info"
-        title="Integration Steps"
-        className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800"
-      >
-        <ol className="list-decimal list-inside space-y-2 text-sm text-gray-700 dark:text-gray-300">
-          <li>Generate an API key for your site</li>
-          <li>Download and install the IGNY8 WP Bridge plugin</li>
-          <li>Enter your WordPress site URL and credentials</li>
-          <li>Configure the plugin with your API key</li>
-        </ol>
-      </Alert>
-
-      {/* API Key Section */}
-      <Card className="p-6">
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-                <Key className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
-                API Key
-              </h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                Generate an API key to authenticate the WordPress plugin with IGNY8
-              </p>
-            </div>
-            <Button
-              onClick={handleGenerateApiKey}
-              variant="primary"
-              disabled={generatingKey || !!apiKey}
-            >
-              {generatingKey ? (
-                <>
-                  <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
-                  Generating...
-                </>
-              ) : apiKey ? (
-                <>
-                  <CheckCircle className="w-4 h-4 mr-2" />
-                  Generated
-                </>
-              ) : (
-                <>
-                  <Key className="w-4 h-4 mr-2" />
-                  Generate API Key
-                </>
-              )}
-            </Button>
+      {/* API Keys Table */}
+      <Card className="p-0">
+        <div className="flex flex-col gap-5 sm:flex-row sm:items-center justify-between border-b border-gray-100 dark:border-gray-800 px-6 py-4">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">API Keys</h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              API keys are used to authenticate requests to the IGNY8 API
+            </p>
           </div>
-
-          {apiKey && (
-            <div className="space-y-3">
-              <div>
-                <Label>Your API Key</Label>
-                <div className="flex items-center gap-2 mt-1">
-                  <Input
-                    type={apiKeyVisible ? 'text' : 'password'}
-                    value={apiKey}
-                    readOnly
-                    className="font-mono text-sm"
-                  />
-                  <Button
-                    onClick={() => setApiKeyVisible(!apiKeyVisible)}
-                    variant="outline"
-                    size="sm"
-                  >
-                    {apiKeyVisible ? 'Hide' : 'Show'}
-                  </Button>
-                  <Button
-                    onClick={handleCopyApiKey}
-                    variant="outline"
-                    size="sm"
-                  >
-                    <Copy className="w-4 h-4" />
-                  </Button>
-                </div>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                  Keep this key secure. You'll need it to configure the WordPress plugin.
-                </p>
-              </div>
+          {!apiKey && (
+            <div>
+              <Button
+                onClick={handleGenerateApiKey}
+                variant="solid"
+                disabled={generatingKey}
+              >
+                {generatingKey ? (
+                  <>
+                    <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+                    Generating...
+                  </>
+                ) : (
+                  <>
+                    <PlusIcon className="w-4 h-4 mr-2" />
+                    Add API Key
+                  </>
+                )}
+              </Button>
             </div>
           )}
         </div>
+        
+        {apiKey ? (
+          <div className="custom-scrollbar overflow-x-auto px-6 pb-4">
+            <table className="min-w-full">
+              <thead>
+                <tr className="border-b border-gray-100 dark:border-gray-800">
+                  <th className="py-3 pr-5 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Name</th>
+                  <th className="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Status</th>
+                  <th className="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Created</th>
+                  <th className="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Action</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+                <tr>
+                  <td className="py-3 pr-5 whitespace-nowrap">
+                    <div>
+                      <label htmlFor="api-key" className="mb-2 inline-block text-sm text-gray-700 dark:text-gray-400">
+                        WordPress Integration API Key
+                      </label>
+                      <div className="flex items-center gap-3">
+                        <div className="relative">
+                          <input
+                            id="api-key"
+                            className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full min-w-[360px] rounded-lg border border-gray-300 bg-transparent py-3 pr-[90px] pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 font-mono"
+                            readOnly
+                            type={apiKeyVisible ? 'text' : 'password'}
+                            value={apiKeyVisible ? apiKey : maskApiKey(apiKey)}
+                          />
+                          <button
+                            onClick={handleCopyApiKey}
+                            className="absolute top-1/2 right-0 inline-flex h-11 -translate-y-1/2 cursor-pointer items-center gap-1 rounded-r-lg border border-gray-300 py-3 pr-3 pl-3.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
+                          >
+                            <CopyIcon className="w-4 h-4 fill-current" />
+                            <span>Copy</span>
+                          </button>
+                        </div>
+                        <div className="group relative inline-block">
+                          <button
+                            onClick={handleRegenerateApiKey}
+                            disabled={generatingKey}
+                            className="inline-flex h-11 w-11 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50"
+                            title="Regenerate"
+                          >
+                            <RefreshCw className={`w-5 h-5 ${generatingKey ? 'animate-spin' : ''}`} />
+                          </button>
+                          <div className="invisible absolute bottom-full left-1/2 z-50 mb-2.5 -translate-x-1/2 opacity-0 transition-opacity duration-300 group-hover:visible group-hover:opacity-100">
+                            <div className="relative">
+                              <div className="rounded-lg bg-white px-3 py-2 text-xs font-medium whitespace-nowrap text-gray-700 shadow-xs dark:bg-[#1E2634] dark:text-white">
+                                Regenerate
+                              </div>
+                              <div className="absolute -bottom-1 left-1/2 h-3 w-4 -translate-x-1/2 rotate-45 bg-white dark:bg-[#1E2634]"></div>
+                            </div>
+                          </div>
+                        </div>
+                        <button
+                          onClick={() => setApiKeyVisible(!apiKeyVisible)}
+                          className="inline-flex h-11 w-11 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
+                        >
+                          {apiKeyVisible ? (
+                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <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.29 3.29m0 0L3 9.88m3.29-3.29L9.88 3" />
+                            </svg>
+                          ) : (
+                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <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>
+                    </div>
+                  </td>
+                  <td className="px-5 py-3 whitespace-nowrap">
+                    <span className="inline-flex items-center justify-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-green-50 text-green-600 dark:bg-green-500/15 dark:text-green-500">
+                      Active
+                    </span>
+                  </td>
+                  <td className="px-5 py-3 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400">
+                    {new Date().toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' })}
+                  </td>
+                  <td className="px-5 py-3 whitespace-nowrap">
+                    <div className="flex items-center gap-3">
+                      <button
+                        onClick={handleRegenerateApiKey}
+                        disabled={generatingKey}
+                        className="text-gray-500 hover:text-error-500 dark:text-gray-400 dark:hover:text-error-500 disabled:opacity-50"
+                        title="Regenerate"
+                      >
+                        <RefreshCw className={`w-5 h-5 ${generatingKey ? 'animate-spin' : ''}`} />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
+            <p className="text-sm">No API key generated yet. Click "Add API Key" to generate one.</p>
+          </div>
+        )}
       </Card>
 
       {/* Plugin Download Section */}
       {apiKey && (
         <Card className="p-6">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-                  <Download className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
-                  IGNY8 WP Bridge Plugin
-                </h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                  Download and install the plugin on your WordPress site
-                </p>
-              </div>
-              <Button
-                onClick={handleDownloadPlugin}
-                variant="primary"
-              >
-                <Download className="w-4 h-4 mr-2" />
-                Download Plugin
-              </Button>
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                <DownloadIcon className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
+                IGNY8 WP Bridge Plugin
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                Download and install the plugin on your WordPress site
+              </p>
             </div>
-
-            <Alert
-              variant="info"
-              className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800"
+            <Button
+              onClick={handleDownloadPlugin}
+              variant="solid"
             >
-              <div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
-                <p className="font-medium">Installation Instructions:</p>
-                <ol className="list-decimal list-inside space-y-1 ml-2">
-                  <li>Download the plugin ZIP file</li>
-                  <li>Go to WordPress Admin → Plugins → Add New</li>
-                  <li>Click "Upload Plugin" and select the ZIP file</li>
-                  <li>Activate the plugin</li>
-                  <li>Go to Settings → IGNY8 Bridge and enter your API key</li>
-                </ol>
-              </div>
-            </Alert>
+              <DownloadIcon className="w-4 h-4 mr-2" />
+              Download Plugin
+            </Button>
           </div>
         </Card>
       )}
 
-      {/* WordPress Credentials Form */}
+      {/* Integration Settings */}
       <Card className="p-6">
-        <form onSubmit={handleSubmit} className="space-y-6">
+        <div className="space-y-6">
           <div>
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-              WordPress Site Configuration
+              Integration Settings
             </h3>
           </div>
 
-          <div>
-            <Label htmlFor="url" required>
-              WordPress Site URL
-            </Label>
-            <Input
-              id="url"
-              type="url"
-              value={formData.url}
-              onChange={(e) => setFormData({ ...formData, url: e.target.value })}
-              placeholder="https://example.com"
-              required
-              className="mt-1"
-            />
-            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-              Enter your WordPress site URL (with https://)
-            </p>
-          </div>
-
-          <div>
-            <Label htmlFor="username" required>
-              WordPress Username
-            </Label>
-            <Input
-              id="username"
-              type="text"
-              value={formData.username}
-              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
-              placeholder="admin"
-              required
-              className="mt-1"
-            />
-            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-              WordPress administrator username
-            </p>
-          </div>
-
-          <div>
-            <Label htmlFor="app_password" required>
-              Application Password
-            </Label>
-            <Input
-              id="app_password"
-              type="password"
-              value={formData.app_password}
-              onChange={(e) => setFormData({ ...formData, app_password: e.target.value })}
-              placeholder="xxxx xxxx xxxx xxxx xxxx xxxx"
-              required
-              className="mt-1"
-            />
-            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-              Create an Application Password in WordPress: Users → Profile → Application Passwords
-            </p>
-          </div>
-
-          <div className="space-y-3 pt-2 border-t border-gray-200 dark:border-gray-700">
+          {/* Checkboxes at the top */}
+          <div className="space-y-4 pb-4 border-b border-gray-200 dark:border-gray-700">
             <Checkbox
               id="is_active"
-              checked={formData.is_active}
-              onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
+              checked={isActive}
+              onChange={(checked) => setIsActive(checked)}
               label="Enable Integration"
             />
             <Checkbox
               id="sync_enabled"
-              checked={formData.sync_enabled}
-              onChange={(e) => setFormData({ ...formData, sync_enabled: e.target.checked })}
+              checked={syncEnabled}
+              onChange={(checked) => setSyncEnabled(checked)}
               label="Enable Two-Way Sync"
             />
           </div>
 
-          <div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
-            {integration && (
+          <div className="flex items-center justify-end gap-3 pt-4">
+            {apiKey && siteUrl && (
               <Button
                 type="button"
                 variant="outline"
@@ -387,11 +430,16 @@ export default function WordPressIntegrationForm({
                 Test Connection
               </Button>
             )}
-            <Button type="submit" variant="primary" disabled={loading || !apiKey}>
-              {loading ? 'Saving...' : integration ? 'Update Integration' : 'Connect WordPress'}
+            <Button
+              type="button"
+              variant="solid"
+              onClick={handleSaveSettings}
+              disabled={loading || !apiKey}
+            >
+              {loading ? 'Saving...' : 'Save Settings'}
             </Button>
           </div>
-        </form>
+        </div>
       </Card>
 
       {/* Integration Status */}
@@ -406,9 +454,9 @@ export default function WordPressIntegrationForm({
                 <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Status</p>
                 <div className="flex items-center gap-2">
                   {integration.is_active ? (
-                    <CheckCircle className="w-4 h-4 text-green-500" />
+                    <CheckCircleIcon className="w-4 h-4 text-green-500" />
                   ) : (
-                    <AlertCircle className="w-4 h-4 text-gray-400" />
+                    <AlertIcon className="w-4 h-4 text-gray-400" />
                   )}
                   <span className="text-sm font-medium text-gray-900 dark:text-white">
                     {integration.is_active ? 'Active' : 'Inactive'}
@@ -419,9 +467,9 @@ export default function WordPressIntegrationForm({
                 <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Sync Status</p>
                 <div className="flex items-center gap-2">
                   {integration.sync_status === 'success' ? (
-                    <CheckCircle className="w-4 h-4 text-green-500" />
+                    <CheckCircleIcon className="w-4 h-4 text-green-500" />
                   ) : integration.sync_status === 'failed' ? (
-                    <AlertCircle className="w-4 h-4 text-red-500" />
+                    <AlertIcon className="w-4 h-4 text-red-500" />
                   ) : (
                     <RefreshCw className="w-4 h-4 text-yellow-500 animate-spin" />
                   )}
@@ -445,4 +493,3 @@ export default function WordPressIntegrationForm({
     </div>
   );
 }
-

frontend/src/pages/Sites/Settings.tsx

@@ -540,6 +540,8 @@ export default function SiteSettings() {
           <WordPressIntegrationForm
             siteId={Number(siteId)}
             integration={wordPressIntegration}
+            siteName={site?.name}
+            siteUrl={site?.domain || site?.wp_url}
             onIntegrationUpdate={handleIntegrationUpdate}
           />
         )}