pedidos-express/public/register/app.js

function showRegisterModal() {
            document.getElementById('registerModal').classList.remove('hidden');
        }

        function hideRegisterModal() {
            document.getElementById('registerModal').classList.add('hidden');
        }

        // Formateo automático del RUT mientras se escribe
        document.getElementById('rutInput').addEventListener('input', function(e) {
            let rut = e.target.value.replace(/[^0-9kK]/g, '');
            
            if (rut.length > 1) {
                let body = rut.slice(0, -1);
                let dv = rut.slice(-1);
                
                if (body.length > 0) {
                    // Agregar puntos cada 3 dígitos desde la derecha
                    body = body.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
                    rut = body + '-' + dv;
                }
            }
            
            e.target.value = rut;
        });

        // Manejo del envío del formulario
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            showGlobalLoader();
            const formData = new FormData(e.target);
            const data = {
                name: formData.get('name'),
                email: formData.get('email'),
                rut: formData.get('rut')
            };
            console.log('Datos del formulario:', data);
            fetch('/api/users/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(errorData => {
                        throw new Error(errorData.message || 'Error al registrar el usuario.');
                    });
                }
                return response.json();
            })
            .then(data => {
                console.log('Registro exitoso:', data);
                alert('Registro exitoso! Revisa tu correo electrónico para el PIN.');
                hideRegisterModal();
            }).finally(() => {
                hideGlobalLoader();
            })
        });

function createGlobalLoader() {
    if (document.getElementById('globalLoader')) return;
    globalLoaderElement = document.createElement('div');
    globalLoaderElement.id = 'globalLoader';
    globalLoaderElement.className = 'fixed inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center z-[2000] transition-opacity duration-300 ease-in-out pointer-events-none';
    globalLoaderElement.style.opacity = '0';
    globalLoaderElement.innerHTML = `
        <div style="border: 6px solid rgba(255, 255, 255, 0.2); border-radius: 50%; border-top: 6px solidrgb(172, 85, 85); width: 60px; height: 60px; animation: spin 1s linear infinite;"></div>
        <p class="text-white text-xl mt-4">Procesando su registro...</p>
    `;
    document.body.appendChild(globalLoaderElement);
}

function showGlobalLoader() {
    if (!globalLoaderElement) createGlobalLoader();
    globalLoaderElement.style.display = 'flex';
    setTimeout(() => { if (globalLoaderElement) globalLoaderElement.style.opacity = '1'; }, 10);
}

function hideGlobalLoader() {
    if (globalLoaderElement) {
        globalLoaderElement.style.opacity = '0';
        setTimeout(() => { if (globalLoaderElement) globalLoaderElement.style.display = 'none'; }, 300);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    createGlobalLoader();
    hideGlobalLoader();
    showRegisterModal();
});