165 lines
7.1 KiB
Plaintext
165 lines
7.1 KiB
Plaintext
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title><%= typeof pageTitle !== 'undefined' ? pageTitle : 'Iniciar sesión · SuiteCoffee' %></title>
|
|
|
|
<!-- Bootstrap 5 (minimal) -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
|
|
<style>
|
|
:root {
|
|
--col-pri: #<%= (process.env.COL_PRI || '452D19') %>;
|
|
--col-sec: #<%= (process.env.COL_SEC || 'D7A666') %>;
|
|
--col-bg: #<%= (process.env.COL_BG || 'FFA500') %>33; /* con alpha */
|
|
}
|
|
body { background: radial-gradient(1200px 600px at 10% -10%, var(--col-bg), transparent), #f8f9fa; }
|
|
.brand { color: var(--col-pri); }
|
|
.btn-sso { background: var(--col-pri); color: #fff; border-color: var(--col-pri); }
|
|
.btn-sso:hover { filter: brightness(1.05); color: #fff; }
|
|
.card { border-radius: 14px; }
|
|
.form-hint { font-size: .875rem; color: #6c757d; }
|
|
.divider { display:flex; align-items:center; text-transform:uppercase; font-size:.8rem; color:#6c757d; }
|
|
.divider::before, .divider::after { content:""; height:1px; background:#dee2e6; flex:1; }
|
|
.divider:not(:empty)::before { margin-right:.75rem; }
|
|
.divider:not(:empty)::after { margin-left:.75rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
|
|
<div class="text-center mb-4">
|
|
<h1 class="brand fw-bold">SuiteCoffee</h1>
|
|
<p class="text-secondary mb-0">Accedé a tu cuenta</p>
|
|
</div>
|
|
|
|
<!-- Mensajes (query ?msg= / ?error=) -->
|
|
<div id="flash" class="mb-3" style="display:none"></div>
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-4 p-md-5">
|
|
|
|
<!-- SSO con Authentik -->
|
|
<div class="d-grid gap-2 mb-3">
|
|
<a href="/auth/login" class="btn btn-sso btn-lg" id="btn-sso">
|
|
Ingresar con SSO (Authentik)
|
|
</a>
|
|
</div>
|
|
|
|
<div class="divider my-3">o</div>
|
|
|
|
<!-- Registro mínimo (usa POST /api/users/register) -->
|
|
<form id="form-register" class="needs-validation" novalidate>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="email" name="email" placeholder="tu@correo.com" required>
|
|
<div class="invalid-feedback">Ingresá un email válido.</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="display_name" class="form-label">Nombre a mostrar</label>
|
|
<input type="text" class="form-control" id="display_name" name="display_name" placeholder="Ej.: Juan Pérez" required>
|
|
<div class="invalid-feedback">Ingresá tu nombre.</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="tenant_uuid" class="form-label">Código de organización (tenant UUID)</label>
|
|
<input type="text" class="form-control" id="tenant_uuid" name="tenant_uuid" placeholder="Ej.: 4b8d0f6a-...">
|
|
<div class="form-hint">Si te invitaron a una organización existente, pegá aquí su UUID. Si sos el primero de tu empresa, dejalo vacío y el equipo te asignará uno.</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="role" class="form-label">Rol</label>
|
|
<select id="role" name="role" class="form-select">
|
|
<option value="owner">Owner</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="staff">Staff</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-outline-dark">Crear cuenta</button>
|
|
</div>
|
|
</form>
|
|
|
|
<p class="text-center text-muted mt-3 mb-0" style="font-size:.9rem;">
|
|
Al continuar aceptás nuestros términos y políticas.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-center text-secondary mt-3" style="font-size:.9rem;">
|
|
¿Ya tenés cuenta? <a href="/auth/login" class="link-dark">Iniciá sesión con SSO</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Mostrar mensajes por querystring (?msg=... / ?error=...)
|
|
(function() {
|
|
const params = new URLSearchParams(location.search);
|
|
const el = document.getElementById('flash');
|
|
const msg = params.get('msg');
|
|
const err = params.get('error');
|
|
if (msg) {
|
|
el.innerHTML = `<div class="alert alert-success mb-0" role="alert">${decodeURIComponent(msg)}</div>`;
|
|
el.style.display = '';
|
|
} else if (err) {
|
|
el.innerHTML = `<div class="alert alert-danger mb-0" role="alert">${decodeURIComponent(err)}</div>`;
|
|
el.style.display = '';
|
|
}
|
|
})();
|
|
|
|
// Validación Bootstrap + envío del registro contra /api/users/register
|
|
(function() {
|
|
const form = document.getElementById('form-register');
|
|
form.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
form.classList.add('was-validated');
|
|
if (!form.checkValidity()) return;
|
|
|
|
const btn = form.querySelector('button[type="submit"]');
|
|
btn.disabled = true; btn.innerText = 'Creando...';
|
|
|
|
try {
|
|
const payload = {
|
|
email: document.getElementById('email').value.trim(),
|
|
display_name: document.getElementById('display_name').value.trim(),
|
|
tenant_uuid: document.getElementById('tenant_uuid').value.trim() || undefined,
|
|
role: document.getElementById('role').value
|
|
};
|
|
|
|
const res = await fetch('/api/users/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
credentials: 'include'
|
|
});
|
|
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
throw new Error(data?.error || data?.message || 'No se pudo registrar');
|
|
}
|
|
|
|
// Registro OK → redirigimos a login SSO
|
|
const redir = '/auth/login';
|
|
location.href = redir + '?msg=' + encodeURIComponent('Registro exitoso. Iniciá sesión con SSO.');
|
|
} catch (err) {
|
|
alert(err.message || String(err));
|
|
} finally {
|
|
btn.disabled = false; btn.innerText = 'Crear cuenta';
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|