Alertas AJAX

app/controllers/login.php

@@ -82,6 +82,8 @@ function recuperar()
 
 function enviarCodigo()
 {
+    header('Content-Type: application/json');
+
     $conn = getConnection();
 
     // Obtener el correo proporcionado en el formulario
@@ -89,7 +91,8 @@ function enviarCodigo()
 
     // Verificar si el correo es válido
     if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
-        die("❌ Correo inválido.");
+        echo json_encode(['success' => false, 'message' => '❌ Correo inválido.']);
+        exit;
     }
 
     // Encriptar el correo ingresado para comparar con el de la base de datos
@@ -100,26 +103,41 @@ function enviarCodigo()
     $stmt = sqlsrv_query($conn, $sql, [$emailEncrypted]);
 
     if (!$stmt || !($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))) {
-        die("❌ Correo no encontrado.");
+        echo json_encode(['success' => false, 'message' => '❌ Correo no encontrado.']);
+        exit;
+    }
+
+    // 🧠 Verificar si ya hay un código activo y no expirado
+    $now = date('Y-m-d H:i:s');
+    $sqlCheck = "SELECT COUNT(*) AS total FROM recuperacion_password 
+                 WHERE email = ? AND estatus = 0 AND expiracion > ?";
+    $checkStmt = sqlsrv_query($conn, $sqlCheck, [$emailEncrypted, $now]);
+    $checkRow = sqlsrv_fetch_array($checkStmt, SQLSRV_FETCH_ASSOC);
+
+    if ($checkRow['total'] > 0) {
+        echo json_encode(['success' => false, 'message' => '⚠️ Ya tienes un código activo. Revisa tu correo o espera 10 minutos.']);
+        exit;
     }
 
     // Generar el código de recuperación y la expiración
-    $codigo = rand(100000, 999999);
+    $codigo = strval(rand(100000, 999999)); // Convertir a string
     $expira = date('Y-m-d H:i:s', strtotime('+10 minutes'));
+    $estatus = 0; // Estatus inicial
 
     // Guardar el código y la expiración en la tabla de recuperación de contraseñas
-    $insert = "INSERT INTO recuperacion_password (email, codigo, expiracion) VALUES (?, ?, ?)";
+    $insert = "INSERT INTO recuperacion_password (email, codigo, expiracion, estatus) VALUES (?, ?, ?, ?)";
-    $result = sqlsrv_query($conn, $insert, [$emailEncrypted, $codigo, $expira]);
+    $params = [$emailEncrypted, $codigo, $expira, $estatus];
+    $result = sqlsrv_query($conn, $insert, $params);
 
     if (!$result) {
-        die("❌ Error al guardar el código de recuperación.");
+        echo json_encode(['success' => false, 'message' => '❌ Error al guardar el código de recuperación.']);
+        exit;
     }
 
     // Enviar correo con el código utilizando PHPMailer
     try {
         $mail = new PHPMailer(true);
-        
+        // ConfigEuración de servidor SMTP
-        // Configuración de servidor SMTP
         $mail->isSMTP();
         $mail->Host = 'secure.emailsrvr.com';
         $mail->SMTPAuth = true;
@@ -136,18 +154,17 @@ function enviarCodigo()
         $mail->Subject = 'Código de recuperación de contraseña';
 
         // Cuerpo del correo
-        $mail->Body = "
+        $mail->Body = "<div style='font-family: Segoe UI, sans-serif; background-color: #f4f6f9; padding: 40px;'>
-        <div style='font-family: Segoe UI, sans-serif; background-color: #f4f6f9; padding: 40px;'>
           <div style='max-width: 600px; margin: auto; background: #fff; border: 1px solid #ddd; border-radius: 10px; overflow: hidden;'>
             <div style='background: linear-gradient(to right, #003366, #0055A5); padding: 20px; text-align: center;'>
               <h2 style='color: white;'>Recupera tu contraseña</h2>
             </div>
             <div style='padding: 30px; color: #333; font-size: 16px;'>
               <p>Hola,</p>
-              <p>Has solicitado recuperar tu contraseña. Aquí está tu código de recuperación:</p>
+              <p>Has solicitado recuperar tu contraseña. Aquí está tu código:</p>
               <h3 style='font-size: 24px; color: #0055A5;'>$codigo</h3>
               <p>Este código expira en 10 minutos.</p>
-              <p>Si no solicitaste este código, por favor ignora este correo.</p>
+              <p>Si no lo solicitaste, ignora este mensaje.</p>
             </div>
             <div style='background: #e9ecef; text-align: center; padding: 15px; font-size: 13px; color: #666;'>
               &copy; " . date('Y') . " SIIH · Desarrollado por AduanaSoft
@@ -159,11 +176,14 @@ function enviarCodigo()
         $mail->send();
     }  catch (Exception $e) {
         error_log("Error al enviar correo: {$mail->ErrorInfo}");
-        die("❌ Hubo un error al enviar el correo. Intenta más tarde.");
+        echo json_encode(['success' => false, 'message' => '❌ Hubo un error al enviar el correo. Intenta más tarde.']);
+        exit;
     }
 
-    $_SESSION['email_recuperacion'] = $email;
+    $_SESSION['email_recuperacion'] = $email; // email sin cifrar
-    header('Location: /IMPORTADORES/login/verificarCodigoVista');
+    $_SESSION['intentos_codigo'] = 0; // Inicializa intentos
+
+    echo json_encode(['success' => true, 'message' => '✅ Código enviado correctamente. Revisa tu correo.']);
     exit;
 }
 
@@ -174,33 +194,65 @@ function verificarCodigoVista()
 
 function verificarCodigo()
 {
+    header('Content-Type: application/json');
+
     $conn = getConnection();
-    $codigo = $_POST['codigo'] ?? '';
+
+    $codigo = trim($_POST['codigo'] ?? '');
     $email = $_SESSION['email_recuperacion'] ?? '';
 
     if (!$codigo || !$email) {
-        die("❌ Código o correo faltante.");
+        echo json_encode(['success' => false, 'message' => '❌ Código o correo faltante.']);
+        exit;
     }
 
     // Encriptar el correo ingresado
     $emailEncrypted = encrypt($email);
 
     // Consultar el código de recuperación y su expiración desde la base de datos
-    $sql = "SELECT codigo, expiracion FROM recuperacion_password WHERE email = ? ORDER BY id DESC";
+    $sql = "SELECT id, codigo, expiracion FROM recuperacion_password 
+            WHERE email = ? AND estatus = 0 ORDER BY id DESC";
     $stmt = sqlsrv_query($conn, $sql, [$emailEncrypted]);
-
     $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
 
-    if (!$row || $codigo != $row['codigo']) {
+    if (!$row) {
-        die("❌ Código incorrecto.");
+        echo json_encode(['success' => false, 'message' => '❌ Código no encontrado o ya usado.']);
+        exit;
     }
 
-    if (strtotime($row['expiracion']->format('Y-m-d H:i:s')) < time()) {
+    // Manejo de intentos fallidos
-        die("⏰ El código ha expirado.");
+    $_SESSION['intentos_codigo'] = ($_SESSION['intentos_codigo'] ?? 0) + 1;
+    if ($_SESSION['intentos_codigo'] > 5) {
+        $update = "UPDATE recuperacion_password SET estatus = 1 WHERE id = ?";
+        sqlsrv_query($conn, $update, [$row['id']]);
+        unset($_SESSION['intentos_codigo']);
+        echo json_encode(['success' => false, 'message' => '🚫 Has excedido el número de intentos. Solicita un nuevo código.']);
+        exit;
     }
 
+    if ($codigo != $row['codigo']) {
+        echo json_encode(['success' => false, 'message' => '❌ Código incorrecto. Intento {$_SESSION["intentos_codigo"]} de 5.']);
+        exit;
+    }
+
+    // Validar expiración
+    $expiracionTimestamp = strtotime($row['expiracion']->format('Y-m-d H:i:s'));
+    if ($expiracionTimestamp < time()) {
+        $update = "UPDATE recuperacion_password SET estatus = 1 WHERE id = ?";
+        sqlsrv_query($conn, $update, [$row['id']]);
+        echo json_encode(['success' => false, 'message' => '⏰ El código ha expirado.']);
+        exit;
+    }
+
+    // ✅ Código correcto
+    $update = "UPDATE recuperacion_password SET estatus = 1 WHERE id = ?";
+    sqlsrv_query($conn, $update, [$row['id']]);
+
+    // Habilitar cambio de contraseña
      $_SESSION['recuperacion_autorizada'] = true;
-    header('Location: /IMPORTADORES/login/cambiarPasswordVista');
+    unset($_SESSION['intentos_codigo']);
+
+    echo json_encode(['success' => true, 'message' => '✅ Código verificado. Redirigiendo...']);
     exit;
 }
 
@@ -219,7 +271,8 @@ function cambiarPasswordVista()
 function cambiarPassword()
 {
     if (!isset($_SESSION['recuperacion_autorizada']) || !isset($_SESSION['email_recuperacion'])) {
-        die("⚠️ Acceso no autorizado.");
+        echo "⚠️ Acceso no autorizado.";
+        return;
     }
 
     $conn = getConnection();
@@ -228,11 +281,13 @@ function cambiarPassword()
 
     // Validaciones
     if (strlen($password) < 6) {
-        die("❌ La contraseña debe tener al menos 6 caracteres.");
+        echo "❌ La contraseña debe tener al menos 6 caracteres.";
+        return;
     }
 
     if ($password !== $confirmar) {
-        die("❌ Las contraseñas no coinciden.");
+        echo "❌ Las contraseñas no coinciden.";
+        return;
     }
 
     $email = $_SESSION['email_recuperacion'];
@@ -246,9 +301,20 @@ function cambiarPassword()
     $stmt = sqlsrv_prepare($conn, $sql, [$hash, $emailEncrypted]);
 
     if (!$stmt || !sqlsrv_execute($stmt)) {
-        die("❌ Error al actualizar la contraseña. Intenta nuevamente.");
+        echo "❌ Error al actualizar la contraseña. Intenta nuevamente.";
+        return;
     }
 
+    // Obtener ID de usuario para registrar en bitácora
+    $sqlUsuario = "SELECT id_usuario FROM usuarios_sistema WHERE email = ?";
+    $stmtUsuario = sqlsrv_query($conn, $sqlUsuario, [$emailEncrypted]);
+    $usuario = sqlsrv_fetch_array($stmtUsuario, SQLSRV_FETCH_ASSOC);
+    $idUsuario = $usuario['id_usuario'] ?? null;
+
+    // Registrar en bitácora
+    $ip = $_SERVER['REMOTE_ADDR'] ?? 'N/A';
+    registrarBitacora($conn, $idUsuario, $email, $ip, 1, 'Cambio de contraseña por recuperación');
+
     // Enviar correo de confirmación
     try {
         $mail = new PHPMailer(true);
@@ -290,6 +356,8 @@ function cambiarPassword()
         $mail->send();
     } catch (Exception $e) {
         error_log("Error al enviar correo de confirmación: {$mail->ErrorInfo}");
+        echo "❌ Hubo un error al enviar el correo. Intenta más tarde.";
+        return;
         // No se detiene el proceso si falla el correo
     }
 
@@ -297,7 +365,13 @@ function cambiarPassword()
     unset($_SESSION['recuperacion_autorizada']);
     unset($_SESSION['email_recuperacion']);
 
-    $_SESSION['login_success'] = 'Tu contraseña ha sido cambiada exitosamente. Inicia sesión.';
+    // Mostrar mensaje de éxito y redirigir
-    header('Location: /IMPORTADORES/login');
+    echo "<div style='font-family:Segoe UI, sans-serif; max-width:500px; margin:auto; padding:20px; text-align:center; border:1px solid #ccc; border-radius:8px; background-color:#f4f6f9;'>
-    exit;
+            <h2 style='color:green;'>✅ ¡Contraseña actualizada!</h2>
+            <p>Tu contraseña ha sido cambiada exitosamente.</p>
+            <p>Serás redirigido al login en breve...</p>
+          </div>
+          <script>
+            setTimeout(() => { window.location.href = '/IMPORTADORES/login'; }, 4000);
+          </script>";
 }

script_table.txt

@@ -4,3 +4,6 @@ CREATE TABLE recuperacion_password (
     codigo NVARCHAR(10) NOT NULL,
     expiracion DATETIME NOT NULL
 );
+
+ALTER TABLE recuperacion_password
+ADD estatus INT NOT NULL DEFAULT 0;

views/login/cambiar_password.php

@@ -6,6 +6,11 @@ $color1        = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5')
 $color2        = explode(',', $config['colores_primarios'] ?? '#003366,#0055A5')[1];
 $mantenimiento = $config['modo_mantenimiento'] ?? 0;
 $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encuentra en mantenimiento temporal. Por favor, vuelve más tarde.';
+
+if (!isset($_SESSION['recuperacion_autorizada'])) {
+    header('Location: /IMPORTADORES/login');
+    exit;
+}
 ?>
 
 <!DOCTYPE html>
@@ -120,24 +125,27 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
   <!-- Formulario de cambio de contraseña -->
   <div class="login-container">
     <h4 class="mb-4 text-center" style="color:<?= $color1 ?>">Cambiar contraseña</h4>
-
+    <form id="formNueva" action="/IMPORTADORES/login/cambiarPassword" method="POST">
-        <form action="/IMPORTADORES/login/cambiarPassword" method="POST">
       <div class="mb-3">
         <label class="form-label">Nueva contraseña:</label>
-            <input type="password" name="password" required class="form-control">
+        <input type="password" name="password" required class="form-control" minlength="6" autocomplete="new-password">
       </div>
-
       <div class="mb-3">
         <label class="form-label">Confirmar contraseña:</label>
         <input type="password" name="confirmar" required class="form-control">
       </div>
-
+      <button type="submit" class="btn btn-warning w-100">Actualizar contraseña</button>
-        <button type="submit" class="btn btn-warning w-100">Cambiar contraseña</button>
-
-        <?php if (isset($_SESSION['cambiar_error'])): ?>
-            <div class="text-danger mt-2"><?= $_SESSION['cambiar_error'] ?></div>
-            <?php unset($_SESSION['cambiar_error']); endif; ?>
     </form>
+
+    <?php if (isset($_SESSION['cambio_error'])): ?>
+      <div class="text-danger mt-3"><?= $_SESSION['cambio_error'] ?></div>
+      <?php unset($_SESSION['cambio_error']); ?>
+    <?php endif; ?>
+
+    <?php if (isset($_SESSION['cambio_exito'])): ?>
+      <div class="text-success mt-3"><?= $_SESSION['cambio_exito'] ?></div>
+      <?php unset($_SESSION['cambio_exito']); ?>
+    <?php endif; ?>
   </div>
 
   <!-- FOOTER -->
@@ -145,5 +153,17 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
     &copy; <?= date('Y') ?> <?= htmlspecialchars($siglas) ?> · <?= htmlspecialchars($nombre) ?>
   </footer>
 
+  <script>
+    document.getElementById('formNueva').addEventListener('submit', function(e) {
+      const pass = this.password.value;
+      const confirm = this.confirmar.value;
+
+      if (pass !== confirm) {
+        e.preventDefault();
+        alert('❌ Las contraseñas no coinciden.');
+      }
+    });
+  </script>
+
 </body>
 </html>

views/login/recuperar.php

@@ -120,16 +120,25 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
   <!-- Formulario de recuperación de contraseña -->
   <div class="login-container">
     <h4 class="mb-4 text-center text-dark">Recuperar Contraseña</h4>
-    <form action="/IMPORTADORES/login/enviarCodigo" method="POST">
+    <form id="formRecuperar" novalidate>
       <div class="mb-3">
-        <label class="form-label">Ingresa tu correo</label>
+        <label class="form-label" for="emailInput">Ingresa tu correo</label>
-        <input type="email" name="email" class="form-control" required>
+        <input type="email" id="emailInput" name="email" class="form-control" required>
       </div>
-      <button type="submit" class="btn btn-primary">Enviar código</button>
+      <button type="submit" class="btn btn-primary w-100">Enviar código</button>
-      <?php if (isset($_SESSION['recuperar_error'])): ?>
-        <div class="text-danger"><?= $_SESSION['recuperar_error'] ?></div>
-      <?php unset($_SESSION['recuperar_error']); endif; ?>
     </form>
+
+    <?php if (isset($_SESSION['recuperar_error'])): ?>
+      <div class="text-danger mt-3 text-center"><?= htmlspecialchars($_SESSION['recuperar_error']) ?></div>
+      <?php unset($_SESSION['recuperar_error']); ?>
+    <?php endif; ?>
+
+    <?php if (isset($_SESSION['recuperar_exito'])): ?>
+      <div class="text-success mt-3 text-center"><?= htmlspecialchars($_SESSION['recuperar_exito']) ?></div>
+      <?php unset($_SESSION['recuperar_exito']); ?>
+    <?php endif; ?>
+
+    <div id="mensaje" class="mt-3 text-center fw-bold"></div>
   </div>
 
   <!-- FOOTER -->
@@ -137,5 +146,61 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
     &copy; <?= date('Y') ?> <?= htmlspecialchars($siglas) ?> · <?= htmlspecialchars($nombre) ?>
   </footer>
 
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const form = document.getElementById('formRecuperar');
+      const mensaje = document.getElementById('mensaje');
+      const inputCorreo = form.querySelector('input[name="email"]');
+
+      inputCorreo.addEventListener('input', () => {
+        mensaje.innerHTML = '';
+        mensaje.classList.remove("text-danger", "text-success");
+      });
+
+      form.addEventListener('submit', function(e) {
+        e.preventDefault();
+
+        const emailValue = inputCorreo.value.trim();
+        if (!emailValue) {
+          mensaje.textContent = "❌ Por favor, ingresa un correo válido.";
+          mensaje.classList.add("text-danger");
+          return;
+        }
+
+        const formData = new FormData();
+        formData.append('email', emailValue);
+
+        fetch('/IMPORTADORES/login/enviarCodigo', {
+          method: 'POST',
+          body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+          // Esperamos que el backend devuelva JSON con { success: true/false, message: "..." }
+
+          if (data.success) {
+            mensaje.textContent = data.message;
+            mensaje.classList.remove("text-danger");
+            mensaje.classList.add("text-success");
+
+            // Opcional: redirigir a la vista de verificación de código
+            setTimeout(() => {
+              window.location.href = '/IMPORTADORES/login/verificarCodigoVista';
+            }, 2000);
+          } else {
+            mensaje.textContent = "❌ " + data.message;
+            mensaje.classList.remove("text-success");
+            mensaje.classList.add("text-danger");
+          }
+        })
+        .catch(() => {
+          mensaje.textContent = "❌ Error de red.";
+          mensaje.classList.remove("text-success");
+          mensaje.classList.add("text-danger");
+        });
+      });
+    });
+  </script>
+
 </body>
 </html>

views/login/verificar_codigo.php

@@ -24,7 +24,7 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
       background-color: #f4f6f9;
       font-family: 'Segoe UI', sans-serif;
       position: relative;
-      height: 100vh;
+      min-height: 100vh;
     }
 
     .navbar {
@@ -67,13 +67,22 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
 
     /* Contenedor de fondo semitransparente para las vistas */
     .overlay {
-      position: absolute;
+      position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.5);
       z-index: 5;
+      pointer-events: none; /* Para que no interfiera con los clics */
+    }
+    #mensaje {
+      transition: opacity 0.3s ease;
+    }
+    @media (max-height: 600px) {
+      footer {
+        position: static !important;
+      }
     }
   </style>
 </head>
@@ -119,20 +128,34 @@ $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" style="color:<?= $color1 ?>">Verificar código</h4>
+    <h4 class="mb-4 text-center text-dark">Verifica tu código</h4>
 
-        <form action="/IMPORTADORES/login/verificarCodigo" method="POST">
+    <?php
+      if (!isset($_SESSION['email_recuperacion'])) {
+        // Si no hay correo en sesión, redirige a solicitar código
+        header('Location: /IMPORTADORES/login/recuperar');
+        exit;
+      }
+    ?>
+    <!-- Formulario para verificar el código -->
+    <form id="formCodigo" action="/IMPORTADORES/login/verificarCodigo" method="POST">
       <div class="mb-3">
-            <label class="form-label">Ingresa el código recibido:</label>
+        <label class="form-label" for="codigo">Código recibido por correo</label>
-            <input type="text" name="codigo" required class="form-control">
+        <input type="text" id="codigo" name="codigo" class="form-control" required pattern="\d{6}" maxlength="6" placeholder="Ej. 123456">
       </div>
-
+      <button type="submit" class="btn btn-primary w-100">Verificar código</button>
-        <button type="submit" class="btn btn-success w-100">Verificar</button>
-
-        <?php if (isset($_SESSION['codigo_error'])): ?>
-            <div class="text-danger mt-2"><?= $_SESSION['codigo_error'] ?></div>
-            <?php unset($_SESSION['codigo_error']); endif; ?>
     </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>
+        <?php unset($_SESSION['codigo_error']); ?>
+      <?php elseif (isset($_SESSION['codigo_exito'])): ?>
+        <div class="text-success"><?= $_SESSION['codigo_exito'] ?></div>
+        <?php unset($_SESSION['codigo_exito']); ?>
+      <?php endif; ?>
+    </div>
   </div>
 
   <!-- FOOTER -->
@@ -140,5 +163,60 @@ $mensajeMantenimiento = $config['mensaje_mantenimiento'] ?? 'El sistema se encue
     &copy; <?= date('Y') ?> <?= htmlspecialchars($siglas) ?> · <?= htmlspecialchars($nombre) ?>
   </footer>
 
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const form = document.getElementById('formCodigo');
+      const mensaje = document.getElementById('mensaje');
+      const inputCodigo = form.querySelector('input[name="codigo"]');
+
+      inputCodigo.addEventListener('input', () => {
+        mensaje.innerHTML = '';
+        mensaje.classList.remove("text-danger", "text-success");
+      });
+
+      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;
+        }
+
+        const formData = new FormData();
+        formData.append('codigo', codigo);
+
+        fetch('/IMPORTADORES/login/verificarCodigo', {
+          method: 'POST',
+          body: formData,
+          credentials: 'same-origin' // ✅ Importante para mantener sesión
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            mensaje.textContent = data.message;
+            mensaje.classList.remove("text-danger");
+            mensaje.classList.add("text-success");
+
+            // 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");
+          }
+        })
+        .catch(() => {
+          mensaje.textContent = "❌ Error al verificar el código.";
+          mensaje.classList.remove("text-success");
+          mensaje.classList.add("text-danger");
+        });
+      });
+    });
+  </script>
+
 </body>
 </html>