salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-13 01:52:40 +00:00
parent 47a5a8b1da
commit 5ce0d02636
3 changed files with 34 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/src/components/sites/WordPressIntegrationForm.tsx
View File

@@ -6,23 +6,17 @@ import React, { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import Button from '../ui/button/Button';
import IconButton from '../ui/button/IconButton';
import Label from '../form/Label';
import Input from '../form/input/InputField';
import Checkbox from '../form/input/Checkbox';
import Switch from '../form/switch/Switch';
import { useToast } from '../ui/toast/ToastContainer';
import { fetchAPI, API_BASE_URL } from '../../services/api';
import {
CheckCircleIcon,
AlertIcon,
DownloadIcon,
PlusIcon,
CopyIcon,
TrashBinIcon,
GlobeIcon,
KeyIcon,
RefreshCwIcon,
InfoIcon
InfoIcon,
} from '../../icons';
interface WordPressIntegrationFormProps {
@@ -283,56 +277,40 @@ export default function WordPressIntegrationForm({
{/* Connection Status & Test Button */}
{apiKey && (
<div className="flex items-center gap-3">
{/* Status Indicator - Uses theme colors from design-system */}
<div className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border ${
connectionStatus === 'connected'
? 'bg-success-50 dark:bg-success-900/20 border-success-200 dark:border-success-800'
: connectionStatus === 'testing'
? 'bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800'
: connectionStatus === 'api_key_pending'
? 'bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-800'
: connectionStatus === 'plugin_missing'
? 'bg-warning-50 dark:bg-warning-900/20 border-warning-200 dark:border-warning-800'
: connectionStatus === 'error'
? 'bg-error-50 dark:bg-error-900/20 border-error-200 dark:border-error-800'
: 'bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700'
}`}>
{connectionStatus === 'connected' && (
<><CheckCircleIcon className="w-4 h-4 text-success-600 dark:text-success-400" />
<span className="text-sm font-medium text-success-700 dark:text-success-300">Connected</span></>
)}
{connectionStatus === 'testing' && (
<><RefreshCwIcon className="w-4 h-4 text-brand-600 dark:text-brand-400 animate-spin" />
<span className="text-sm font-medium text-brand-700 dark:text-brand-300">Testing...</span></>
)}
{connectionStatus === 'api_key_pending' && (
<><AlertIcon className="w-4 h-4 text-warning-600 dark:text-warning-400" />
<span className="text-sm font-medium text-warning-700 dark:text-warning-300">Pending Setup</span></>
)}
{connectionStatus === 'plugin_missing' && (
<><AlertIcon className="w-4 h-4 text-warning-600 dark:text-warning-400" />
<span className="text-sm font-medium text-warning-700 dark:text-warning-300">Plugin Missing</span></>
)}
{connectionStatus === 'error' && (
<><AlertIcon className="w-4 h-4 text-error-600 dark:text-error-400" />
<span className="text-sm font-medium text-error-700 dark:text-error-300">Error</span></>
)}
{connectionStatus === 'unknown' && (
<><InfoIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">Not Tested</span></>
)}
<div className="flex flex-col items-end gap-2">
{/* Connection Status Indicator */}
<div className="flex items-center gap-3 px-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-800">
<span
className={`inline-block w-4 h-4 rounded-full ${
connectionStatus === 'connected' ? 'bg-success-500' :
connectionStatus === 'testing' ? 'bg-brand-500 animate-pulse' :
connectionStatus === 'api_key_pending' ? 'bg-warning-500' :
connectionStatus === 'plugin_missing' ? 'bg-warning-500' :
connectionStatus === 'error' ? 'bg-error-500' :
'bg-brand-500'
}`}
/>
<span className="text-sm font-medium text-gray-700 dark:text-gray-200">
{connectionStatus === 'connected' && 'Connected'}
{connectionStatus === 'testing' && 'Testing...'}
{connectionStatus === 'api_key_pending' && 'Pending Setup'}
{connectionStatus === 'plugin_missing' && 'Plugin Missing'}
{connectionStatus === 'error' && 'Error'}
{connectionStatus === 'unknown' && 'Configured'}
</span>
</div>
{/* Test Connection Button - IconButton only */}
<IconButton
{/* Test Connection Button */}
<Button
onClick={testConnection}
variant="outline"
tone="brand"
size="sm"
disabled={testingConnection || !apiKey}
title="Test Connection"
icon={<RefreshCwIcon className={`w-4 h-4 ${testingConnection ? 'animate-spin' : ''}`} />}
/>
startIcon={<RefreshCwIcon className={`w-4 h-4 ${testingConnection ? 'animate-spin' : ''}`} />}
>
Test Connection
</Button>
</div>
)}
</div>