Add user deletion functionality: Implement DELETE API endpoint for user management, allowing admins to remove users while preventing self-deletion. Enhance UserManagement component with delete confirmation and error handling for improved user experience.

This commit is contained in:
Julien Froidefond
2025-12-10 05:55:52 +01:00
parent 125e9b345d
commit 88d377e7b2
3 changed files with 139 additions and 21 deletions

View File

@@ -149,3 +149,51 @@ export async function PUT(
}
}
export async function DELETE(
request: Request,
{ params }: { params: Promise<{ id: string }> }
) {
try {
const session = await auth();
if (!session?.user || session.user.role !== Role.ADMIN) {
return NextResponse.json({ error: "Accès refusé" }, { status: 403 });
}
const { id } = await params;
// Vérifier que l'utilisateur existe
const user = await prisma.user.findUnique({
where: { id },
});
if (!user) {
return NextResponse.json(
{ error: "Utilisateur non trouvé" },
{ status: 404 }
);
}
// Empêcher la suppression de soi-même
if (user.id === session.user.id) {
return NextResponse.json(
{ error: "Vous ne pouvez pas supprimer votre propre compte" },
{ status: 400 }
);
}
// Supprimer l'utilisateur (les relations seront supprimées en cascade)
await prisma.user.delete({
where: { id },
});
return NextResponse.json({ success: true });
} catch (error) {
console.error("Error deleting user:", error);
return NextResponse.json(
{ error: "Erreur lors de la suppression de l'utilisateur" },
{ status: 500 }
);
}
}

View File

@@ -1,6 +1,7 @@
import { NextResponse } from "next/server";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { calculateEventStatus } from "@/lib/eventStatus";
export async function POST(
request: Request,
@@ -30,7 +31,8 @@ export async function POST(
);
}
if (event.status !== "UPCOMING") {
const eventStatus = calculateEventStatus(event.date);
if (eventStatus !== "UPCOMING") {
return NextResponse.json(
{ error: "Vous ne pouvez vous inscrire qu'aux événements à venir" },
{ status: 400 }

View File

@@ -31,6 +31,7 @@ export default function UserManagement() {
const [loading, setLoading] = useState(true);
const [editingUser, setEditingUser] = useState<EditingUser | null>(null);
const [saving, setSaving] = useState(false);
const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
useEffect(() => {
fetchUsers();
@@ -117,14 +118,41 @@ export default function UserManagement() {
setEditingUser(null);
};
const handleDelete = async (userId: string) => {
if (
!confirm(
"Êtes-vous sûr de vouloir supprimer cet utilisateur ? Cette action est irréversible."
)
) {
return;
}
setDeletingUserId(userId);
try {
const response = await fetch(`/api/admin/users/${userId}`, {
method: "DELETE",
});
if (response.ok) {
await fetchUsers();
} else {
const error = await response.json();
alert(error.error || "Erreur lors de la suppression");
}
} catch (error) {
console.error("Error deleting user:", error);
alert("Erreur lors de la suppression");
} finally {
setDeletingUserId(null);
}
};
const formatNumber = (num: number) => {
return num.toLocaleString("en-US");
};
if (loading) {
return (
<div className="text-center text-gray-400 py-8">Chargement...</div>
);
return <div className="text-center text-gray-400 py-8">Chargement...</div>;
}
return (
@@ -159,11 +187,17 @@ export default function UserManagement() {
className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.style.display = "none";
e.currentTarget.nextElementSibling?.classList.remove("hidden");
e.currentTarget.nextElementSibling?.classList.remove(
"hidden"
);
}}
/>
) : null}
<div className={`w-full h-full flex items-center justify-center text-pixel-gold text-sm font-bold ${user.avatar ? "hidden" : ""}`}>
<div
className={`w-full h-full flex items-center justify-center text-pixel-gold text-sm font-bold ${
user.avatar ? "hidden" : ""
}`}
>
{user.username.charAt(0).toUpperCase()}
</div>
</div>
@@ -172,22 +206,45 @@ export default function UserManagement() {
<h3 className="text-pixel-gold font-bold text-base">
{user.username}
</h3>
<span className="text-xs text-gray-500">Niveau {user.level}</span>
<span className="text-xs text-gray-500">Score: {formatNumber(user.score)}</span>
<span className={`text-xs ${user.role === "ADMIN" ? "text-pixel-gold" : "text-gray-500"}`}>
<span className="text-xs text-gray-500">
Niveau {user.level}
</span>
<span className="text-xs text-gray-500">
Score: {formatNumber(user.score)}
</span>
<span
className={`text-xs ${
user.role === "ADMIN"
? "text-pixel-gold"
: "text-gray-500"
}`}
>
{user.role}
</span>
</div>
<p className="text-gray-400 text-xs truncate">{user.email}</p>
<p className="text-gray-400 text-xs truncate">
{user.email}
</p>
</div>
</div>
{!isEditing && (
<button
onClick={() => handleEdit(user)}
className="px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition flex-shrink-0 ml-2"
>
Modifier
</button>
<div className="flex gap-2 flex-shrink-0 ml-2">
<button
onClick={() => handleEdit(user)}
className="px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition"
>
Modifier
</button>
<button
onClick={() => handleDelete(user.id)}
disabled={deletingUserId === user.id}
className="px-3 py-1.5 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-xs tracking-widest rounded hover:bg-red-900/30 transition disabled:opacity-50"
>
{deletingUserId === user.id
? "Suppression..."
: "Supprimer"}
</button>
</div>
)}
</div>
@@ -264,7 +321,10 @@ export default function UserManagement() {
<div
className="h-full bg-gradient-to-r from-red-600 to-green-500 transition-all duration-300"
style={{
width: `${Math.min(100, (previewHp / user.maxHp) * 100)}%`,
width: `${Math.min(
100,
(previewHp / user.maxHp) * 100
)}%`,
}}
/>
</div>
@@ -341,7 +401,10 @@ export default function UserManagement() {
<div
className="h-full bg-gradient-to-r from-blue-600 to-purple-500 transition-all duration-300"
style={{
width: `${Math.min(100, (previewXp / user.maxXp) * 100)}%`,
width: `${Math.min(
100,
(previewXp / user.maxXp) * 100
)}%`,
}}
/>
</div>
@@ -522,7 +585,10 @@ export default function UserManagement() {
<div
className="h-full bg-gradient-to-r from-red-600 to-green-500"
style={{
width: `${Math.min(100, (user.hp / user.maxHp) * 100)}%`,
width: `${Math.min(
100,
(user.hp / user.maxHp) * 100
)}%`,
}}
/>
</div>
@@ -538,7 +604,10 @@ export default function UserManagement() {
<div
className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
style={{
width: `${Math.min(100, (user.xp / user.maxXp) * 100)}%`,
width: `${Math.min(
100,
(user.xp / user.maxXp) * 100
)}%`,
}}
/>
</div>
@@ -552,4 +621,3 @@ export default function UserManagement() {
</div>
);
}