user management
This commit is contained in:
nBiqoz
321
components/dashboard/delete-user.tsx
Normal file
321
components/dashboard/delete-user.tsx
Normal file
@@ -0,0 +1,321 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { UserMinus, Loader2, CheckCircle, AlertCircle, Trash2 } from "lucide-react";
|
||||
|
||||
interface DeleteUserResult {
|
||||
success: boolean;
|
||||
message: string;
|
||||
deletedUser?: {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
};
|
||||
balanceDeleted?: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface FoundUser {
|
||||
_id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export default function DeleteUser() {
|
||||
const [searchData, setSearchData] = useState({
|
||||
email: "",
|
||||
userId: "",
|
||||
});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [result, setResult] = useState<DeleteUserResult | null>(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
const [foundUser, setFoundUser] = useState<FoundUser | null>(null);
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setSearchData((prev) => ({ ...prev, [field]: value }));
|
||||
// Réinitialiser les résultats quand l'utilisateur modifie le formulaire
|
||||
if (result) {
|
||||
setResult(null);
|
||||
}
|
||||
if (confirmDelete) {
|
||||
setConfirmDelete(false);
|
||||
}
|
||||
if (foundUser) {
|
||||
setFoundUser(null);
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
if (!searchData.email.trim() && !searchData.userId.trim()) {
|
||||
return "Email ou ID utilisateur requis";
|
||||
}
|
||||
if (searchData.email && searchData.userId) {
|
||||
return "Veuillez utiliser soit l'email soit l'ID, pas les deux";
|
||||
}
|
||||
if (searchData.email) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(searchData.email)) {
|
||||
return "Format d'email invalide";
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const handleSearch = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const validationError = validateForm();
|
||||
if (validationError) {
|
||||
setResult({
|
||||
success: false,
|
||||
message: validationError,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setResult(null);
|
||||
setFoundUser(null);
|
||||
|
||||
try {
|
||||
// D'abord, chercher l'utilisateur pour confirmation
|
||||
const searchParams = new URLSearchParams();
|
||||
if (searchData.email) {
|
||||
searchParams.append("email", searchData.email.trim().toLowerCase());
|
||||
}
|
||||
if (searchData.userId) {
|
||||
searchParams.append("id", searchData.userId.trim());
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/collections/users?${searchParams.toString()}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.data && data.data.length > 0) {
|
||||
setFoundUser(data.data[0]);
|
||||
setResult({
|
||||
success: true,
|
||||
message: "Utilisateur trouvé. Confirmez la suppression ci-dessous.",
|
||||
});
|
||||
} else {
|
||||
setResult({
|
||||
success: false,
|
||||
message: "Utilisateur non trouvé",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la recherche:", error);
|
||||
setResult({
|
||||
success: false,
|
||||
message: "Erreur de connexion au serveur",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!foundUser) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setResult(null);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/delete-user", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
userId: foundUser._id,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
setResult({
|
||||
success: true,
|
||||
message: data.message,
|
||||
deletedUser: data.deletedUser,
|
||||
balanceDeleted: data.balanceDeleted,
|
||||
});
|
||||
// Réinitialiser le formulaire
|
||||
setSearchData({
|
||||
email: "",
|
||||
userId: "",
|
||||
});
|
||||
setFoundUser(null);
|
||||
setConfirmDelete(false);
|
||||
} else {
|
||||
setResult({
|
||||
success: false,
|
||||
message: data.error || "Erreur lors de la suppression de l'utilisateur",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la suppression:", error);
|
||||
setResult({
|
||||
success: false,
|
||||
message: "Erreur de connexion au serveur",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-red-600">
|
||||
<UserMinus className="h-5 w-5" />
|
||||
Supprimer un utilisateur
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSearch} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Adresse email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Ex: jean.dupont@example.com"
|
||||
value={searchData.email}
|
||||
onChange={(e) => handleInputChange("email", e.target.value)}
|
||||
disabled={isLoading || !!searchData.userId}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="userId">ID Utilisateur</Label>
|
||||
<Input
|
||||
id="userId"
|
||||
type="text"
|
||||
placeholder="Ex: 507f1f77bcf86cd799439011"
|
||||
value={searchData.userId}
|
||||
onChange={(e) => handleInputChange("userId", e.target.value)}
|
||||
disabled={isLoading || !!searchData.email}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!foundUser && (
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" disabled={isLoading} variant="outline">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Recherche...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Rechercher l'utilisateur
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
{foundUser && (
|
||||
<div className="mt-6 p-4 border rounded-lg bg-yellow-50 border-yellow-200">
|
||||
<h4 className="font-medium mb-2 text-yellow-800">Utilisateur trouvé :</h4>
|
||||
<div className="text-sm space-y-1 text-yellow-700">
|
||||
<p><strong>ID:</strong> {foundUser._id}</p>
|
||||
<p><strong>Nom:</strong> {foundUser.name}</p>
|
||||
<p><strong>Email:</strong> {foundUser.email}</p>
|
||||
<p><strong>Rôle:</strong> {foundUser.role}</p>
|
||||
<p><strong>Créé le:</strong> {new Date(foundUser.createdAt).toLocaleDateString()}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex gap-2">
|
||||
{!confirmDelete ? (
|
||||
<Button
|
||||
onClick={() => setConfirmDelete(true)}
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Supprimer cet utilisateur
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={handleDelete}
|
||||
disabled={isLoading}
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Suppression...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Confirmer la suppression
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setConfirmDelete(false)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={isLoading}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<Alert variant={result.success ? "default" : "destructive"} className="mt-4">
|
||||
{result.success ? (
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
) : (
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
)}
|
||||
<AlertDescription>
|
||||
{result.message}
|
||||
{result.success && result.deletedUser && (
|
||||
<div className="mt-2 text-sm">
|
||||
<strong>Utilisateur supprimé:</strong>
|
||||
<br />
|
||||
• Nom: {result.deletedUser.name}
|
||||
<br />
|
||||
• Email: {result.deletedUser.email}
|
||||
<br />
|
||||
• Rôle: {result.deletedUser.role}
|
||||
<br />
|
||||
• Solde supprimé: {result.balanceDeleted ? "Oui" : "Non"}
|
||||
</div>
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="mt-6 p-4 bg-red-50 rounded-lg border border-red-200">
|
||||
<h4 className="font-medium mb-2 text-red-800">⚠️ Attention :</h4>
|
||||
<ul className="text-sm text-red-700 space-y-1">
|
||||
<li>• Cette action est irréversible</li>
|
||||
<li>• L'utilisateur et son solde seront définitivement supprimés</li>
|
||||
<li>• Toutes les données associées seront perdues</li>
|
||||
<li>• Utilisez cette fonction avec précaution</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user