msaldain
abaf43b8d6
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
152 lines
5.3 KiB
HTML
152 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SuiteCoffee - Autenticación</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
</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: 400px;">
|
|
<h4 class="text-center mb-3" id="form-title">Iniciar Sesión</h4>
|
|
|
|
<!-- Mensajes -->
|
|
<div id="mensaje" class="alert d-none" role="alert"></div>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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>
|