UDT-009: Overrides de PermisosJson por usuario — cierre módulo Auth #12
@@ -8,6 +8,7 @@ import { AlertCircle } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@@ -19,6 +20,7 @@ import {
|
||||
import { useUser } from '../hooks/useUser'
|
||||
import { useUpdateUser } from '../hooks/useUpdateUser'
|
||||
import { ResetPasswordModal } from '../components/ResetPasswordModal'
|
||||
import { PermisosEditor } from '../components/PermisosEditor'
|
||||
import { useAuthStore } from '@/stores/authStore'
|
||||
|
||||
const editSchema = z.object({
|
||||
@@ -111,12 +113,14 @@ export function UserEditPage() {
|
||||
)
|
||||
}
|
||||
|
||||
const isSelf = loggedUserId === userId
|
||||
|
||||
return (
|
||||
<div className="max-w-xl space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold">Editar Usuario</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
{loggedUserId !== userId && <ResetPasswordModal userId={userId} />}
|
||||
{!isSelf && <ResetPasswordModal userId={userId} />}
|
||||
<Button variant="ghost" size="sm" onClick={() => navigate('/usuarios')}>
|
||||
Volver
|
||||
</Button>
|
||||
@@ -129,105 +133,120 @@ export function UserEditPage() {
|
||||
<p className="text-sm font-mono bg-muted rounded px-3 py-2">{user.username}</p>
|
||||
</div>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4" noValidate>
|
||||
{backendError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{backendError}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Tabs defaultValue="perfil">
|
||||
<TabsList>
|
||||
<TabsTrigger value="perfil">Perfil</TabsTrigger>
|
||||
<TabsTrigger value="permisos" disabled={isSelf}>
|
||||
Permisos
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="nombre"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nombre</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} disabled={isPending} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<TabsContent value="perfil">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4" noValidate>
|
||||
{backendError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{backendError}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="apellido"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Apellido</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} disabled={isPending} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="nombre"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nombre</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} disabled={isPending} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email (opcional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="email" disabled={isPending} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="apellido"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Apellido</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} disabled={isPending} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rol"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Rol</FormLabel>
|
||||
<FormControl>
|
||||
<select
|
||||
{...field}
|
||||
disabled={isPending}
|
||||
aria-label="Rol"
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="cajero">Cajero</option>
|
||||
<option value="reportes">Reportes</option>
|
||||
</select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email (opcional)</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="email" disabled={isPending} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="activo"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center gap-3">
|
||||
<FormControl>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.value}
|
||||
onChange={field.onChange}
|
||||
disabled={isPending}
|
||||
aria-label="Activo"
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="!mt-0">Activo</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="rol"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Rol</FormLabel>
|
||||
<FormControl>
|
||||
<select
|
||||
{...field}
|
||||
disabled={isPending}
|
||||
aria-label="Rol"
|
||||
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="cajero">Cajero</option>
|
||||
<option value="reportes">Reportes</option>
|
||||
</select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={isPending} className="w-full">
|
||||
{isPending ? 'Guardando...' : 'Guardar cambios'}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="activo"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center gap-3">
|
||||
<FormControl>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.value}
|
||||
onChange={field.onChange}
|
||||
disabled={isPending}
|
||||
aria-label="Activo"
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="!mt-0">Activo</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={isPending} className="w-full">
|
||||
{isPending ? 'Guardando...' : 'Guardar cambios'}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="permisos">
|
||||
<PermisosEditor userId={userId} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -162,4 +162,40 @@ describe('UserEditPage', () => {
|
||||
await waitFor(() => expect(screen.getByDisplayValue('Juan')).toBeInTheDocument())
|
||||
expect(screen.queryByRole('button', { name: /resetear contraseña/i })).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
// FP-01: tabs Perfil and Permisos visible when editing another user
|
||||
it('shows tabs "Perfil" and "Permisos" when editing another user', async () => {
|
||||
server.use(
|
||||
http.get(`${API_URL}/api/v1/users/5`, () => HttpResponse.json(mockUserDetail)),
|
||||
http.get(`${API_URL}/api/v1/users/5/permisos`, () =>
|
||||
HttpResponse.json({
|
||||
usuarioId: 5, rol: 'cajero', rolPermisos: [], grant: [], deny: [], effective: [],
|
||||
}),
|
||||
),
|
||||
http.get(`${API_URL}/api/v1/permisos`, () => HttpResponse.json([])),
|
||||
)
|
||||
|
||||
renderEditPage(5)
|
||||
|
||||
await waitFor(() => expect(screen.getByDisplayValue('Juan')).toBeInTheDocument())
|
||||
|
||||
expect(screen.getByRole('tab', { name: /perfil/i })).toBeInTheDocument()
|
||||
expect(screen.getByRole('tab', { name: /permisos/i })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// FP-10: self-edit — tab Permisos is disabled
|
||||
it('disables tab "Permisos" when editing own profile (self-edit)', async () => {
|
||||
server.use(
|
||||
http.get(`${API_URL}/api/v1/users/1`, () =>
|
||||
HttpResponse.json({ ...mockUserDetail, id: 1, username: 'admin' }),
|
||||
),
|
||||
)
|
||||
|
||||
renderEditPage(1)
|
||||
|
||||
await waitFor(() => expect(screen.getByDisplayValue('Juan')).toBeInTheDocument())
|
||||
|
||||
const permisosTab = screen.getByRole('tab', { name: /permisos/i })
|
||||
expect(permisosTab).toBeDisabled()
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user