Notificación intentos fallidos

2025-05-27 16:02:13 -06:00
parent 303bf955c3
commit aa793813e8
2 changed files with 655 additions and 54 deletions
--- a/views/login/verificar_codigo.php
+++ b/views/login/verificar_codigo.php
@@ -54,6 +54,18 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue

    .form-control {
      border-radius: 6px;
+      transition: all 0.3s ease;
+    }
+
+    .form-control.error {
+      border-color: #dc3545;
+      background-color: #fff5f5;
+      animation: shake 0.5s ease-in-out;
+    }
+
+    .form-control.success {
+      border-color: #28a745;
+      background-color: #f8fff9;
    }

    footer {
@@ -75,14 +87,111 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
      background: rgba(0, 0, 0, 0.5);
      z-index: 5;
    }
+
    #mensaje {
-      transition: opacity 0.3s ease;
+      transition: all 0.3s ease;
+      min-height: 24px;
    }
+
+    #btnReenviarRespaldo {
+      background: none;
+      border: none;
+      color: <?= $color1 ?>;
+      text-decoration: underline;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 0;
+      transition: color 0.3s ease;
+    }
+
+    #btnReenviarRespaldo:hover {
+      color: <?= $color2 ?>;
+    }
+
+    #btnReenviarRespaldo:disabled {
+      color: #ccc;
+      cursor: not-allowed;
+      text-decoration: none;
+    }
+
+    .btn:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .loading {
+      position: relative;
+      pointer-events: none;
+    }
+
+    .loading::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 20px;
+      height: 20px;
+      border: 2px solid transparent;
+      border-top: 2px solid #fff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      transform: translate(-50%, -50%);
+    }
+
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      25% { transform: translateX(-5px); }
+      75% { transform: translateX(5px); }
+    }
+
+    @keyframes spin {
+      0% { transform: translate(-50%, -50%) rotate(0deg); }
+      100% { transform: translate(-50%, -50%) rotate(360deg); }
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .fade-in {
+      animation: fadeIn 0.3s ease-out;
+    }
+
    @media (max-height: 600px) {
      footer {
        position: static !important;
      }
    }
+
+    /* Estilos para input de código */
+    #codigo {
+      font-size: 18px;
+      letter-spacing: 3px;
+      text-align: center;
+      font-weight: bold;
+    }
+
+    .input-group {
+      position: relative;
+    }
+
+    .clear-input {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      color: #ccc;
+      cursor: pointer;
+      z-index: 5;
+      display: none;
+    }
+
+    .clear-input:hover {
+      color: #666;
+    }
  </style>
 </head>
 <body>
@@ -128,6 +237,10 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
  <!-- Formulario de validación de código -->
  <div class="login-container">
    <h4 class="mb-4 text-center text-dark">Verifica tu código</h4>
+    <p class="text-muted text-center mb-4">
+      <i class="fas fa-envelope me-2"></i>
+      Hemos enviado un código de 6 dígitos a tu correo electrónico
+    </p>

    <?php
      if (!isset($_SESSION['email_recuperacion'])) {
@@ -136,30 +249,68 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
        exit;
      }
    ?>
+    
    <!-- Formulario para verificar el código -->
    <form id="formCodigo" action="/IMPORTADORES/login/verificarCodigo" method="POST">
      <div class="mb-3">
-        <label class="form-label" for="codigo">Ingresa el código recibido por correo</label>
-        <input type="text" id="codigo" name="codigo" class="form-control" required pattern="\d{6}" maxlength="6" placeholder="Ej. 123456">
+        <label class="form-label" for="codigo">
+          <i class="fas fa-key me-2"></i>Código de verificación
+        </label>
+        <div class="input-group">
+          <input type="text" 
+                 id="codigo" 
+                 name="codigo" 
+                 class="form-control" 
+                 required 
+                 pattern="\d{6}" 
+                 maxlength="6" 
+                 placeholder="000000"
+                 autocomplete="off"
+                 inputmode="numeric">
+          <button type="button" class="clear-input" id="clearCode" title="Limpiar código">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <div class="form-text">
+          <i class="fas fa-info-circle me-1"></i>
+          Ingresa el código de 6 dígitos que recibiste por correo
+        </div>
      </div>
-      <button type="submit" class="btn btn-primary w-100">Verificar código</button>
+      
+      <button type="submit" id="btnVerificar" class="btn btn-success w-100">
+        <i class="fas fa-check me-2"></i>Verificar código
+      </button>

-      <!-- Botón para enviar el código al corrreo de respaldo-->
+      <!-- Botón para enviar el código al correo de respaldo-->
      <div class="text-center mt-3">
-        <button type="button" id="btnReenviarRespaldo">¿No tienes acceso al correo? Reenviar al correo de respaldo</button>
+        <button type="button" id="btnReenviarRespaldo" title="Enviar código al correo de respaldo">
+          <i class="fas fa-paper-plane me-1"></i>
+          ¿No tienes acceso al correo? Reenviar al correo de respaldo
+        </button>
      </div>
    </form>

    <!-- Mostrar mensajes -->
    <div id="mensaje" class="mt-3 text-center fw-bold">
      <?php if (isset($_SESSION['codigo_error'])): ?>
-        <div class="text-danger"><?= $_SESSION['codigo_error'] ?></div>
+        <div class="text-danger fade-in">
+          <i class="fas fa-exclamation-triangle me-2"></i>
+          <?= $_SESSION['codigo_error'] ?>
+        </div>
        <?php unset($_SESSION['codigo_error']); ?>
      <?php elseif (isset($_SESSION['codigo_exito'])): ?>
-        <div class="text-success"><?= $_SESSION['codigo_exito'] ?></div>
+        <div class="text-success fade-in">
+          <i class="fas fa-check-circle me-2"></i>
+          <?= $_SESSION['codigo_exito'] ?>
+        </div>
        <?php unset($_SESSION['codigo_exito']); ?>
      <?php endif; ?>
    </div>
+
+    <!-- Contador de intentos -->
+    <div id="intentosInfo" class="mt-2 text-center text-muted" style="font-size: 12px;">
+      <!-- Se llenará dinámicamente -->
+    </div>
  </div>

  <!-- FOOTER -->
@@ -171,64 +322,276 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
    document.addEventListener('DOMContentLoaded', function () {
      const form = document.getElementById('formCodigo');
      const mensaje = document.getElementById('mensaje');
-      const inputCodigo = form.querySelector('input[name="codigo"]');
+      const inputCodigo = document.getElementById('codigo');
+      const btnVerificar = document.getElementById('btnVerificar');
+      const btnReenviar = document.getElementById('btnReenviarRespaldo');
+      const clearBtn = document.getElementById('clearCode');
+      const intentosInfo = document.getElementById('intentosInfo');

-      inputCodigo.addEventListener('input', () => {
-        mensaje.innerHTML = '';
-        mensaje.classList.remove("text-danger", "text-success");
+      let intentosRealizados = 0;
+      const maxIntentos = 5;
+
+      // Auto-focus en el input al cargar
+      inputCodigo.focus();
+
+      // Mostrar/ocultar botón de limpiar
+      inputCodigo.addEventListener('input', function() {
+        clearBtn.style.display = this.value.length > 0 ? 'block' : 'none';
+        
+        // Limpiar mensajes previos
+        limpiarMensajes();
+        
+        // Remover clases de error/éxito
+        inputCodigo.classList.remove('error', 'success');
+        
+        // Solo permitir números
+        this.value = this.value.replace(/[^0-9]/g, '');
+        
+        // Actualizar contador visual
+        actualizarContadorVisual();
      });

+      // Limpiar input
+      clearBtn.addEventListener('click', function() {
+        inputCodigo.value = '';
+        inputCodigo.focus();
+        clearBtn.style.display = 'none';
+        limpiarMensajes();
+        inputCodigo.classList.remove('error', 'success');
+      });
+
+      // Permitir solo números en tiempo real
+      inputCodigo.addEventListener('keypress', function(e) {
+        if (!/[0-9]/.test(e.key) && !['Backspace', 'Delete', 'Tab', 'Enter'].includes(e.key)) {
+          e.preventDefault();
+        }
+      });
+
+      // Auto-envío cuando se completen 6 dígitos (opcional)
+      inputCodigo.addEventListener('input', function() {
+        if (this.value.length === 6) {
+          // Opcional: enviar automáticamente después de un breve delay
+          // setTimeout(() => form.dispatchEvent(new Event('submit')), 500);
+        }
+      });
+
+      // Manejo del formulario
      form.addEventListener('submit', function(e) {
        e.preventDefault();

        const codigo = inputCodigo.value.trim();
-        if (!codigo || codigo.length !== 6) {
-          mensaje.textContent = "❌ Ingresa un código de 6 dígitos.";
-          mensaje.classList.add("text-danger");
-          return;
-        }
+        if (!validarCodigo(codigo)) return;

+        enviarCodigo(codigo);
+      });
+
+      // Validación del código
+      function validarCodigo(codigo) {
+        if (!codigo) {
+          mostrarError("❌ Por favor, ingresa el código.");
+          return false;
+        }
+        
+        if (codigo.length !== 6) {
+          mostrarError("❌ El código debe tener exactamente 6 dígitos.");
+          inputCodigo.classList.add('error');
+          return false;
+        }
+        
+        if (!/^\d{6}$/.test(codigo)) {
+          mostrarError("❌ El código solo debe contener números.");
+          inputCodigo.classList.add('error');
+          return false;
+        }
+        
+        return true;
+      }
+
+      // Enviar código para verificación
+      function enviarCodigo(codigo) {
+        // Mostrar estado de carga
+        btnVerificar.disabled = true;
+        btnVerificar.classList.add('loading');
+        btnVerificar.innerHTML = '<span style="opacity: 0;">Verificando...</span>';
+        
        const formData = new FormData();
        formData.append('codigo', codigo);

        fetch('/IMPORTADORES/login/verificarCodigo', {
          method: 'POST',
          body: formData,
-          credentials: 'same-origin' // ✅ Importante para mantener sesión
+          credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
-            mensaje.textContent = data.message;
-            mensaje.classList.remove("text-danger");
-            mensaje.classList.add("text-success");
-
+            // Código correcto
+            mostrarExito(data.message);
+            inputCodigo.classList.add('success');
+            inputCodigo.disabled = true;
+            
            // Redirigir al formulario de cambio de contraseña
            setTimeout(() => {
              window.location.href = '/IMPORTADORES/login/cambiarPasswordVista';
            }, 1500);
+            
          } else {
-            mensaje.textContent = "❌ " + data.message;
-            mensaje.classList.remove("text-success");
-            mensaje.classList.add("text-danger");
+            // Código incorrecto
+            manejarCodigoIncorrecto(data);
          }
        })
-        .catch(() => {
-          mensaje.textContent = "❌ Error al verificar el código.";
-          mensaje.classList.remove("text-success");
-          mensaje.classList.add("text-danger");
+        .catch(error => {
+          console.error('Error:', error);
+          mostrarError("❌ Error de conexión. Intenta nuevamente.");
+          inputCodigo.classList.add('error');
+          limpiarYEnfocarInput();
+        })
+        .finally(() => {
+          // Restaurar botón
+          btnVerificar.disabled = false;
+          btnVerificar.classList.remove('loading');
+          btnVerificar.innerHTML = '<i class="fas fa-check me-2"></i>Verificar código';
+        });
+      }
+
+      // Manejar código incorrecto
+      function manejarCodigoIncorrecto(data) {
+        intentosRealizados++;
+        
+        mostrarError(data.message);
+        inputCodigo.classList.add('error');
+        
+        // Limpiar input y enfocar para nuevo intento
+        limpiarYEnfocarInput();
+        
+        // Actualizar contador de intentos
+        actualizarContadorIntentos();
+        
+        // Si se bloqueó el código
+        if (data.blocked) {
+          bloquearFormulario();
+        }
+      }
+
+      // Limpiar input y enfocar
+      function limpiarYEnfocarInput() {
+        setTimeout(() => {
+          inputCodigo.value = '';
+          inputCodigo.classList.remove('error');
+          inputCodigo.focus();
+          clearBtn.style.display = 'none';
+        }, 1500); // Esperar 1.5 segundos antes de limpiar
+      }
+
+      // Actualizar contador visual
+      function actualizarContadorVisual() {
+        const longitud = inputCodigo.value.length;
+        if (longitud > 0) {
+          inputCodigo.setAttribute('placeholder', '0'.repeat(6 - longitud) + inputCodigo.value);
+        } else {
+          inputCodigo.setAttribute('placeholder', '000000');
+        }
+      }
+
+      // Actualizar contador de intentos
+      function actualizarContadorIntentos() {
+        if (intentosRealizados > 0) {
+          const restantes = maxIntentos - intentosRealizados;
+          intentosInfo.innerHTML = `
+            <i class="fas fa-exclamation-triangle text-warning me-1"></i>
+            Intentos restantes: <strong>${restantes}</strong> de ${maxIntentos}
+          `;
+          intentosInfo.classList.add('fade-in');
+        }
+      }
+
+      // Bloquear formulario cuando se exceden intentos
+      function bloquearFormulario() {
+        inputCodigo.disabled = true;
+        btnVerificar.disabled = true;
+        btnReenviar.disabled = true;
+        
+        intentosInfo.innerHTML = `
+          <i class="fas fa-ban text-danger me-1"></i>
+          <span class="text-danger">Código bloqueado por seguridad</span>
+        `;
+        
+        // Redirigir a solicitar nuevo código después de 5 segundos
+        setTimeout(() => {
+          window.location.href = '/IMPORTADORES/login/recuperar';
+        }, 5000);
+      }
+
+      // Funciones de utilidad para mensajes
+      function mostrarMensaje(texto, tipo) {
+        mensaje.innerHTML = `<div class="${tipo} fade-in">${texto}</div>`;
+        mensaje.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+
+      function mostrarError(texto) {
+        mostrarMensaje(`<i class="fas fa-exclamation-triangle me-2"></i>${texto}`, 'text-danger');
+      }
+
+      function mostrarExito(texto) {
+        mostrarMensaje(`<i class="fas fa-check-circle me-2"></i>${texto}`, 'text-success');
+      }
+
+      function mostrarInfo(texto) {
+        mostrarMensaje(`<i class="fas fa-info-circle me-2"></i>${texto}`, 'text-info');
+      }
+
+      function limpiarMensajes() {
+        mensaje.innerHTML = '';
+      }
+
+      // Manejo del botón de reenvío
+      btnReenviar.addEventListener("click", function() {
+        const btnOriginalText = this.innerHTML;
+        
+        // Deshabilitar botón temporalmente
+        this.disabled = true;
+        this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Enviando...';
+        
+        fetch("/IMPORTADORES/login/reenviarCodigo", {
+          method: "POST",
+          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+          body: "accion=reenviarCodigo"
+        })
+        .then(response => response.json())
+        .then(data => {
+          mostrarInfo(data.message);
+          
+          // Habilitar botón después de 30 segundos
+          setTimeout(() => {
+            this.disabled = false;
+            this.innerHTML = btnOriginalText;
+          }, 30000);
+        })
+        .catch(error => {
+          console.error('Error:', error);
+          mostrarError("❌ Error al reenviar código.");
+          
+          // Restaurar botón en caso de error
+          this.disabled = false;
+          this.innerHTML = btnOriginalText;
        });
      });
-    });

-    document.getElementById("btnReenviarRespaldo").addEventListener("click", () => {
-      fetch("/IMPORTADORES/login/reenviarCodigo", {
-        method: "POST",
-        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
-        body: "accion=reenviarCodigo"
-        })
-      .then(response => response.json())
-      .then(data => alert(data.message));
+      // Manejar tecla Enter en cualquier parte del formulario
+      document.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter' && !btnVerificar.disabled) {
+          form.dispatchEvent(new Event('submit'));
+        }
+      });
+
+      // Prevenir paste de contenido no numérico
+      inputCodigo.addEventListener('paste', function(e) {
+        e.preventDefault();
+        const paste = (e.clipboardData || window.clipboardData).getData('text');
+        const numericPaste = paste.replace(/[^0-9]/g, '').substring(0, 6);
+        this.value = numericPaste;
+        this.dispatchEvent(new Event('input'));
+      });
    });
  </script>