app.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. function showErrorMessage(message) {
  2. const errorMessageElement = document.getElementById('registerErrorMessage');
  3. if (errorMessageElement) {
  4. errorMessageElement.textContent = message;
  5. errorMessageElement.classList.remove('hidden');
  6. }
  7. }
  8. function showRegisterModal() {
  9. document.getElementById('registerModal').classList.remove('hidden');
  10. }
  11. function hideRegisterModal() {
  12. document.getElementById('registerModal').classList.add('hidden');
  13. }
  14. // Formateo automático del RUT mientras se escribe
  15. document.getElementById('rutInput').addEventListener('input', function (e) {
  16. let rut = e.target.value.replace(/[^0-9kK]/g, '');
  17. if (rut.length > 1) {
  18. let body = rut.slice(0, -1);
  19. let dv = rut.slice(-1);
  20. if (body.length > 0) {
  21. // Agregar puntos cada 3 dígitos desde la derecha
  22. body = body.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
  23. rut = body + '-' + dv;
  24. }
  25. }
  26. e.target.value = rut;
  27. });
  28. // Manejo del envío del formulario
  29. document.getElementById('registerForm').addEventListener('submit', function (e) {
  30. e.preventDefault();
  31. showGlobalLoader();
  32. const formData = new FormData(e.target);
  33. const data = {
  34. name: formData.get('name'),
  35. email: formData.get('email'),
  36. rut: formData.get('rut')
  37. };
  38. fetch('/api/users/register', {
  39. method: 'POST',
  40. headers: {
  41. 'Content-Type': 'application/json'
  42. })
  43. .then(async response => {
  44. const responseData = await response.json().catch(() => ({}));
  45. if (!response.ok) {
  46. const errorMsg = responseData.detail || 'Error al registrar el usuario.';
  47. console.error('Error en el registro:', errorMsg);
  48. showErrorMessage(errorMsg);
  49. return null;
  50. }
  51. return responseData;
  52. })
  53. .then(result => {
  54. if (result) {
  55. document.getElementById('successPage').classList.remove('hidden');
  56. hideRegisterModal();
  57. }
  58. })
  59. .catch(error => {
  60. console.error('Error de red o conexión:', error);
  61. showErrorMessage('Error de conexión. Por favor, intenta nuevamente.');
  62. })
  63. .finally(() => {
  64. hideGlobalLoader();
  65. });
  66. });
  67. function createGlobalLoader() {
  68. if (document.getElementById('globalLoader')) return;
  69. globalLoaderElement = document.createElement('div');
  70. globalLoaderElement.id = 'globalLoader';
  71. 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';
  72. globalLoaderElement.style.opacity = '0';
  73. globalLoaderElement.innerHTML = `
  74. <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>
  75. <p class="text-white text-xl mt-4">Procesando su registro...</p>
  76. `;
  77. document.body.appendChild(globalLoaderElement);
  78. }
  79. function showGlobalLoader() {
  80. if (!globalLoaderElement) createGlobalLoader();
  81. globalLoaderElement.style.display = 'flex';
  82. setTimeout(() => { if (globalLoaderElement) globalLoaderElement.style.opacity = '1'; }, 10);
  83. }
  84. function hideGlobalLoader() {
  85. if (globalLoaderElement) {
  86. globalLoaderElement.style.opacity = '0';
  87. setTimeout(() => { if (globalLoaderElement) globalLoaderElement.style.display = 'none'; }, 300);
  88. }
  89. }
  90. document.addEventListener('DOMContentLoaded', function () {
  91. createGlobalLoader();
  92. hideGlobalLoader();
  93. // showRegisterModal();
  94. });