Merge branch 'features/manageMember' into 'dev'

Features/managemember

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!63

public/icons/tools.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -8 72 72" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#010002;}</style></defs><title>tools</title><path class="cls-1" d="M13.32,44.31a4.5,4.5,0,0,0,6.36,6.36L34.44,35.91l-6.36-6.36Z"/><polygon class="cls-1" points="50.2 16.96 56.63 13.63 60 7.13 56.86 3.99 50.36 7.36 47.03 13.78 39.21 21.61 42.38 24.79 50.2 16.96"/><path class="cls-1" d="M51.61,34,51,34a8.9,8.9,0,0,0-3.11.58L29.45,16.09A8.9,8.9,0,0,0,30,13l-.06-.6A8.9,8.9,0,0,0,17.19,4.89l6,6a3,3,0,0,1,.68,1.08A3,3,0,0,1,21,16a2.92,2.92,0,0,1-1-.21,3.15,3.15,0,0,1-1.08-.67l-6-6a8.9,8.9,0,0,0,7.49,12.78L21,22a8.9,8.9,0,0,0,3.11-.58L42.6,39.84A8.9,8.9,0,0,0,42,43l.06.6A9,9,0,0,0,51,51.94a8.72,8.72,0,0,0,3.85-.9l-6-6A3.08,3.08,0,0,1,48.21,44,3,3,0,0,1,51,40a2.92,2.92,0,0,1,1,.21,2.72,2.72,0,0,1,1.08.67l6,6A8.9,8.9,0,0,0,51.61,34Z"/></svg>

src/components/manageMember/ManageMember.jsx

@@ -0,0 +1,32 @@
+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";
+import ModifyRole from "./modifyrole/ModifyRole.jsx";
+
+export default function ManageMember({ user }) {
+
+    const [open, setOpen] = useState(false);
+
+
+    return <>
+        <Button onClick={() => setOpen(true)} variant={"default"} className={styles.manageBtn}>
+            <img src="/icons/tools.svg" alt="tools icon" className={styles.icon} />
+            <p>Gérer</p>
+        </Button>
+
+        <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} className={styles.manageBlockContent} />
+            </div>
+
+            <div className={styles.manageSection}>
+                <h3>Modifier le rôle</h3>
+                <ModifyRole user={user} />
+            </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, ...props }) {
+
+    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 <div {...props}>
+        <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>
+    </div>
+}

src/components/manageMember/manageMember.module.css

@@ -0,0 +1,47 @@
+.icon {
+    width: 24px;
+}
+
+.manageBtn {
+    display: flex;
+    flex-direction: row;
+}
+
+.manageSection {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin: 1.5em;
+}
+
+.manageBlockContent {
+    margin: 0.5em;
+}
+
+.modifyRole {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.select {
+    width: 70%;
+    padding: 10px 14px;
+
+    font-size: 14px;
+    font-weight: 500;
+    color: #1d1d1f;
+
+    background-color: #ffffff;
+    border: 1px solid #d2d2d7;
+    border-radius: 10px;
+
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+.modalContent {
+    text-align: center;
+}

src/components/manageMember/modifyrole/ModifyRole.jsx

@@ -0,0 +1,59 @@
+import styles from "../manageMember.module.css";
+import Button from "../../ui/button/button.jsx";
+import modifyRole from "../../../utils/users/modifyRole.js";
+import { useState, useEffect } from "react";
+import getRoles from "../../../utils/getRoles.js";
+import Modal from "../../ui/modal/modal.jsx";
+
+export default function ModifyRole({ user }) {
+
+    const [roles, setRoles] = useState([]);
+    const [selectedRole, setSelectedRole] = useState(3);
+    const [open, setOpen] = useState(false);
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+
+    useEffect(() => {
+        getRoles().then(data => {
+            if (data) setRoles(data);
+        });
+    }, [])
+
+
+    const handleRoleUpdate = async () => {
+        const res = await modifyRole(selectedRole, user.id);
+
+        if (res.success) {
+            setDescription("Rôle modifié avec succès");
+            setTitle("Modification")
+            setOpen(true);
+        } else {
+            setDescription("Erreur lors de la modification du rôle");
+            setTitle("Erreur")
+            setOpen(true);
+        }
+    };
+
+
+    return <div className={`${styles.manageBlockContent} ${styles.modifyRole}`}>
+        <select
+            value={selectedRole}
+            onChange={(e) => setSelectedRole(e.target.value)}
+            className={styles.select}
+        >
+            {roles.map((role, index) => (
+                <option key={index} value={index+1}>
+                    {role}
+                </option>
+            ))}
+        </select>
+
+        <Button onClick={handleRoleUpdate} variant={"default"}>
+            Enregistrer
+        </Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={title}>
+            <p className={styles.modalContent}>{description}</p>
+        </Modal>
+    </div>
+}

src/pages/VolunteerProfile/VolunteerProfilePage.jsx

@@ -1,10 +1,12 @@
 import styles from "./VolunteerProfilePage.module.css"
 import { useParams } from "react-router";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useContext } from "react";
 import getUserById from "../../utils/users/getUserById.js";
 import formatDate from "../../utils/date/formatDate.js";
 import Task from "../../components/Task/Task.jsx";
 import { useNavigate } from "react-router";
+import ManageMember from "../../components/manageMember/ManageMember.jsx";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
 
 export default function VolunteerProfilePage() {
 
@@ -13,6 +15,8 @@ export default function VolunteerProfilePage() {
 
     const navigate = useNavigate();
 
+    const { user: currentUser } = useContext(AuthContext);
+
     const [user, setUser] = useState({});
 
     useEffect(() => {
@@ -41,13 +45,14 @@ export default function VolunteerProfilePage() {
                 <div className={styles.description}>
                     <div className={styles.headerProfile}>
                         <h2> {user.name} {user.lastname} </h2>
+                        {currentUser?.isAdmin && <ManageMember user={user} />}
                     </div>
                     <div className={styles.topDescription}>
-                        <div className={styles.infoBlock}>
+                        <div className={`${styles.infoBlock} glassBorder`}>
                             <p><strong>Role :</strong> {user.role}</p>
                             <p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
                         </div>
-                        <div className={styles.infoBlock}>
+                        <div className={`${styles.infoBlock} glassBorder`}>
                             <p><strong>Mail :</strong> {user.email} </p>
                             <p><strong>Téléphone :</strong> {user.phone === null ? "Pas de numéro enregistré" : user.phone}</p>
                         </div>

src/utils/getRoles.js

@@ -0,0 +1,21 @@
+export default async function getRoles() {
+    try {
+        const res = await fetch(`${import.meta.env.VITE_API_URL}/api/roles`, {
+            method: 'GET',
+            credentials: 'include',
+            headers: {
+                'Accept': 'application/json'
+            }
+        });
+
+        if (!res.ok) {
+            throw new Error(`Erreur serveur : ${res.status}`);
+        }
+
+        const data = await res.json();
+        return data;
+    } catch (err) {
+        console.error('Erreur :', err);
+        return null;
+    }
+}

src/utils/users/deleteUser.js

@@ -1,35 +1,34 @@
-import getXSRFToken from "../getXSRF";
+import getXSRFToken from "../getXSRF.js";
 
 export default async function deleteUser(userId) {
+    const csrfToken = await getXSRFToken();
 
-  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
+            })
+        });
 
-  try {
+        const data = await response.json();
 
+        if (!response.ok) {
+            return {
+                status: response.status,
+                errors: data.errors || data.message
+            };
+        }
 
-    const res = await fetch(
+        return { status: response.status, data };
-      `${import.meta.env.VITE_API_URL}/api/users/${userId}`,
-      {
-        method: "DELETE",
-        credentials: "include",
-        headers: {
-          Accept: "application/json",
-          "X-XSRF-TOKEN": csrfToken,
-        },
-      }
-    );
 
-    if (!res.ok) {
+    } catch (error) {
-      let message = "Erreur backend";
+        return { status: 500, error };
-      try {
-        const errorData = await res.json();
-        message = errorData.message || message;
-      } catch {}
-      return { success: false, message };
     }
-    return { success: true };
-  } catch (err) {
-    console.error(err);
-    return { success: false, message: "Erreur réseau" };
-  }
 }

src/utils/users/modifyRole.js

@@ -0,0 +1,33 @@
+import getXSRFToken from "../getXSRF.js";
+
+
+export default async function modifyRole(role, userId) {
+    try {
+        const csrfToken = await getXSRFToken();
+
+        const res = await fetch(
+            `${import.meta.env.VITE_API_URL}/api/users/${userId}/role`,
+            {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Accept': 'application/json',
+                    'X-XSRF-TOKEN': csrfToken,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ role }),
+            }
+        );
+
+        const data = await res.json();
+
+        if (!res.ok) {
+            return { success: false, error: data.message ?? "Erreur serveur" };
+        }
+
+        return { success: true, data };
+    } catch (err) {
+        console.error(err);
+        return { success: false, error: "Erreur réseau" };
+    }
+}