v1.7: overlay carga, baneos, carrito persistente, fix upload

Lista negra:
- Migración 0007: tabla baneos con historial (soporta expires_at futuro)
- Helper is_banned() usado por middleware
- Middleware guard: user baneado → rewrite /banned (admin exento)
- Página /banned con razón/fecha/expires + botón signout
- Panel /admin/usuarios con banear/desbanear (razón obligatoria, self-ban bloqueado)
- Nav admin nueva entrada Usuarios + icono users

Fix upload de fotos (bug definitivo):
- Root cause: browserClient no autentica al Storage (cookies httpOnly no legibles desde JS)
- Nuevos endpoints proxy /api/upload/material-foto/[id] y /avatar
- Validan sesión con cookie httpOnly, suben con service_role (bypass RLS)
- Refactor MaterialForm y PerfilForm para usar fetch multipart
- Cookies httpOnly intactas (cero riesgo XSS)

Overlay de carga:
- Layout.astro con #page-loader (backdrop-filter blur + spinner mono)
- Script inline captura clicks en <a href> y submits de <form> mismo origen
- Filtros: modifier keys, target=_blank, anchor#, cross-origin, defaultPrevented
- Respeta prefers-reduced-motion; pageshow limpia por bfcache

Carrito persistente + vaciar:
- SolicitudCart: useEffect hidrata/persiste labre:cart:v1 en localStorage
- Guard cartHydrated evita pisar en montaje inicial
- Botón "Vaciar" en checkout con window.confirm (solo con perfilCompleto)

Filtro inventario sin auto-submit:
- Removido script debounced que hacía form.submit() en cada tecla
- Botón "Filtrar" existente sigue funcionando
This commit is contained in:
2026-08-27 10:18:04 -07:00
parent c43f45eca1
commit dea268d975
15 changed files with 870 additions and 67 deletions
-15
View File
@@ -109,21 +109,6 @@ const estadoBadge = (e: Material['estado']) => {
</div>
</form>
<script is:inline>
(() => {
const form = document.getElementById('inv-filter-form');
if (!form) return;
const q = form.querySelector('input[name="q"]');
const selects = form.querySelectorAll('select');
let t;
q && q.addEventListener('input', () => {
clearTimeout(t);
t = setTimeout(() => form.submit(), 250);
});
selects.forEach((s) => s.addEventListener('change', () => form.submit()));
})();
</script>
{matError && (
<div class="card mb-6" role="alert" style="border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);">
<p class="text-sm" style="color: var(--color-danger-text);">
+188
View File
@@ -0,0 +1,188 @@
---
import AppLayout from '@/layouts/AppLayout.astro';
import BanearForm from '@/components/admin/usuarios/BanearForm.tsx';
import DesbanearButton from '@/components/admin/usuarios/DesbanearButton.tsx';
type ProfileRow = {
id: string;
nombre: string | null;
email: string;
matricula: string | null;
rol: 'alumno' | 'docente' | 'admin';
};
type BaneoRow = {
id: number;
profile_id: string;
razon: string;
banned_at: string;
};
const meId = Astro.locals.user?.id ?? null;
const [{ data: profiles, error: perr }, { data: baneos }] = await Promise.all([
Astro.locals.supabase
.from('profiles')
.select('id, nombre, email, matricula, rol')
.order('nombre'),
Astro.locals.supabase
.from('baneos')
.select('id, profile_id, razon, banned_at')
.is('unbanned_at', null),
]);
const baneosByProfile = new Map<string, BaneoRow>();
for (const b of (baneos ?? []) as BaneoRow[]) baneosByProfile.set(b.profile_id, b);
const usuarios = ((profiles ?? []) as ProfileRow[]).map((p) => ({
...p,
baneo: baneosByProfile.get(p.id) ?? null,
}));
const rolLabel = (r: ProfileRow['rol']) =>
r === 'admin' ? 'Admin' : r === 'docente' ? 'Docente' : 'Alumno';
const fmtDate = (iso: string) =>
new Intl.DateTimeFormat('es-MX', {
dateStyle: 'medium',
timeZone: 'America/Tijuana',
}).format(new Date(iso));
const trunc = (s: string, n = 80) => (s.length > n ? s.slice(0, n - 1) + '…' : s);
---
<AppLayout title="Usuarios — Admin">
<div class="max-w-5xl">
<header class="mb-6">
<h1 class="text-2xl md:text-3xl font-semibold">Usuarios</h1>
<p class="text-sm opacity-70 mt-1">Perfiles de todos los usuarios. Banea a quien haga mal uso del sistema.</p>
</header>
{perr && (
<div class="card mb-6" role="alert" style="border-color: color-mix(in oklab, var(--color-danger) 30%, transparent);">
<p class="text-sm" style="color: var(--color-danger-text);">
No se pudieron cargar los usuarios. Recarga la página.
</p>
</div>
)}
{!perr && usuarios.length === 0 && (
<div class="card text-center">
<h2 class="text-lg font-semibold mb-1">Sin usuarios aún</h2>
<p class="text-sm opacity-70">Se listarán aquí en cuanto alguien inicie sesión.</p>
</div>
)}
{!perr && usuarios.length > 0 && (
<>
{/* Desktop */}
<div class="hidden md:block card p-0 overflow-hidden">
<table class="w-full text-sm">
<thead class="text-left" style="background: color-mix(in oklab, var(--color-ink) 4%, transparent);">
<tr>
<th class="px-4 py-3 font-medium">Nombre</th>
<th class="px-4 py-3 font-medium">Email</th>
<th class="px-4 py-3 font-medium">Rol</th>
<th class="px-4 py-3 font-medium">Estado</th>
<th class="px-4 py-3 font-medium text-right">Acciones</th>
</tr>
</thead>
<tbody>
{usuarios.map((u) => {
const isSelf = u.id === meId;
return (
<tr class="border-t align-top" style="border-color: color-mix(in oklab, var(--color-ink) 8%, transparent);">
<td class="px-4 py-3">
<div class="font-medium break-words">{u.nombre ?? '—'}</div>
{u.matricula && <div class="text-xs opacity-60 mt-0.5" style="font-variant-numeric: tabular-nums;">{u.matricula}</div>}
</td>
<td class="px-4 py-3 break-all text-xs">{u.email}</td>
<td class="px-4 py-3">
<span
class="text-xs uppercase tracking-wide px-2 py-0.5 rounded-[2px]"
style={`border: 1.5px solid var(--color-ink); ${u.rol === 'admin' ? 'background: var(--color-secondary);' : ''}`}
>{rolLabel(u.rol)}</span>
</td>
<td class="px-4 py-3">
{u.baneo ? (
<div class="flex flex-col gap-1">
<span
class="text-xs uppercase tracking-wide px-2 py-0.5 rounded-[2px] w-fit"
style="background: var(--color-danger); color: var(--color-ink); border: 1.5px solid var(--color-ink);"
>Baneado</span>
<span class="text-xs opacity-70 break-words">{trunc(u.baneo.razon)}</span>
<span class="text-[11px] opacity-50">desde {fmtDate(u.baneo.banned_at)}</span>
</div>
) : (
<span class="text-xs uppercase tracking-wide" style="color: var(--color-primary);">Activo</span>
)}
</td>
<td class="px-4 py-3">
<div class="flex gap-2 justify-end">
{u.baneo ? (
<DesbanearButton baneoId={u.baneo.id} nombre={u.nombre ?? u.email} client:load />
) : (
<BanearForm
profile={{ id: u.id, nombre: u.nombre, email: u.email }}
adminSelf={isSelf}
client:load
/>
)}
</div>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
{/* Mobile */}
<div class="md:hidden flex flex-col gap-3">
{usuarios.map((u) => {
const isSelf = u.id === meId;
return (
<article class="card flex flex-col gap-3">
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
<h3 class="font-semibold break-words">{u.nombre ?? '—'}</h3>
<p class="text-xs opacity-70 break-all">{u.email}</p>
<p class="text-xs opacity-60 mt-1">
{rolLabel(u.rol)}{u.matricula ? ` · ${u.matricula}` : ''}
</p>
</div>
{u.baneo ? (
<span
class="text-xs uppercase tracking-wide px-2 py-0.5 rounded-[2px] shrink-0"
style="background: var(--color-danger); color: var(--color-ink); border: 1.5px solid var(--color-ink);"
>Baneado</span>
) : (
<span class="text-xs uppercase tracking-wide shrink-0" style="color: var(--color-primary);">Activo</span>
)}
</div>
{u.baneo && (
<div class="text-xs opacity-80 break-words">
<strong>Razón:</strong> {trunc(u.baneo.razon, 120)}
<div class="opacity-60 mt-1">desde {fmtDate(u.baneo.banned_at)}</div>
</div>
)}
<div class="flex gap-2 justify-end">
{u.baneo ? (
<DesbanearButton baneoId={u.baneo.id} nombre={u.nombre ?? u.email} client:load />
) : (
<BanearForm
profile={{ id: u.id, nombre: u.nombre, email: u.email }}
adminSelf={isSelf}
client:load
/>
)}
</div>
</article>
);
})}
</div>
</>
)}
</div>
</AppLayout>
@@ -0,0 +1,30 @@
import type { APIRoute } from 'astro';
export const prerender = false;
export const POST: APIRoute = async ({ locals, params }) => {
if (locals.profile?.rol !== 'admin') {
return Response.json({ error: 'No autorizado' }, { status: 403 });
}
const id = Number(params.id);
if (!Number.isInteger(id) || id <= 0) {
return Response.json({ error: 'ID inválido' }, { status: 400 });
}
const { data, error } = await locals.supabase
.from('baneos')
.update({ unbanned_at: new Date().toISOString(), unbanned_by: locals.user!.id })
.eq('id', id)
.is('unbanned_at', null)
.select('id');
if (error) {
return Response.json({ error: 'No se pudo desbanear' }, { status: 500 });
}
if (!data || data.length === 0) {
return Response.json({ error: 'Baneo no encontrado o ya inactivo' }, { status: 404 });
}
return Response.json({ ok: true });
};
+67
View File
@@ -0,0 +1,67 @@
import type { APIRoute } from 'astro';
export const prerender = false;
export const POST: APIRoute = async ({ request, locals }) => {
if (locals.profile?.rol !== 'admin') {
return Response.json({ error: 'No autorizado' }, { status: 403 });
}
let body: { profile_id?: unknown; razon?: unknown; expires_at?: unknown };
try {
body = await request.json();
} catch {
return Response.json({ error: 'JSON inválido' }, { status: 400 });
}
const profile_id = typeof body.profile_id === 'string' ? body.profile_id.trim() : '';
if (!profile_id) {
return Response.json({ error: 'profile_id es obligatorio' }, { status: 400 });
}
if (profile_id === locals.user!.id) {
return Response.json({ error: 'No puedes banearte a ti mismo' }, { status: 400 });
}
const razon = typeof body.razon === 'string' ? body.razon.trim().slice(0, 500) : '';
if (razon.length < 5) {
return Response.json({ error: 'La razón debe tener al menos 5 caracteres' }, { status: 400 });
}
let expires_at: string | null = null;
if (body.expires_at != null && body.expires_at !== '') {
if (typeof body.expires_at !== 'string') {
return Response.json({ error: 'expires_at debe ser string ISO' }, { status: 400 });
}
const d = new Date(body.expires_at);
if (Number.isNaN(d.getTime())) {
return Response.json({ error: 'expires_at inválido' }, { status: 400 });
}
if (d <= new Date()) {
return Response.json({ error: 'expires_at debe ser futuro' }, { status: 400 });
}
expires_at = d.toISOString();
}
const { data, error } = await locals.supabase
.from('baneos')
.insert({
profile_id,
razon,
expires_at,
banned_by: locals.user!.id,
})
.select('id')
.single();
if (error) {
if ((error as { code?: string }).code === '23505') {
return Response.json(
{ error: 'El usuario ya tiene un baneo activo — desbaneálo primero' },
{ status: 409 },
);
}
return Response.json({ error: 'No se pudo crear el baneo' }, { status: 500 });
}
return Response.json({ id: data.id }, { status: 201 });
};
+58
View File
@@ -0,0 +1,58 @@
import type { APIRoute } from 'astro';
import { serviceClient } from '@/lib/supabase';
export const prerender = false;
const BUCKET = 'avatares';
const MAX_BYTES = 2 * 1024 * 1024;
const extFrom = (file: File): string => {
const fromName = file.name?.split('.').pop()?.toLowerCase().replace(/[^a-z0-9]/g, '');
if (fromName) return fromName;
const fromMime = file.type?.split('/')[1]?.toLowerCase().replace(/[^a-z0-9]/g, '');
return fromMime || 'jpg';
};
export const POST: APIRoute = async ({ request, locals }) => {
const user = locals.user;
if (!user) return Response.json({ error: 'no autorizado' }, { status: 401 });
let form: FormData;
try {
form = await request.formData();
} catch {
return Response.json({ error: 'form-data inválido' }, { status: 400 });
}
const file = form.get('file');
if (!(file instanceof File)) {
return Response.json({ error: 'Archivo faltante' }, { status: 400 });
}
if (!/^image\//.test(file.type)) {
return Response.json({ error: 'Solo se permiten imágenes' }, { status: 400 });
}
if (file.size > MAX_BYTES) {
return Response.json({ error: 'La imagen supera 2 MB' }, { status: 400 });
}
const path = `${user.id}/${Date.now()}.${extFrom(file)}`;
const { error: upErr } = await serviceClient()
.storage.from(BUCKET)
.upload(path, file, { upsert: true, contentType: file.type });
if (upErr) {
return Response.json({ error: upErr.message || 'No se pudo subir' }, { status: 500 });
}
const { error: patchErr } = await locals.supabase
.from('profiles')
.update({ foto_path: path })
.eq('id', user.id);
if (patchErr) {
return Response.json({ error: 'Foto subida pero no vinculada' }, { status: 500 });
}
return Response.json({ ok: true, path });
};
@@ -0,0 +1,67 @@
import type { APIRoute } from 'astro';
import { serviceClient } from '@/lib/supabase';
export const prerender = false;
const BUCKET = 'materiales-fotos';
const MAX_BYTES = 2 * 1024 * 1024;
const parseId = (raw: string | undefined) => {
const id = Number(raw);
return Number.isInteger(id) && id > 0 ? id : null;
};
const extFrom = (file: File): string => {
const fromName = file.name?.split('.').pop()?.toLowerCase().replace(/[^a-z0-9]/g, '');
if (fromName) return fromName;
const fromMime = file.type?.split('/')[1]?.toLowerCase().replace(/[^a-z0-9]/g, '');
return fromMime || 'jpg';
};
export const POST: APIRoute = async ({ request, locals, params }) => {
if (locals.profile?.rol !== 'admin') {
return Response.json({ error: 'No autorizado' }, { status: 403 });
}
const materialId = parseId(params.id);
if (!materialId) return Response.json({ error: 'ID inválido' }, { status: 400 });
let form: FormData;
try {
form = await request.formData();
} catch {
return Response.json({ error: 'form-data inválido' }, { status: 400 });
}
const file = form.get('file');
if (!(file instanceof File)) {
return Response.json({ error: 'Archivo faltante' }, { status: 400 });
}
if (!/^image\//.test(file.type)) {
return Response.json({ error: 'Solo se permiten imágenes' }, { status: 400 });
}
if (file.size > MAX_BYTES) {
return Response.json({ error: 'La imagen supera 2 MB' }, { status: 400 });
}
const path = `${materialId}/${Date.now()}.${extFrom(file)}`;
const { error: upErr } = await serviceClient()
.storage.from(BUCKET)
.upload(path, file, { upsert: true, contentType: file.type });
if (upErr) {
return Response.json({ error: upErr.message || 'No se pudo subir' }, { status: 500 });
}
const { error: patchErr } = await locals.supabase
.from('materiales')
.update({ imagen_path: path })
.eq('id', materialId);
if (patchErr) {
return Response.json({ error: 'Foto subida pero no vinculada' }, { status: 500 });
}
return Response.json({ ok: true, path });
};
+85
View File
@@ -0,0 +1,85 @@
---
import Layout from '@/layouts/Layout.astro';
import BrandMark from '@/components/BrandMark.astro';
const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');
type BanRow = {
razon: string;
banned_at: string;
expires_at: string | null;
banned_by: { nombre: string | null } | null;
};
const { data } = await Astro.locals.supabase
.from('baneos')
.select('razon, banned_at, expires_at, banned_by:profiles!banned_by(nombre)')
.eq('profile_id', user.id)
.is('unbanned_at', null)
.maybeSingle();
const ban = data as BanRow | null;
if (!ban) return Astro.redirect('/');
const fmtDate = (iso: string) =>
new Intl.DateTimeFormat('es-MX', {
dateStyle: 'long',
timeStyle: 'short',
timeZone: 'America/Tijuana',
}).format(new Date(iso));
const bannedAtStr = fmtDate(ban.banned_at);
const expiresStr = ban.expires_at ? fmtDate(ban.expires_at) : null;
const byName = ban.banned_by?.nombre ?? null;
Astro.response.status = 403;
---
<Layout title="Cuenta bloqueada — LabPréstamos">
<main id="main" class="min-h-screen grid place-items-center p-4">
<div class="w-full max-w-lg">
<div class="text-center mb-6">
<div class="inline-grid place-items-center w-16 h-16 rounded-[2px] p-4 mb-4" style="background: var(--color-danger); border: 2px solid var(--color-ink); box-shadow: var(--shadow-hard);">
<BrandMark class="w-full h-full" style="color: var(--color-ink);" />
</div>
<h1 class="text-2xl md:text-3xl font-semibold uppercase tracking-wide">Cuenta bloqueada</h1>
<p class="text-sm mt-2" style="color: var(--color-pencil);">Tu acceso al sistema de préstamos fue suspendido.</p>
</div>
<div class="card-raised">
<dl class="flex flex-col gap-4 text-sm">
<div>
<dt class="text-xs uppercase tracking-wide mb-1" style="color: var(--color-pencil);">Motivo</dt>
<dd class="whitespace-pre-wrap break-words">{ban.razon}</dd>
</div>
<div class="grid sm:grid-cols-2 gap-4">
<div>
<dt class="text-xs uppercase tracking-wide mb-1" style="color: var(--color-pencil);">Fecha del bloqueo</dt>
<dd>{bannedAtStr}</dd>
</div>
{expiresStr && (
<div>
<dt class="text-xs uppercase tracking-wide mb-1" style="color: var(--color-pencil);">Expira</dt>
<dd>{expiresStr}</dd>
</div>
)}
{byName && (
<div>
<dt class="text-xs uppercase tracking-wide mb-1" style="color: var(--color-pencil);">Bloqueado por</dt>
<dd>{byName}</dd>
</div>
)}
</div>
</dl>
<p class="text-sm mt-6" style="color: var(--color-pencil);">
Si crees que esto es un error, contacta al Laboratorio de Sistemas Computacionales.
</p>
<form method="POST" action="/api/auth/signout" class="mt-6">
<button type="submit" class="btn btn-primary w-full">Cerrar sesión</button>
</form>
</div>
</div>
</main>
</Layout>