WordPressSiteModal.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { apiFetch } from '../lib/api';
 
export default function WordPressSiteModal({ domain, onClose }) {
    const [loading, setLoading] = useState(true);
    const [site, setSite] = useState(null);
    const [error, setError] = useState('');
    const [loginUrl, setLoginUrl] = useState('');
    const [generating, setGenerating] = useState(false);
 
    useEffect(() => {
        if (domain) {
            fetchSiteDetails();
        }
    }, [domain]);
 
    const fetchSiteDetails = async () => {
        setLoading(true);
        setError('');
        try {
            const res = await apiFetch(`/wordpress/sites/${domain}`);
            if (res.ok) {
                const data = await res.json();
                setSite(data.site);
            } else {
                setError('Failed to load site details');
            }
        } catch (err) {
            setError(err.message || 'Failed to load site details');
        } finally {
            setLoading(false);
        }
    };
 
    const handleLogin = async () => {
        setGenerating(true);
        setLoginUrl('');
        try {
            const res = await apiFetch(`/wordpress/sites/${domain}/login`, {
                method: 'POST'
            });
            if (res.ok) {
                const data = await res.json();
                // Open login URL in new tab
                window.open(`https://${domain}/wp-admin/`, '_blank');
                setLoginUrl(data.loginUrl);
            } else {
                alert('Failed to generate login URL');
            }
        } catch (err) {
            alert(err.message || 'Failed to generate login URL');
        } finally {
            setGenerating(false);
        }
    };
 
    const handleUpdatePlugin = async (pluginName) => {
        if (!confirm(`Update plugin "${pluginName}"?`)) return;
        alert('Plugin update feature coming soon');
    };
 
    const handleUpdateCore = async () => {
        if (!confirm(`Update WordPress core to ${site.core?.updates[0]?.version}?`)) return;
        alert('Core update feature coming soon');
    };
 
    if (!domain) return null;
 
    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div className="bg-white rounded-lg shadow-xl max-w-5xl w-full max-h-[90vh] overflow-hidden flex flex-col">
                {/* Header */}
                <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-blue-500 to-blue-600 text-white">
                    <div>
                        <h2 className="text-2xl font-bold">{domain}</h2>
                        {site && (
                            <p className="text-blue-100 text-sm mt-1">
                                WordPress {site.wp_version} • {site.plugin_count} plugins • {site.disk_usage}
                            </p>
                        )}
                    </div>
                    <button
                        onClick={onClose}
                        className="text-white hover:text-gray-200 text-2xl font-bold"
                    >
                        ×
                    </button>
                </div>
 
                {/* Content */}
                <div className="flex-1 overflow-y-auto p-6">
                    {loading ? (
                        <div className="flex items-center justify-center h-64">
                            <div className="text-gray-500">Loading site details...</div>
                        </div>
                    ) : error ? (
                        <div className="text-red-500 p-4 bg-red-50 rounded">{error}</div>
                    ) : site ? (
                        <div className="space-y-6">
                            {/* Quick Actions */}
                            <div className="flex gap-3">
                                <button
                                    onClick={handleLogin}
                                    disabled={generating}
                                    className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2"
                                >
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
                                    </svg>
                                    {generating ? 'Generating...' : 'WP Admin Login'}
                                </button>
                                <a
                                    href={`https://${domain}`}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="bg-gray-100 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-200 flex items-center gap-2"
                                >
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                    </svg>
                                    Visit Site
                                </a>
                            </div>
 
                            {/* Security Issues */}
                            {site.malware_issues > 0 && (
                                <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                                    <div className="flex items-center gap-2 text-red-800 font-semibold mb-2">
                                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                        </svg>
                                        Security Issues Detected
                                    </div>
                                    <p className="text-red-700">
                                        {site.malware_issues} suspicious file{site.malware_issues !== 1 ? 's' : ''} found
                                    </p>
                                    {site.security && (
                                        <div className="mt-3 text-sm text-red-600 space-y-1">
                                            {site.security.php_in_uploads > 0 && <div>• {site.security.php_in_uploads} PHP files in uploads directory</div>}
                                            {site.security.suspicious_files > 0 && <div>• {site.security.suspicious_files} suspicious files</div>}
                                            {site.security.modified_core_files > 0 && <div>• {site.security.modified_core_files} modified core files</div>}
                                        </div>
                                    )}
                                    <button className="mt-3 bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 text-sm">
                                        Clean Threats (Coming Soon)
                                    </button>
                                </div>
                            )}
 
                            {/* WordPress Core */}
                            {site.core && (
                                <div className="bg-white border border-gray-200 rounded-lg p-4">
                                    <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
                                        <svg className="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
                                        </svg>
                                        WordPress Core
                                    </h3>
                                    <div className="flex items-center justify-between">
                                        <div>
                                            <div className="text-sm text-gray-600">Current Version</div>
                                            <div className="font-medium">{site.core.version}</div>
                                        </div>
                                        {site.core.update_available && site.core.updates.length > 0 && (
                                            <div>
                                                <button
                                                    onClick={handleUpdateCore}
                                                    className="bg-orange-500 text-white px-4 py-2 rounded-lg hover:bg-orange-600 text-sm flex items-center gap-2"
                                                >
                                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                                                    </svg>
                                                    Update to {site.core.updates[0].version}
                                                </button>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            )}
 
                            {/* Plugins */}
                            <div className="bg-white border border-gray-200 rounded-lg p-4">
                                <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
                                    <svg className="w-5 h-5 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
                                    </svg>
                                    Plugins ({site.plugin_count})
                                </h3>
                                {site.plugins && site.plugins.length > 0 ? (
                                    <div className="space-y-2 max-h-64 overflow-y-auto">
                                        {site.plugins.map((plugin, idx) => (
                                            <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 rounded">
                                                <div>
                                                    <div className="font-medium">{plugin.title || plugin.name}</div>
                                                    <div className="text-sm text-gray-600">
                                                        v{plugin.version}
                                                        <span className={`ml-2 px-2 py-0.5 rounded text-xs ${
                                                            plugin.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-200 text-gray-700'
                                                        }`}>
                                                            {plugin.status}
                                                        </span>
                                                    </div>
                                                </div>
                                                {plugin.update_available === 'available' && (
                                                    <button
                                                        onClick={() => handleUpdatePlugin(plugin.name)}
                                                        className="text-orange-600 hover:text-orange-700 text-sm font-medium"
                                                    >
                                                        Update to v{plugin.new_version}
                                                    </button>
                                                )}
                                            </div>
                                        ))}
                                    </div>
                                ) : (
                                    <div className="text-gray-500 text-sm">
                                        {site.ssh_error ? `Unable to fetch plugin details: ${site.ssh_error}` : `${site.plugin_count} plugins installed (details loading...)`}
                                    </div>
                                )}
                            </div>
 
                            {/* Themes */}
                            <div className="bg-white border border-gray-200 rounded-lg p-4">
                                <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
                                    <svg className="w-5 h-5 text-pink-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path fillRule="evenodd" d="M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4zm1 14a1 1 0 100-2 1 1 0 000 2zm5-1.757l4.9-4.9a2 2 0 000-2.828L13.485 5.1a2 2 0 00-2.828 0L10 5.757v8.486zM16 18H9.071l6-6H16a2 2 0 012 2v2a2 2 0 01-2 2z" clipRule="evenodd" />
                                    </svg>
                                    Themes
                                </h3>
                                {site.themes && site.themes.length > 0 ? (
                                    <div className="space-y-2">
                                        {site.themes.map((theme, idx) => (
                                            <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 rounded">
                                                <div>
                                                    <div className="font-medium">{theme.title || theme.name}</div>
                                                    <div className="text-sm text-gray-600">
                                                        v{theme.version}
                                                        <span className={`ml-2 px-2 py-0.5 rounded text-xs ${
                                                            theme.status === 'active' ? 'bg-blue-100 text-blue-800' : 'bg-gray-200 text-gray-700'
                                                        }`}>
                                                            {theme.status}
                                                        </span>
                                                    </div>
                                                </div>
                                                {theme.update_available === 'available' && (
                                                    <button className="text-orange-600 hover:text-orange-700 text-sm font-medium">
                                                        Update to v{theme.new_version}
                                                    </button>
                                                )}
                                            </div>
                                        ))}
                                    </div>
                                ) : (
                                    <div className="text-gray-500 text-sm">No theme details available</div>
                                )}
                            </div>
 
                            {/* Server Info */}
                            <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
                                <h3 className="font-semibold text-gray-900 mb-3">Server Information</h3>
                                <div className="grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <div className="text-gray-600">Server IP</div>
                                        <div className="font-medium">{site.server_ip}</div>
                                    </div>
                                    <div>
                                        <div className="text-gray-600">Hostname</div>
                                        <div className="font-medium">{site.server_hostname}</div>
                                    </div>
                                    <div>
                                        <div className="text-gray-600">Disk Usage</div>
                                        <div className="font-medium">{site.disk_usage}</div>
                                    </div>
                                    <div>
                                        <div className="text-gray-600">Status</div>
                                        <div className={`font-medium ${site.status === 'online' ? 'text-green-600' : 'text-red-600'}`}>
                                            {site.status}
                                        </div>
                                    </div>
                                    {site.database && (
                                        <>
                                            <div>
                                                <div className="text-gray-600">Database</div>
                                                <div className="font-medium text-xs">{site.database.db_name}</div>
                                            </div>
                                            <div>
                                                <div className="text-gray-600">DB User</div>
                                                <div className="font-medium text-xs">{site.database.db_user}</div>
                                            </div>
                                        </>
                                    )}
                                </div>
                            </div>
                        </div>
                    ) : null}
                </div>
 
                {/* Footer */}
                <div className="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-between items-center">
                    <div className="text-sm text-gray-600">
                        {site && site.last_updated && (
                            <>Last updated: {new Date(site.last_updated).toLocaleString()}</>
                        )}
                    </div>
                    <button
                        onClick={onClose}
                        className="bg-gray-600 text-white px-6 py-2 rounded-lg hover:bg-gray-700"
                    >
                        Close
                    </button>
                </div>
            </div>
        </div>
    );
}