Masterstreet
/
pedidos-express


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
							<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Crear PIN - Biergarten Klein</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" as="style" onload="this.rel='stylesheet'"
        href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans:wght@400;500;700;900&family=Spline+Sans:wght@400;500;700">
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
   <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'custom-dark': '#101419',
                        'custom-dark-hover': '#37404a',
                        'gray-50': '#f9fafb',
                        'gray-100': '#f3f4f6',
                    }
                }
            }
        }
    </script>
</head>

<body class="h-[100vh] bg-gray-50 flex items-center justify-center p-4" style='font-family:"Spline Sans","Noto Sans",sans-serif;'>
  
  <div class="w-full max-w-md">
    <!-- Header -->
    <div class="text-center mb-8">
      <h1 class="text-[26px] font-bold text-[#101419] tracking-tight mb-2">
        Biergarten Klein
      </h1>
      <p class="text-[#58728d] text-sm">
        Crea tu PIN de seguridad
      </p>
    </div>

    <!-- Formulario -->
    <form id="pinForm" class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 space-y-6">
      <div class="text-center">
        <h2 class="text-[19px] font-bold text-[#101419] mb-2">Crear tu PIN</h2>
        <p class="text-sm text-[#58728d]">
          Elige un PIN de 4 dígitos que usarás para acceder a tu cuenta
        </p>
      </div>

      <div class="space-y-4">
        <div>
          <label for="pinInput" class="block text-sm font-medium text-[#101419] mb-2">
            Nuevo PIN (4 dígitos)
          </label>
          <input 
            id="pinInput"
            name="pin"
            type="password"
            maxlength="4"
            pattern="[0-9]{4}"
            class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:ring-2 focus:ring-[#101419] focus:border-transparent outline-none transition-all text-center text-lg tracking-widest"
            placeholder="••••" 
            required 
            autocomplete="new-password"
          />
        </div>

        <div>
          <label for="confirmPinInput" class="block text-sm font-medium text-[#101419] mb-2">
            Confirmar PIN
          </label>
          <input 
            id="confirmPinInput"
            name="confirmPin"
            type="password"
            maxlength="4"
            pattern="[0-9]{4}"
            class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:ring-2 focus:ring-[#101419] focus:border-transparent outline-none transition-all text-center text-lg tracking-widest"
            placeholder="••••" 
            required 
            autocomplete="new-password"
          />
        </div>

        <!-- Mensaje de error -->
        <div id="errorMessage" class="hidden text-red-500 text-sm text-center"></div>

        <!-- Mensaje de éxito -->
        <div id="successMessage" class="hidden text-green-600 text-sm text-center">
          ✓ PIN creado correctamente
        </div>

        <!-- Indicador de fuerza del PIN -->
        <div class="text-xs text-[#58728d] text-center">
          💡 Consejo: Evita usar PINs obvios como 1234 o 0000
        </div>
      </div>

      <button 
        id="submitBtn"
        type="submit"
        class="w-full bg-[#101419] hover:bg-[#37404a] disabled:opacity-50 disabled:cursor-not-allowed text-white py-3 rounded-lg font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-[#101419]"
      >
        Crear PIN
      </button>
    </form>
  </div>

  <script>
    const pinForm = document.getElementById('pinForm');
    const pinInput = document.getElementById('pinInput');
    const confirmPinInput = document.getElementById('confirmPinInput');
    const submitBtn = document.getElementById('submitBtn');
    const errorMessage = document.getElementById('errorMessage');
    const successMessage = document.getElementById('successMessage');

    // Auto-focus en el primer input al cargar
    pinInput.focus();

    // Solo permitir números en ambos inputs
    [pinInput, confirmPinInput].forEach(input => {
      input.addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
        
        // Ocultar mensajes cuando el usuario empiece a escribir
        errorMessage.classList.add('hidden');
        successMessage.classList.add('hidden');
        resetInputStyles();
      });
    });

    // Envío del formulario
    pinForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const pin = pinInput.value.trim();
      const confirmPin = confirmPinInput.value.trim();
      
      // Validar que ambos campos tengan 4 dígitos
      if (pin.length !== 4) {
        showError('El PIN debe tener exactamente 4 dígitos');
        pinInput.focus();
        return;
      }
      
      if (confirmPin.length !== 4) {
        showError('Debes confirmar tu PIN con 4 dígitos');
        confirmPinInput.focus();
        return;
      }
      
      // Validar que los PINs coincidan
      if (pin !== confirmPin) {
        showError('Los PINs no coinciden. Inténtalo de nuevo.');
        confirmPinInput.value = '';
        confirmPinInput.focus();
        return;
      }
      
      // Validar que no sea un PIN muy obvio
      const obviousPins = ['1234', '0000', '1111', '2222', '3333', '4444', '5555', '6666', '7777', '8888', '9999'];
      if (obviousPins.includes(pin)) {
        showError('Por seguridad, elige un PIN menos obvio');
        pinInput.focus();
        return;
      }
      //get q url query
      const urlParams = new URLSearchParams(window.location.search);
      const q = urlParams.get('q');
      // PIN válido - simular guardado
      showSuccess();
      fetch(`/api/users/create-user?q=${q}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          pin: pin
        })
      }).catch(error => {
        console.error('Error al crear el PIN:', error);
        showError('Ocurrió un error al crear el PIN. Inténtalo de nuevo más tarde.');
      }).then(response => {
        if (response.status === 201){
          alert("Bienvenido a Biergarten Klein, tu PIN ha sido creado exitosamente.");
          window.location.href = '/';
        }else{
          response.json().then(data => {
            showError(data.message || 'Ocurrió un error al crear el PIN. Inténtalo de nuevo más tarde.');
          });
        }
      })
    });

    function showError(message) {
      errorMessage.textContent = message;
      errorMessage.classList.remove('hidden');
      successMessage.classList.add('hidden');
    }

    function showSuccess() {
      successMessage.classList.remove('hidden');
      errorMessage.classList.add('hidden');
      submitBtn.disabled = true;
      submitBtn.textContent = 'PIN Creado ✓';
      pinInput.classList.add('border-green-300');
      confirmPinInput.classList.add('border-green-300');
    }

    function resetInputStyles() {
      pinInput.classList.remove('border-red-300', 'border-green-300');
      confirmPinInput.classList.remove('border-red-300', 'border-green-300');
      pinInput.classList.add('border-gray-300');
      confirmPinInput.classList.add('border-gray-300');
      submitBtn.disabled = false;
      submitBtn.textContent = 'Crear PIN';
    }

    // Avanzar al siguiente campo automáticamente
    pinInput.addEventListener('input', function() {
      if (this.value.length === 4) {
        confirmPinInput.focus();
      }
    });
  </script>

</body>
</html>