auth - registro... planes

Se pudo crear la tabla 'plan' donde se encuentran los plane que el usuario puede selecionar al registrarse en el sistema. verificado que el código funciona por que tráe los diferentes planes. Aún no se pudo registrar un nuevo usuario. Se intentará resolver
2025-08-15 03:35:26 +00:00
parent aa6d4e84c0
commit abaf43b8d6
5 changed files with 804 additions and 86 deletions
@@ -2,44 +2,150 @@
 <html lang="es">
 <head>
  <meta charset="UTF-8">
-  <title>Login Bootstrap</title>
-  <!-- Bootstrap CDN -->
+  <title>SuiteCoffee - Autenticación</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-
 </head>
 <body class="bg-light d-flex justify-content-center align-items-center vh-100">

-  <div class="card shadow p-4" style="width: 100%; max-width: 350px;">
-    <h4 class="text-center mb-4">Iniciar Sesión</h4>
+  <div class="card shadow p-4" style="width: 100%; max-width: 400px;">
+    <h4 class="text-center mb-3" id="form-title">Iniciar Sesión</h4>

-    <form id="form-login">
+    <!-- Mensajes -->
+    <div id="mensaje" class="alert d-none" role="alert"></div>

-      <div class="mb-3">
-        <label for="usuario" class="form-label">Usuario</label>
-        <input type="text" class="form-control" id="usuario" placeholder="Ingrese su usuario" required>
-      </div>
-
-      <div class="mb-3">
-        <label for="clave" class="form-label">Contraseña</label>
-        <input type="password" class="form-control" id="clave" placeholder="Ingrese su contraseña" required>
-      </div>
-
-      <div class="d-flex justify-content-between align-items-center mb-3">
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox" id="recordarme">
-          <label class="form-check-label" for="recordarme">
-            Recordarme
-          </label>
+    <!-- Formulario compartido -->
+    <form id="formulario">
+      <div id="registro-extra" style="display: none;">
+        <div class="mb-2">
+          <input type="text" class="form-control" id="nombre_empresa" placeholder="Nombre de la empresa" required>
+        </div>
+        <div class="mb-2">
+          <input type="text" class="form-control" id="rut" placeholder="RUT (opcional)" required>
+        </div>
+        <div class="mb-2">
+          <input type="text" class="form-control" id="telefono" placeholder="Teléfono">
+        </div>
+        <div class="mb-2">
+          <input type="text" class="form-control" id="direccion" placeholder="Dirección">
+        </div>
+        <div class="mb-2">
+          <input type="text" class="form-control" id="logo" placeholder="Logo URL (opcional)">
+        </div>
+        <div class="mb-2">
+          <select class="form-select" id="plan_id" required>
+            <option value="">Cargando planes...</option>
+          </select>
        </div>
-        <a href="#" class="small">¿Olvidaste tu contraseña?</a>
      </div>
-      
-      <button type="submit" class="btn btn-primary w-100">Entrar</button>
+
+      <div class="mb-2">
+        <input type="email" class="form-control" id="correo" placeholder="Correo" required>
+      </div>
+      <div class="mb-3">
+        <input type="password" class="form-control" id="clave" placeholder="Contraseña" required>
+      </div>
+
+      <button type="submit" class="btn btn-primary w-100" id="btn-submit">Entrar</button>
    </form>
+
+    <div class="text-center mt-3">
+      <button class="btn btn-link btn-sm" id="toggle-mode">¿No tienes cuenta? Regístrate</button>
+    </div>
  </div>

-  <!-- Bootstrap JS (opcional) -->
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <script>
+  const form = document.getElementById('formulario');
+  const mensaje = document.getElementById('mensaje');
+  const toggleModeBtn = document.getElementById('toggle-mode');
+  const registroExtra = document.getElementById('registro-extra');
+  const formTitle = document.getElementById('form-title');
+  const btnSubmit = document.getElementById('btn-submit');
+
+  let modoRegistro = false;
+
+  toggleModeBtn.addEventListener('click', () => {
+    modoRegistro = !modoRegistro;
+    registroExtra.style.display = modoRegistro ? 'block' : 'none';
+    formTitle.textContent = modoRegistro ? 'Registrar Cuenta' : 'Iniciar Sesión';
+    btnSubmit.textContent = modoRegistro ? 'Registrarse' : 'Entrar';
+    toggleModeBtn.textContent = modoRegistro ? '¿Ya tienes cuenta? Inicia sesión' : '¿No tienes cuenta? Regístrate';
+
+    if (modoRegistro) {
+      cargarPlanes(); // ✅ ahora sí se ejecutará correctamente
+    }
+  });
+
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    mensaje.classList.add('d-none');
+
+    const datos = {
+      correo: document.getElementById('correo').value,
+      clave_acceso: document.getElementById('clave').value
+    };
+
+    if (modoRegistro) {
+      Object.assign(datos, {
+        nombre_empresa: document.getElementById('nombre_empresa').value,
+        rut: document.getElementById('rut').value,
+        telefono: document.getElementById('telefono').value,
+        direccion: document.getElementById('direccion').value,
+        logo: document.getElementById('logo').value,
+        plan_id: document.getElementById('plan_id').value
+      });
+    }
+
+    try {
+      const url = modoRegistro ? '/registro' : '/login';
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(datos)
+      });
+
+      const resultado = await res.json();
+
+      if (!res.ok) {
+        throw new Error(resultado.error || 'Error inesperado');
+      }
+
+      mensaje.className = 'alert alert-success';
+      mensaje.textContent = resultado.message || (modoRegistro ? 'Registro exitoso' : 'Inicio exitoso');
+      mensaje.classList.remove('d-none');
+
+      if (!modoRegistro) {
+        // Redirigir a dashboard, por ejemplo
+        // window.location.href = `/dashboard?tenant=${resultado.uuid}`;
+      }
+    } catch (err) {
+      mensaje.className = 'alert alert-danger';
+      mensaje.textContent = err.message;
+      mensaje.classList.remove('d-none');
+    }
+  });
+
+  // ✅ Ahora la función está declarada correctamente
+  async function cargarPlanes() {
+    const select = document.getElementById('plan_id');
+    select.innerHTML = '<option value="">Cargando planes...</option>';
+
+    try {
+      const res = await fetch('/planes');
+      const planes = await res.json();
+
+      select.innerHTML = '<option value="">Seleccione un plan</option>';
+      planes.forEach(plan => {
+        const opt = document.createElement('option');
+        opt.value = plan.id;
+        opt.textContent = plan.nombre.charAt(0).toUpperCase() + plan.nombre.slice(1);
+        select.appendChild(opt);
+      });
+    } catch (err) {
+      select.innerHTML = '<option value="">Error al cargar planes</option>';
+      console.error('Error cargando planes:', err);
+    }
+  }
+  </script>
+
 </body>
-</html>
+</html>