TabWordPress.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { apiFetch } from '../../lib/api';
 
export default function TabWordPress() {
    const [sites, setSites] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [showCreateForm, setShowCreateForm] = useState(false);
    const [creating, setCreating] = useState(false);
    const [customers, setCustomers] = useState([]);
 
    // Form state
    const [formData, setFormData] = useState({
        siteName: '',
        customerId: '',
        domain: '',
        dbPassword: '',
        spacesKey: '',
        spacesSecret: ''
    });
 
    useEffect(() => {
        fetchSites();
        fetchCustomers();
    }, []);
 
    const fetchSites = async () => {
        setLoading(true);
        setError('');
        try {
            const res = await apiFetch('/wordpress/sites');
            if (res.ok) {
                const data = await res.json();
                setSites(data.sites || []);
            } else {
                const errorData = await res.json();
                setError(errorData.error || 'Failed to fetch WordPress sites');
            }
        } catch (err) {
            console.error('Error fetching sites:', err);
            setError(err.message || 'Failed to load sites');
        } finally {
            setLoading(false);
        }
    };
 
    const fetchCustomers = async () => {
        try {
            const res = await apiFetch('/customers');
            if (res.ok) {
                const data = await res.json();
                setCustomers(data.customers || []);
            }
        } catch (err) {
            console.error('Error fetching customers:', err);
        }
    };
 
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };
 
    const handleSubmit = async (e) => {
        e.preventDefault();
        setCreating(true);
        setError('');
 
        try {
            const res = await apiFetch('/wordpress/create', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });
 
            if (res.ok) {
                const data = await res.json();
                alert(`WordPress site created successfully!\nApp ID: ${data.appId}\nURL: ${data.url || 'Deploying...'}`);
                setShowCreateForm(false);
                setFormData({
                    siteName: '',
                    customerId: '',
                    domain: '',
                    dbPassword: '',
                    spacesKey: '',
                    spacesSecret: ''
                });
                fetchSites();
            } else {
                const errorData = await res.json();
                setError(errorData.error || 'Failed to create WordPress site');
            }
        } catch (err) {
            console.error('Error creating site:', err);
            setError(err.message || 'Failed to create WordPress site');
        } finally {
            setCreating(false);
        }
    };
 
    const getStatusColor = (status) => {
        const statusMap = {
            'running': 'success',
            'deploying': 'info',
            'building': 'info',
            'error': 'error',
            'stopped': 'secondary'
        };
        return statusMap[status?.toLowerCase()] || 'secondary';
    };
 
    const formatTime = (date) => {
        if (!date) return '';
        return new Date(date).toLocaleString();
    };
 
    if (loading) {
        return (
            <div style={{ padding: '40px', textAlign: 'center' }}>
                <div className="spinner"></div>
            </div>
        );
    }
 
    return (
        <div style={{ padding: '20px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
                <div>
                    <h2>WordPress Sites</h2>
                    <p style={{ color: 'var(--text-secondary)', marginTop: '8px' }}>
                        Create and manage WordPress sites on DigitalOcean
                    </p>
                </div>
                <button
                    onClick={() => setShowCreateForm(!showCreateForm)}
                    className="btn btn-primary"
                    style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                >
                    <span className="material-symbols-outlined">
                        {showCreateForm ? 'close' : 'add'}
                    </span>
                    {showCreateForm ? 'Cancel' : 'Create WordPress Site'}
                </button>
            </div>
 
            {error && (
                <div className="card" style={{ padding: '16px', marginBottom: '20px', background: 'var(--error-bg)', border: '1px solid var(--error-border)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                        <span className="material-symbols-outlined" style={{ color: 'var(--error-text)' }}>
                            error
                        </span>
                        <span style={{ fontSize: '14px', color: 'var(--error-text)' }}>{error}</span>
                    </div>
                </div>
            )}
 
            {/* Create Form */}
            {showCreateForm && (
                <div className="card" style={{ padding: '24px', marginBottom: '20px' }}>
                    <h3 style={{ marginBottom: '20px' }}>Create New WordPress Site</h3>
                    <form onSubmit={handleSubmit}>
                        <div style={{ display: 'grid', gap: '16px', gridTemplateColumns: '1fr 1fr' }}>
                            <div>
                                <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                    Site Name *
                                </label>
                                <input
                                    type="text"
                                    name="siteName"
                                    value={formData.siteName}
                                    onChange={handleInputChange}
                                    required
                                    placeholder="my-awesome-site"
                                    style={{ width: '100%', padding: '8px 12px', border: '1px solid var(--border)', borderRadius: '4px' }}
                                />
                                <small style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>
                                    Lowercase letters, numbers, and hyphens only
                                </small>
                            </div>
 
                            <div>
                                <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                    Customer
                                </label>
                                <select
                                    name="customerId"
                                    value={formData.customerId}
                                    onChange={handleInputChange}
                                    style={{ width: '100%', padding: '8px 12px', border: '1px solid var(--border)', borderRadius: '4px' }}
                                >
                                    <option value="">Select customer (optional)</option>
                                    {customers.map(customer => (
                                        <option key={customer.customer_id} value={customer.customer_id}>
                                            {customer.name}
                                        </option>
                                    ))}
                                </select>
                            </div>
 
                            <div>
                                <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                    Domain (Optional)
                                </label>
                                <input
                                    type="text"
                                    name="domain"
                                    value={formData.domain}
                                    onChange={handleInputChange}
                                    placeholder="example.com"
                                    style={{ width: '100%', padding: '8px 12px', border: '1px solid var(--border)', borderRadius: '4px' }}
                                />
                                <small style={{ color: 'var(--text-secondary)', fontSize: '12px' }}>
                                    Leave empty to use DO App Platform domain
                                </small>
                            </div>
 
                            <div>
                                <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                    Database Password *
                                </label>
                                <input
                                    type="password"
                                    name="dbPassword"
                                    value={formData.dbPassword}
                                    onChange={handleInputChange}
                                    required
                                    placeholder="Strong password"
                                    style={{ width: '100%', padding: '8px 12px', border: '1px solid var(--border)', borderRadius: '4px' }}
                                />
                            </div>
 
                            <div>
                                <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                    DO Spaces Access Key *
                                </label>
                                <input
                                    type="text"
                                    name="spacesKey"
                                    value={formData.spacesKey}
                                    onChange={handleInputChange}
                                    required
                                    placeholder="DO00..."
                                    style={{ width: '100%', padding: '8px 12px', border: '1px solid var(--border)', borderRadius: '4px' }}
                                />
                            </div>
 
                            <div>
                                <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                                    DO Spaces Secret Key *
                                </label>
                                <input
                                    type="password"
                                    name="spacesSecret"
                                    value={formData.spacesSecret}
                                    onChange={handleInputChange}
                                    required
                                    placeholder="Secret key"
                                    style={{ width: '100%', padding: '8px 12px', border: '1px solid var(--border)', borderRadius: '4px' }}
                                />
                            </div>
                        </div>
 
                        <div style={{ marginTop: '24px', display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
                            <button
                                type="button"
                                onClick={() => setShowCreateForm(false)}
                                className="btn"
                            >
                                Cancel
                            </button>
                            <button
                                type="submit"
                                disabled={creating}
                                className="btn btn-primary"
                                style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                            >
                                {creating ? (
                                    <>
                                        <span className="spinner" style={{ width: '16px', height: '16px' }}></span>
                                        Creating...
                                    </>
                                ) : (
                                    <>
                                        <span className="material-symbols-outlined">rocket_launch</span>
                                        Create WordPress Site
                                    </>
                                )}
                            </button>
                        </div>
                    </form>
                </div>
            )}
 
            {/* Sites List */}
            {sites.length === 0 && !showCreateForm ? (
                <div className="card" style={{ padding: '60px 20px', textAlign: 'center' }}>
                    <span className="material-symbols-outlined" style={{ fontSize: '64px', marginBottom: '16px', display: 'block', opacity: 0.5, color: 'var(--text-secondary)' }}>
                        web
                    </span>
                    <p style={{ color: 'var(--text-secondary)' }}>No WordPress sites found</p>
                    <p style={{ fontSize: '14px', color: 'var(--text-tertiary)', marginTop: '8px' }}>
                        Create your first WordPress site to get started
                    </p>
                </div>
            ) : (
                <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))' }}>
                    {sites.map((site) => (
                        <div key={site.app_id || site.id} className="card">
                            <div style={{ padding: '16px', borderBottom: '1px solid var(--border)' }}>
                                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '12px' }}>
                                    <div>
                                        <h3 style={{ margin: 0, marginBottom: '4px' }}>{site.name}</h3>
                                        {site.customer_name && (
                                            <p style={{ fontSize: '13px', color: 'var(--text-secondary)', margin: 0 }}>
                                                {site.customer_name}
                                            </p>
                                        )}
                                    </div>
                                    <span className={`badge badge-${getStatusColor(site.status)}`}>
                                        {site.status || 'unknown'}
                                    </span>
                                </div>
 
                                {site.url && (
                                    <a
                                        href={site.url}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        style={{
                                            fontSize: '13px',
                                            color: 'var(--primary)',
                                            textDecoration: 'none',
                                            display: 'flex',
                                            alignItems: 'center',
                                            gap: '4px'
                                        }}
                                    >
                                        <span>{site.url}</span>
                                        <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>
                                            open_in_new
                                        </span>
                                    </a>
                                )}
                            </div>
 
                            <div style={{ padding: '16px' }}>
                                <div style={{ display: 'grid', gap: '8px', fontSize: '13px' }}>
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <span style={{ color: 'var(--text-secondary)' }}>Region:</span>
                                        <span>{site.region || 'syd1'}</span>
                                    </div>
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <span style={{ color: 'var(--text-secondary)' }}>Created:</span>
                                        <span>{formatTime(site.created_at)}</span>
                                    </div>
                                    {site.app_id && (
                                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                            <span style={{ color: 'var(--text-secondary)' }}>App ID:</span>
                                            <span style={{ fontFamily: 'monospace', fontSize: '11px' }}>
                                                {site.app_id}
                                            </span>
                                        </div>
                                    )}
                                </div>
 
                                <div style={{ marginTop: '16px', display: 'flex', gap: '8px' }}>
                                    <button
                                        className="btn btn-sm"
                                        onClick={() => window.open(`https://cloud.digitalocean.com/apps/${site.app_id}`, '_blank')}
                                        disabled={!site.app_id}
                                        style={{ flex: 1, fontSize: '12px' }}
                                    >
                                        <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>
                                            settings
                                        </span>
                                        Manage
                                    </button>
                                    <button
                                        className="btn btn-sm"
                                        onClick={() => fetchSites()}
                                        style={{ fontSize: '12px' }}
                                    >
                                        <span className="material-symbols-outlined" style={{ fontSize: '16px' }}>
                                            refresh
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}