Create delete user btn

src/components/manageMember/ManageMember.jsx

@@ -2,6 +2,7 @@ import Button from "../ui/button/button.jsx";
 import Modal from "../ui/modal/modal.jsx";
 import { useState } from "react";
 import styles from "./manageMember.module.css"
+import DeleteMemberBtn from "./deleteMember/deleteMemberBtn.jsx";
 
 
 export default function ManageMember({ user }) {
@@ -16,6 +17,10 @@ export default function ManageMember({ user }) {
 
         <Modal open={open} onClose={() => setOpen(false)} title={`Gestion de l'utilisateur ${user.name}`}>
 
+            <div className={styles.manageSection}>
+                <h3>Supprimer le compte</h3>
+                <DeleteMemberBtn name={user.name} id={user.id} />
+            </div>
         </Modal>
     </>
 }

src/components/manageMember/deleteMember/deleteMemberBtn.jsx

@@ -0,0 +1,31 @@
+import Button from "../../ui/button/button.jsx";
+import Modal from "../../ui/modal/modal.jsx";
+import { useState } from "react";
+import deleteUser from "../../../utils/users/deleteUser.js"
+import { useNavigate } from "react-router";
+
+export default function DeleteMemberBtn({ name, id }) {
+
+    const [open, setOpen] = useState(false);
+    const navigate = useNavigate();
+
+    const delMember = async () => {
+        const result = await deleteUser(id);
+
+        if (result.status === 200 || result.status === 204) {
+            setOpen(false);
+            navigate("/volunteers");
+        }
+    }
+
+    return <>
+        <Button variant={"danger"} onClick={() => setOpen(true)}>Supprimer</Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={"Supprimer"}>
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 15 }}>
+                <p>Etes-vous sur de vouloir supprimer le compte {name} ?</p>
+                <Button variant={"danger"} onClick={delMember}>Supprimer</Button>
+            </div>
+        </Modal>
+    </>
+}

src/components/manageMember/manageMember.module.css

@@ -5,4 +5,11 @@
 .manageBtn {
     display: flex;
     flex-direction: row;
+}
+
+.manageSection {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin: 1.5em;
 }

src/utils/users/deleteUser.js

@@ -0,0 +1,34 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function deleteUser(userId) {
+    const csrfToken = await getXSRFToken();
+
+    try {
+        const response = await fetch(`${import.meta.env.VITE_API_URL}/api/users/${userId}`, {
+            method: 'DELETE',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-XSRF-TOKEN': csrfToken,
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify({
+                id: userId
+            })
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            return {
+                status: response.status,
+                errors: data.errors || data.message
+            };
+        }
+
+        return { status: response.status, data };
+
+    } catch (error) {
+        return { status: 500, error };
+    }
+}