Fixed creation of users + better frontend handling of permissions

frontend/components/shortcodes-table.tsx

@@ -21,6 +21,12 @@ import ShortcodeDialog from "@/components/shortcode-dialogue";
 import { useState } from "react";
 import IUser from "@/interfaces/IUser";
 import hasPermissions from "@/lib/hasPermissions";
+import {
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "@radix-ui/react-hover-card";
+import Image from "next/image";
 
 interface ShortcodeTableProps {
 	user: IUser;
@@ -37,13 +43,17 @@ export function ShortcodeTable({
 	onAdd,
 	user,
 }: ShortcodeTableProps) {
+	const permissions = hasPermissions(user.roles, {
+		shortcodes: ["insert", "update", "delete"],
+	} as const);
 	const [shortcodeSelected, setUpdateDialog] = useState<IShortcode | null>(
 		null,
 	);
 	const [addDialog, setAddDialog] = useState<boolean>(false);
+
 	return (
 		<div>
-			{hasPermissions(user.roles, { shortcodes: ["insert"] }) && (
+			{permissions.shortcodes.insert && (
 				<div className="mb-4">
 					<Button
 						onClick={() => {
@@ -81,7 +91,21 @@ export function ShortcodeTable({
 									{shortcode.value || "N/A"}
 								</TableCell>
 								<TableCell>
-									{shortcode.media_id || "N/A"}
+									<HoverCard>
+										<HoverCardTrigger className="underline decoration-dotted cursor-pointer">
+											{shortcode.media_id || "N/A"}
+										</HoverCardTrigger>
+										{shortcode.media && (
+											<HoverCardContent>
+												<Image
+													src={shortcode.media.url}
+													alt={shortcode.media.alt}
+													width={200}
+													height={200}
+												/>
+											</HoverCardContent>
+										)}
+									</HoverCard>
 								</TableCell>
 								<TableCell>
 									<DropdownMenu>
@@ -97,9 +121,7 @@ export function ShortcodeTable({
 											</Button>
 										</DropdownMenuTrigger>
 										<DropdownMenuContent align="end">
-											{hasPermissions(user.roles, {
-												shortcodes: ["update"],
-											}) && (
+											{permissions.shortcodes.update && (
 												<DropdownMenuItem
 													onClick={() =>
 														setUpdateDialog(
@@ -110,9 +132,7 @@ export function ShortcodeTable({
 													Mettre à jour
 												</DropdownMenuItem>
 											)}
-											{hasPermissions(user.roles, {
-												shortcodes: ["delete"],
-											}) && (
+											{permissions.shortcodes.delete && (
 												<DropdownMenuItem
 													onClick={() =>
 														onDelete(shortcode.code)