wp api
This commit is contained in:
IGNY8 VPS (Salman)
Binary file not shown.
@@ -0,0 +1,19 @@
|
||||
# Generated manually for adding wp_api_key to Site model
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('igny8_core_auth', '0001_initial'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='site',
|
||||
name='wp_api_key',
|
||||
field=models.CharField(blank=True, help_text='API key for WordPress integration via IGNY8 WP Bridge plugin', max_length=255, null=True),
|
||||
),
|
||||
]
|
||||
|
||||
@@ -217,6 +217,7 @@ class Site(AccountBaseModel):
|
||||
wp_url = models.URLField(blank=True, null=True, help_text="WordPress site URL (legacy - use SiteIntegration)")
|
||||
wp_username = models.CharField(max_length=255, blank=True, null=True)
|
||||
wp_app_password = models.CharField(max_length=255, blank=True, null=True)
|
||||
wp_api_key = models.CharField(max_length=255, blank=True, null=True, help_text="API key for WordPress integration via IGNY8 WP Bridge plugin")
|
||||
|
||||
# Site type and hosting (Phase 6)
|
||||
SITE_TYPE_CHOICES = [
|
||||
|
||||
@@ -68,7 +68,7 @@ class SiteSerializer(serializers.ModelSerializer):
|
||||
fields = [
|
||||
'id', 'name', 'slug', 'domain', 'description',
|
||||
'industry', 'industry_name', 'industry_slug',
|
||||
'is_active', 'status', 'wp_url', 'wp_username',
|
||||
'is_active', 'status', 'wp_url', 'wp_username', 'wp_api_key',
|
||||
'site_type', 'hosting_type', 'seo_metadata',
|
||||
'sectors_count', 'active_sectors_count', 'selected_sectors',
|
||||
'can_add_sectors',
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
)}
|
||||
|
||||
1
sample compoeents/sample-api-keys table.html
Normal file
1
sample compoeents/sample-api-keys table.html
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user