Gecko [ aodai.devttt.com ]

Name	Size	Permission
addDeleteDNSRecords.html	42.34 KB	-rw-r--r--
addDeleteDNSRecordsCloudFlare....	46.73 KB	-rw-r--r--
configureDefaultNameServers.ht...	21.38 KB	-rw-r--r--
createDNSZone.html	21.98 KB	-rw-r--r--
createNameServer.html	20.97 KB	-rw-r--r--
deleteDNSZone.html	8 KB	-rw-r--r--
index.html	7.57 KB	-rw-r--r--
resetdnsconf.html	14.68 KB	-rw-r--r--

Code Editor : addDeleteDNSRecordsCloudFlare.html

{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "CloudFlare DNS Records - CyberPanel" %}{% endblock %}
{% block content %}

{% load static %}
    {% get_current_language as LANGUAGE_CODE %}

<div class="modern-container" ng-controller="addModifyDNSRecordsCloudFlare">
        <div class="page-header">
            <h1 class="page-title">
                <i class="fas fa-globe"></i>
                {% trans "CloudFlare DNS Management" %}
                <a target="_blank" href="https://cyberpanel.net/KnowledgeBase/home/manage-dns-in-cyberpanel/" class="docs-link">
                    <i class="fas fa-book"></i>
                    {% trans "DNS Docs" %}
                </a>
            </h1>
            <p class="page-subtitle">{% trans "Manage DNS records for your domains through CloudFlare integration" %}</p>
        </div>

<div class="main-card">
            <div class="card-header">
                <h2 class="card-title">
                    <i class="fas fa-cloud"></i>
                    {% trans "CloudFlare DNS Records" %}
                    <span ng-show="recordsLoading" class="loading-spinner"></span>
                </h2>
            </div>
            <div class="card-body">
                {% if not status %}
                    <div class="disabled-notice">
                        <i class="fas fa-exclamation-triangle fa-3x mb-3" style="color: #ffa000;"></i>
                        <h3>{% trans "PowerDNS is disabled" %}</h3>
                        <p class="mb-3">{% trans "You need to enable PowerDNS to manage DNS records" %}</p>
                        <a href="{% url 'managePowerDNS' %}" class="btn-primary">
                            <i class="fas fa-power-off"></i>
                            {% trans "Enable PowerDNS Now" %}
                        </a>
                    </div>
                {% else %}
                    {% if not CloudFlare %}
                        <div class="form-section">
                            <h3 class="mb-4" style="color: var(--text-primary, #1e293b); font-weight: 600;">
                                <i class="fas fa-cog"></i>
                                {% trans "CloudFlare Configuration" %}
                            </h3>
                            
                            <form action="/" method="post">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "CloudFlare Email" %}</label>
                                            <input name="cfEmail" type="email" class="form-control" ng-model="cfEmail" 
                                                   placeholder="your@email.com" required>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label class="form-label">{% trans "API Token" %}</label>
                                            <input name="cfToken" type="text" class="form-control" ng-model="cfToken" 
                                                   placeholder="Enter your CloudFlare API token" required>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Sync Local Records to CloudFlare" %}</label>
                                            <select ng-model="cfSync" class="form-control">
                                                <option value="Enable">{% trans "Enable" %}</option>
                                                <option value="Disable">{% trans "Disable" %}</option>
                                            </select>
                                        </div>
                                        
                                        <button type="button" ng-click="saveCFConfigs()" class="btn-primary">
                                            <i class="fas fa-save"></i>
                                            {% trans "Save Configuration" %}
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    {% else %}
                        <div class="modern-tabs">
                            <button class="modern-tab active" onclick="switchTab(this, 'manage-dns')">
                                <i class="fas fa-globe"></i>
                                {% trans "Manage DNS" %}
                            </button>
                            <button class="modern-tab" onclick="switchTab(this, 'api-settings')">
                                <i class="fas fa-cogs"></i>
                                {% trans "API Settings" %}
                            </button>
                        </div>
                        
                        <div id="manage-dns" class="tab-content active">
                            <div class="form-section">
                                <div class="row mb-4">
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Select Domain" %}</label>
                                            <select ng-change="fetchRecords()" ng-model="selectedZone" class="form-control">
                                                <option value="">{% trans "Choose a domain..." %}</option>
                                                {% for items in domainsList %}
                                                    <option value="{{ items }}">{{ items }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4" ng-hide="addRecordsBox">
                                        <button type="button" ng-click="syncCF()" class="btn-primary w-100" style="margin-top: 30px;">
                                            <i class="fas fa-sync"></i>
                                            {% trans "Sync to CloudFlare" %}
                                        </button>
                                    </div>
                                </div>
                                
                                <div ng-hide="addRecordsBox">
                                    <h4 class="mb-3" style="color: var(--text-primary, #1e293b); font-weight: 600;">
                                        <i class="fas fa-plus-circle"></i>
                                        {% trans "Add DNS Record" %}
                                    </h4>
                                    
                                    <div class="record-tabs">
                                        <button class="record-tab active" id="aRecord" ng-click="fetchRecordsTabs('aRecord')">A</button>
                                        <button class="record-tab" id="aaaaRecord" ng-click="fetchRecordsTabs('aaaaRecord')">AAAA</button>
                                        <button class="record-tab" id="cNameRecord" ng-click="fetchRecordsTabs('cNameRecord')">CNAME</button>
                                        <button class="record-tab" id="mxRecord" ng-click="fetchRecordsTabs('mxRecord')">MX</button>
                                        <button class="record-tab" id="txtRecord" ng-click="fetchRecordsTabs('txtRecord')">TXT</button>
                                        <button class="record-tab" id="spfRecord" ng-click="fetchRecordsTabs('spfRecord')">SPF</button>
                                        <button class="record-tab" id="nsRecord" ng-click="fetchRecordsTabs('nsRecord')">NS</button>
                                        <button class="record-tab" id="soaRecord" ng-click="fetchRecordsTabs('soaRecord')">SOA</button>
                                        <button class="record-tab" id="srvRecord" ng-click="fetchRecordsTabs('srvRecord')">SRV</button>
                                        <button class="record-tab" id="caaRecord" ng-click="fetchRecordsTabs('caaRecord')">CAA</button>
                                    </div>
                                    
                                    
                                    <div class="record-form aRecord active">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name" %}</label>
                                            <input type="text" class="form-control" ng-model="recordName" placeholder="@" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "TTL" %}</label>
                                            <input type="number" class="form-control" ng-model="ttl" placeholder="3600" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "IP Address" %}</label>
                                            <input type="text" class="form-control" ng-model="recordContentA" placeholder="192.168.1.1" required>
                                        </div>
                                        <button type="button" ng-click="addDNSRecord('A')" class="btn-primary">
                                            <i class="fas fa-plus"></i> {% trans "Add Record" %}
                                        </button>
                                    </div>
                                    
                                    
                                    <div class="record-form aaaaRecord">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name" %}</label>
                                            <input type="text" class="form-control" ng-model="recordName" placeholder="@" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "TTL" %}</label>
                                            <input type="number" class="form-control" ng-model="ttl" placeholder="3600" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "IPv6 Address" %}</label>
                                            <input type="text" class="form-control" ng-model="recordContentAAAA" placeholder="2001:db8::1" required>
                                        </div>
                                        <button type="button" ng-click="addDNSRecord('AAAA')" class="btn-primary">
                                            <i class="fas fa-plus"></i> {% trans "Add Record" %}
                                        </button>
                                    </div>
                                    
                                    
                                    <div class="record-form cNameRecord">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name" %}</label>
                                            <input type="text" class="form-control" ng-model="recordName" placeholder="www" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "TTL" %}</label>
                                            <input type="number" class="form-control" ng-model="ttl" placeholder="3600" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Target Domain" %}</label>
                                            <input type="text" class="form-control" ng-model="recordContentCNAME" placeholder="example.com" required>
                                        </div>
                                        <button type="button" ng-click="addDNSRecord('CNAME')" class="btn-primary">
                                            <i class="fas fa-plus"></i> {% trans "Add Record" %}
                                        </button>
                                    </div>
                                    
                                    
                                    <div class="record-form mxRecord">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name" %}</label>
                                            <input type="text" class="form-control" ng-model="recordName" placeholder="@" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "TTL" %}</label>
                                            <input type="number" class="form-control" ng-model="ttl" placeholder="3600" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Priority" %}</label>
                                            <input type="number" class="form-control" ng-model="priority" placeholder="10" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Mail Server" %}</label>
                                            <input type="text" class="form-control" ng-model="recordContentMX" placeholder="mail.example.com" required>
                                        </div>
                                        <button type="button" ng-click="addDNSRecord('MX')" class="btn-primary">
                                            <i class="fas fa-plus"></i> {% trans "Add Record" %}
                                        </button>
                                    </div>
                                    
                                    
                                    <div class="record-form txtRecord">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name" %}</label>
                                            <input type="text" class="form-control" ng-model="recordName" placeholder="@" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "TTL" %}</label>
                                            <input type="number" class="form-control" ng-model="ttl" placeholder="3600" required>
                                        </div>
                                        <div class="form-group" style="flex: 2;">
                                            <label class="form-label">{% trans "Text Value" %}</label>
                                            <input type="text" class="form-control" ng-model="recordContentTXT" placeholder="v=spf1 include:_spf.example.com ~all" required>
                                        </div>
                                        <button type="button" ng-click="addDNSRecord('TXT')" class="btn-primary">
                                            <i class="fas fa-plus"></i> {% trans "Add Record" %}
                                        </button>
                                    </div>
                                    
                                    
                                    <div class="record-form spfRecord">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name" %}</label>
                                            <input type="text" class="form-control" ng-model="recordName" placeholder="@" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "TTL" %}</label>
                                            <input type="number" class="form-control" ng-model="ttl" placeholder="3600" required>
                                        </div>
                                        <div class="form-group" style="flex: 2;">
                                            <label class="form-label">{% trans "SPF Policy" %}</label>
                                            <input type="text" class="form-control" ng-model="recordContentSPF" placeholder="v=spf1 include:_spf.example.com ~all" required>
                                        </div>
                                        <button type="button" ng-click="addDNSRecord('SPF')" class="btn-primary">
                                            <i class="fas fa-plus"></i> {% trans "Add Record" %}
                                        </button>
                                    </div>
                                    
                                    
                                    <div class="record-form nsRecord">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name" %}</label>
                                            <input type="text" class="form-control" ng-model="selectedZone" disabled>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "TTL" %}</label>
                                            <input type="number" class="form-control" ng-model="ttl" placeholder="3600" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name Server" %}</label>
                                            <input type="text" class="form-control" ng-model="recordContentNS" placeholder="ns1.example.com" required>
                                        </div>
                                        <button type="button" ng-click="addDNSRecord('NS')" class="btn-primary">
                                            <i class="fas fa-plus"></i> {% trans "Add Record" %}
                                        </button>
                                    </div>
                                    
                                    
                                    <div class="record-form soaRecord">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name" %}</label>
                                            <input type="text" class="form-control" ng-model="selectedZone" disabled>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "TTL" %}</label>
                                            <input type="number" class="form-control" ng-model="ttl" placeholder="3600" required>
                                        </div>
                                        <div class="form-group" style="flex: 2;">
                                            <label class="form-label">{% trans "SOA Value" %}</label>
                                            <input type="text" class="form-control" ng-model="recordContentSOA" placeholder="ns1.example.com. admin.example.com. 2023010101 3600 1800 604800 86400" required>
                                        </div>
                                        <button type="button" ng-click="addDNSRecord('SOA')" class="btn-primary">
                                            <i class="fas fa-plus"></i> {% trans "Add Record" %}
                                        </button>
                                    </div>
                                    
                                    
                                    <div class="record-form srvRecord">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name" %}</label>
                                            <input type="text" class="form-control" ng-model="recordName" placeholder="_service._tcp" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "TTL" %}</label>
                                            <input type="number" class="form-control" ng-model="ttl" placeholder="3600" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Priority" %}</label>
                                            <input type="number" class="form-control" ng-model="priority" placeholder="10" required>
                                        </div>
                                        <div class="form-group" style="flex: 2;">
                                            <label class="form-label">{% trans "Content" %}</label>
                                            <input type="text" class="form-control" ng-model="recordContentSRV" placeholder="0 5060 sipserver.example.com" required>
                                        </div>
                                        <button type="button" ng-click="addDNSRecord('SRV')" class="btn-primary">
                                            <i class="fas fa-plus"></i> {% trans "Add Record" %}
                                        </button>
                                    </div>
                                    
                                    
                                    <div class="record-form caaRecord">
                                        <div class="form-group">
                                            <label class="form-label">{% trans "Name" %}</label>
                                            <input type="text" class="form-control" ng-model="recordName" placeholder="@" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">{% trans "TTL" %}</label>
                                            <input type="number" class="form-control" ng-model="ttl" placeholder="3600" required>
                                        </div>
                                        <div class="form-group" style="flex: 2;">
                                            <label class="form-label">{% trans "CAA Value" %}</label>
                                            <input type="text" class="form-control" ng-model="recordContentCAA" placeholder='0 issue "letsencrypt.org"' required>
                                        </div>
                                        <button type="button" ng-click="addDNSRecord('CAA')" class="btn-primary">
                                            <i class="fas fa-plus"></i> {% trans "Add Record" %}
                                        </button>
                                    </div>

<div ng-hide="currentRecords" style="margin-top: 3rem;">
                                        <h4 class="mb-3" style="color: var(--text-primary, #1e293b); font-weight: 600;">
                                            <i class="fas fa-list"></i>
                                            {% trans "DNS Records" %}
                                        </h4>
                                        
                                        <table class="records-table">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "Name" %}</th>
                                                    <th>{% trans "Type" %}</th>
                                                    <th>{% trans "TTL" %}</th>
                                                    <th>{% trans "Value" %}</th>
                                                    <th>{% trans "Priority" %}</th>
                                                    <th>{% trans "Proxy" %}</th>
                                                    <th style="text-align: center;">{% trans "Actions" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="record in records track by $index">
                                                    <td ng-bind="record.name"></td>
                                                    <td>
                                                        <span style="padding: 0.25rem 0.75rem; background: var(--bg-hover, #f0f1ff); color: #5b5fcf; border-radius: 4px; font-weight: 500; font-size: 0.75rem;">
                                                            {{ record.type }}
                                                        </span>
                                                    </td>
                                                    <td ng-bind="record.ttl"></td>
                                                    <td style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" ng-bind="record.content" title="{{ record.content }}"></td>
                                                    <td ng-bind="record.priority || '-'"></td>
                                                    <td>
                                                        <input class="proxy-toggle" 
                                                               ng-click="enableProxy(record.name, record.proxy)" 
                                                               ng-disabled="!record.proxiable" 
                                                               ng-checked="record.proxy" 
                                                               type="checkbox">
                                                    </td>
                                                    <td style="text-align: center;">
                                                        <i class="fas fa-trash delete-icon" 
                                                           style="color: #ef4444;" 
                                                           ng-click="deleteRecord(record.id)"
                                                           title="{% trans 'Delete Record' %}"></i>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

</div>
                                
                                
                                <div style="margin-top: 2rem;">
                                    <div ng-hide="canNotFetchRecords" class="alert alert-danger">
                                        <i class="fas fa-exclamation-circle"></i>
                                        {% trans "Cannot fetch records. Error message:" %} {$ errorMessage $}
                                    </div>

<div ng-hide="couldNotAddRecord" class="alert alert-danger">
                                        <i class="fas fa-exclamation-circle"></i>
                                        {% trans "Cannot add record. Error message:" %} {$ errorMessage $}
                                    </div>

<div ng-hide="recordsFetched" class="alert alert-success">
                                        <i class="fas fa-check-circle"></i>
                                        {% trans "Records successfully fetched for" %} <strong>{$ domainFeteched $}</strong>
                                    </div>

<div ng-hide="recordDeleted" class="alert alert-success">
                                        <i class="fas fa-check-circle"></i>
                                        {% trans "Record Successfully Deleted" %}
                                    </div>

<div ng-hide="couldNotDeleteRecords" class="alert alert-danger">
                                        <i class="fas fa-exclamation-circle"></i>
                                        {% trans "Cannot delete record. Error message:" %} {$ errorMessage $}
                                    </div>

<div ng-hide="recordAdded" class="alert alert-success">
                                        <i class="fas fa-check-circle"></i>
                                        {% trans "Record Successfully Added" %}
                                    </div>

<div ng-hide="couldNotConnect" class="alert alert-warning">
                                        <i class="fas fa-exclamation-triangle"></i>
                                        {% trans "Could not connect to server. Please refresh this page." %}
                                    </div>
                                </div>

</div>
                        </div>
                        
                        <div id="api-settings" class="tab-content">
                            <div class="form-section">
                                <h4 class="mb-4" style="color: var(--text-primary, #1e293b); font-weight: 600;">
                                    <i class="fas fa-key"></i>
                                    {% trans "CloudFlare API Configuration" %}
                                </h4>
                                
                                <form action="/" method="post">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <label class="form-label">{% trans "CloudFlare Email" %}</label>
                                                <input ng-init="cfEmail='{{ cfEmail }}'" name="cfEmail" type="email" 
                                                       class="form-control" ng-model="cfEmail" 
                                                       placeholder="your@email.com" required>
                                            </div>
                                            
                                            <div class="form-group">
                                                <label class="form-label">{% trans "API Token" %}</label>
                                                <input ng-init="cfToken='{{ cfToken }}'" name="cfToken" type="text" 
                                                       class="form-control" ng-model="cfToken" 
                                                       placeholder="Enter your CloudFlare API token" required>
                                            </div>
                                            
                                            <div class="form-group">
                                                <label class="form-label">{% trans "Sync Local Records to CloudFlare" %}</label>
                                                <select ng-model="cfSync" class="form-control">
                                                    <option value="Enable">{% trans "Enable" %}</option>
                                                    <option value="Disable">{% trans "Disable" %}</option>
                                                </select>
                                            </div>
                                            
                                            <button type="button" ng-click="saveCFConfigs()" class="btn-primary">
                                                <i class="fas fa-save"></i>
                                                {% trans "Save Configuration" %}
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

{% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    
    <script>
        function switchTab(tab, contentId) {
            // Remove active class from all tabs
            document.querySelectorAll('.modern-tab').forEach(t => {
                t.classList.remove('active');
            });
            
            // Hide all tab contents
            document.querySelectorAll('.tab-content').forEach(c => {
                c.classList.remove('active');
            });
            
            // Add active class to clicked tab
            tab.classList.add('active');
            
            // Show corresponding content
            document.getElementById(contentId).classList.add('active');
        }
        
        // Handle record type tabs
        document.addEventListener('DOMContentLoaded', function() {
            const recordTabs = document.querySelectorAll('.record-tab');
            const recordForms = document.querySelectorAll('.record-form');
            
            recordTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const recordType = this.id;
                    
                    // Remove active class from all tabs and forms
                    recordTabs.forEach(t => t.classList.remove('active'));
                    recordForms.forEach(f => f.classList.remove('active'));
                    
                    // Add active class to clicked tab and corresponding form
                    this.classList.add('active');
                    const form = document.querySelector('.' + recordType);
                    if (form) {
                        form.classList.add('active');
                    }
                });
            });
        });
    </script>

{% endblock %}

${this.title}

Code Editor : addDeleteDNSRecordsCloudFlare.html