chore: commit all missing files from Qute/Alpine migration
CI / Build Native (push) Successful in 7m9s
CI / Build Native (push) Successful in 7m9s
This commit adds all the files that were created during the frontend migration (Qute templates + Alpine.js) but were never committed to git. Includes: - TemplateData.java (shared Qute page helpers) - Static resources: app.js, defaults.js, calc.js, alpine.min.js, pico.min.css, favicon.svg - Qute templates: changePassword, formulas, insumos, login, register, usuarios - Partial templates: header.html, layout/base.html - Modified: MustChangePasswordFilter.java (added login/register paths) - Modified: AppState.java (added price fields) - Modified: format.js (simplified number formatting) - Modified: application.properties (static resources comment) - Modified: calculadora.html (Qute/Alpine rewrite)
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,68 @@
|
||||
<!doctype html>
|
||||
<html lang="es" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Cambiar contrasena — Calculadora de Craft de Shots</title>
|
||||
<link rel="stylesheet" href="/static/css/pico.min.css"/>
|
||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||
</head>
|
||||
<body class="login-page" x-data="authChangePassword()">
|
||||
<article class="login-card">
|
||||
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Logo">
|
||||
<defs>
|
||||
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#10b981"/>
|
||||
<stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
|
||||
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
|
||||
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.1)"/>
|
||||
<g class="sparkle">
|
||||
<circle cx="50" cy="18" r="2.5" fill="white"/>
|
||||
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
|
||||
fill="white" opacity="0.7"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<hgroup style="text-align:center;margin-bottom:1.5rem">
|
||||
<h1 style="font-size:1.5rem;margin-bottom:0.25rem">Cambiar contrasena</h1>
|
||||
<p style="margin-bottom:0">Debes cambiar tu contrasena antes de continuar.</p>
|
||||
</hgroup>
|
||||
|
||||
<div x-show="!done">
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<label>Contrasena actual
|
||||
<input type="password" x-model="currentPassword"
|
||||
autocomplete="current-password" autofocus required minlength="8"/>
|
||||
</label>
|
||||
<label>Nueva contrasena
|
||||
<input type="password" x-model="newPassword"
|
||||
autocomplete="new-password" required minlength="8"/>
|
||||
<small>Minimo 8 caracteres.</small>
|
||||
</label>
|
||||
|
||||
<div x-show="error" x-transition class="error-msg" x-text="error"></div>
|
||||
|
||||
<button type="submit" :disabled="submitting">
|
||||
<span x-show="!submitting">Cambiar contrasena</span>
|
||||
<span x-show="submitting">Procesando…</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div x-show="done" x-transition class="text-center">
|
||||
<p class="success-msg mb-4">Contrasena actualizada.</p>
|
||||
<p class="text-sm text-muted">Redirigiendo a la app…</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<script src="/static/js/defaults.js"></script>
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
<script defer src="/static/js/alpine.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!doctype html>
|
||||
<html lang="es" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Formulas — Calculadora de Craft de Shots</title>
|
||||
<link rel="stylesheet" href="/static/css/pico.min.css"/>
|
||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||
</head>
|
||||
<body x-data="appShell()">
|
||||
|
||||
{#include partials/header.html /}
|
||||
{#include partials/tab-bar.html /}
|
||||
|
||||
<main class="container" x-data="formulasSection()">
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h2>Recetas de crafteo</h2>
|
||||
<p class="text-sm text-muted">
|
||||
Edita los recursos necesarios por cada accion de crafteo. Los cambios se reflejan en la
|
||||
calculadora y se persisten automaticamente.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cell-label text-left">Tipo</th>
|
||||
<th class="cell-label text-center">Grado</th>
|
||||
<th class="cell-label text-right">Cristales req.</th>
|
||||
<th class="cell-label text-right">Soul Ore req.</th>
|
||||
<th class="cell-label text-right">Spirit Ore req.</th>
|
||||
<th class="cell-label text-right">Shots obtenidos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="f in store().state.formulas" :key="f.id">
|
||||
<tr>
|
||||
<td class="text-bold" x-text="f.tipo"></td>
|
||||
<td class="text-center">
|
||||
<span class="grade-badge" x-text="f.grado"></span>
|
||||
</td>
|
||||
<td><input type="number" min="0" step="1" x-model.number="f.cristalesReq" @input="Alpine.store('app').scheduleSave()"/></td>
|
||||
<td><input type="number" min="0" step="1" x-model.number="f.soulOreReq" :disabled="f.tipo !== 'Soulshot'" @input="Alpine.store('app').scheduleSave()"/></td>
|
||||
<td><input type="number" min="0" step="1" x-model.number="f.spiritOreReq" :disabled="f.tipo === 'Soulshot'" @input="Alpine.store('app').scheduleSave()"/></td>
|
||||
<td><input type="number" min="0" step="1" x-model.number="f.shotsObtenidos" @input="Alpine.store('app').scheduleSave()"/></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<p class="text-center text-xs text-muted">
|
||||
Auto-guardado activo · Cambios persistidos en el servidor cada ~500ms
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="/static/js/defaults.js"></script>
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
<script defer src="/static/js/alpine.min.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('formulasSection', () => ({
|
||||
store() { return Alpine.store('app'); },
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,165 @@
|
||||
<!doctype html>
|
||||
<html lang="es" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Insumos — Calculadora de Craft de Shots</title>
|
||||
<link rel="stylesheet" href="/static/css/pico.min.css"/>
|
||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||
</head>
|
||||
<body x-data="appShell()">
|
||||
|
||||
{#include partials/header.html /}
|
||||
{#include partials/tab-bar.html /}
|
||||
|
||||
<main class="container" x-data="insumosSection()">
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h2>Cristales</h2>
|
||||
<p class="text-sm text-muted">Precio unitario en adena</p>
|
||||
</header>
|
||||
<div class="grid-5">
|
||||
<template x-for="grado in ['D','C','B','A','S']" :key="grado">
|
||||
<label>
|
||||
<span class="text-sm text-muted" x-text="'Cristal ' + grado"></span>
|
||||
<input type="number" min="0" step="1"
|
||||
x-model.number="store().state.insumos.cristales[grado]"
|
||||
@input="store().scheduleSave()"/>
|
||||
<span class="text-xs text-mono text-muted" x-text="fmtAdena(store().state.insumos.cristales[grado])"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h2>Ores</h2>
|
||||
<p class="text-sm text-muted">Precio por unidad</p>
|
||||
</header>
|
||||
<div class="grid-2" style="max-width:28rem">
|
||||
<label>
|
||||
<span class="text-sm text-muted">Soul Ore (Soulstone)</span>
|
||||
<input type="number" min="0" step="1"
|
||||
x-model.number="store().state.insumos.soulOre"
|
||||
@input="store().scheduleSave()"/>
|
||||
<span class="text-xs text-mono text-muted" x-text="fmtAdena(store().state.insumos.soulOre)"></span>
|
||||
</label>
|
||||
<label>
|
||||
<span class="text-sm text-muted">Spirit Ore</span>
|
||||
<input type="number" min="0" step="1"
|
||||
x-model.number="store().state.insumos.spiritOre"
|
||||
@input="store().scheduleSave()"/>
|
||||
<span class="text-xs text-mono text-muted" x-text="fmtAdena(store().state.insumos.spiritOre)"></span>
|
||||
</label>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h2>Craft fee</h2>
|
||||
<p class="text-sm text-muted">Costo del Dwarven Workshop por cada batch de crafteo (descontado del profit)</p>
|
||||
</header>
|
||||
<div style="max-width:20rem">
|
||||
<label>
|
||||
<span class="text-sm text-muted">Fee por crafteo</span>
|
||||
<input type="number" min="0" step="1"
|
||||
x-model.number="store().state.insumos.dwarvenFeePerCraft"
|
||||
@input="store().scheduleSave()"/>
|
||||
<span class="text-xs text-mono text-muted" x-text="fmtAdena(store().state.insumos.dwarvenFeePerCraft) + ' adena / craft'"></span>
|
||||
</label>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<template x-for="tipo in ['Soulshot','Spiritshot','Blessed Spiritshot']" :key="tipo">
|
||||
<article>
|
||||
<header>
|
||||
<h2 x-text="'Precio de venta — ' + tipo"></h2>
|
||||
<p class="text-sm text-muted">Precio unitario del shot vendido</p>
|
||||
</header>
|
||||
<div class="grid-5">
|
||||
<template x-for="grado in ['D','C','B','A','S']" :key="grado">
|
||||
<label>
|
||||
<span class="text-sm text-muted" x-text="tipo + ' ' + grado"></span>
|
||||
<input type="number" min="0" step="1"
|
||||
x-model.number="store().state.insumos.venta[tipo][grado]"
|
||||
@input="store().scheduleSave()"/>
|
||||
<span class="text-xs text-mono text-muted" x-text="fmtAdena(store().state.insumos.venta[tipo][grado])"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h2>Precio de mercado (compra directa)</h2>
|
||||
<p class="text-sm text-muted">Precio al que conseguis el shot ya crafteado en el mercado. Usado para comparar vs craftear vos.</p>
|
||||
</header>
|
||||
<template x-for="tipo in ['Soulshot','Spiritshot','Blessed Spiritshot']" :key="tipo">
|
||||
<div style="margin-bottom:1rem">
|
||||
<p class="text-sm text-bold mb-2" x-text="tipo"></p>
|
||||
<div class="grid-5">
|
||||
<template x-for="grado in ['D','C','B','A','S']" :key="grado">
|
||||
<label>
|
||||
<span class="text-sm text-muted" x-text="tipo + ' ' + grado"></span>
|
||||
<input type="number" min="0" step="1"
|
||||
x-model.number="store().state.insumos.precioMercado[tipo][grado]"
|
||||
@input="store().scheduleSave()"/>
|
||||
<span class="text-xs text-mono text-muted" x-text="fmtAdena(store().state.insumos.precioMercado[tipo][grado])"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h2>No-Grade (NG) — Precio NPC</h2>
|
||||
<p class="text-sm text-muted">Precio de venta del shot No-Grade en NPCs. Usado para comparar NG vs craftear D-grade.</p>
|
||||
</header>
|
||||
<div class="grid-3" style="max-width:24rem">
|
||||
<template x-for="tipo in ['Soulshot','Spiritshot','Blessed Spiritshot']" :key="tipo">
|
||||
<label>
|
||||
<span class="text-sm text-muted" x-text="tipoShort(tipo) + ' NG'"></span>
|
||||
<input type="number" min="0" step="1"
|
||||
x-model.number="store().state.insumos.ngVenta[tipo]"
|
||||
@input="store().scheduleSave()"/>
|
||||
<span class="text-xs text-mono text-muted" x-text="fmtAdena(store().state.insumos.ngVenta[tipo])"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<p class="text-center text-xs text-muted">
|
||||
Auto-guardado activo · Cambios persistidos en el servidor cada ~500ms
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="/static/js/defaults.js"></script>
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
<script defer src="/static/js/alpine.min.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('insumosSection', () => ({
|
||||
store() { return Alpine.store('app'); },
|
||||
fmtAdena(n) {
|
||||
if (n == null) return '—';
|
||||
return Math.round(n).toLocaleString('es-CL');
|
||||
},
|
||||
tipoShort(tipo) {
|
||||
return { 'Soulshot': 'SS', 'Spiritshot': 'SPS', 'Blessed Spiritshot': 'BSS' }[tipo] || tipo;
|
||||
},
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="es" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Calculadora de Craft de Shots — Lineage 2</title>
|
||||
<link rel="stylesheet" href="/static/css/pico.min.css"/>
|
||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||
</head>
|
||||
<body class="login-page" x-data="authLogin()">
|
||||
<article class="login-card">
|
||||
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Logo">
|
||||
<defs>
|
||||
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#10b981"/>
|
||||
<stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
|
||||
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
|
||||
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.1)"/>
|
||||
<g class="sparkle">
|
||||
<circle cx="50" cy="18" r="2.5" fill="white"/>
|
||||
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
|
||||
fill="white" opacity="0.7"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<hgroup style="text-align:center;margin-bottom:1.5rem">
|
||||
<h1 style="font-size:1.5rem;margin-bottom:0.25rem">Calculadora de Craft de Shots</h1>
|
||||
<p style="margin-bottom:0">Lineage 2 — Interlude / Clasico</p>
|
||||
</hgroup>
|
||||
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<label>Username
|
||||
<input type="text" x-model="username" autocomplete="username" autofocus
|
||||
required minlength="3" maxlength="30"/>
|
||||
</label>
|
||||
<label>Contrasena
|
||||
<input type="password" x-model="password" autocomplete="current-password"
|
||||
required minlength="8"/>
|
||||
</label>
|
||||
|
||||
<div x-show="error" x-transition class="error-msg" x-text="error"></div>
|
||||
|
||||
<button type="submit" :disabled="submitting">
|
||||
<span x-show="!submitting">Iniciar sesion</span>
|
||||
<span x-show="submitting">Procesando…</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="login-footer">
|
||||
<a href="/register" class="link-action">No tenes cuenta? Crea una</a>
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<script src="/static/js/defaults.js"></script>
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
<script defer src="/static/js/alpine.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!doctype html>
|
||||
<html lang="es" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Crear cuenta — Calculadora de Craft de Shots</title>
|
||||
<link rel="stylesheet" href="/static/css/pico.min.css"/>
|
||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||
</head>
|
||||
<body class="login-page" x-data="authRegister()">
|
||||
<article class="login-card">
|
||||
<svg class="login-logo" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Logo">
|
||||
<defs>
|
||||
<linearGradient id="gem" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#10b981"/>
|
||||
<stop offset="100%" stop-color="#047857"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M40 8 L62 28 L40 72 L18 28 Z" fill="url(#gem)" stroke="#065f46" stroke-width="1.5"/>
|
||||
<path d="M40 8 L62 28 L18 28 Z" fill="rgba(255,255,255,0.15)"/>
|
||||
<path d="M40 72 L62 28 L40 28 Z" fill="rgba(0,0,0,0.1)"/>
|
||||
<g class="sparkle">
|
||||
<circle cx="50" cy="18" r="2.5" fill="white"/>
|
||||
<path d="M50 14 L51 18 L50 22 L49 18 Z M46 18 L50 17 L54 18 L50 19 Z"
|
||||
fill="white" opacity="0.7"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<hgroup style="text-align:center;margin-bottom:1.5rem">
|
||||
<h1 style="font-size:1.5rem;margin-bottom:0.25rem">Crear cuenta</h1>
|
||||
<p style="margin-bottom:0">Unete a la comunidad de crafteo</p>
|
||||
</hgroup>
|
||||
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<label>Username
|
||||
<input type="text" x-model="username" autocomplete="username" autofocus
|
||||
required minlength="3" maxlength="30"/>
|
||||
<small>3-30 caracteres, letras, numeros y guion bajo.</small>
|
||||
</label>
|
||||
<label>Contrasena
|
||||
<input type="password" x-model="password" autocomplete="new-password"
|
||||
required minlength="8"/>
|
||||
<small>Minimo 8 caracteres.</small>
|
||||
</label>
|
||||
|
||||
<div x-show="error" x-transition class="error-msg" x-text="error"></div>
|
||||
|
||||
<button type="submit" :disabled="submitting">
|
||||
<span x-show="!submitting">Crear cuenta</span>
|
||||
<span x-show="submitting">Procesando…</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="login-footer">
|
||||
<a href="/login" class="link-action">Ya tenes cuenta? Inicia sesion</a>
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<script src="/static/js/defaults.js"></script>
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
<script defer src="/static/js/alpine.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!doctype html>
|
||||
<html lang="es" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Usuarios — Calculadora de Craft de Shots</title>
|
||||
<link rel="stylesheet" href="/static/css/pico.min.css"/>
|
||||
<link rel="stylesheet" href="/static/css/app.css"/>
|
||||
</head>
|
||||
<body x-data="appShell()">
|
||||
|
||||
{#include partials/header.html /}
|
||||
{#include partials/tab-bar.html /}
|
||||
|
||||
<main class="container" x-data="usuariosSection()">
|
||||
|
||||
<header class="flex-row justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-bold" style="margin-bottom:0.25rem">Usuarios</h2>
|
||||
<p class="text-sm text-muted">
|
||||
Resetea la contrasena de cualquier usuario. Al resetear, debera
|
||||
cambiarla en su proximo login.
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" @click="load()" :disabled="loading" class="secondary">
|
||||
<span x-show="!loading">Refrescar</span>
|
||||
<span x-show="loading">Cargando…</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div x-show="error" class="error-msg mb-4" x-text="error"></div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="cell-label text-left">Username</th>
|
||||
<th class="cell-label text-left">Rol</th>
|
||||
<th class="cell-label text-left">Estado</th>
|
||||
<th class="cell-label text-left">Creado</th>
|
||||
<th class="cell-label text-left">Ultimo login</th>
|
||||
<th class="cell-label text-right">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template x-for="u in users" :key="u.id">
|
||||
<tr>
|
||||
<td class="text-bold" x-text="u.username"></td>
|
||||
<td>
|
||||
<span x-show="u.isAdmin" class="badge badge-admin">admin</span>
|
||||
<span x-show="!u.isAdmin" class="badge" style="background:var(--pico-muted-border-color);color:var(--pico-muted-color)">usuario</span>
|
||||
</td>
|
||||
<td>
|
||||
<span x-show="u.mustChangePassword" class="badge badge-warning">cambiar pass</span>
|
||||
<span x-show="!u.mustChangePassword" class="badge badge-success">ok</span>
|
||||
</td>
|
||||
<td class="text-mono text-xs" x-text="fmtDateTime(u.createdAt)"></td>
|
||||
<td class="text-mono text-xs" x-text="u.lastLoginAt ? fmtDateTime(u.lastLoginAt) : '—'"></td>
|
||||
<td class="text-right">
|
||||
<button type="button"
|
||||
@click="openReset(u)"
|
||||
class="outline"
|
||||
style="font-size:0.75rem;padding:0.25rem 0.5rem">
|
||||
Resetear contrasena
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr x-show="users.length === 0 && !loading">
|
||||
<td colspan="6" class="text-center p-6 text-muted">Sin usuarios para listar.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div x-show="resetUser"
|
||||
x-cloak
|
||||
class="modal-backdrop">
|
||||
<div class="modal-content" style="max-width:28rem">
|
||||
<header style="padding:1.5rem 1.5rem 1rem;border-bottom:1px solid var(--pico-muted-border-color)">
|
||||
<h2 style="font-size:1rem;margin-bottom:0.25rem"
|
||||
x-text="'Resetear contrasena de ' + (resetUser?.username || '')"></h2>
|
||||
<p class="text-sm text-muted">El usuario debera cambiar esta contrasena en su proximo login.</p>
|
||||
</header>
|
||||
<form @submit.prevent="submitReset()" style="padding:1.5rem">
|
||||
<label>Nueva contrasena temporal
|
||||
<input type="text"
|
||||
x-model="resetPassword"
|
||||
autofocus
|
||||
required
|
||||
minlength="8"/>
|
||||
</label>
|
||||
<div x-show="resetError" class="error-msg mt-2" x-text="resetError"></div>
|
||||
<div class="flex-row justify-end mt-4" style="gap:0.5rem">
|
||||
<button type="button" @click="closeReset()" :disabled="resetSubmitting" class="secondary">Cancelar</button>
|
||||
<button type="submit" :disabled="resetSubmitting || resetPassword.length < 8" class="primary">
|
||||
<span x-show="!resetSubmitting">Resetear</span>
|
||||
<span x-show="resetSubmitting">Reseteando…</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<p class="text-center text-xs text-muted">
|
||||
Auto-guardado activo · Cambios persistidos en el servidor cada ~500ms
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="/static/js/defaults.js"></script>
|
||||
<script src="/static/js/api.js"></script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
<script defer src="/static/js/alpine.min.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('usuariosSection', () => ({
|
||||
store() { return Alpine.store('app'); },
|
||||
users: [],
|
||||
loading: true,
|
||||
error: null,
|
||||
resetUser: null,
|
||||
resetPassword: '',
|
||||
resetSubmitting: false,
|
||||
resetError: null,
|
||||
|
||||
async init() {
|
||||
await this.load();
|
||||
},
|
||||
|
||||
async load() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
try {
|
||||
const list = await window.api.adminListUsers();
|
||||
this.users = list || [];
|
||||
} catch (e) {
|
||||
this.error = 'HTTP ' + (e.status || '') + ': ' + (e.message || 'Error');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
openReset(user) {
|
||||
this.resetUser = user;
|
||||
this.resetPassword = '';
|
||||
this.resetError = null;
|
||||
this.resetSubmitting = false;
|
||||
},
|
||||
|
||||
closeReset() {
|
||||
this.resetUser = null;
|
||||
this.resetPassword = '';
|
||||
this.resetError = null;
|
||||
},
|
||||
|
||||
async submitReset() {
|
||||
if (!this.resetUser || this.resetPassword.length < 8) return;
|
||||
this.resetSubmitting = true;
|
||||
this.resetError = null;
|
||||
try {
|
||||
await window.api.adminResetPassword(this.resetUser.username, this.resetPassword);
|
||||
this.closeReset();
|
||||
await this.load();
|
||||
} catch (e) {
|
||||
this.resetError = 'HTTP ' + (e.status || '') + ': ' + (e.message || 'Error');
|
||||
} finally {
|
||||
this.resetSubmitting = false;
|
||||
}
|
||||
},
|
||||
|
||||
fmtDateTime(iso) {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
if (isNaN(d.getTime())) return iso;
|
||||
return d.toLocaleString('es-ES', {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit',
|
||||
});
|
||||
},
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>{title ?: 'Calculadora de Craft de Shots'}</title>
|
||||
<link rel="stylesheet" href="/static/css/styles.css"/>
|
||||
<script defer src="/static/js/alpine.min.js"></script>
|
||||
<script defer src="/static/js/api.js"></script>
|
||||
<script defer src="/static/js/app.js"></script>
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col">
|
||||
{#insert body /}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,32 @@
|
||||
<header x-data="appHeader()">
|
||||
<div class="container">
|
||||
<nav class="header-nav">
|
||||
<div>
|
||||
<hgroup>
|
||||
<h1>Calculadora de Craft de Shots</h1>
|
||||
<p class="header-meta">
|
||||
<span x-text="user()?.username || ''"></span>
|
||||
<span x-show="user()?.isAdmin" class="badge badge-admin">admin</span>
|
||||
</p>
|
||||
</hgroup>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<span x-show="saveStatus() !== 'idle'"
|
||||
x-transition
|
||||
class="badge"
|
||||
:class="saveStatus() === 'saved' ? 'badge-success' :
|
||||
saveStatus() === 'saving' ? 'badge-warning' :
|
||||
'badge-error'">
|
||||
<span x-show="saveStatus() === 'saved'">Guardado</span>
|
||||
<span x-show="saveStatus() === 'saving'">Guardando…</span>
|
||||
<span x-show="saveStatus() === 'error'" x-text="saveError() || 'Error'"></span>
|
||||
</span>
|
||||
|
||||
<button type="button" class="link-action" @click="resetExamples()">Restablecer ejemplos</button>
|
||||
<button type="button" class="link-action" @click="clearAll()">Poner todo en cero</button>
|
||||
<button type="button" class="link-action" @click="resetServer()" title="Borrar el estado en el servidor (solo este navegador)">Borrar del servidor</button>
|
||||
<button type="button" class="contrast outline" @click="logout()">Cerrar sesion</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
Reference in New Issue
Block a user