|
|
@@ -109,6 +109,49 @@
|
|
|
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>
|
|
|
@@ -118,6 +161,9 @@
|
|
|
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();
|
|
|
@@ -169,11 +215,16 @@
|
|
|
pinInput.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 - simular guardado
|
|
|
- showSuccess();
|
|
|
+
|
|
|
+ // PIN válido - enviar al servidor
|
|
|
fetch(`/api/users/create-user?q=${q}`, {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
@@ -182,19 +233,27 @@
|
|
|
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.');
|
|
|
+ })
|
|
|
+ .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) {
|
|
|
@@ -212,6 +271,21 @@
|
|
|
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');
|
Erwin Jacimino