From 4f5147ab514e3561960bd03fe0665efe410df474 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Tue, 12 May 2026 10:54:37 -0500
Subject: [PATCH] Update cloudflare.html

---
 resources/views/cloudflare.html | 67 +++++++++++++++++++++++++++------
 1 file changed, 55 insertions(+), 12 deletions(-)

diff --git a/resources/views/cloudflare.html b/resources/views/cloudflare.html
index 16ce6b3..8f6c778 100644
--- a/resources/views/cloudflare.html
+++ b/resources/views/cloudflare.html
@@ -262,10 +262,13 @@
                         </div>
                         <!-- Info del token -->
                         <div class="grid grid-cols-2 gap-2 text-xs text-gray-600">
-                            <div><span class="font-medium">Token ID:</span> <span class="font-mono" x-text="diagnosData.token_id || '—'"></span></div>
+                            <div><span class="font-medium">Tipo auth:</span> <span x-text="diagnosData.auth_type || diagnosData.token?.auth_type || '—'"></span></div>
                             <div><span class="font-medium">Estado:</span> <span x-text="diagnosData.token_status || '—'"></span></div>
-                            <div><span class="font-medium">Longitud:</span> <span x-text="diagnosData.token_len + ' chars'"></span></div>
-                            <div><span class="font-medium">Tenía chars sucios:</span> <span x-text="diagnosData.was_dirty ? 'SÍ (saneado)' : 'No'"></span></div>
+                            <div><span class="font-medium">Token ID:</span> <span class="font-mono" x-text="diagnosData.token_id || '—'"></span></div>
+                            <div><span class="font-medium">Longitud:</span> <span x-text="(diagnosData.token_len || diagnosData.token?.length || '—') + ' chars'"></span></div>
+                            <div x-show="diagnosData.user_email"><span class="font-medium">Email:</span> <span x-text="diagnosData.user_email"></span></div>
+                            <div><span class="font-medium">Tenía chars sucios:</span> <span x-text="diagnosData.was_dirty || diagnosData.token?.was_sanitized ? 'SÍ (saneado)' : 'No'"></span></div>
+                            <div x-show="diagnosData.token?.hint_format" class="col-span-2 text-amber-700 font-medium" x-text="diagnosData.token?.hint_format"></div>
                         </div>
                         <!-- Políticas raw -->
                         <div x-show="diagnosData.policies">
@@ -305,12 +308,43 @@
                 </button>
             </div>
             <form @submit.prevent="saveConfig()" class="p-5 space-y-4">
+                <!-- Tipo de autenticación -->
                 <div>
-                    <label class="text-xs font-medium text-gray-600">API Token *</label>
+                    <label class="text-xs font-medium text-gray-600">Tipo de credencial *</label>
+                    <div class="mt-2 flex gap-4">
+                        <label class="flex items-center gap-2 text-sm cursor-pointer">
+                            <input type="radio" x-model="cfgForm.auth_type" value="token" class="accent-[#8eb02f]" />
+                            <span>API Token <span class="text-xs text-gray-400">(recomendado, 40 chars)</span></span>
+                        </label>
+                        <label class="flex items-center gap-2 text-sm cursor-pointer">
+                            <input type="radio" x-model="cfgForm.auth_type" value="global_key" class="accent-[#8eb02f]" />
+                            <span>Global API Key <span class="text-xs text-gray-400">(API de cuenta, 37 chars)</span></span>
+                        </label>
+                    </div>
+                </div>
+                <!-- Email (solo Global API Key) -->
+                <div x-show="cfgForm.auth_type === 'global_key'">
+                    <label class="text-xs font-medium text-gray-600">Email de la cuenta *</label>
+                    <input x-model="cfgForm.email" type="email"
+                        :required="cfgForm.auth_type === 'global_key'"
+                        placeholder="tucuenta@ejemplo.com"
+                        class="mt-1 w-full border rounded px-3 py-2 text-sm" />
+                    <p class="mt-1 text-xs text-gray-400">El email con el que accedes a dash.cloudflare.com</p>
+                </div>
+                <!-- API Token / Global API Key -->
+                <div>
+                    <label class="text-xs font-medium text-gray-600">
+                        <span x-text="cfgForm.auth_type === 'global_key' ? 'Global API Key *' : 'API Token *'"></span>
+                    </label>
                     <input x-model="cfgForm.api_token" type="password" required
-                        placeholder="Token de API de Cloudflare (Bearer)"
+                        :placeholder="cfgForm.auth_type === 'global_key' ? 'Global API Key (37 chars hexadecimales)' : 'API Token (40 chars)'"
                         class="mt-1 w-full border rounded px-3 py-2 text-sm font-mono" />
-                    <p class="mt-1 text-xs text-gray-400">dash.cloudflare.com → Mi perfil → API Tokens → Crear token</p>
+                    <p x-show="cfgForm.auth_type === 'token'" class="mt-1 text-xs text-gray-400">
+                        dash.cloudflare.com → Mi perfil → API Tokens → Crear token
+                    </p>
+                    <p x-show="cfgForm.auth_type === 'global_key'" class="mt-1 text-xs text-gray-400">
+                        dash.cloudflare.com → Mi perfil → API Tokens → Global API Key → View
+                    </p>
                 </div>
                 <div>
                     <label class="text-xs font-medium text-gray-600">Account ID (opcional)</label>
@@ -361,23 +395,32 @@ document.addEventListener('alpine:init', () => {
         diagnosLoading: false,
         diagnosData: null,
         diagnosError: '',
-        cfgForm: { id: 0, api_token: '', account_id: '', nota: '' },
+        cfgForm: {
+            id:         {{ if .Config }}{{ .Config.ID }}{{ else }}0{{ end }},
+            auth_type:  '{{ if .Config }}{{ .Config.AuthType }}{{ else }}token{{ end }}',
+            api_token:  '',
+            email:      '{{ if .Config }}{{ .Config.Email }}{{ else }}{{ end }}',
+            account_id: '{{ if .Config }}{{ .Config.AccountID }}{{ else }}{{ end }}',
+            nota:       '{{ if .Config }}{{ .Config.Nota }}{{ else }}{{ end }}',
+        },
         toast: { show: false, msg: '', type: 'ok' },
 
         async init() {
             try {
-                const [uRes, zRes] = await Promise.all([
-                    axios.get('/app/cloudflare/user'),
-                    axios.get('/app/cloudflare/zones'),
-                ]);
-                this.user = uRes.data.data || {};
+                const zRes = await axios.get('/app/cloudflare/zones');
                 this.zones = zRes.data.data || [];
                 this.hasConfig = true;
                 this.lastFetch = new Date().toLocaleTimeString();
             } catch (e) {
                 if (e.response?.status === 503) this.hasConfig = false;
                 else this.hasConfig = true;
+                return;
             }
+            // /user puede fallar para tokens de zona → no bloquea la carga
+            try {
+                const uRes = await axios.get('/app/cloudflare/user');
+                this.user = uRes.data.data || {};
+            } catch (_) {}
         },
 
         setTab(tab) {