DomainFormModal.jsx

Go to the documentation of this file.

export default function DomainFormModal({
    showModal,
    editingDomain,
    formData,
    setFormData,
    customers,
    contracts,
    onSubmit,
    onClose
}) {
    if (!showModal) return null;
 
    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(formData, editingDomain);
    };
 
    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
                <div className="modal-header">
                    <h2>{editingDomain ? 'Edit Domain' : 'Register New Domain'}</h2>
                    <button className="modal-close" onClick={onClose}>
                        <span className="material-symbols-outlined">close</span>
                    </button>
                </div>
                <form onSubmit={handleSubmit}>
                    <div className="modal-body">
                        <div className="form-row">
                            <div className="form-group">
                                <label>Domain Name *</label>
                                <input
                                    type="text"
                                    value={formData.domain_name}
                                    onChange={(e) => setFormData({ ...formData, domain_name: e.target.value })}
                                    placeholder="example.com"
                                    required
                                />
                            </div>
                            <div className="form-group">
                                <label>Customer *</label>
                                <select
                                    value={formData.customer_id}
                                    onChange={(e) => setFormData({ ...formData, customer_id: e.target.value })}
                                    required
                                >
                                    <option value="">Select customer...</option>
                                    {customers.map((c) => (
                                        <option key={c.customer_id} value={c.customer_id}>
                                            {c.name}
                                        </option>
                                    ))}
                                </select>
                            </div>
                        </div>
 
                        <div className="form-row">
                            <div className="form-group">
                                <label>Registrar *</label>
                                <select
                                    value={formData.registrar}
                                    onChange={(e) => setFormData({ ...formData, registrar: e.target.value })}
                                    required
                                >
                                    <option value="enom">Enom</option>
                                    <option value="moniker">Moniker</option>
                                    <option value="cloudflare">Cloudflare</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            <div className="form-group">
                                <label>Status *</label>
                                <select
                                    value={formData.status}
                                    onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                                    required
                                >
                                    <option value="active">Active</option>
                                    <option value="pending">Pending</option>
                                    <option value="expired">Expired</option>
                                    <option value="cancelled">Cancelled</option>
                                </select>
                            </div>
                        </div>
 
                        <div className="form-row">
                            <div className="form-group">
                                <label>Registration Date</label>
                                <input
                                    type="date"
                                    value={formData.registration_date}
                                    onChange={(e) => setFormData({ ...formData, registration_date: e.target.value })}
                                />
                            </div>
                            <div className="form-group">
                                <label>Expiry Date *</label>
                                <input
                                    type="date"
                                    value={formData.expiry_date}
                                    onChange={(e) => setFormData({ ...formData, expiry_date: e.target.value })}
                                    required
                                />
                            </div>
                        </div>
 
                        <div className="form-row">
                            <div className="form-group">
                                <label>Contract (Optional)</label>
                                <select
                                    value={formData.contract_id}
                                    onChange={(e) => setFormData({ ...formData, contract_id: e.target.value })}
                                >
                                    <option value="">No contract</option>
                                    {contracts.map((c) => (
                                        <option key={c.contract_id} value={c.contract_id}>
                                            {c.title}
                                        </option>
                                    ))}
                                </select>
                                <small>Link this domain to a contract for automated billing</small>
                            </div>
                            <div className="form-group">
                                <label>DNS Provider</label>
                                <input
                                    type="text"
                                    value={formData.dns_provider}
                                    onChange={(e) => setFormData({ ...formData, dns_provider: e.target.value })}
                                    placeholder="Cloudflare, Route53, etc."
                                />
                            </div>
                        </div>
 
                        <div className="form-group">
                            <label>Nameservers (one per line)</label>
                            <textarea
                                value={formData.nameservers}
                                onChange={(e) => setFormData({ ...formData, nameservers: e.target.value })}
                                placeholder="ns1.example.com&#10;ns2.example.com"
                                rows="3"
                            />
                        </div>
 
                        <div className="form-group">
                            <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
                                <input
                                    type="checkbox"
                                    checked={formData.auto_renew}
                                    onChange={(e) => setFormData({ ...formData, auto_renew: e.target.checked })}
                                />
                                <span>Enable auto-renewal</span>
                            </label>
                        </div>
 
                        <div className="form-group">
                            <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
                                <input
                                    type="checkbox"
                                    checked={formData.privacy_protection}
                                    onChange={(e) => setFormData({ ...formData, privacy_protection: e.target.checked })}
                                />
                                <span>Privacy protection (WHOIS privacy)</span>
                            </label>
                        </div>
 
                        {!editingDomain && formData.registrar === 'cloudflare' && (
                            <div className="form-group">
                                <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
                                    <input
                                        type="checkbox"
                                        checked={formData.create_zone !== false}
                                        onChange={(e) => setFormData({ ...formData, create_zone: e.target.checked })}
                                    />
                                    <span>Create DNS zone in Cloudflare</span>
                                    <small style={{ marginLeft: 'auto', color: '#666' }}>Recommended</small>
                                </label>
                                <small style={{ display: 'block', marginTop: '4px', color: '#666' }}>
                                    Automatically creates a DNS zone for this domain in Cloudflare
                                </small>
                            </div>
                        )}
 
                        <div className="form-group">
                            <label>Notes</label>
                            <textarea
                                value={formData.notes}
                                onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                                placeholder="Additional notes about this domain..."
                                rows="3"
                            />
                        </div>
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-secondary" onClick={onClose}>
                            Cancel
                        </button>
                        <button type="submit" className="btn btn-primary">
                            {editingDomain ? 'Update Domain' : 'Register Domain'}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}