julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

108
components/UserManagement.tsx
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>
);
}