page register best feedback

public/register/app.js

@@ -1,63 +1,71 @@
+function showErrorMessage(message) {
+    const errorMessageElement = document.getElementById('registerErrorMessage');
+    if (errorMessageElement) {
+        errorMessageElement.textContent = message;
+        errorMessageElement.classList.remove('hidden');
+    }
+}
+
 function showRegisterModal() {
-            document.getElementById('registerModal').classList.remove('hidden');
-        }
+    document.getElementById('registerModal').classList.remove('hidden');
+}
+
+function hideRegisterModal() {
+    document.getElementById('registerModal').classList.add('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;
         }
+    }
 
-        // 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;
-        });
+    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();
-            })
-        });
+// 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 => {
+                    showErrorMessage(errorData.message || 'Error al registrar el usuario.');
+                });
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log('Registro exitoso:', data);
+            document.querySelector('#successPage').classList.remove('hidden');
+            hideRegisterModal();
+        }).finally(() => {
+            hideGlobalLoader();
+        })
+});
 
 function createGlobalLoader() {
     if (document.getElementById('globalLoader')) return;
@@ -85,7 +93,7 @@ function hideGlobalLoader() {
     }
 }
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     createGlobalLoader();
     hideGlobalLoader();
     showRegisterModal();

public/register/index.html

@@ -61,6 +61,7 @@
           </div>
         </div>
 
+        <span id="registerErrorMessage" class="text-red-500 text-sm hidden"></span>
         <div class="flex gap-3">
           <button id="registerAcceptBtn"
                   type="submit"
@@ -70,5 +71,30 @@
         </div>
       </form>
     </div>
+
+        <!-- === PÁGINA DE REGISTRO EXITOSO === -->
+    <div id="successPage" class="hidden min-h-screen bg-gray-100 flex items-center justify-center p-4">
+      <div class="bg-white w-full max-w-lg p-10 rounded-xl shadow-xl space-y-8 text-center">
+        <!-- Icono de éxito -->
+        <div class="flex justify-center">
+          <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
+            <svg class="w-10 h-10 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>
+        </div>
+
+        <!-- Mensaje de éxito -->
+        <div>
+          <h1 class="text-3xl font-bold text-gray-900 mb-3">¡Registro Exitoso!</h1>
+          <p class="text-gray-600 text-lg">
+            Tu cuenta ha sido creada correctamente. Recibirás un correo electrónico de confirmación en breve.
+          </p>
+          <p>
+            Espero que disfrutes de la experiencia de pedidos con nosotros.
+          </p>
+        </div>
+      </div>
+    </div>
 </body>
 </html>