Merge pull request #99 from madhura68/feat/story-111ci8t4
ST-1205: Admin: gebruikersbeheer (/admin/users)
This commit is contained in:
Janpeter Visser
GitHub
commit
384a7ecd4a
7 changed files with 331 additions and 0 deletions
43
actions/admin/users.ts
Normal file
43
actions/admin/users.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
'use server'
|
||||||
|
|
||||||
|
import { revalidatePath } from 'next/cache'
|
||||||
|
import { z } from 'zod'
|
||||||
|
import { Role } from '@prisma/client'
|
||||||
|
import { prisma } from '@/lib/prisma'
|
||||||
|
import { requireAdmin } from '@/lib/auth-guard'
|
||||||
|
|
||||||
|
export async function deleteUserAction(userId: string) {
|
||||||
|
const session = await requireAdmin()
|
||||||
|
if (userId === session.userId) {
|
||||||
|
throw new Error('Zelfverwijdering niet toegestaan')
|
||||||
|
}
|
||||||
|
await prisma.user.delete({ where: { id: userId } })
|
||||||
|
revalidatePath('/admin/users')
|
||||||
|
}
|
||||||
|
|
||||||
|
const rolesSchema = z.array(z.nativeEnum(Role))
|
||||||
|
|
||||||
|
export async function updateUserRolesAction(userId: string, roles: Role[]) {
|
||||||
|
const session = await requireAdmin()
|
||||||
|
|
||||||
|
const parsed = rolesSchema.safeParse(roles)
|
||||||
|
if (!parsed.success) {
|
||||||
|
throw new Error('Ongeldige rol-waarden')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (userId === session.userId && !parsed.data.includes(Role.ADMIN)) {
|
||||||
|
throw new Error('Kan eigen ADMIN-rol niet verwijderen')
|
||||||
|
}
|
||||||
|
|
||||||
|
await prisma.$transaction([
|
||||||
|
prisma.userRole.deleteMany({ where: { user_id: userId } }),
|
||||||
|
...parsed.data.map((role) => prisma.userRole.create({ data: { user_id: userId, role } })),
|
||||||
|
])
|
||||||
|
revalidatePath('/admin/users')
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function setMustResetPasswordAction(userId: string, value: boolean) {
|
||||||
|
await requireAdmin()
|
||||||
|
await prisma.user.update({ where: { id: userId }, data: { must_reset_password: value } })
|
||||||
|
revalidatePath('/admin/users')
|
||||||
|
}
|
||||||
16
app/(app)/admin/layout.tsx
Normal file
16
app/(app)/admin/layout.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { requireAdmin } from '@/lib/auth-guard'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
export default async function AdminLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
await requireAdmin()
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen">
|
||||||
|
<nav className="w-48 border-r p-4 flex flex-col gap-2">
|
||||||
|
<Link href="/admin/users" className="text-sm font-medium text-foreground hover:text-primary">Gebruikers</Link>
|
||||||
|
<Link href="/admin/jobs" className="text-sm font-medium text-foreground hover:text-primary">Claude Jobs</Link>
|
||||||
|
<Link href="/admin/products" className="text-sm font-medium text-foreground hover:text-primary">Producten</Link>
|
||||||
|
</nav>
|
||||||
|
<main className="flex-1 p-6">{children}</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
5
app/(app)/admin/page.tsx
Normal file
5
app/(app)/admin/page.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { redirect } from 'next/navigation'
|
||||||
|
|
||||||
|
export default function AdminPage() {
|
||||||
|
redirect('/admin/users')
|
||||||
|
}
|
||||||
19
app/(app)/admin/users/page.tsx
Normal file
19
app/(app)/admin/users/page.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { requireAdmin } from '@/lib/auth-guard'
|
||||||
|
import { prisma } from '@/lib/prisma'
|
||||||
|
import { UsersTable } from '@/components/admin/users-table'
|
||||||
|
|
||||||
|
export default async function AdminUsersPage() {
|
||||||
|
const session = await requireAdmin()
|
||||||
|
|
||||||
|
const users = await prisma.user.findMany({
|
||||||
|
include: { roles: { select: { role: true } } },
|
||||||
|
orderBy: { created_at: 'desc' },
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h1 className="text-xl font-semibold text-foreground">Gebruikers</h1>
|
||||||
|
<UsersTable users={users} currentUserId={session.userId} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
239
components/admin/users-table.tsx
Normal file
239
components/admin/users-table.tsx
Normal file
|
|
@ -0,0 +1,239 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useTransition } from 'react'
|
||||||
|
import { Role } from '@prisma/client'
|
||||||
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogClose,
|
||||||
|
} from '@/components/ui/dialog'
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table'
|
||||||
|
import {
|
||||||
|
deleteUserAction,
|
||||||
|
updateUserRolesAction,
|
||||||
|
setMustResetPasswordAction,
|
||||||
|
} from '@/actions/admin/users'
|
||||||
|
|
||||||
|
type UserWithRoles = {
|
||||||
|
id: string
|
||||||
|
username: string
|
||||||
|
email: string | null
|
||||||
|
must_reset_password: boolean
|
||||||
|
created_at: Date
|
||||||
|
roles: { role: Role }[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const ALL_ROLES: Role[] = [Role.PRODUCT_OWNER, Role.SCRUM_MASTER, Role.DEVELOPER, Role.ADMIN]
|
||||||
|
|
||||||
|
const ROLE_LABEL: Record<Role, string> = {
|
||||||
|
PRODUCT_OWNER: 'Product Owner',
|
||||||
|
SCRUM_MASTER: 'Scrum Master',
|
||||||
|
DEVELOPER: 'Developer',
|
||||||
|
ADMIN: 'Admin',
|
||||||
|
}
|
||||||
|
|
||||||
|
function RoleBadge({ role }: { role: Role }) {
|
||||||
|
const cls =
|
||||||
|
role === Role.ADMIN
|
||||||
|
? 'bg-status-done text-white border-transparent'
|
||||||
|
: role === Role.PRODUCT_OWNER
|
||||||
|
? 'bg-status-in-progress text-white border-transparent'
|
||||||
|
: role === Role.SCRUM_MASTER
|
||||||
|
? 'bg-priority-medium text-white border-transparent'
|
||||||
|
: 'bg-secondary text-secondary-foreground'
|
||||||
|
return <Badge className={cls}>{ROLE_LABEL[role]}</Badge>
|
||||||
|
}
|
||||||
|
|
||||||
|
function RolesDialog({ user, currentUserId }: { user: UserWithRoles; currentUserId: string }) {
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
const [selected, setSelected] = useState<Set<Role>>(new Set(user.roles.map(r => r.role)))
|
||||||
|
const [pending, startTransition] = useTransition()
|
||||||
|
const isSelf = user.id === currentUserId
|
||||||
|
|
||||||
|
function toggle(role: Role) {
|
||||||
|
setSelected(prev => {
|
||||||
|
const next = new Set(prev)
|
||||||
|
if (next.has(role)) next.delete(role)
|
||||||
|
else next.add(role)
|
||||||
|
return next
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSave() {
|
||||||
|
startTransition(async () => {
|
||||||
|
await updateUserRolesAction(user.id, Array.from(selected))
|
||||||
|
setOpen(false)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger render={<Button variant="outline" size="sm" />}>
|
||||||
|
Rollen
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Rollen voor {user.username}</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="flex flex-col gap-2 py-2">
|
||||||
|
{ALL_ROLES.map(role => {
|
||||||
|
const isDisabled = isSelf && role === Role.ADMIN && selected.has(role)
|
||||||
|
return (
|
||||||
|
<label key={role} className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={selected.has(role)}
|
||||||
|
disabled={isDisabled}
|
||||||
|
onChange={() => toggle(role)}
|
||||||
|
className="rounded border-border"
|
||||||
|
/>
|
||||||
|
<span className="text-sm">{ROLE_LABEL[role]}</span>
|
||||||
|
{isDisabled && <span className="text-xs text-muted-foreground">(eigen rol)</span>}
|
||||||
|
</label>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<DialogFooter showCloseButton>
|
||||||
|
<Button onClick={handleSave} disabled={pending}>
|
||||||
|
{pending ? 'Opslaan…' : 'Opslaan'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function DeleteDialog({ user, currentUserId }: { user: UserWithRoles; currentUserId: string }) {
|
||||||
|
const [open, setOpen] = useState(false)
|
||||||
|
const [pending, startTransition] = useTransition()
|
||||||
|
const isSelf = user.id === currentUserId
|
||||||
|
|
||||||
|
function handleDelete() {
|
||||||
|
startTransition(async () => {
|
||||||
|
await deleteUserAction(user.id)
|
||||||
|
setOpen(false)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger
|
||||||
|
render={
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
size="sm"
|
||||||
|
disabled={isSelf}
|
||||||
|
title={isSelf ? 'Zelfverwijdering niet toegestaan' : undefined}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Verwijder
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Gebruiker verwijderen</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Weet je zeker dat je <strong>{user.username}</strong> wilt verwijderen? Dit kan niet ongedaan worden gemaakt.
|
||||||
|
</p>
|
||||||
|
<DialogFooter>
|
||||||
|
<DialogClose render={<Button variant="outline" />}>Annuleer</DialogClose>
|
||||||
|
<Button variant="destructive" onClick={handleDelete} disabled={pending}>
|
||||||
|
{pending ? 'Verwijderen…' : 'Verwijderen'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ResetToggle({ user }: { user: UserWithRoles }) {
|
||||||
|
const [pending, startTransition] = useTransition()
|
||||||
|
|
||||||
|
function handleToggle() {
|
||||||
|
startTransition(async () => {
|
||||||
|
await setMustResetPasswordAction(user.id, !user.must_reset_password)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant={user.must_reset_password ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onClick={handleToggle}
|
||||||
|
disabled={pending}
|
||||||
|
title="Forceer wachtwoord-reset bij volgende login"
|
||||||
|
>
|
||||||
|
{user.must_reset_password ? 'Reset gepland' : 'Reset pw'}
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UsersTable({
|
||||||
|
users,
|
||||||
|
currentUserId,
|
||||||
|
}: {
|
||||||
|
users: UserWithRoles[]
|
||||||
|
currentUserId: string
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Gebruiker</TableHead>
|
||||||
|
<TableHead>Email</TableHead>
|
||||||
|
<TableHead>Rollen</TableHead>
|
||||||
|
<TableHead>Reset pw</TableHead>
|
||||||
|
<TableHead>Aangemaakt</TableHead>
|
||||||
|
<TableHead className="text-right">Acties</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{users.map(user => (
|
||||||
|
<TableRow key={user.id}>
|
||||||
|
<TableCell className="font-medium">{user.username}</TableCell>
|
||||||
|
<TableCell className="text-muted-foreground">{user.email ?? '—'}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{user.roles.map(r => (
|
||||||
|
<RoleBadge key={r.role} role={r.role} />
|
||||||
|
))}
|
||||||
|
{user.roles.length === 0 && <span className="text-muted-foreground text-xs">Geen</span>}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{user.must_reset_password ? (
|
||||||
|
<Badge className="bg-priority-high text-white border-transparent">Ja</Badge>
|
||||||
|
) : (
|
||||||
|
<span className="text-muted-foreground text-xs">—</span>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-muted-foreground text-xs">
|
||||||
|
{new Date(user.created_at).toLocaleDateString('nl-NL')}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex gap-2 justify-end">
|
||||||
|
<ResetToggle user={user} />
|
||||||
|
<RolesDialog user={user} currentUserId={currentUserId} />
|
||||||
|
<DeleteDialog user={user} currentUserId={currentUserId} />
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -22,3 +22,11 @@ export async function requireSession() {
|
||||||
|
|
||||||
return session
|
return session
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function requireAdmin() {
|
||||||
|
const session = await getSession()
|
||||||
|
if (!session.userId || !session.isAdmin) {
|
||||||
|
redirect('/dashboard')
|
||||||
|
}
|
||||||
|
return session
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { SessionOptions } from 'iron-session'
|
||||||
export interface SessionData {
|
export interface SessionData {
|
||||||
userId: string
|
userId: string
|
||||||
isDemo: boolean
|
isDemo: boolean
|
||||||
|
isAdmin: boolean
|
||||||
// ST-1002 (M10) — gezet door /api/auth/pair/claim na een succesvolle QR-pairing.
|
// ST-1002 (M10) — gezet door /api/auth/pair/claim na een succesvolle QR-pairing.
|
||||||
// Beide velden zijn optioneel zodat bestaande wachtwoord-sessies onveranderd blijven.
|
// Beide velden zijn optioneel zodat bestaande wachtwoord-sessies onveranderd blijven.
|
||||||
paired?: boolean
|
paired?: boolean
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue