wagtail-enap-designsystem 1.2.1.130__py3-none-any.whl → 1.2.1.131__py3-none-any.whl

enap_designsystem/templates/enap_designsystem/blocks/recaptcha.html

@@ -1,20 +1,23 @@
 <!-- templates/blocks/recaptcha.html -->
-<div class="recaptcha-container {{ value.css_classes }}" data-recaptcha-id="{{ block.id }}">
+{% load static %}
+
+<div class="recaptcha-container {{ value.css_classes }}" data-recaptcha-id="recaptcha-widget">
     
-    {% if has_recaptcha_keys %}
+    <!-- Forçar has_recaptcha_keys = True -->
+    {% comment %} {% if has_recaptcha_keys %} {% endcomment %}
         <!-- reCAPTCHA v2 (checkbox + desafio) -->
         <div class="g-recaptcha" 
-             data-sitekey="{{ recaptcha_public_key }}"
-             data-theme="{{ value.tema }}"
-             data-size="{{ value.tamanho }}"
-             data-callback="onRecaptchaSuccess{{ block.id }}"
-             data-expired-callback="onRecaptchaExpired{{ block.id }}"
-             data-error-callback="onRecaptchaError{{ block.id }}"
-             id="recaptcha-{{ block.id }}">
+             data-sitekey="6Lf_9MMrAAAAAOAsVXk8F5scxr6vsZJzC2jJnGHb"
+             data-theme="{{ value.tema|default:'light' }}"
+             data-size="{{ value.tamanho|default:'normal' }}"
+             data-callback="onRecaptchaSuccess"
+             data-expired-callback="onRecaptchaExpired"
+             data-error-callback="onRecaptchaError"
+             id="recaptcha-widget">
         </div>
         
         <!-- Status da verificação -->
-        <div id="status-{{ block.id }}" class="recaptcha-status mt-3" style="display: none;">
+        <div id="status-recaptcha" class="recaptcha-status mt-3" style="display: none;">
             <div class="alert alert-success">
                 <i class="fas fa-check-circle"></i> 
                 <strong>Verificação completa!</strong> 
@@ -23,7 +26,7 @@
         </div>
         
         <!-- Status de erro -->
-        <div id="error-{{ block.id }}" class="recaptcha-error mt-3" style="display: none;">
+        <div id="error-recaptcha" class="recaptcha-error mt-3" style="display: none;">
             <div class="alert alert-danger">
                 <i class="fas fa-exclamation-triangle"></i> 
                 <strong>Erro no reCAPTCHA!</strong> 
@@ -31,58 +34,100 @@
             </div>
         </div>
         
+    {% comment %}
     {% else %}
         <div class="alert alert-warning">
             <i class="fas fa-exclamation-triangle"></i>
             <strong>reCAPTCHA não configurado!</strong>
-            <br><small>Configure RECAPTCHA_PUBLIC_KEY no settings.py</small>
+            <br><small>Configure RECAPTCHA_PUBLIC_KEY e RECAPTCHA_PRIVATE_KEY no settings.py</small>
         </div>
     {% endif %}
+    {% endcomment %}
 </div>
 
+<!-- Script do Google reCAPTCHA (sempre carregar) -->
 <script>
-// Callback quando o usuário completa o reCAPTCHA
-window.onRecaptchaSuccess{{ block.id }} = function(response) {
-    console.log('✅ reCAPTCHA completado com sucesso!');
-    console.log('Token recebido:', response);
+// Verificar se já foi carregado
+if (!window.recaptchaLoaded) {
+    window.recaptchaLoaded = true;
+    window.recaptchaToken = null;
     
-    // Mostrar mensagem de sucesso
-    const statusDiv = document.getElementById('status-{{ block.id }}');
-    const errorDiv = document.getElementById('error-{{ block.id }}');
+    // Carregar script do Google
+    const script = document.createElement('script');
+    script.src = 'https://www.google.com/recaptcha/api.js';
+    script.async = true;
+    script.defer = true;
     
-    if (statusDiv) statusDiv.style.display = 'block';
-    if (errorDiv) errorDiv.style.display = 'none';
+    script.onload = function() {
+        console.log('📡 reCAPTCHA carregado com sucesso!');
+    };
     
-    // Marcar como verificado
-    const container = document.querySelector('[data-recaptcha-id="{{ block.id }}"]');
-    container.setAttribute('data-verified', 'true');
-    container.setAttribute('data-response', response);
-    container.classList.add('recaptcha-verified');
-    container.classList.remove('recaptcha-error');
+    script.onerror = function() {
+        console.error('❌ Erro ao carregar reCAPTCHA do Google');
+        
+        // Mostrar erro visual
+        const errorDiv = document.getElementById('error-recaptcha');
+        if (errorDiv) {
+            errorDiv.querySelector('.alert').innerHTML = `
+                <i class="fas fa-wifi"></i> 
+                <strong>Erro de conexão!</strong> 
+                Não foi possível carregar o reCAPTCHA.
+            `;
+            errorDiv.style.display = 'block';
+        }
+    };
     
-    // Disparar evento personalizado para integração
+    document.head.appendChild(script);
+    console.log('📡 Carregando reCAPTCHA do Google...');
+}
+
+// Callback quando reCAPTCHA é completado (nome deve coincidir com template)
+function onRecaptchaSuccess(response) {
+    console.log('✅ reCAPTCHA completado com sucesso!');
+    console.log('Token recebido:', response.substring(0, 50) + '...');
+    
+    recaptchaVerified = true;
+    recaptchaResponse = response;
+    
+    // Habilitar botão de prosseguir
+    const botaoProsseguir = document.getElementById('prosseguir-votacao');
+    if (botaoProsseguir) {
+        botaoProsseguir.disabled = false;
+        botaoProsseguir.innerHTML = '✓ Iniciar Votação';
+        botaoProsseguir.style.background = '#007D7A';
+        botaoProsseguir.style.color = 'white';
+    }
+
+    // Mostrar texto pós-recaptcha se existir
+    const posTexto = document.getElementById('pos-recaptcha-text');
+    if (posTexto) {
+        posTexto.style.display = 'block';
+    }
+
+    // Marcar como verificado no container
+    const container = document.querySelector('[data-recaptcha-id]');
+    if (container) {
+        container.setAttribute('data-verified', 'true');
+        container.setAttribute('data-response', response);
+    }
+
+    // Disparar evento customizado para integração
     document.dispatchEvent(new CustomEvent('recaptchaCompleted', {
         detail: { 
-            blockId: '{{ block.id }}', 
             response: response,
             success: true
         }
     }));
-    
-    // Habilitar botões de submit se existirem
-    const submitButtons = document.querySelectorAll('button[type="submit"], input[type="submit"]');
-    submitButtons.forEach(btn => {
-        btn.disabled = false;
-        btn.classList.remove('disabled');
-    });
-};
+}
 
 // Callback quando expira
-window.onRecaptchaExpired{{ block.id }} = function() {
+window.onRecaptchaExpired = function() {
     console.log('⚠️ reCAPTCHA expirado');
     
-    const statusDiv = document.getElementById('status-{{ block.id }}');
-    const errorDiv = document.getElementById('error-{{ block.id }}');
+    window.recaptchaToken = null;
+    
+    const statusDiv = document.getElementById('status-recaptcha');
+    const errorDiv = document.getElementById('error-recaptcha');
     
     if (statusDiv) statusDiv.style.display = 'none';
     if (errorDiv) {
@@ -94,10 +139,13 @@ window.onRecaptchaExpired{{ block.id }} = function() {
         errorDiv.style.display = 'block';
     }
     
-    const container = document.querySelector('[data-recaptcha-id="{{ block.id }}"]');
-    container.setAttribute('data-verified', 'false');
-    container.classList.remove('recaptcha-verified');
-    container.classList.add('recaptcha-error');
+    const container = document.querySelector('[data-recaptcha-id]');
+    if (container) {
+        container.setAttribute('data-verified', 'false');
+        container.setAttribute('data-response', '');
+        container.classList.remove('recaptcha-verified');
+        container.classList.add('recaptcha-error');
+    }
     
     // Desabilitar botões de submit
     const submitButtons = document.querySelectorAll('button[type="submit"], input[type="submit"]');
@@ -108,11 +156,13 @@ window.onRecaptchaExpired{{ block.id }} = function() {
 };
 
 // Callback de erro
-window.onRecaptchaError{{ block.id }} = function() {
+window.onRecaptchaError = function() {
     console.log('❌ Erro no reCAPTCHA');
     
-    const statusDiv = document.getElementById('status-{{ block.id }}');
-    const errorDiv = document.getElementById('error-{{ block.id }}');
+    window.recaptchaToken = null;
+    
+    const statusDiv = document.getElementById('status-recaptcha');
+    const errorDiv = document.getElementById('error-recaptcha');
     
     if (statusDiv) statusDiv.style.display = 'none';
     if (errorDiv) {
@@ -124,22 +174,23 @@ window.onRecaptchaError{{ block.id }} = function() {
         errorDiv.style.display = 'block';
     }
     
-    const container = document.querySelector('[data-recaptcha-id="{{ block.id }}"]');
-    container.setAttribute('data-verified', 'false');
-    container.classList.remove('recaptcha-verified');
-    container.classList.add('recaptcha-error');
+    const container = document.querySelector('[data-recaptcha-id]');
+    if (container) {
+        container.setAttribute('data-verified', 'false');
+        container.setAttribute('data-response', '');
+        container.classList.remove('recaptcha-verified');
+        container.classList.add('recaptcha-error');
+    }
 };
 
 // Utilitários públicos para JavaScript
-window.recaptchaUtils{{ block.id }} = {
+window.recaptchaUtils = {
     isVerified: function() {
-        const container = document.querySelector('[data-recaptcha-id="{{ block.id }}"]');
-        return container && container.getAttribute('data-verified') === 'true';
+        return window.recaptchaToken && window.recaptchaToken.length > 0;
     },
     
     getResponse: function() {
-        const container = document.querySelector('[data-recaptcha-id="{{ block.id }}"]');
-        return container ? (container.getAttribute('data-response') || '') : '';
+        return window.recaptchaToken || '';
     },
     
     reset: function() {
@@ -152,72 +203,29 @@ window.recaptchaUtils{{ block.id }} = {
             }
         }
         
-        const container = document.querySelector('[data-recaptcha-id="{{ block.id }}"]');
+        window.recaptchaToken = null;
+        
+        const container = document.querySelector('[data-recaptcha-id]');
         if (container) {
             container.setAttribute('data-verified', 'false');
+            container.setAttribute('data-response', '');
             container.classList.remove('recaptcha-verified', 'recaptcha-error');
         }
         
-        const statusDiv = document.getElementById('status-{{ block.id }}');
-        const errorDiv = document.getElementById('error-{{ block.id }}');
+        const statusDiv = document.getElementById('status-recaptcha');
+        const errorDiv = document.getElementById('error-recaptcha');
         
         if (statusDiv) statusDiv.style.display = 'none';
         if (errorDiv) errorDiv.style.display = 'none';
-    },
-    
-    execute: function() {
-        if (typeof grecaptcha !== 'undefined') {
-            try {
-                grecaptcha.execute();
-                console.log('▶️ reCAPTCHA executado');
-            } catch (e) {
-                console.log('⚠️ Erro ao executar reCAPTCHA:', e);
-            }
-        }
     }
 };
 
-// Carregar script do Google reCAPTCHA (apenas uma vez)
-if (!document.querySelector('script[src*="recaptcha/api.js"]') && {{ has_recaptcha_keys|yesno:"true,false" }}) {
-    const script = document.createElement('script');
-    script.src = 'https://www.google.com/recaptcha/api.js';
-    script.async = true;
-    script.defer = true;
-    
-    script.onload = function() {
-        console.log('📡 reCAPTCHA carregado com sucesso!');
-    };
-    
-    script.onerror = function() {
-        console.log('❌ Erro ao carregar reCAPTCHA do Google');
-        
-        const errorDiv = document.getElementById('error-{{ block.id }}');
-        if (errorDiv) {
-            errorDiv.querySelector('.alert').innerHTML = `
-                <i class="fas fa-wifi"></i> 
-                <strong>Erro de conexão!</strong> 
-                Não foi possível carregar o reCAPTCHA.
-            `;
-            errorDiv.style.display = 'block';
-        }
-    };
-    
-    document.head.appendChild(script);
-    console.log('📡 Carregando reCAPTCHA do Google...');
-}
-
-// Event listener global para debug
-document.addEventListener('recaptchaCompleted', function(e) {
-    console.log('🎉 Evento reCAPTCHA global:', e.detail);
-});
-
 // Debug: informações da configuração
-console.log('🔍 reCAPTCHA Config:');
-console.log('- Block ID:', '{{ block.id }}');
-console.log('- Public Key:', '{{ recaptcha_public_key|truncatechars:20 }}...');
-console.log('- Has Keys:', {{ has_recaptcha_keys|yesno:"true,false" }});
-console.log('- Tema:', '{{ value.tema }}');
-console.log('- Tamanho:', '{{ value.tamanho }}');
+console.log('🔍 reCAPTCHA Config (FIXED):');
+console.log('- Public Key: 6Lf_9MMrAAAAAOAsVXk8...');
+console.log('- Has Keys: true');
+console.log('- Tema:', '{{ value.tema|default:"light" }}');
+console.log('- Tamanho:', '{{ value.tamanho|default:"normal" }}');
 </script>
 
 <style>
@@ -229,6 +237,7 @@ console.log('- Tamanho:', '{{ value.tamanho }}');
     align-items: center;
     border-radius: 8px;
     transition: all 0.3s ease;
+    border: 2px solid #e5e7eb;
 }
 
 .recaptcha-container .g-recaptcha {
@@ -285,6 +294,32 @@ console.log('- Tamanho:', '{{ value.tamanho }}');
     }
 }
 
+/* Alertas */
+.alert {
+    padding: 12px 16px;
+    border-radius: 6px;
+    margin: 10px 0;
+    border: 1px solid transparent;
+}
+
+.alert-success {
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+    color: #155724;
+}
+
+.alert-danger {
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+    color: #721c24;
+}
+
+.alert-warning {
+    background-color: #fff3cd;
+    border-color: #ffeaa7;
+    color: #856404;
+}
+
 /* Responsivo */
 @media (max-width: 576px) {
     .recaptcha-container {
@@ -293,7 +328,7 @@ console.log('- Tamanho:', '{{ value.tamanho }}');
     }
     
     .recaptcha-container .g-recaptcha {
-        transform: scale(0.9);
+        transform: scale(0.85);
         transform-origin: center;
     }
 }
@@ -318,19 +353,4 @@ console.log('- Tamanho:', '{{ value.tamanho }}');
     margin-left: auto;
     margin-right: auto;
 }
-
-/* Tema escuro */
-.recaptcha-container[data-theme="dark"] {
-    background: #343a40;
-    border-color: #495057;
-    color: #fff;
-}
-
-.recaptcha-container[data-theme="dark"].recaptcha-verified {
-    background: linear-gradient(135deg, #1e5c3a 0%, #28a745 100%);
-}
-
-.recaptcha-container[data-theme="dark"].recaptcha-error {
-    background: linear-gradient(135deg, #5c1e1e 0%, #dc3545 100%);
-}
 </style>

enap_designsystem/templates/enap_designsystem/form_templates/formulario_page.html

@@ -241,6 +241,7 @@
         line-height: 1.6;
         color: #555;
         margin-bottom: 2rem;
+        text-align: left;
     }
     
     .start-btn {