Masterstreet
/
pedidos-express


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
							<!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">
  
  <!-- Meta tags para evitar cache -->
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="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>

    <!-- Pantalla de Éxito -->
    <div id="successScreen" class="hidden bg-white rounded-xl shadow-sm border border-gray-200 p-8 space-y-6">
      <div class="text-center">
        <!-- Ícono de éxito -->
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
        </div>
        
        <h2 class="text-[24px] font-bold text-[#101419] mb-2">¡Registro Exitoso!</h2>
        <p class="text-sm text-[#58728d] mb-6">
          Tu cuenta ha sido creada correctamente en Biergarten Klein
        </p>
      </div>

      <div class="bg-gray-50 rounded-lg p-4 space-y-3">
        <div class="text-center">
          <h3 class="text-sm font-medium text-[#101419] mb-1">Tu número de usuario es:</h3>
          <div class="text-2xl font-bold text-[#101419] tracking-wide" id="userId">
            #0000
          </div>
          <p class="text-xs text-[#58728d] mt-2">
            Es un gran placer tenerte con nosotros.
          </p>
        </div>
      </div>

      <div class="space-y-3">
        <a 
          href="/" 
          id="loginLink"
          class="block w-full bg-[#101419] hover:bg-[#37404a] text-white py-3 rounded-lg font-medium transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:ring-[#101419] text-center"
        >
          Iniciar Sesión
        </a>
        
        <p class="text-xs text-[#58728d] text-center">
          Ya puedes usar tu número de usuario y PIN para acceder a tu cuenta
        </p>
      </div>
    </div>
  </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');
    const successScreen = document.getElementById('successScreen');
    const userIdElement = document.getElementById('userId');
    const loginLink = document.getElementById('loginLink');

    // 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;
      }
      
      
      // Deshabilitar el botón mientras se procesa
      submitBtn.disabled = true;
      submitBtn.textContent = 'Creando PIN...';
      
      //get q url query
      const urlParams = new URLSearchParams(window.location.search);
      const q = urlParams.get('q');
      
      // PIN válido - enviar al servidor
      fetch(`/api/users/create-user?q=${q}`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          pin: pin
        })
      })
      .then(response => {
        if (response.status === 201) {
          return response.json();
        } else {
          return response.json().then(data => {
            throw new Error(data.message || 'Ocurrió un error al crear el PIN. Inténtalo de nuevo más tarde.');
          });
        }
      })
      .then(data => {
        // Mostrar pantalla de éxito con el ID del usuario
        showSuccessScreen(data.data.user_id || data.data.id || 'N/A');

      })
      .catch(error => {
        console.error('Error al crear el PIN:', error);
        showError(error.message || 'Ocurrió un error al crear el PIN. Inténtalo de nuevo más tarde.');
        // Rehabilitar el botón en caso de error
        submitBtn.disabled = false;
        submitBtn.textContent = 'Crear PIN';
      });
    });

    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 showSuccessScreen(userId) {
      // Ocultar el formulario
      pinForm.classList.add('hidden');
      
      // Mostrar la pantalla de éxito
      successScreen.classList.remove('hidden');
      
      // Actualizar el ID del usuario
      userIdElement.textContent = `#${userId}`;
      
      // Configurar el enlace de inicio de sesión con la URL base
      const currentUrl = window.location.origin; // Esto obtiene la URL base actual
      loginLink.href = currentUrl;
    }

    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>