up

pkg/services/cloudflare_service.go

@@ -180,14 +180,21 @@ type CFDNSRecord struct {
 	TagsModifiedOn    string               `json:"tags_modified_on,omitempty"`
 }
 
-// CFSSLStatus representa el estado SSL de una zona.
+// CFSSLStatus representa un certificate pack de una zona.
 type CFSSLStatus struct {
-	ID          string   `json:"id"`
+	ID                   string   `json:"id"`
-	Type        string   `json:"type"`
+	Type                 string   `json:"type"`    // universal, advanced, custom, sni_custom
-	Status      string   `json:"status"`
+	Hosts                []string `json:"hosts"`
-	Hosts       []string `json:"hosts"`
+	Status               string   `json:"status"`  // active, pending_validation, deleted
-	PrimaryCert string   `json:"primary_certificate"`
+	ValidationMethod     string   `json:"validation_method,omitempty"`
-	ExpiresOn   string   `json:"expires_on"`
+	ValidityDays         int      `json:"validity_days,omitempty"`
+	CertificateAuthority string   `json:"certificate_authority,omitempty"`
+	Wildcard             bool     `json:"wildcard,omitempty"`
+}
+
+// CFUniversalSSL representa la configuración de Universal SSL de una zona.
+type CFUniversalSSL struct {
+	Enabled bool `json:"enabled"`
 }
 
 // CFFirewallRule representa una regla de firewall (Access Rules).
@@ -375,15 +382,27 @@ func (c *CloudflareClient) GetDNSRecords(zoneID string) ([]CFDNSRecord, error) {
 }
 
 // GetSSLCertificates devuelve los certificate packs de una zona.
+// Incluye ?status=all para ver packs en cualquier estado (requerido en planes Free).
 func (c *CloudflareClient) GetSSLCertificates(zoneID string) ([]CFSSLStatus, error) {
 	var certs []CFSSLStatus
-	path := fmt.Sprintf("/zones/%s/ssl/certificate_packs", zoneID)
+	path := fmt.Sprintf("/zones/%s/ssl/certificate_packs?status=all", zoneID)
 	if err := c.get(path, &certs); err != nil {
 		return nil, err
 	}
 	return certs, nil
 }
 
+// GetUniversalSSLSettings devuelve si el Universal SSL está activo en la zona.
+// Funciona en todos los planes. Útil como fallback cuando certificate_packs no está disponible.
+func (c *CloudflareClient) GetUniversalSSLSettings(zoneID string) (*CFUniversalSSL, error) {
+	var result CFUniversalSSL
+	path := fmt.Sprintf("/zones/%s/ssl/universal/settings", zoneID)
+	if err := c.get(path, &result); err != nil {
+		return nil, err
+	}
+	return &result, nil
+}
+
 // GetFirewallRules devuelve las reglas de acceso IP de una zona.
 func (c *CloudflareClient) GetFirewallRules(zoneID string) ([]CFFirewallRule, error) {
 	var rules []CFFirewallRule

resources/views/cloudflare.html

@@ -124,6 +124,19 @@
 
         <!-- ─── TAB: DNS ─── -->
         <div x-show="activeTab==='dns'">
+            <!-- Toolbar -->
+            <div class="flex items-center justify-between gap-3 mb-3">
+                <input x-model="dnsSearch" type="search" placeholder="Filtrar por nombre, tipo o contenido…"
+                    class="border rounded px-3 py-1.5 text-xs w-full max-w-sm" />
+                <button @click="openDnsModal()"
+                    class="flex items-center gap-1.5 px-3 py-1.5 text-white text-xs rounded shrink-0"
+                    style="background-color:#8eb02f"
+                    onmouseover="this.style.backgroundColor='#6d8c24'"
+                    onmouseout="this.style.backgroundColor='#8eb02f'">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+                    Nuevo registro
+                </button>
+            </div>
             <div x-show="dnsRecords.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Selecciona una zona y haz clic en "Cargar".</div>
             <div class="overflow-x-auto">
                 <table class="table-auto w-full text-xs" x-show="dnsRecords.length > 0">
@@ -134,10 +147,11 @@
                             <th class="py-2 px-3">Contenido</th>
                             <th class="py-2 px-3">Proxy</th>
                             <th class="py-2 px-3">TTL</th>
+                            <th class="py-2 px-3">Acciones</th>
                         </tr>
                     </thead>
                     <tbody>
-                        <template x-for="r in dnsRecords" :key="r.id">
+                        <template x-for="r in dnsFiltered" :key="r.id">
                             <tr class="border-b hover:bg-gray-50">
                                 <td class="py-2 px-3"><span class="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded font-mono text-xs" x-text="r.type"></span></td>
                                 <td class="py-2 px-3 font-mono" x-text="r.name"></td>
@@ -148,6 +162,18 @@
                                     </span>
                                 </td>
                                 <td class="py-2 px-3" x-text="r.ttl === 1 ? 'Auto' : r.ttl"></td>
+                                <td class="py-2 px-3">
+                                    <div class="flex items-center gap-2">
+                                        <button @click="openDnsModal(r)" title="Editar"
+                                            class="text-blue-500 hover:text-blue-700 transition">
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125"/></svg>
+                                        </button>
+                                        <button @click="deleteDns(r)" title="Eliminar"
+                                            class="text-red-400 hover:text-red-600 transition">
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
+                                        </button>
+                                    </div>
+                                </td>
                             </tr>
                         </template>
                     </tbody>
@@ -157,19 +183,25 @@
 
         <!-- ─── TAB: SSL ─── -->
         <div x-show="activeTab==='ssl'">
-            <div x-show="sslCerts.length === 0 && !loading" class="text-sm text-gray-400 py-8 text-center">Selecciona una zona y haz clic en "Cargar".</div>
+            <div x-show="sslCerts.length === 0 && !sslUniversal && !loading" class="text-sm text-gray-400 py-8 text-center">Selecciona una zona y haz clic en "Cargar".</div>
+            <!-- Fallback: Universal SSL -->
+            <div x-show="sslUniversal" class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
+                <p class="font-medium mb-1">Universal SSL</p>
+                <p x-text="sslUniversal?.note || (sslUniversal?.enabled ? 'Universal SSL activo' : 'Universal SSL inactivo')"></p>
+            </div>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <template x-for="c in sslCerts" :key="c.id">
                     <div class="border rounded-xl p-4 bg-white shadow-sm">
                         <div class="flex items-center justify-between mb-2">
-                            <span class="font-semibold text-sm" x-text="c.type || 'Certificado'"></span>
+                            <span class="font-semibold text-sm capitalize" x-text="c.type || 'Certificado'"></span>
                             <span class="px-2 py-0.5 rounded-full text-xs font-medium"
                                 :class="c.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'"
                                 x-text="c.status"></span>
                         </div>
                         <div class="space-y-1 text-xs text-gray-500">
                             <div class="flex justify-between"><span>Hosts cubiertos</span><span class="text-right truncate max-w-[14rem]" x-text="(c.hosts||[]).join(', ')"></span></div>
-                            <div class="flex justify-between"><span>Vigencia</span><span x-text="c.expires_on || '—'"></span></div>
+                            <div class="flex justify-between" x-show="c.certificate_authority"><span>CA</span><span x-text="c.certificate_authority || '—'"></span></div>
+                            <div class="flex justify-between" x-show="c.validity_days"><span>Vigencia</span><span x-text="c.validity_days ? c.validity_days + ' días' : '—'"></span></div>
                             <div class="flex justify-between"><span>ID</span><span class="font-mono" x-text="c.id || '—'"></span></div>
                         </div>
                     </div>
@@ -212,6 +244,72 @@
 
     </div><!-- /container -->
 
+    <!-- ─── Modal: DNS Crear / Editar ─── -->
+    <div x-show="dnsModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
+        @click.self="dnsModal=false">
+        <div class="bg-white rounded-xl shadow-xl w-full max-w-lg">
+            <div class="flex items-center justify-between px-5 py-4 border-b">
+                <h3 class="font-semibold text-sm" x-text="dnsForm.id ? 'Editar registro DNS' : 'Nuevo registro DNS'"></h3>
+                <button @click="dnsModal=false" class="text-gray-400 hover:text-gray-600">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
+                </button>
+            </div>
+            <form @submit.prevent="saveDns()" class="p-5 space-y-3">
+                <div class="grid grid-cols-2 gap-3">
+                    <div>
+                        <label class="text-xs font-medium text-gray-600">Tipo *</label>
+                        <select x-model="dnsForm.type" required class="mt-1 w-full border rounded px-3 py-2 text-sm">
+                            <template x-for="t in ['A','AAAA','CNAME','TXT','MX','NS','SRV','CAA','PTR']" :key="t">
+                                <option :value="t" x-text="t"></option>
+                            </template>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="text-xs font-medium text-gray-600">TTL</label>
+                        <select x-model.number="dnsForm.ttl" class="mt-1 w-full border rounded px-3 py-2 text-sm">
+                            <option value="1">Auto</option>
+                            <option value="60">1 min</option>
+                            <option value="300">5 min</option>
+                            <option value="600">10 min</option>
+                            <option value="1800">30 min</option>
+                            <option value="3600">1 hora</option>
+                            <option value="86400">1 día</option>
+                        </select>
+                    </div>
+                </div>
+                <div>
+                    <label class="text-xs font-medium text-gray-600">Nombre *</label>
+                    <input x-model="dnsForm.name" required placeholder="@ o subdominio (ej: www)" class="mt-1 w-full border rounded px-3 py-2 text-sm font-mono" />
+                </div>
+                <div>
+                    <label class="text-xs font-medium text-gray-600">Contenido *</label>
+                    <input x-model="dnsForm.content" required :placeholder="dnsForm.type === 'A' ? '1.2.3.4' : dnsForm.type === 'MX' ? 'mail.ejemplo.com' : 'valor'" class="mt-1 w-full border rounded px-3 py-2 text-sm font-mono" />
+                </div>
+                <div x-show="dnsForm.type === 'MX' || dnsForm.type === 'SRV'">
+                    <label class="text-xs font-medium text-gray-600">Prioridad</label>
+                    <input x-model.number="dnsForm.priority" type="number" min="0" class="mt-1 w-full border rounded px-3 py-2 text-sm" />
+                </div>
+                <div class="flex items-center gap-2">
+                    <label class="relative inline-flex items-center cursor-pointer">
+                        <input type="checkbox" x-model="dnsForm.proxied" class="sr-only peer" />
+                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:bg-orange-500 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-4"></div>
+                    </label>
+                    <span class="text-xs" x-text="dnsForm.proxied ? 'Proxied (nube naranja)' : 'DNS only'"></span>
+                </div>
+                <div>
+                    <label class="text-xs font-medium text-gray-600">Comentario <span class="font-normal text-gray-400">(opcional)</span></label>
+                    <input x-model="dnsForm.comment" placeholder="Descripción del registro" class="mt-1 w-full border rounded px-3 py-2 text-sm" />
+                </div>
+                <div class="flex justify-end gap-3 pt-2 border-t">
+                    <button type="button" @click="dnsModal=false" class="px-4 py-2 border rounded text-sm">Cancelar</button>
+                    <button type="submit" :disabled="loading" class="px-5 py-2 text-white text-sm rounded" style="background-color:#8eb02f">
+                        <span x-text="loading ? 'Guardando…' : (dnsForm.id ? 'Actualizar' : 'Crear')"></span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
     <!-- ─── Modal: Diagnóstico de Token ─── -->
     <div x-show="diagnosModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
         @click.self="diagnosModal=false">
@@ -388,9 +486,12 @@ document.addEventListener('alpine:init', () => {
         zones: [],
         dnsRecords: [],
         sslCerts: [],
+        sslUniversal: null,
         fwRules: [],
         selectedZoneId: '',
-        configModal: false,
+        dnsSearch: '',
+        dnsModal: false,
+        dnsForm: { id: '', type: 'A', name: '', content: '', ttl: 1, proxied: false, priority: 0, comment: '' },
         diagnosModal: false,
         diagnosLoading: false,
         diagnosData: null,
@@ -423,6 +524,16 @@ document.addEventListener('alpine:init', () => {
             } catch (_) {}
         },
 
+        get dnsFiltered() {
+            const q = this.dnsSearch.toLowerCase();
+            if (!q) return this.dnsRecords;
+            return this.dnsRecords.filter(r =>
+                (r.name||'').toLowerCase().includes(q) ||
+                (r.type||'').toLowerCase().includes(q) ||
+                (r.content||'').toLowerCase().includes(q)
+            );
+        },
+
         setTab(tab) {
             this.activeTab = tab;
         },
@@ -444,6 +555,7 @@ document.addEventListener('alpine:init', () => {
                 } else if (this.activeTab === 'ssl' && this.selectedZoneId) {
                     const res = await axios.get('/app/cloudflare/zones/' + this.selectedZoneId + '/ssl');
                     this.sslCerts = res.data.data || [];
+                    this.sslUniversal = res.data.universal_ssl || null;
                 } else if (this.activeTab === 'firewall' && this.selectedZoneId) {
                     const res = await axios.get('/app/cloudflare/zones/' + this.selectedZoneId + '/firewall');
                     this.fwRules = res.data.data || [];
@@ -455,6 +567,65 @@ document.addEventListener('alpine:init', () => {
             this.loading = false;
         },
 
+        openDnsModal(record = null) {
+            if (record) {
+                this.dnsForm = {
+                    id:       record.id,
+                    type:     record.type,
+                    name:     record.name,
+                    content:  record.content,
+                    ttl:      record.ttl ?? 1,
+                    proxied:  record.proxied ?? false,
+                    priority: record.priority ?? 0,
+                    comment:  record.comment ?? '',
+                };
+            } else {
+                this.dnsForm = { id: '', type: 'A', name: '', content: '', ttl: 1, proxied: false, priority: 0, comment: '' };
+            }
+            this.dnsModal = true;
+        },
+
+        async saveDns() {
+            if (!this.selectedZoneId) return;
+            this.loading = true;
+            const payload = {
+                type:     this.dnsForm.type,
+                name:     this.dnsForm.name,
+                content:  this.dnsForm.content,
+                ttl:      this.dnsForm.ttl,
+                proxied:  this.dnsForm.proxied,
+                priority: this.dnsForm.priority || 0,
+                comment:  this.dnsForm.comment,
+            };
+            try {
+                if (this.dnsForm.id) {
+                    await axios.put(`/app/cloudflare/zones/${this.selectedZoneId}/dns/${this.dnsForm.id}`, payload);
+                    this.showToast('Registro actualizado');
+                } else {
+                    await axios.post(`/app/cloudflare/zones/${this.selectedZoneId}/dns`, payload);
+                    this.showToast('Registro creado');
+                }
+                this.dnsModal = false;
+                await this.loadTab();
+            } catch (e) {
+                this.showToast(e.response?.data?.error || 'Error al guardar registro', 'error');
+            }
+            this.loading = false;
+        },
+
+        async deleteDns(record) {
+            if (!confirm(`¿Eliminar ${record.type} ${record.name}?`)) return;
+            this.loading = true;
+            try {
+                await axios.delete(`/app/cloudflare/zones/${this.selectedZoneId}/dns/${record.id}`);
+                this.showToast('Registro eliminado');
+                await this.loadTab();
+            } catch (e) {
+                this.showToast(e.response?.data?.error || 'Error al eliminar', 'error');
+            }
+            this.loading = false;
+        },
+
         async saveConfig() {
             this.loading = true;
             try {

rest/controllers/cloudflare_controller.go

@@ -372,6 +372,8 @@ func GetCloudflareDNS(c *fiber.Ctx) error {
 }
 
 // GetCloudflareSSL devuelve los certificados SSL de una zona (:zone_id).
+// Intenta primero certificate_packs?status=all; si falla (plan Free o sin ACM)
+// devuelve el estado de Universal SSL como fallback.
 func GetCloudflareSSL(c *fiber.Ctx) error {
 	zoneID := c.Params("zone_id")
 	if zoneID == "" {
@@ -383,11 +385,33 @@ func GetCloudflareSSL(c *fiber.Ctx) error {
 			"error": "No se encontró configuración activa de Cloudflare",
 		})
 	}
-	data, err := client.GetSSLCertificates(zoneID)
+
-	if err != nil {
+	// 1. Intentar certificate_packs?status=all
-		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": err.Error()})
+	packs, packsErr := client.GetSSLCertificates(zoneID)
+	if packsErr == nil {
+		return c.JSON(fiber.Map{"data": packs, "zone_id": zoneID, "source": "certificate_packs"})
 	}
-	return c.JSON(fiber.Map{"data": data, "zone_id": zoneID})
+
+	// 2. Fallback: Universal SSL settings (disponible en todos los planes)
+	universal, uErr := client.GetUniversalSSLSettings(zoneID)
+	if uErr != nil {
+		// Devolver ambos errores para diagnóstico
+		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
+			"error":           packsErr.Error(),
+			"universal_error": uErr.Error(),
+			"hint":            "El endpoint ssl/certificate_packs requiere permiso 'SSL and Certificates:Read'. Si usas API Token, asegúrate de que tenga ese permiso.",
+		})
+	}
+	return c.JSON(fiber.Map{
+		"data":    nil,
+		"zone_id": zoneID,
+		"source":  "universal_ssl",
+		"universal_ssl": fiber.Map{
+			"enabled": universal.Enabled,
+			"note":    "Plan actual no expone certificate_packs. Universal SSL: " + func() string { if universal.Enabled { return "ACTIVO" }; return "INACTIVO" }(),
+		},
+		"packs_error": packsErr.Error(),
+	})
 }
 
 // GetCloudflareFirewall devuelve las reglas de firewall de una zona (:zone_id).