Tul xxx Tul

Viewing: admin_login.php

<?php

include '../components/connect.php';
require_once '../components/admin_roles.php';
ensureAdminRolesSchema($conn);
// Elimina o comenta la siguiente línea para quitar la barra y el error
// include '../components/user_header.php'; 

$businessName = getBusinessName($conn);
$businessLogo = getBusinessLogo($conn);
$businessLogoVersion = getBusinessLogoVersion($conn);
$businessLogoHref = '../' . ltrim($businessLogo, '/');
if ($businessLogoVersion !== '') {
   $businessLogoHref .= (strpos($businessLogoHref, '?') === false ? '?' : '&') . 'v=' . rawurlencode($businessLogoVersion);
}

session_start();

if(isset($_POST['submit'])){

   $name = $_POST['name'];
   $name = filter_var($name, FILTER_SANITIZE_STRING);
   $pass = sha1($_POST['pass']);
   $pass = filter_var($pass, FILTER_SANITIZE_STRING);

   $select_admin = $conn->prepare("SELECT * FROM `admin` WHERE name = ? AND password = ?");
   $select_admin->execute([$name, $pass]);
   
   if($select_admin->rowCount() > 0){
      $fetch_admin_id = $select_admin->fetch(PDO::FETCH_ASSOC);
      $targetAdminId = (int)($fetch_admin_id['id'] ?? 0);
      $webauthnRequired = (int)($fetch_admin_id['webauthn_required'] ?? 0);

      if ($webauthnRequired === 1) {
         try {
            $credCheck = $conn->prepare("SELECT COUNT(*) FROM `admin_webauthn_credentials` WHERE admin_id = ?");
            $credCheck->execute([$targetAdminId]);
            $credCount = (int)$credCheck->fetchColumn();
            if ($credCount > 0) {
               $message[] = 'Este usuario requiere huella para iniciar sesión.';
            } else {
               $_SESSION['admin_id'] = $targetAdminId;
               refreshAdminRole($conn, $targetAdminId);
               $_SESSION['reset_recipes_category_filter'] = 1;
               header('location:dashboard.php');
            }
         } catch (PDOException $ignored) {
            $_SESSION['admin_id'] = $targetAdminId;
            refreshAdminRole($conn, $targetAdminId);
            $_SESSION['reset_recipes_category_filter'] = 1;
            header('location:dashboard.php');
         }
      } else {
         $_SESSION['admin_id'] = $targetAdminId;
         refreshAdminRole($conn, $targetAdminId);
         $_SESSION['reset_recipes_category_filter'] = 1;
         header('location:dashboard.php');
      }
   }else{
      $message[] = 'Usuario o Contraseña Incorrecta!';
   }

}

?>

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><?= htmlspecialchars($businessName); ?></title>
   <link rel="icon" href="../icon.php?size=64<?= $businessLogoVersion !== '' ? '&v=' . rawurlencode($businessLogoVersion) : ''; ?>" type="image/png">

   <!-- font awesome cdn link  -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">

   <style>
      :root {
         --brand-primary: #b30000;
         --brand-accent: #ffc107;
         --glass-bg: rgba(255, 255, 255, 0.86);
         --text: #0f172a;
         --muted: rgba(15, 23, 42, 0.68);
         --border: rgba(15, 23, 42, 0.12);
         --ring: rgba(179, 0, 0, 0.18);
         --shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
      }
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      body {
         min-height: 100vh;
         background-image: url('../images/2.png');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         background-attachment: fixed;
         display: flex;
         align-items: center;
         justify-content: center;
         font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
         padding: 20px;
         color: var(--text);
      }
      body::before {
         content: '';
         position: fixed;
         inset: 0;
         background:
            radial-gradient(900px 700px at 14% 10%, rgba(255, 193, 7, 0.18), transparent 62%),
            radial-gradient(900px 700px at 86% 92%, rgba(179, 0, 0, 0.20), transparent 62%),
            linear-gradient(135deg, rgba(2, 6, 23, 0.62) 0%, rgba(2, 6, 23, 0.38) 42%, rgba(2, 6, 23, 0.62) 100%);
         mix-blend-mode: multiply;
         pointer-events: none;
         z-index: 0;
      }

      .login-container {
         background: var(--glass-bg);
         backdrop-filter: blur(14px);
         -webkit-backdrop-filter: blur(14px);
         border-radius: 26px;
         padding: 2.35rem;
         max-width: 460px;
         width: 100%;
         position: relative;
         animation: loginFloatIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
         border: 1px solid rgba(255, 255, 255, 0.30);
         box-shadow: var(--shadow);
         z-index: 1;
      }
      .login-container::after {
         content: '';
         position: absolute;
         inset: 0;
         border-radius: 26px;
         padding: 1px;
         background: linear-gradient(135deg, rgba(255, 193, 7, 0.55), rgba(179, 0, 0, 0.45));
         -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
         mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
         -webkit-mask-composite: xor;
         mask-composite: exclude;
         pointer-events: none;
      }

      @keyframes loginFloatIn {
         from {
            opacity: 0;
            transform: translateY(-10px) scale(0.985);
         }
         to {
            opacity: 1;
            transform: translateY(0) scale(1);
         }
      }

      .login-logo {
         width: 86px;
         height: 86px;
         object-fit: contain;
         margin: 0 auto 20px;
         display: block;
         border-radius: 16px;
         background: transparent;
         padding: 0;
         filter: drop-shadow(0 6px 14px rgba(179,0,0,0.25));
      }

      .login-title {
         font-weight: 900;
         color: var(--text);
         margin-bottom: 1.35rem;
         text-align: center;
         font-size: 1.75rem;
         letter-spacing: 0.02em;
      }

      .form-control {
         border-radius: 16px;
         background: rgba(255, 255, 255, 0.86);
         border: 1px solid var(--border);
         font-size: 1.02rem;
         margin-bottom: 1rem;
         padding: 0.95rem 1rem;
         transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
         height: auto;
      }

      .form-control:focus {
         border-color: rgba(179, 0, 0, 0.32);
         box-shadow: 0 0 0 0.25rem var(--ring);
         background: rgba(255, 255, 255, 0.95);
         transform: translateY(-1px);
      }

      .input-with-icon { position: relative; }
      .input-icon {
         position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
         color: rgba(15, 23, 42, 0.55);
         font-size: 1.05rem;
      }
      .form-control.with-icon { padding-left: 2.5rem; }

      .btn-login {
         background: linear-gradient(135deg, rgba(179, 0, 0, 0.98) 0%, rgba(255, 193, 7, 0.96) 100%);
         color: #fff;
         font-weight: 800;
         border: none;
         border-radius: 16px;
         padding: 0.95rem 0;
         font-size: 1.05rem;
         box-shadow: 0 16px 38px rgba(179, 0, 0, 0.22);
         transition: transform 140ms ease, box-shadow 180ms ease, filter 180ms ease;
         width: 100%;
         margin-top: 0.5rem;
      }

      .btn-login:hover, .btn-login:focus {
         transform: translateY(-2px);
         box-shadow: 0 20px 46px rgba(179, 0, 0, 0.26);
         filter: saturate(1.05);
      }

      .btn-passkey {
         background: transparent;
         border: 0;
         padding: 0;
         width: 74px;
         height: 74px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 0.85rem;
         border-radius: 18px;
         transition: transform 140ms ease;
      }

      .btn-passkey:hover, .btn-passkey:focus {
         transform: translateY(-1px);
      }

      .btn-passkey:focus-visible {
         outline: 3px solid rgba(179, 0, 0, 0.32);
         outline-offset: 6px;
      }

      .btn-passkey:disabled {
         cursor: not-allowed;
      }

      .passkey-icon {
         width: 64px;
         height: 64px;
         object-fit: contain;
         filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.18));
         transition: transform 140ms ease, filter 180ms ease, opacity 160ms ease;
      }

      .btn-passkey:hover .passkey-icon,
      .btn-passkey:focus .passkey-icon {
         transform: translateY(-2px) scale(1.03);
         filter: drop-shadow(0 16px 34px rgba(15, 23, 42, 0.22));
      }

      .btn-passkey:disabled .passkey-icon {
         opacity: 0.55;
      }

      .btn-regresar {
         background: rgba(15, 23, 42, 0.70);
         color: #fff !important;
         font-weight: 700;
         border: 1px solid rgba(255, 255, 255, 0.18);
         border-radius: 16px;
         padding: 0.85rem 1.1rem;
         font-size: 0.95rem;
         margin-bottom: 1.5rem;
         box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
         transition: transform 140ms ease, box-shadow 180ms ease, background 180ms ease;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         text-decoration: none;
      }

      .btn-regresar:hover, .btn-regresar:focus {
         background: rgba(15, 23, 42, 0.82);
         color: #fff;
         transform: translateY(-2px);
         box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
         text-decoration: none;
      }

      .message {
         background: rgba(248, 113, 113, 0.16);
         color: rgba(127, 29, 29, 0.95);
         border-radius: 16px;
         padding: 1rem;
         margin-bottom: 1rem;
         font-size: 0.95rem;
         display: flex;
         align-items: center;
         justify-content: space-between;
         box-shadow: 0 16px 44px rgba(127, 29, 29, 0.12);
         border: 1px solid rgba(127, 29, 29, 0.18);
      }

      .message i {
         cursor: pointer;
         margin-left: 10px;
         font-size: 1.1rem;
         transition: color 0.3s ease;
      }

      .message i:hover {
         color: #721c24;
      }

      .password-container {
         position: relative;
         margin-bottom: 1rem;
      }

      .password-toggle {
         position: absolute;
         right: 15px;
         top: 50%;
         transform: translateY(-50%);
         cursor: pointer;
         color: rgba(15, 23, 42, 0.55);
         transition: color 0.3s ease;
         z-index: 10;
      }

      .password-toggle:hover {
         color: rgba(15, 23, 42, 0.75);
      }

      .form-group {
         margin-bottom: 1rem;
      }

      .form-label {
         font-weight: 600;
         color: #495057;
         margin-bottom: 0.5rem;
         display: block;
      }

      /* Responsive Design */
      @media (max-width: 480px) {
         body {
            padding: 15px;
         }

         .login-container {
            padding: 2rem 1.5rem;
            max-width: 100%;
            margin: 0;
         }

         .login-title {
            font-size: 1.6rem;
         }

         .btn-regresar {
            width: 100%;
            justify-content: center;
            margin-bottom: 1rem;
         }

         .form-control {
            font-size: 16px; /* Previene zoom en iOS */
         }
      }

      @media (max-width: 360px) {
         .login-container {
            padding: 1.5rem 1rem;
         }

         .login-title {
            font-size: 1.4rem;
         }
      }

      /* Mejoras para pantallas grandes */
      @media (min-width: 768px) {
         .login-container {
            max-width: 480px;
         }
      }

      @media (prefers-reduced-motion: reduce) {
         .login-container {
            animation: none;
         }
         .btn-login,
         .btn-regresar,
         .form-control {
            transition: none;
         }
      }
   </style>
</head>
<body>
   <div class="login-container">
      <!-- Logo -->
      <div class="text-center mb-3">
         <img src="<?= htmlspecialchars($businessLogoHref); ?>" alt="Logo <?= htmlspecialchars($businessName); ?>" class="login-logo">
      </div>

      <!-- Título -->
      <h2 class="login-title">Iniciar Sesión</h2>

      <!-- Mensajes de error -->
      <?php
      if(isset($message)){
         foreach($message as $message){
            echo '
            <div class="message">
               <span>'.$message.'</span>
               <i class="fas fa-times" onclick="this.parentElement.remove();"></i>
            </div>
            ';
         }
      }
      ?>

      <!-- Formulario -->
      <form action="" method="POST" autocomplete="off">
         <div class="form-group input-with-icon">
            <span class="input-icon"><i class="bi bi-person"></i></span>
            <input type="text" id="usernameInput" name="name" maxlength="20" required placeholder="Usuario" class="form-control with-icon" oninput="this.value = this.value.replace(/\s/g, '')" autocomplete="username">
         </div>
         
         <div class="form-group">
            <div class="password-container input-with-icon">
               <span class="input-icon"><i class="bi bi-lock"></i></span>
               <input type="password" id="passwordInput" name="pass" maxlength="20" required placeholder="Contraseña" class="form-control with-icon" oninput="this.value = this.value.replace(/\s/g, '')" autocomplete="current-password">
               <span class="password-toggle" onclick="togglePassword()">
                  <i id="togglePasswordIcon" class="bi bi-eye-slash"></i>
               </span>
            </div>
         </div>
         
         <button type="button" id="btnPasskey" class="btn btn-passkey" aria-label="Entrar con huella" title="Entrar con huella">
            <img src="../assets/img/huella.png" alt="" class="passkey-icon">
         </button>

         <button type="submit" name="submit" class="btn btn-login">
            <i class="bi bi-box-arrow-in-right me-2"></i> Entrar
         </button>

         <div class="text-center mt-3">
            <a href="../index.php" class="btn btn-regresar" style="width: 100%; justify-content: center;">
               <i class="bi bi-arrow-left"></i> Regresar
            </a>
         </div>
      </form>
   </div>

   <script>
      function base64UrlToArrayBuffer(base64url) {
         const base64 = (base64url || '').replace(/-/g, '+').replace(/_/g, '/');
         const pad = base64.length % 4;
         const padded = pad ? base64 + '='.repeat(4 - pad) : base64;
         const binary = atob(padded);
         const bytes = new Uint8Array(binary.length);
         for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
         return bytes.buffer;
      }

      function arrayBufferToBase64Url(buffer) {
         const bytes = new Uint8Array(buffer);
         let binary = '';
         for (let i = 0; i < bytes.byteLength; i++) binary += String.fromCharCode(bytes[i]);
         const base64 = btoa(binary);
         return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
      }

      function showLoginMessage(text) {
         const container = document.querySelector('.login-container');
         if (!container) return;
         const div = document.createElement('div');
         div.className = 'message';
         div.innerHTML = `<span>${String(text || '').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span><i class="fas fa-times" onclick="this.parentElement.remove();"></i>`;
         const form = container.querySelector('form');
         if (form) {
            container.insertBefore(div, form);
         } else {
            container.appendChild(div);
         }
      }

      function togglePassword() {
         const passwordInput = document.getElementById('passwordInput');
         const icon = document.getElementById('togglePasswordIcon');
         
         if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('bi-eye-slash');
            icon.classList.add('bi-eye');
         } else {
            passwordInput.type = 'password';
            icon.classList.remove('bi-eye');
            icon.classList.add('bi-eye-slash');
         }
      }

      // Cerrar mensajes de error al hacer clic en la X
      document.addEventListener('DOMContentLoaded', function() {
         const closeButtons = document.querySelectorAll('.message i');
         closeButtons.forEach(button => {
            button.addEventListener('click', function() {
               this.parentElement.remove();
            });
         });

         const passkeyBtn = document.getElementById('btnPasskey');
         const usernameInput = document.getElementById('usernameInput');
         if (!passkeyBtn) return;

         if (!window.PublicKeyCredential || typeof navigator.credentials?.get !== 'function') {
            passkeyBtn.disabled = true;
            passkeyBtn.style.opacity = '0.55';
            passkeyBtn.title = 'Este navegador no soporta huella/passkeys.';
            return;
         }

         passkeyBtn.addEventListener('click', async () => {
            try {
               const username = (usernameInput?.value || '').trim();

               passkeyBtn.disabled = true;
               const url = username
                  ? `webauthn.php?action=login_options&name=${encodeURIComponent(username)}&_t=${Date.now()}`
                  : `webauthn.php?action=login_options&_t=${Date.now()}`;
               const res = await fetch(url, {
                  headers: { 'Accept': 'application/json' },
                  credentials: 'same-origin',
                  cache: 'no-store'
               });
               const data = await res.json();
               if (!data?.ok) {
                  throw new Error(data?.error || 'No se pudo iniciar la huella.');
               }

               const pk = data.publicKey || {};
               pk.challenge = base64UrlToArrayBuffer(pk.challenge);
               if (Array.isArray(pk.allowCredentials)) {
                  pk.allowCredentials = pk.allowCredentials.map((c) => ({
                     ...c,
                     id: base64UrlToArrayBuffer(c.id)
                  }));
               } else {
                  delete pk.allowCredentials;
               }

               const assertion = await navigator.credentials.get({ publicKey: pk });
               if (!assertion) {
                  throw new Error('No se obtuvo respuesta de la huella.');
               }

               const payload = {
                  id: assertion.id,
                  rawId: arrayBufferToBase64Url(assertion.rawId),
                  type: assertion.type,
                  response: {
                     clientDataJSON: arrayBufferToBase64Url(assertion.response.clientDataJSON),
                     authenticatorData: arrayBufferToBase64Url(assertion.response.authenticatorData),
                     signature: arrayBufferToBase64Url(assertion.response.signature),
                     userHandle: assertion.response.userHandle ? arrayBufferToBase64Url(assertion.response.userHandle) : null,
                  }
               };

               const verifyRes = await fetch('webauthn.php?action=login_verify', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                  credentials: 'same-origin',
                  body: JSON.stringify(payload)
               });

               const verifyData = await verifyRes.json();
               if (!verifyData?.ok) {
                  throw new Error(verifyData?.error || 'Huella inválida.');
               }

               window.location.href = verifyData.redirect || 'dashboard.php';
            } catch (err) {
               showLoginMessage(err?.message || 'Error usando huella.');
            } finally {
               passkeyBtn.disabled = false;
            }
         });
      });
   </script>
</body>
</html>
User / IP	: 216.73.217.21
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64