mberlin/evento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace admin UI with Vue-based login/register interface

Browse Source
This commit is contained in:
mberlin
2026-03-18 17:57:20 -03:00
parent 29d6f902b6
commit a18dde063c
1 changed files with 249 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

591
public/admin.html
View File

@@ -28,459 +28,280 @@
font-size: 0.8rem;
color: #111827;
}
.field {
display: flex;
flex-direction: column;
margin-bottom: 0.5rem;
}
.field input {
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 6px;
}
button {
padding: 0.5rem 0.75rem;
border: 1px solid #ccc;
border-radius: 6px;
background: #f7f7f8;
cursor: pointer;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.error {
color: #b91c1c;
margin-top: 0.5rem;
}
.success {
color: #047857;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<h1>Admin Panel</h1>
<p>Modular admin UI: cada módulo se registra automáticamente.</p>
<p>Interfaz de administración (Vue 3 + JWT).</p>
<div id="app">
<div v-if="!token" class="module">
<h2>Iniciar sesión</h2>
<div class="field">
<label>Email</label>
<input v-model="login.email" type="email" placeholder="admin@local" />
</div>
<div class="field">
<label>Contraseña</label>
<input v-model="login.password" type="password" placeholder="••••••" />
</div>
<div class="field">
<label>Tenant</label>
<input v-model="login.tenantId" placeholder="default" />
</div>
<button :disabled="loading" @click="loginUser">Iniciar sesión</button>
<div :class="{ error: loginError, success: loginSuccess }">{{ loginMessage }}</div>
<div id="auth" class="module">
<h2>Acceso</h2>
<div id="login-form">
<strong>Iniciar sesión</strong><br/>
<input id="loginEmail" placeholder="Email" style="margin-bottom:0.5rem;" />
<input id="loginPassword" type="password" placeholder="Contraseña" style="margin-bottom:0.5rem;" />
<button id="loginBtn">Iniciar sesión</button>
<div id="loginStatus" style="margin-top:0.5rem;color:#555;"></div>
<hr />
<strong>Registrar usuario</strong><br/>
<input id="registerName" placeholder="Nombre (opcional)" style="margin-bottom:0.5rem;" />
<input id="registerEmail" placeholder="Email" style="margin-bottom:0.5rem;" />
<input id="registerPassword" type="password" placeholder="Contraseña" style="margin-bottom:0.5rem;" />
<input id="registerTenant" placeholder="Tenant ID" value="default" style="margin-bottom:0.5rem;" />
<button id="registerBtn">Registrar</button>
<h2>Registrar usuario</h2>
<div class="field">
<label>Nombre</label>
<input v-model="register.name" placeholder="Nombre (opcional)" />
</div>
<div class="field">
<label>Email</label>
<input v-model="register.email" type="email" placeholder="admin@local" />
</div>
<div class="field">
<label>Contraseña</label>
<input v-model="register.password" type="password" placeholder="••••••" />
</div>
<div class="field">
<label>Tenant</label>
<input v-model="register.tenantId" placeholder="default" />
</div>
<button :disabled="loading" @click="registerUser">Registrar</button>
<div :class="{ error: registerError, success: registerSuccess }">{{ registerMessage }}</div>
</div>
<div v-else class="module">
<div style="display:flex; align-items:center; gap:1rem; margin-bottom:1rem;">
<div>
<strong>Autenticado como:</strong> {{ user?.name || user?.email }}
</div>
<button @click="logout">Cerrar sesión</button>
</div>
<div id="main" style="display: none;">
<label>
Tenant ID:
<input id="tenantId" value="default" />
<input v-model="tenantId" />
</label>
<button id="refresh" style="margin-left: 0.5rem;">Actualizar módulos</button>
<button id="logout" style="margin-left: 0.5rem;">Cerrar sesión</button>
<span id="status" style="margin-left: 1rem; color: #555;"></span>
<button @click="loadModules" style="margin-left:0.5rem;">Actualizar módulos</button>
<span style="margin-left:1rem; color:#555;">{{ status }}</span>
<div id="modules"></div>
<div id="module-detail"></div>
<div v-if="modules.length" style="margin-top:1rem;">
<div v-for="mod in modules" :key="mod.key" class="module">
<h2>{{ mod.name }}</h2>
<p><span class="badge">{{ mod.key }}</span> {{ mod.description }}</p>
<button @click="selectModule(mod.key)">Administrar</button>
</div>
</div>
<div v-if="selectedModule" class="module">
<h2>Administrar: {{ selectedModule }}</h2>
<div v-html="moduleHtml"></div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const { createApp, reactive, ref } = Vue;
createApp({
setup() {
const apiRoot = '/api/admin';
const authRoot = '/api/auth';
const tokenKey = 'planner_admin_token';
const authPanel = document.getElementById('auth');
const mainPanel = document.getElementById('main');
const tenantInput = document.getElementById('tenantId');
const modulesContainer = document.getElementById('modules');
const detailContainer = document.getElementById('module-detail');
const statusEl = document.getElementById('status');
const token = ref(localStorage.getItem(tokenKey) || '');
const user = ref(null);
const tenantId = ref('default');
const status = ref('');
const modules = ref([]);
const selectedModule = ref('');
const moduleHtml = ref('');
const loading = ref(false);
const loginStatus = document.getElementById('loginStatus');
const loginEmail = document.getElementById('loginEmail');
const loginPassword = document.getElementById('loginPassword');
const loginBtn = document.getElementById('loginBtn');
const login = reactive({ email: '', password: '', tenantId: 'default' });
const register = reactive({ name: '', email: '', password: '', tenantId: 'default' });
const registerName = document.getElementById('registerName');
const registerEmail = document.getElementById('registerEmail');
const registerPassword = document.getElementById('registerPassword');
const registerTenant = document.getElementById('registerTenant');
const registerBtn = document.getElementById('registerBtn');
const loginMessage = ref('');
const loginError = ref(false);
const loginSuccess = ref(false);
const logoutBtn = document.getElementById('logout');
const registerMessage = ref('');
const registerError = ref(false);
const registerSuccess = ref(false);
let authToken = localStorage.getItem(tokenKey) || '';
function setStatus(msg) {
if (statusEl) statusEl.textContent = msg;
}
function setLoginStatus(msg) {
if (loginStatus) loginStatus.textContent = msg;
}
function setToken(token) {
authToken = token;
if (token) {
localStorage.setItem(tokenKey, token);
} else {
localStorage.removeItem(tokenKey);
}
}
function withTenant(url) {
const tenantId = tenantInput.value || 'default';
const sep = url.includes('?') ? '&' : '?';
return `${url}${sep}tenantId=${encodeURIComponent(tenantId)}`;
}
async function api(path, options = {}) {
setStatus('Consultando ' + path + '...');
if (authToken) {
options.headers = {
...(options.headers || {}),
Authorization: `Bearer ${authToken}`,
const setStatus = (msg) => (status.value = msg);
const setToken = (t) => {
token.value = t;
if (t) localStorage.setItem(tokenKey, t);
else localStorage.removeItem(tokenKey);
};
}
const res = await fetch(withTenant(`${apiRoot}${path}`), options);
const api = async (path, options = {}) => {
setStatus('Consultando ' + path + '...');
const headers = options.headers || {};
if (token.value) headers.Authorization = `Bearer ${token.value}`;
const res = await fetch(`${apiRoot}${path}?tenantId=${encodeURIComponent(tenantId.value)}`, {
...options,
headers,
});
const data = await res.json().catch(() => null);
if (!res.ok) {
const err = data?.message ? data.message : res.statusText;
const err = data?.message || res.statusText;
setStatus(`Error ${res.status}`);
throw new Error(err || `HTTP ${res.status}`);
throw new Error(err);
}
setStatus('OK');
setTimeout(() => setStatus(''), 1500);
return data;
}
};
async function login() {
setLoginStatus('Iniciando sesión...');
const logout = () => {
setToken('');
user.value = null;
selectedModule.value = '';
moduleHtml.value = '';
};
const loginUser = async () => {
loginMessage.value = '';
loginError.value = false;
loginSuccess.value = false;
loading.value = true;
try {
const res = await fetch(`${authRoot}/login`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
tenantId: registerTenant.value || 'default',
email: loginEmail.value,
password: loginPassword.value,
tenantId: login.tenantId || 'default',
email: login.email,
password: login.password,
}),
});
const data = await res.json();
if (!res.ok || !data.token) {
setLoginStatus(data.message || 'Credenciales inválidas');
loginMessage.value = data.message || 'Credenciales inválidas';
loginError.value = true;
return;
}
setToken(data.token);
setLoginStatus('Sesión iniciada');
showMain();
user.value = { email: login.email, name: data.name };
loginMessage.value = 'Sesión iniciada correctamente';
loginSuccess.value = true;
await loadModules();
} catch (err) {
setLoginStatus(err.message || err);
}
loginMessage.value = err.message || err;
loginError.value = true;
} finally {
loading.value = false;
}
};
async function register() {
setLoginStatus('Registrando...');
const registerUser = async () => {
registerMessage.value = '';
registerError.value = false;
registerSuccess.value = false;
loading.value = true;
try {
const res = await fetch(`${authRoot}/register`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
tenantId: registerTenant.value || 'default',
name: registerName.value,
email: registerEmail.value,
password: registerPassword.value,
tenantId: register.tenantId || 'default',
name: register.name,
email: register.email,
password: register.password,
}),
});
const data = await res.json();
if (!res.ok) {
setLoginStatus(data.message || 'Error al registrar');
registerMessage.value = data.message || 'Error al registrar';
registerError.value = true;
return;
}
setLoginStatus('Registrado. Inicia sesión.');
registerMessage.value = 'Registrado. Inicia sesión.';
registerSuccess.value = true;
} catch (err) {
setLoginStatus(err.message || err);
}
registerMessage.value = err.message || err;
registerError.value = true;
} finally {
loading.value = false;
}
};
function logout() {
setToken('');
showAuth();
}
function showAuth() {
if (authPanel) authPanel.style.display = 'block';
if (mainPanel) mainPanel.style.display = 'none';
}
function showMain() {
if (authPanel) authPanel.style.display = 'none';
if (mainPanel) mainPanel.style.display = 'block';
loadModules();
}
function formatJson(value) {
return `<pre style="white-space: pre-wrap; word-break: break-word;">${JSON.stringify(value, null, 2)}</pre>`;
}
function showError(err) {
detailContainer.innerHTML = `<div class="module"><strong>Error:</strong> ${err.message || err}</div>`;
}
function renderModules(modules) {
modulesContainer.innerHTML = '';
detailContainer.innerHTML = '';
if (!modules.length) {
modulesContainer.innerHTML = '<p>No hay módulos registrados aún.</p>';
return;
}
modules.forEach((mod) => {
const card = document.createElement('div');
card.className = 'module';
const title = document.createElement('h2');
title.textContent = mod.name;
const meta = document.createElement('p');
meta.innerHTML = `<span class="badge">${mod.key}</span> ${mod.description || ''}`;
const button = document.createElement('button');
button.textContent = 'Administrar';
button.onclick = () => showModule(mod.key);
card.append(title, meta, button);
modulesContainer.appendChild(card);
});
}
async function loadModules() {
modulesContainer.innerHTML = '<p>Cargando módulos...</p>';
const loadModules = async () => {
if (!token.value) return;
try {
const modules = await api('/modules');
renderModules(modules);
modules.value = await api('/modules');
} catch (err) {
showError(err);
}
console.error(err);
}
};
function createButton(label, onClick) {
const btn = document.createElement('button');
btn.textContent = label;
btn.style.marginRight = '0.5rem';
btn.onclick = onClick;
return btn;
}
const selectModule = (key) => {
selectedModule.value = key;
moduleHtml.value = `<p>Seleccionado <strong>${key}</strong>. Usa los botones del módulo para operar.</p>`;
};
function createInput(name, placeholder = '', type = 'text') {
const input = document.createElement('input');
input.name = name;
input.placeholder = placeholder;
input.type = type;
input.style.marginRight = '0.5rem';
input.style.marginBottom = '0.5rem';
return input;
}
async function showModule(key) {
detailContainer.innerHTML = `<div class="module"><h2>Administrar: ${key}</h2><p>Cargando...</p></div>`;
if (key === 'guest') {
return showGuestAdmin();
}
if (key === 'todo') {
return showTodoAdmin();
}
if (key === 'gift') {
return showGiftAdmin();
}
detailContainer.innerHTML = `<div class="module"><p>No hay operaciones definidas para este módulo.</p></div>`;
}
async function showGuestAdmin() {
detailContainer.innerHTML = '';
const panel = document.createElement('div');
panel.className = 'module';
panel.innerHTML = '<h3>Invitados</h3>';
const listBtn = createButton('Listar invitados', async () => {
try {
const guests = await api('/guest');
panel.querySelector('.result')!.innerHTML = formatJson(guests);
} catch (err) {
panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
}
});
const createForm = document.createElement('div');
createForm.innerHTML = '<strong>Crear invitado</strong><br/>';
const nameInput = createInput('name', 'Nombre');
const emailInput = createInput('email', 'Email');
const phoneInput = createInput('phone', 'Teléfono');
const createBtn = createButton('Crear', async () => {
try {
const guest = await api('/guest', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: nameInput.value,
email: emailInput.value,
phone: phoneInput.value,
}),
});
panel.querySelector('.result')!.innerHTML = formatJson(guest);
} catch (err) {
panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
}
});
const rsvpForm = document.createElement('div');
rsvpForm.innerHTML = '<strong>Actualizar RSVP</strong><br/>';
const idInput = createInput('id', 'ID del invitado');
const rsvpInput = createInput('rsvp', 'true/false');
const updateBtn = createButton('Actualizar', async () => {
try {
const updated = await api(`/guest/${idInput.value}/rsvp`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ rsvp: rsvpInput.value === 'true' }),
});
panel.querySelector('.result')!.innerHTML = formatJson(updated);
} catch (err) {
panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
}
});
createForm.append(nameInput, emailInput, phoneInput, createBtn);
rsvpForm.append(idInput, rsvpInput, updateBtn);
const result = document.createElement('div');
result.className = 'result';
result.style.marginTop = '1rem';
panel.append(listBtn, document.createElement('br'), createForm, rsvpForm, result);
detailContainer.appendChild(panel);
}
async function showTodoAdmin() {
detailContainer.innerHTML = '';
const panel = document.createElement('div');
panel.className = 'module';
panel.innerHTML = '<h3>To-dos</h3>';
const listBtn = createButton('Listar To-dos', async () => {
try {
const todos = await api('/todo');
panel.querySelector('.result')!.innerHTML = formatJson(todos);
} catch (err) {
panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
}
});
const createForm = document.createElement('div');
createForm.innerHTML = '<strong>Crear To-do</strong><br/>';
const titleInput = createInput('title', 'Título');
const descInput = createInput('description', 'Descripción');
const createBtn = createButton('Crear', async () => {
try {
const todo = await api('/todo', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title: titleInput.value,
description: descInput.value,
}),
});
panel.querySelector('.result')!.innerHTML = formatJson(todo);
} catch (err) {
panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
}
});
const completeForm = document.createElement('div');
completeForm.innerHTML = '<strong>Marcar completado</strong><br/>';
const todoIdInput = createInput('todoId', 'ID del To-do');
const completeBtn = createButton('Completar', async () => {
try {
const completed = await api(`/todo/${todoIdInput.value}/complete`, {
method: 'PATCH',
});
panel.querySelector('.result')!.innerHTML = formatJson(completed);
} catch (err) {
panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
}
});
completeForm.append(todoIdInput, completeBtn);
const result = document.createElement('div');
result.className = 'result';
result.style.marginTop = '1rem';
panel.append(listBtn, document.createElement('br'), createForm, completeForm, result);
detailContainer.appendChild(panel);
}
async function showGiftAdmin() {
detailContainer.innerHTML = '';
const panel = document.createElement('div');
panel.className = 'module';
panel.innerHTML = '<h3>Regalos</h3>';
const listBtn = createButton('Listar regalos', async () => {
try {
const gifts = await api('/gift');
panel.querySelector('.result')!.innerHTML = formatJson(gifts);
} catch (err) {
panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
}
});
const createForm = document.createElement('div');
createForm.innerHTML = '<strong>Crear Regalo</strong><br/>';
const nameInput = createInput('name', 'Nombre');
const descInput = createInput('description', 'Descripción');
const priceInput = createInput('price', 'Precio', 'number');
const createBtn = createButton('Crear', async () => {
try {
const gift = await api('/gift', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: nameInput.value,
description: descInput.value,
price: Number(priceInput.value) || undefined,
}),
});
panel.querySelector('.result')!.innerHTML = formatJson(gift);
} catch (err) {
panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
}
});
const contributionForm = document.createElement('div');
contributionForm.innerHTML = '<strong>Agregar contribución</strong><br/>';
const giftIdInput = createInput('giftId', 'ID del regalo');
const contribNameInput = createInput('contributorName', 'Nombre');
const amountInput = createInput('amount', 'Monto', 'number');
const contribBtn = createButton('Agregar', async () => {
try {
const contribution = await api(`/gift/${giftIdInput.value}/contribution`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
contributorName: contribNameInput.value,
amount: Number(amountInput.value) || 0,
}),
});
panel.querySelector('.result')!.innerHTML = formatJson(contribution);
} catch (err) {
panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
}
});
contributionForm.append(giftIdInput, contribNameInput, amountInput, contribBtn);
const result = document.createElement('div');
result.className = 'result';
result.style.marginTop = '1rem';
panel.append(listBtn, document.createElement('br'), createForm, contributionForm, result);
detailContainer.appendChild(panel);
}
loginBtn.addEventListener('click', login);
registerBtn.addEventListener('click', register);
logoutBtn.addEventListener('click', logout);
document.getElementById('refresh').addEventListener('click', loadModules);
tenantInput.addEventListener('change', loadModules);
if (authToken) {
showMain();
} else {
showAuth();
}
return {
token,
user,
tenantId,
status,
modules,
selectedModule,
moduleHtml,
login,
register,
loginMessage,
loginError,
loginSuccess,
registerMessage,
registerError,
registerSuccess,
loading,
loginUser,
registerUser,
logout,
loadModules,
selectModule,
};
},
}).mount('#app');
</script>
</body>
</html>