DNSManagement.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
import '../styles/DNSManagement.css';
 
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:1338';
 
// DNS Record Types
const DNS_TYPES = ['A', 'AAAA', 'CNAME', 'MX', 'TXT', 'SRV', 'NS', 'CAA'];
 
// TTL Presets (in seconds)
const TTL_PRESETS = [
  { label: 'Auto', value: 1 },
  { label: '2 minutes', value: 120 },
  { label: '5 minutes', value: 300 },
  { label: '15 minutes', value: 900 },
  { label: '30 minutes', value: 1800 },
  { label: '1 hour', value: 3600 },
  { label: '2 hours', value: 7200 },
  { label: '5 hours', value: 18000 },
  { label: '12 hours', value: 43200 },
  { label: '1 day', value: 86400 }
];
 
export default function DNSManagement() {
  const { domain } = useParams();
  const navigate = useNavigate();
 
  const [loading, setLoading] = useState(true);
  const [records, setRecords] = useState([]);
  const [zoneId, setZoneId] = useState(null);
  const [error, setError] = useState('');
  const [showAddModal, setShowAddModal] = useState(false);
  const [editingRecord, setEditingRecord] = useState(null);
  const [filter, setFilter] = useState('');
  const [typeFilter, setTypeFilter] = useState('ALL');
  const [lastSynced, setLastSynced] = useState(null);
  const [fromCache, setFromCache] = useState(false);
 
  // Form state
  const [formData, setFormData] = useState({
    type: 'A',
    name: '',
    content: '',
    ttl: 3600,
    proxied: false,
    priority: 10
  });
 
  useEffect(() => {
    if (domain) {
      fetchDNSRecords();
    }
  }, [domain]);
 
  const fetchDNSRecords = async (forceRefresh = false) => {
    try {
      setLoading(true);
      // Only clear error on successful start, preserve it if we have cached data
      if (records.length === 0) {
        setError('');
      }
 
      const token = localStorage.getItem('token');
      const url = forceRefresh 
        ? `${API_URL}/cloudflare-dns/${domain}/records?refresh=true`
        : `${API_URL}/cloudflare-dns/${domain}/records`;
      
      const response = await fetch(url, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      });
 
      const data = await response.json();
 
      if (data.success) {
        setRecords(data.records || []);
        setZoneId(data.zone_id);
        setLastSynced(data.last_synced);
        setFromCache(data.from_cache || false);
        setError(''); // Clear error on success
      } else {
        // If we have existing records, show warning but keep data
        if (records.length > 0) {
          setError('⚠️ Unable to fetch live data - showing cached records');
        } else {
          setError(data.error || 'Failed to fetch DNS records');
        }
      }
    } catch (err) {
      console.error('Error fetching DNS records:', err);
      // If we have existing records, show warning but keep data
      if (records.length > 0) {
        setError('⚠️ Unable to connect to API - showing cached records');
      } else {
        setError('Failed to connect to API');
      }
    } finally {
      setLoading(false);
    }
  };
 
  const handleRefresh = () => {
    fetchDNSRecords(true);
  };
 
  const handleAddRecord = () => {
    setEditingRecord(null);
    setFormData({
      type: 'A',
      name: '',
      content: '',
      ttl: 3600,
      proxied: false,
      priority: 10
    });
    setShowAddModal(true);
  };
 
  const handleEditRecord = (record) => {
    setEditingRecord(record);
    setFormData({
      type: record.type,
      name: record.name,
      content: record.content,
      ttl: record.ttl,
      proxied: record.proxied || false,
      priority: record.priority || 10
    });
    setShowAddModal(true);
  };
 
  const handleSubmit = async (e) => {
    e.preventDefault();
 
    try {
      const token = localStorage.getItem('token');
      const url = editingRecord
        ? `${API_URL}/cloudflare-dns/${domain}/records/${editingRecord.id}`
        : `${API_URL}/cloudflare-dns/${domain}/records`;
 
      const method = editingRecord ? 'PUT' : 'POST';
 
      const response = await fetch(url, {
        method,
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });
 
      const data = await response.json();
 
      if (data.success) {
        setShowAddModal(false);
        fetchDNSRecords();
      } else {
        alert(data.error || 'Failed to save DNS record');
      }
    } catch (err) {
      console.error('Error saving DNS record:', err);
      alert('Failed to save DNS record');
    }
  };
 
  const handleDeleteRecord = async (recordId) => {
    if (!confirm('Are you sure you want to delete this DNS record?')) {
      return;
    }
 
    try {
      const token = localStorage.getItem('token');
      const response = await fetch(`${API_URL}/cloudflare-dns/${domain}/records/${recordId}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'application/json'
        }
      });
 
      const data = await response.json();
 
      if (data.success) {
        fetchDNSRecords();
      } else {
        alert(data.error || 'Failed to delete DNS record');
      }
    } catch (err) {
      console.error('Error deleting DNS record:', err);
      alert('Failed to delete DNS record');
    }
  };
 
  const filteredRecords = records.filter(record => {
    const matchesSearch = !filter || 
      record.name.toLowerCase().includes(filter.toLowerCase()) ||
      record.content.toLowerCase().includes(filter.toLowerCase());
    
    const matchesType = typeFilter === 'ALL' || record.type === typeFilter;
 
    return matchesSearch && matchesType;
  });
 
  return (
    <MainLayout>
      <div className="dns-management">
      <div className="dns-header">
        <div className="dns-header-left">
          <button className="back-button" onClick={() => navigate(-1)}>
            ← Back
          </button>
          <div>
            <h1>DNS Management</h1>
            <p className="domain-name">{domain}</p>
            {zoneId && <code className="zone-id">Zone ID: {zoneId}</code>}
            {lastSynced && (
              <div className="sync-status">
                {fromCache ? '🔄' : '🌐'} Last synced: {new Date(lastSynced).toLocaleString()}
                {fromCache && <span style={{color: '#666', fontSize: '0.85em'}}> (cached)</span>}
              </div>
            )}
          </div>
        </div>
        <div style={{ display: 'flex', gap: '10px' }}>
          <button 
            className="btn-secondary" 
            onClick={handleRefresh}
            disabled={loading}
            title="Refresh from Cloudflare"
          >
            🔄 Refresh
          </button>
          <button className="btn-primary" onClick={handleAddRecord}>
            + Add Record
          </button>
        </div>
      </div>
 
      {error && (
        <div className={`error-banner ${records.length > 0 ? 'warning-banner' : ''}`}>
          <span>{error}</span>
          {records.length > 0 && (
            <button 
              className="btn-link" 
              onClick={handleRefresh}
              style={{ marginLeft: '10px', textDecoration: 'underline' }}
            >
              Try refreshing
            </button>
          )}
        </div>
      )}
 
      <div className="dns-controls">
        <input
          type="text"
          placeholder="Search records..."
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className="search-input"
        />
        <select
          value={typeFilter}
          onChange={(e) => setTypeFilter(e.target.value)}
          className="type-filter"
        >
          <option value="ALL">All Types</option>
          {DNS_TYPES.map(type => (
            <option key={type} value={type}>{type}</option>
          ))}
        </select>
      </div>
 
      {loading ? (
        <div className="loading-spinner">Loading DNS records...</div>
      ) : (
        <div className="dns-records-table-container">
          <table className="dns-records-table">
            <thead>
              <tr>
                <th>Type</th>
                <th>Name</th>
                <th>Content</th>
                <th>TTL</th>
                <th>Proxy</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {filteredRecords.length === 0 ? (
                <tr>
                  <td colSpan="6" className="no-records">
                    No DNS records found
                  </td>
                </tr>
              ) : (
                filteredRecords.map((record) => (
                  <tr key={record.id}>
                    <td>
                      <span className={`record-type type-${record.type}`}>
                        {record.type}
                      </span>
                    </td>
                    <td className="record-name">{record.name}</td>
                    <td className="record-content">{record.content}</td>
                    <td>{record.ttl === 1 ? 'Auto' : `${record.ttl}s`}</td>
                    <td>
                      {(record.type === 'A' || record.type === 'AAAA' || record.type === 'CNAME') && (
                        <span className={record.proxied ? 'proxied-yes' : 'proxied-no'}>
                          {record.proxied ? '✓ Proxied' : '○ DNS Only'}
                        </span>
                      )}
                    </td>
                    <td className="record-actions">
                      <button
                        className="btn-edit"
                        onClick={() => handleEditRecord(record)}
                        title="Edit record"
                      >
                        Edit
                      </button>
                      <button
                        className="btn-delete"
                        onClick={() => handleDeleteRecord(record.id)}
                        title="Delete record"
                      >
                        Delete
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      )}
 
      {showAddModal && (
        <div className="modal-overlay" onClick={() => setShowAddModal(false)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <div className="modal-header">
              <h2>{editingRecord ? 'Edit DNS Record' : 'Add DNS Record'}</h2>
              <button className="modal-close" onClick={() => setShowAddModal(false)}>×</button>
            </div>
 
            <form onSubmit={handleSubmit} className="dns-form">
              <div className="form-group">
                <label>Type *</label>
                <select
                  value={formData.type}
                  onChange={(e) => setFormData({ ...formData, type: e.target.value })}
                  required
                >
                  {DNS_TYPES.map(type => (
                    <option key={type} value={type}>{type}</option>
                  ))}
                </select>
              </div>
 
              <div className="form-group">
                <label>Name *</label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  placeholder={`subdomain.${domain} or @ for root`}
                  required
                />
                <small>Use @ for the root domain</small>
              </div>
 
              <div className="form-group">
                <label>Content *</label>
                <input
                  type="text"
                  value={formData.content}
                  onChange={(e) => setFormData({ ...formData, content: e.target.value })}
                  placeholder={
                    formData.type === 'A' ? '192.0.2.1' :
                    formData.type === 'AAAA' ? '2001:db8::1' :
                    formData.type === 'CNAME' ? 'example.com' :
                    formData.type === 'MX' ? 'mail.example.com' :
                    formData.type === 'TXT' ? 'verification string' :
                    'Record value'
                  }
                  required
                />
              </div>
 
              {formData.type === 'MX' && (
                <div className="form-group">
                  <label>Priority *</label>
                  <input
                    type="number"
                    value={formData.priority}
                    onChange={(e) => setFormData({ ...formData, priority: parseInt(e.target.value) })}
                    min="0"
                    max="65535"
                    required
                  />
                </div>
              )}
 
              <div className="form-group">
                <label>TTL</label>
                <select
                  value={formData.ttl}
                  onChange={(e) => setFormData({ ...formData, ttl: parseInt(e.target.value) })}
                >
                  {TTL_PRESETS.map(preset => (
                    <option key={preset.value} value={preset.value}>
                      {preset.label}
                    </option>
                  ))}
                </select>
              </div>
 
              {(formData.type === 'A' || formData.type === 'AAAA' || formData.type === 'CNAME') && (
                <div className="form-group checkbox-group">
                  <label>
                    <input
                      type="checkbox"
                      checked={formData.proxied}
                      onChange={(e) => setFormData({ ...formData, proxied: e.target.checked })}
                    />
                    Proxy through Cloudflare (orange cloud)
                  </label>
                  <small>Enable Cloudflare's performance and security features</small>
                </div>
              )}
 
              <div className="modal-actions">
                <button type="button" className="btn-secondary" onClick={() => setShowAddModal(false)}>
                  Cancel
                </button>
                <button type="submit" className="btn-primary">
                  {editingRecord ? 'Update Record' : 'Create Record'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
      </div>
    </MainLayout>
  );
}