DomainManagementModal.jsx

Go to the documentation of this file.

import { useState } from 'react';
import { apiFetch } from '../../../lib/api';
import { notifySuccess, notifyError } from '../../../utils/notifications';
 
export default function DomainManagementModal({ domain, onClose, onUpdate }) {
    const [loading, setLoading] = useState(false);
    const [authCode, setAuthCode] = useState('');
    const [showAuthCode, setShowAuthCode] = useState(false);
    const [contacts, setContacts] = useState(null);
    const [showContacts, setShowContacts] = useState(false);
 
    const metadata = domain.metadata || {};
    const domainType = metadata.domain_type || 'registered';
    const locked = metadata.locked;
    const autoRenew = metadata.auto_renew;
 
    // Check if domain is DNS-only (shouldn't show management)
    if (domainType === 'dns_only') {
        return (
            <div className="modal-overlay" onClick={onClose}>
                <div className="modal-content" onClick={(e) => e.stopPropagation()}>
                    <div className="modal-header">
                        <h2>Domain Management</h2>
                        <button className="modal-close" onClick={onClose}>&times;</button>
                    </div>
                    <div className="modal-body">
                        <div className="alert alert-info">
                            <span className="material-symbols-outlined">info</span>
                            <p>This is a DNS-only domain. Registration management features are not available.</p>
                        </div>
                    </div>
                    <div className="modal-footer">
                        <button className="btn btn-secondary" onClick={onClose}>Close</button>
                    </div>
                </div>
            </div>
        );
    }
 
    // Lock domain
    const handleLock = async () => {
        if (!confirm(`Lock domain ${domain.domain_name}? This will prevent unauthorized transfers.`)) {
            return;
        }
 
        setLoading(true);
        try {
            const res = await apiFetch(`/domains/${domain.domain_id}/lock`, {
                method: 'POST'
            });
 
            if (!res.ok) {
                const error = await res.json();
                throw new Error(error.error || 'Failed to lock domain');
            }
 
            await notifySuccess('Domain Locked', `${domain.domain_name} has been locked`);
            if (onUpdate) onUpdate();
            onClose();
        } catch (error) {
            await notifyError('Lock Failed', error.message);
        } finally {
            setLoading(false);
        }
    };
 
    // Unlock domain
    const handleUnlock = async () => {
        if (!confirm(`Unlock domain ${domain.domain_name}? This will allow transfers but reduce security.`)) {
            return;
        }
 
        setLoading(true);
        try {
            const res = await apiFetch(`/domains/${domain.domain_id}/unlock`, {
                method: 'POST'
            });
 
            if (!res.ok) {
                const error = await res.json();
                throw new Error(error.error || 'Failed to unlock domain');
            }
 
            await notifySuccess('Domain Unlocked', `${domain.domain_name} has been unlocked`);
            if (onUpdate) onUpdate();
            onClose();
        } catch (error) {
            await notifyError('Unlock Failed', error.message);
        } finally {
            setLoading(false);
        }
    };
 
    // Get auth/transfer code
    const handleGetAuthCode = async () => {
        setLoading(true);
        setAuthCode('');
        setShowAuthCode(true);
 
        try {
            const res = await apiFetch(`/domains/${domain.domain_id}/auth-code`);
 
            if (!res.ok) {
                const error = await res.json();
                throw new Error(error.error || 'Failed to get auth code');
            }
 
            const data = await res.json();
            setAuthCode(data.auth_code || data.authCode || 'Not available');
        } catch (error) {
            await notifyError('Auth Code Failed', error.message);
            setShowAuthCode(false);
        } finally {
            setLoading(false);
        }
    };
 
    // Copy auth code to clipboard
    const copyAuthCode = () => {
        navigator.clipboard.writeText(authCode);
        notifySuccess('Copied', 'Auth code copied to clipboard');
    };
 
    // Toggle auto-renew
    const handleToggleAutoRenew = async () => {
        const newState = !autoRenew;
        const message = newState
            ? `Enable auto-renew for ${domain.domain_name}? The domain will renew automatically before expiration.`
            : `Disable auto-renew for ${domain.domain_name}? You will need to manually renew the domain.`;
 
        if (!confirm(message)) {
            return;
        }
 
        setLoading(true);
        try {
            const res = await apiFetch(`/domains/${domain.domain_id}/auto-renew`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ enabled: newState })
            });
 
            if (!res.ok) {
                const error = await res.json();
                throw new Error(error.error || 'Failed to update auto-renew');
            }
 
            await notifySuccess(
                'Auto-Renew Updated',
                `Auto-renew ${newState ? 'enabled' : 'disabled'} for ${domain.domain_name}`
            );
            if (onUpdate) onUpdate();
            onClose();
        } catch (error) {
            await notifyError('Auto-Renew Failed', error.message);
        } finally {
            setLoading(false);
        }
    };
 
    // Get contacts
    const handleGetContacts = async () => {
        setLoading(true);
        setShowContacts(true);
 
        try {
            const res = await apiFetch(`/domains/${domain.domain_id}/contacts`);
 
            if (!res.ok) {
                const error = await res.json();
                throw new Error(error.error || 'Failed to get contacts');
            }
 
            const data = await res.json();
            setContacts(data);
        } catch (error) {
            await notifyError('Contacts Failed', error.message);
            setShowContacts(false);
        } finally {
            setLoading(false);
        }
    };
 
    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '700px' }}>
                <div className="modal-header">
                    <h2>Domain Management: {domain.domain_name}</h2>
                    <button className="modal-close" onClick={onClose}>&times;</button>
                </div>
 
                <div className="modal-body">
                    {/* Domain Info */}
                    <div className="card" style={{ marginBottom: '20px', background: 'var(--bg-secondary)' }}>
                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
                            <div>
                                <strong>Registrar:</strong>
                                <div style={{ textTransform: 'capitalize', marginTop: '5px' }}>
                                    {domain.registrar}
                                </div>
                            </div>
                            <div>
                                <strong>Expiration:</strong>
                                <div style={{ marginTop: '5px' }}>
                                    {domain.expiration_date ? new Date(domain.expiration_date).toLocaleDateString() : 'N/A'}
                                </div>
                            </div>
                            <div>
                                <strong>Lock Status:</strong>
                                <div style={{ marginTop: '5px' }}>
                                    {locked === true && <span className="badge badge-success">🔒 Locked</span>}
                                    {locked === false && <span className="badge badge-warning">🔓 Unlocked</span>}
                                    {locked === null && <span className="badge badge-secondary">Unknown</span>}
                                </div>
                            </div>
                            <div>
                                <strong>Auto-Renew:</strong>
                                <div style={{ marginTop: '5px' }}>
                                    {autoRenew ? (
                                        <span className="badge badge-success">Enabled</span>
                                    ) : (
                                        <span className="badge badge-secondary">Disabled</span>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
 
                    {/* Management Actions */}
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
                        {/* Lock/Unlock */}
                        <div className="card">
                            <h3 style={{ fontSize: '16px', marginBottom: '10px' }}>Domain Lock</h3>
                            <p style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '15px' }}>
                                {locked ? 'Domain is locked and protected from unauthorized transfers.' : 'Unlock domain to enable transfers.'}
                            </p>
                            {locked ? (
                                <button
                                    className="btn btn-warning"
                                    onClick={handleUnlock}
                                    disabled={loading}
                                    style={{ width: '100%' }}
                                >
                                    <span className="material-symbols-outlined">lock_open</span>
                                    Unlock Domain
                                </button>
                            ) : (
                                <button
                                    className="btn btn-success"
                                    onClick={handleLock}
                                    disabled={loading}
                                    style={{ width: '100%' }}
                                >
                                    <span className="material-symbols-outlined">lock</span>
                                    Lock Domain
                                </button>
                            )}
                        </div>
 
                        {/* Auto-Renew */}
                        <div className="card">
                            <h3 style={{ fontSize: '16px', marginBottom: '10px' }}>Auto-Renew</h3>
                            <p style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '15px' }}>
                                {autoRenew ? 'Domain will renew automatically before expiration.' : 'Enable automatic renewal to prevent expiration.'}
                            </p>
                            <button
                                className={autoRenew ? 'btn btn-secondary' : 'btn btn-success'}
                                onClick={handleToggleAutoRenew}
                                disabled={loading}
                                style={{ width: '100%' }}
                            >
                                <span className="material-symbols-outlined">
                                    {autoRenew ? 'cancel' : 'refresh'}
                                </span>
                                {autoRenew ? 'Disable' : 'Enable'} Auto-Renew
                            </button>
                        </div>
 
                        {/* Transfer Code */}
                        <div className="card">
                            <h3 style={{ fontSize: '16px', marginBottom: '10px' }}>Transfer Code</h3>
                            <p style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '15px' }}>
                                Get the EPP/auth code needed to transfer this domain to another registrar.
                            </p>
                            <button
                                className="btn btn-primary"
                                onClick={handleGetAuthCode}
                                disabled={loading}
                                style={{ width: '100%' }}
                            >
                                <span className="material-symbols-outlined">vpn_key</span>
                                Get Transfer Code
                            </button>
                        </div>
 
                        {/* Contacts */}
                        <div className="card">
                            <h3 style={{ fontSize: '16px', marginBottom: '10px' }}>Contact Information</h3>
                            <p style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '15px' }}>
                                View registrant, admin, technical, and billing contacts.
                            </p>
                            <button
                                className="btn btn-secondary"
                                onClick={handleGetContacts}
                                disabled={loading}
                                style={{ width: '100%' }}
                            >
                                <span className="material-symbols-outlined">contacts</span>
                                View Contacts
                            </button>
                        </div>
                    </div>
 
                    {/* Auth Code Display */}
                    {showAuthCode && (
                        <div className="card" style={{ marginTop: '20px', background: 'var(--bg-tertiary)' }}>
                            <h3 style={{ fontSize: '16px', marginBottom: '10px' }}>Transfer/EPP Code</h3>
                            {loading ? (
                                <div style={{ textAlign: 'center', padding: '20px' }}>
                                    <div className="spinner"></div>
                                    <p>Retrieving auth code...</p>
                                </div>
                            ) : (
                                <>
                                    <div style={{ 
                                        padding: '15px', 
                                        background: 'var(--bg-primary)', 
                                        borderRadius: '8px',
                                        marginBottom: '10px',
                                        fontFamily: 'monospace',
                                        fontSize: '16px',
                                        wordBreak: 'break-all'
                                    }}>
                                        {authCode}
                                    </div>
                                    <button
                                        className="btn btn-secondary btn-sm"
                                        onClick={copyAuthCode}
                                        style={{ width: '100%' }}
                                    >
                                        <span className="material-symbols-outlined">content_copy</span>
                                        Copy to Clipboard
                                    </button>
                                    <div className="alert alert-warning" style={{ marginTop: '15px' }}>
                                        <span className="material-symbols-outlined">warning</span>
                                        <p><strong>Important:</strong> Keep this code secure. Anyone with this code can initiate a domain transfer. Unlock the domain before transferring.</p>
                                    </div>
                                </>
                            )}
                        </div>
                    )}
 
                    {/* Contacts Display */}
                    {showContacts && (
                        <div className="card" style={{ marginTop: '20px' }}>
                            <h3 style={{ fontSize: '16px', marginBottom: '15px' }}>Domain Contacts</h3>
                            {loading ? (
                                <div style={{ textAlign: 'center', padding: '20px' }}>
                                    <div className="spinner"></div>
                                    <p>Loading contacts...</p>
                                </div>
                            ) : contacts ? (
                                <div style={{ display: 'grid', gap: '15px' }}>
                                    {['registrant', 'admin', 'tech', 'billing'].map(type => {
                                        const contact = contacts[type];
                                        if (!contact) return null;
                                        
                                        return (
                                            <div key={type} style={{ 
                                                padding: '15px', 
                                                background: 'var(--bg-secondary)',
                                                borderRadius: '8px'
                                            }}>
                                                <h4 style={{ 
                                                    fontSize: '14px', 
                                                    textTransform: 'capitalize', 
                                                    marginBottom: '10px',
                                                    color: 'var(--primary-color)'
                                                }}>
                                                    {type} Contact
                                                </h4>
                                                <div style={{ fontSize: '13px', lineHeight: '1.8' }}>
                                                    {contact.Name && <div><strong>Name:</strong> {contact.Name}</div>}
                                                    {contact.Organization && <div><strong>Organization:</strong> {contact.Organization}</div>}
                                                    {contact.Email && <div><strong>Email:</strong> {contact.Email}</div>}
                                                    {contact.Phone && <div><strong>Phone:</strong> {contact.Phone}</div>}
                                                    {contact.Address && <div><strong>Address:</strong> {contact.Address}</div>}
                                                    {contact.City && <div><strong>City:</strong> {contact.City}</div>}
                                                    {contact.State && <div><strong>State:</strong> {contact.State}</div>}
                                                    {contact.PostalCode && <div><strong>Postal:</strong> {contact.PostalCode}</div>}
                                                    {contact.Country && <div><strong>Country:</strong> {contact.Country}</div>}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            ) : null}
                        </div>
                    )}
                </div>
 
                <div className="modal-footer">
                    <button className="btn btn-secondary" onClick={onClose}>
                        Close
                    </button>
                </div>
            </div>
        </div>
    );
}