DomainDNSModal.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { apiFetch } from '../../../lib/api';
import { notifySuccess, notifyError } from '../../../utils/notifications';
 
export default function DomainDNSModal({ showModal, domain, onClose, onUpdate }) {
    const [nameservers, setNameservers] = useState([]);
    const [dnsRecords, setDnsRecords] = useState([]);
    const [saving, setSaving] = useState(false);
    const [activeTab, setActiveTab] = useState('nameservers'); // 'nameservers' or 'dns'
 
    useEffect(() => {
        if (domain) {
            // Parse nameservers
            if (domain.nameservers) {
                try {
                    const ns = typeof domain.nameservers === 'string'
                        ? JSON.parse(domain.nameservers)
                        : domain.nameservers;
                    setNameservers(Array.isArray(ns) ? ns : []);
                } catch {
                    setNameservers([]);
                }
            }
 
            // Parse DNS records
            if (domain.dns_records) {
                try {
                    const records = typeof domain.dns_records === 'string'
                        ? JSON.parse(domain.dns_records)
                        : domain.dns_records;
                    setDnsRecords(Array.isArray(records) ? records : []);
                } catch {
                    setDnsRecords([]);
                }
            }
        }
    }, [domain]);
 
    if (!showModal || !domain) return null;
 
    const addNameserver = () => {
        setNameservers([...nameservers, '']);
    };
 
    const updateNameserver = (index, value) => {
        const updated = [...nameservers];
        updated[index] = value;
        setNameservers(updated);
    };
 
    const removeNameserver = (index) => {
        setNameservers(nameservers.filter((_, i) => i !== index));
    };
 
    const addDnsRecord = () => {
        setDnsRecords([
            ...dnsRecords,
            { type: 'A', name: '@', value: '', ttl: 3600, priority: null }
        ]);
    };
 
    const updateDnsRecord = (index, field, value) => {
        const updated = [...dnsRecords];
        updated[index] = { ...updated[index], [field]: value };
        setDnsRecords(updated);
    };
 
    const removeDnsRecord = (index) => {
        setDnsRecords(dnsRecords.filter((_, i) => i !== index));
    };
 
    const handleSave = async () => {
        setSaving(true);
        try {
            // Filter out empty nameservers
            const cleanNameservers = nameservers.filter(ns => ns.trim());
 
            // Validate DNS records
            const validRecords = dnsRecords.filter(r => r.name && r.value);
 
            // Update domain with DNS records - will automatically sync to Cloudflare
            await apiFetch(`/domains/${domain.domain_id}`, {
                method: 'PUT',
                body: JSON.stringify({
                    nameservers: JSON.stringify(cleanNameservers),
                    dns_records: JSON.stringify(validRecords),
                    sync_to_cloudflare: domain.registrar === 'cloudflare' // Sync if Cloudflare domain
                })
            });
 
            await notifySuccess(
                'DNS Updated', 
                domain.registrar === 'cloudflare' 
                    ? 'DNS records updated and synced to Cloudflare successfully'
                    : 'DNS records updated successfully'
            );
            onUpdate();
            onClose();
        } catch (err) {
            await notifyError('Update Failed', err.message || 'Failed to update DNS settings');
        } finally {
            setSaving(false);
        }
    };
 
    return (
        <div classNameName="modal-overlay" onClick={onClose}>
            <div className="modal-content" style={{ maxWidth: '800px' }} onClick={(e) => e.stopPropagation()}>
                <div className="modal-header">
                    <div>
                        <h2>DNS Management - {domain.domain_name}</h2>
                        {domain.registrar === 'cloudflare' && (
                            <small style={{ color: '#1DA1F2', display: 'block', marginTop: '4px' }}>
                                <span className="material-symbols-outlined" style={{ fontSize: '14px', verticalAlign: 'middle' }}>cloud</span>
                                {' '}Changes will sync to Cloudflare automatically
                            </small>
                        )}
                    </div>
                    <button className="modal-close" onClick={onClose}>
                        <span className="material-symbols-outlined">close</span>
                    </button>
                </div>
 
                <div style={{ borderBottom: '1px solid #e0e0e0', display: 'flex', gap: '4px', padding: '0 24px' }}>
                    <button
                        className={`tab-button ${activeTab === 'nameservers' ? 'active' : ''}`}
                        onClick={() => setActiveTab('nameservers')}
                        style={{
                            padding: '12px 20px',
                            background: activeTab === 'nameservers' ? '#fff' : 'transparent',
                            border: 'none',
                            borderBottom: activeTab === 'nameservers' ? '2px solid var(--primary-color)' : '2px solid transparent',
                            cursor: 'pointer',
                            fontWeight: activeTab === 'nameservers' ? '600' : '400'
                        }}
                    >
                        Nameservers
                    </button>
                    <button
                        className={`tab-button ${activeTab === 'dns' ? 'active' : ''}`}
                        onClick={() => setActiveTab('dns')}
                        style={{
                            padding: '12px 20px',
                            background: activeTab === 'dns' ? '#fff' : 'transparent',
                            border: 'none',
                            borderBottom: activeTab === 'dns' ? '2px solid var(--primary-color)' : '2px solid transparent',
                            cursor: 'pointer',
                            fontWeight: activeTab === 'dns' ? '600' : '400'
                        }}
                    >
                        DNS Records
                    </button>
                </div>
 
                <div className="modal-body" style={{ maxHeight: '500px', overflowY: 'auto' }}>
                    {activeTab === 'nameservers' && (
                        <div>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                                <div>
                                    <h3 style={{ margin: 0 }}>Nameservers</h3>
                                    <p style={{ margin: '4px 0 0 0', fontSize: '0.9em', color: '#666' }}>
                                        Configure the authoritative nameservers for this domain
                                    </p>
                                </div>
                                <button className="btn btn-sm" onClick={addNameserver}>
                                    <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span>
                                    Add NS
                                </button>
                            </div>
 
                            {nameservers.length === 0 ? (
                                <div style={{ padding: '24px', textAlign: 'center', color: '#999', background: '#f5f5f5', borderRadius: '8px' }}>
                                    No nameservers configured. Click "Add NS" to add one.
                                </div>
                            ) : (
                                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                                    {nameservers.map((ns, index) => (
                                        <div key={index} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                                            <input
                                                type="text"
                                                value={ns}
                                                onChange={(e) => updateNameserver(index, e.target.value)}
                                                placeholder="ns1.example.com"
                                                style={{ flex: 1, padding: '8px 12px' }}
                                            />
                                            <button
                                                className="btn btn-danger btn-sm"
                                                onClick={() => removeNameserver(index)}
                                                style={{ padding: '8px 12px' }}
                                            >
                                                <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>delete</span>
                                            </button>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    )}
 
                    {activeTab === 'dns' && (
                        <div>
                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                                <div>
                                    <h3 style={{ margin: 0 }}>DNS Records</h3>
                                    <p style={{ margin: '4px 0 0 0', fontSize: '0.9em', color: '#666' }}>
                                        Manage A, AAAA, CNAME, MX, TXT, and other DNS records
                                    </p>
                                </div>
                                <button className="btn btn-sm" onClick={addDnsRecord}>
                                    <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span>
                                    Add Record
                                </button>
                            </div>
 
                            {dnsRecords.length === 0 ? (
                                <div style={{ padding: '24px', textAlign: 'center', color: '#999', background: '#f5f5f5', borderRadius: '8px' }}>
                                    No DNS records configured. Click "Add Record" to add one.
                                </div>
                            ) : (
                                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                                    {dnsRecords.map((record, index) => (
                                        <div key={index} style={{
                                            display: 'grid',
                                            gridTemplateColumns: '100px 1fr 2fr 100px 80px 40px',
                                            gap: '8px',
                                            alignItems: 'center',
                                            padding: '12px',
                                            background: '#f9f9f9',
                                            borderRadius: '6px'
                                        }}>
                                            <select
                                                value={record.type}
                                                onChange={(e) => updateDnsRecord(index, 'type', e.target.value)}
                                                style={{ padding: '8px' }}
                                            >
                                                <option value="A">A</option>
                                                <option value="AAAA">AAAA</option>
                                                <option value="CNAME">CNAME</option>
                                                <option value="MX">MX</option>
                                                <option value="TXT">TXT</option>
                                                <option value="NS">NS</option>
                                                <option value="SRV">SRV</option>
                                                <option value="CAA">CAA</option>
                                            </select>
                                            <input
                                                type="text"
                                                value={record.name}
                                                onChange={(e) => updateDnsRecord(index, 'name', e.target.value)}
                                                placeholder="@ or subdomain"
                                                style={{ padding: '8px' }}
                                            />
                                            <input
                                                type="text"
                                                value={record.value}
                                                onChange={(e) => updateDnsRecord(index, 'value', e.target.value)}
                                                placeholder="Value"
                                                style={{ padding: '8px' }}
                                            />
                                            <input
                                                type="number"
                                                value={record.ttl}
                                                onChange={(e) => updateDnsRecord(index, 'ttl', e.target.value)}
                                                placeholder="TTL"
                                                style={{ padding: '8px' }}
                                            />
                                            {(record.type === 'MX' || record.type === 'SRV') && (
                                                <input
                                                    type="number"
                                                    value={record.priority || ''}
                                                    onChange={(e) => updateDnsRecord(index, 'priority', e.target.value)}
                                                    placeholder="Priority"
                                                    style={{ padding: '8px' }}
                                                />
                                            )}
                                            <button
                                                className="btn btn-danger btn-sm"
                                                onClick={() => removeDnsRecord(index)}
                                                style={{ padding: '8px 12px' }}
                                            >
                                                <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>delete</span>
                                            </button>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    )}
                </div>
 
                <div className="modal-footer">
                    <button type="button" className="btn btn-secondary" onClick={onClose}>
                        Cancel
                    </button>
                    <button
                        type="button"
                        className="btn btn-primary"
                        onClick={handleSave}
                        disabled={saving}
                    >
                        {saving ? 'Saving...' : 'Save Changes'}
                    </button>
                </div>
            </div>
        </div>
    );
}