feat(auth): role-based permissions + user management (plan phase 1)
Adds the RBAC foundation the CRUD phases build on, and the first write module (users). The platform was read-only: every controller was guarded only by AuthenticatedGuard and UserRole was ADMIN|STAFF. The old PHP app stored level+role but enforced neither, so this is a fresh design. Permission model (server-authoritative): - UserRole expanded to an ordered rank ADMIN > MANAGER > STAFF > VIEWER. VIEWER is the read-only role; STAFF+ can write. - auth/abilities.ts: ROLE_RANK + ABILITY_MIN matrix + can()/abilitiesFor(). - @RequireAbility decorator + AbilityGuard enforce it on write routes; reads stay on AuthenticatedGuard so any logged-in user can read. - /auth/login and /auth/me now return the resolved abilities map, so the web gates its UI off one payload instead of duplicating the rules. User management (ADMIN-only, ability "user:manage"): - UsersService gains list/create/update/resetPassword (argon2), never returns passwordHash; blocks self-deactivation and self-demotion; maps duplicate email to 409. - UsersController: GET/POST /users, PATCH /users/:id, POST /users/:id/reset-password. - Every mutation logged via new AuditService over the existing ActivityLog model (global CommonModule). Web: - AuthContext + useAuth/useCan; AppShell provides the user and gates the new "Usuarios" nav entry on user:manage; shows the user's role. - /usuarios admin page: list + create/edit form + password reset + active toggle, Spanish-first, reusing existing card/table/field styles. Schema pushed to dev (enum only, non-destructive). Verified end-to-end against dev: admin CRUD works, VIEWER writes 403 while reads 200, self-lockout guards and duplicate-email 409 all hold. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -267,12 +267,46 @@ button {
|
||||
font-size: 13px;
|
||||
color: rgba(242, 239, 231, 0.7);
|
||||
}
|
||||
.appbar-user-name {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.appbar-user-role {
|
||||
font-size: 11px;
|
||||
color: rgba(242, 239, 231, 0.45);
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.appbar-user .appbar-user-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Admin form grid (users, and future CRUD forms)
|
||||
========================================================================== */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.row-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.inline-form-note {
|
||||
font-size: 13px;
|
||||
color: var(--muted, #6b7280);
|
||||
margin: 4px 0 14px;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Buttons
|
||||
========================================================================== */
|
||||
|
||||
@@ -0,0 +1,327 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { useAuth, useCan } from "@/lib/abilities";
|
||||
import { ROLE_LABEL, ROLES_DESC } from "@/lib/labels";
|
||||
import {
|
||||
createUser,
|
||||
listUsers,
|
||||
resetUserPassword,
|
||||
updateUser,
|
||||
} from "@/lib/api";
|
||||
import type { Role, UserRow } from "@/lib/types";
|
||||
|
||||
export default function UsuariosPage() {
|
||||
return (
|
||||
<AppShell>
|
||||
<UsuariosAdmin />
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
type FormState = {
|
||||
name: string;
|
||||
email: string;
|
||||
password: string;
|
||||
role: Role;
|
||||
active: boolean;
|
||||
};
|
||||
|
||||
const EMPTY_FORM: FormState = {
|
||||
name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
role: "STAFF",
|
||||
active: true,
|
||||
};
|
||||
|
||||
function UsuariosAdmin() {
|
||||
const me = useAuth();
|
||||
const allowed = useCan("user:manage");
|
||||
|
||||
const [users, setUsers] = useState<UserRow[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [notice, setNotice] = useState<string | null>(null);
|
||||
|
||||
// null = create mode; a user id = editing that row.
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [form, setForm] = useState<FormState>(EMPTY_FORM);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Inline "reset password" target + value.
|
||||
const [pwTarget, setPwTarget] = useState<string | null>(null);
|
||||
const [pwValue, setPwValue] = useState("");
|
||||
|
||||
function refresh() {
|
||||
listUsers()
|
||||
.then(setUsers)
|
||||
.catch((e) => setError(e?.message ?? "No se pudieron cargar los usuarios."));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (allowed) refresh();
|
||||
}, [allowed]);
|
||||
|
||||
if (!allowed) {
|
||||
return (
|
||||
<div className="page-head">
|
||||
<h1 className="page-title">Usuarios</h1>
|
||||
<div className="state-box state-error">
|
||||
No tiene permisos para administrar usuarios.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function startCreate() {
|
||||
setEditingId(null);
|
||||
setForm(EMPTY_FORM);
|
||||
setNotice(null);
|
||||
setError(null);
|
||||
}
|
||||
|
||||
function startEdit(u: UserRow) {
|
||||
setEditingId(u.id);
|
||||
setForm({ name: u.name, email: u.email, password: "", role: u.role, active: u.active });
|
||||
setNotice(null);
|
||||
setError(null);
|
||||
}
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
setNotice(null);
|
||||
try {
|
||||
if (editingId) {
|
||||
await updateUser(editingId, {
|
||||
name: form.name,
|
||||
email: form.email,
|
||||
role: form.role,
|
||||
active: form.active,
|
||||
});
|
||||
setNotice("Usuario actualizado.");
|
||||
} else {
|
||||
await createUser({
|
||||
name: form.name,
|
||||
email: form.email,
|
||||
password: form.password,
|
||||
role: form.role,
|
||||
active: form.active,
|
||||
});
|
||||
setNotice("Usuario creado.");
|
||||
}
|
||||
startCreate();
|
||||
refresh();
|
||||
} catch (e2) {
|
||||
setError((e2 as Error)?.message ?? "No se pudo guardar el usuario.");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function submitPassword(id: string) {
|
||||
setError(null);
|
||||
try {
|
||||
await resetUserPassword(id, pwValue);
|
||||
setPwTarget(null);
|
||||
setPwValue("");
|
||||
setNotice("Contraseña restablecida.");
|
||||
} catch (e) {
|
||||
setError((e as Error)?.message ?? "No se pudo restablecer la contraseña.");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-head">
|
||||
<h1 className="page-title">Usuarios</h1>
|
||||
</div>
|
||||
|
||||
{error && <div className="state-box state-error">{error}</div>}
|
||||
{notice && <div className="state-box">{notice}</div>}
|
||||
|
||||
{/* Create / edit form */}
|
||||
<div className="card" style={{ padding: 20, marginBottom: 20 }}>
|
||||
<h2 className="section-title" style={{ marginBottom: 4 }}>
|
||||
{editingId ? "Editar usuario" : "Nuevo usuario"}
|
||||
</h2>
|
||||
<p className="inline-form-note">
|
||||
El rol define el acceso: Solo lectura no puede escribir; Personal y
|
||||
superior sí. Administrador gestiona usuarios.
|
||||
</p>
|
||||
<form onSubmit={submit}>
|
||||
<div className="form-grid">
|
||||
<label className="field">
|
||||
<span className="field-label">Nombre</span>
|
||||
<input
|
||||
className="input"
|
||||
required
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
<label className="field">
|
||||
<span className="field-label">Correo</span>
|
||||
<input
|
||||
className="input"
|
||||
type="email"
|
||||
required
|
||||
value={form.email}
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
{!editingId && (
|
||||
<label className="field">
|
||||
<span className="field-label">Contraseña (mín. 8)</span>
|
||||
<input
|
||||
className="input"
|
||||
type="password"
|
||||
required
|
||||
minLength={8}
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
<label className="field">
|
||||
<span className="field-label">Rol</span>
|
||||
<select
|
||||
className="select"
|
||||
value={form.role}
|
||||
onChange={(e) => setForm({ ...form, role: e.target.value as Role })}
|
||||
>
|
||||
{ROLES_DESC.map((r) => (
|
||||
<option key={r} value={r}>
|
||||
{ROLE_LABEL[r]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="field" style={{ justifyContent: "flex-end" }}>
|
||||
<span className="field-label">Activo</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.active}
|
||||
disabled={editingId === me?.id}
|
||||
onChange={(e) => setForm({ ...form, active: e.target.checked })}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn btn-primary" disabled={saving}>
|
||||
{saving ? "Guardando…" : editingId ? "Guardar cambios" : "Crear usuario"}
|
||||
</button>
|
||||
{editingId && (
|
||||
<button type="button" className="btn btn-outline" onClick={startCreate}>
|
||||
Cancelar
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* List */}
|
||||
<div className="card">
|
||||
{users === null ? (
|
||||
<div className="empty-inline">
|
||||
<span className="spinner" aria-label="Cargando" />
|
||||
</div>
|
||||
) : users.length === 0 ? (
|
||||
<div className="empty-inline">Sin usuarios.</div>
|
||||
) : (
|
||||
<div className="tx-scroll">
|
||||
<table className="tx-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nombre</th>
|
||||
<th>Correo</th>
|
||||
<th>Rol</th>
|
||||
<th>Estado</th>
|
||||
<th className="num">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id}>
|
||||
<td>
|
||||
{u.name}
|
||||
{u.id === me?.id && (
|
||||
<span className="muted"> (usted)</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="mono">{u.email}</td>
|
||||
<td>
|
||||
<span className="badge badge-neutral">{ROLE_LABEL[u.role]}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`badge ${u.active ? "badge-positive" : "badge-negative"}`}
|
||||
>
|
||||
{u.active ? "Activo" : "Inactivo"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{pwTarget === u.id ? (
|
||||
<div className="row-actions">
|
||||
<input
|
||||
className="input"
|
||||
type="password"
|
||||
placeholder="Nueva contraseña"
|
||||
minLength={8}
|
||||
value={pwValue}
|
||||
onChange={(e) => setPwValue(e.target.value)}
|
||||
style={{ maxWidth: 180 }}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
type="button"
|
||||
disabled={pwValue.length < 8}
|
||||
onClick={() => submitPassword(u.id)}
|
||||
>
|
||||
Guardar
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-ghost"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setPwTarget(null);
|
||||
setPwValue("");
|
||||
}}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="row-actions">
|
||||
<button
|
||||
className="btn btn-outline"
|
||||
type="button"
|
||||
onClick={() => startEdit(u)}
|
||||
>
|
||||
Editar
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-ghost"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setPwTarget(u.id);
|
||||
setPwValue("");
|
||||
}}
|
||||
>
|
||||
Contraseña
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user