|
|
@@ -0,0 +1,227 @@
|
|
|
+<!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>
|
latapp