Merge branch 'features/footer' into 'dev'

Features/footer

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

src/components/Footer/Footer.jsx

@@ -1,16 +1,64 @@
 import styles from "./Footer.module.css"
 import {Link} from "react-router";
+import {useState} from "react";
+import Modal from "../ui/modal/modal.jsx";
+import Button from "../ui/button/button.jsx";
+import scrollToTop from "../../utils/scrollToTop.js";
 
-function Footer(){
+export default function Footer(){
-    return (
+    const currentYear = new Date().getFullYear();
-        <footer className={`${styles.footer} ${"glassCard"}`} >
+    const [isCopyrightModal, setIsCopyrightModal] = useState(false);
+
+
+    return <>
+        <footer className={`${styles.footer} glassCard`}>
             <div className={styles.footerContent}>
-                <Link to="" className={styles.link}>Contact</Link>
+                <Button
-                <Link to="" className={styles.link}>RGPD</Link>
+                    variant={"transparent"}
-                <Link to="" className={styles.link}>Mentions légales</Link>
+                    className={styles.link}
+                    onClick={() => setIsCopyrightModal(true)}
+                >
+                    Copyright © {currentYear}. Tous droits réservés.
+                </Button>
+
+                <div className={styles.copyright}>
+
+                </div>
+
+                <nav className={styles.footerNav}>
+                    <Link to="/RGPD" className={styles.link} onClick={scrollToTop}>
+                        Fiche RGPD
+                    </Link>
+                    <span className={styles.separator}></span>
+                    <Link to="/legalNotices" className={styles.link} onClick={scrollToTop}>
+                        Mentions légales
+                    </Link>
+                    <span className={styles.separator}></span>
+                    <Link to={"https://comite.beaupont.fr/contactez-nous"} className={styles.link}>
+                        Contact
+                    </Link>
+                    <span className={styles.separator}></span>
+                    <Link to="/" className={styles.link} onClick={scrollToTop}>
+                        Accueil
+                    </Link>
+                </nav>
             </div>
         </footer>
-    )
-}
 
-export default Footer;
+        {/* TODO : mettre nos noms dans un fichier de configuration */}
+        <Modal title={"Réalisé par"} open={isCopyrightModal} onClose={() => setIsCopyrightModal(false)}>
+            <section className={styles.section}>
+                <div className={styles.inputContainer}>
+                    <p>Quentin T'jampens</p>
+                    <p>Antoine Ordonneau</p>
+                    <p>Malo Leblond</p>
+                    <p>
+                        Giovanni Josserand (
+                        <Link to={"https://linktree.josserand.ovh/"}>linktree</Link>
+                        )
+                    </p>
+                </div>
+            </section>
+        </Modal>
+    </>
+}

src/components/Footer/Footer.module.css

@@ -1,34 +1,76 @@
-.footer{
+.footer {
     width: 100%;
-    display: flex;
+    padding: 1.5rem 2rem;
-    align-items: center;
+    margin-top: auto;
-    height: fit-content;
-    padding: 2rem;
 }
 
 .footerContent {
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
     width: 100%;
-    justify-content: center;
+}
-    gap: 2rem;
+
+.footerNav {
+    display: flex;
+    align-items: center;
 }
 
 .link {
+    color: black !important;
+    text-decoration: none;
+    font-size: 0.95rem;
+    transition: color 0.2s ease;
+    padding: 0 !important;
+}
+
+.link:hover {
+    color: #019AFF !important;
+}
+
+.separator {
+    width: 1px;
+    height: 16px;
+    background-color: black;
+    margin: 0 1rem;
+}
+
+.copyright {
     color: black;
-    width: fit-content;
+    font-size: 0.9rem;
-    text-align: center;
+    white-space: nowrap;
+}
+
+.section{
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
 }
 
 
 
-@media screen and (max-width: 480px) {
+
-    .footer{
+@media screen and (max-width: 768px) {
-        padding: 1rem;
+    .footerContent {
+        flex-direction: column-reverse;
+        gap: 1rem;
+        text-align: center;
     }
 
-    .footerContent{
+    .footerNav {
-        flex-direction: column;
+        flex-wrap: wrap;
-        align-items: center;
+        justify-content: center;
-        gap: 0.5rem;
+    }
+
+    .link {
+        margin: 0.5rem 1rem;
+    }
+
+    .separator {
+        display: none;
     }
 }

src/components/createEventBtn/CreateEventBtn.jsx

@@ -24,6 +24,7 @@ export default function CreateEventBtn() {
     }
 
     return <>
+    {/* TODO : faire le responsive du menu de création d'événement */}
         <Button className={`${styles.createButton} glassCard`} variant={"default"} onClick={() => setIsOpen(true)}> + </Button>
 
         <Modal title={"Créer un événement"} open={isOpen} onClose={() => setIsOpen(false)}>

src/main.jsx

@@ -8,6 +8,8 @@ import { AuthProvider } from "./contexts/auth/authProvider.jsx";
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
+      {/* TODO: refaire l'arborescence du frontend */}
+      {/* TODO: refaire le docker du backend */}
         <AuthProvider>
             <RouterProvider router={router} />
         </AuthProvider>

src/pages/LegalNotices/LegalNotices.jsx

@@ -0,0 +1,40 @@
+import styles from "./LegalNotices.module.css";
+import {Link} from "react-router-dom";
+
+export default function legalNotices() {
+    return (
+        <div className={`${styles.legalNotices} glassCard`}>
+            <h1>Mentions Légales</h1>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>1. Édition de l'application</h2>
+                <p>
+                    L'édition et la direction de la publication de l'application sont assurées par Monsieur Robin Frère
+                    <br />Contact : <Link to={"https://comite.beaupont.fr/contactez-nous"}>https://comite.beaupont.fr/contactez-nous</Link>
+                </p>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>2. Conception et Développement</h2>
+                <p>L'application a été conçue et développée par :</p>
+                <ul>
+                    <li>Quentin T'jampens</li>
+                    <li>Antoine Ordonneau</li>
+                    <li>Malo Leblond</li>
+                    <li>Giovanni Josserand</li>
+                </ul>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>3. Hébergement</h2>
+                <p>
+                    L'application est hébergée par la société OVH.
+                    <ul>
+                        <li>Siège social : 2 rue Kellermann - 59100 Roubaix - France</li>
+                        <li>Site web : <Link to={"www.ovh.com"}>www.ovh.com</Link></li>
+                    </ul>
+                </p>
+            </section>
+        </div>
+    );
+}

src/pages/LegalNotices/LegalNotices.module.css

@@ -0,0 +1,16 @@
+.h2 {
+    justify-content: left;
+}
+
+.section {
+    margin: 2rem 0;
+}
+
+.section ul {
+    padding : 0 2em;
+}
+
+
+.legalNotices{
+    margin: 16px 2em;
+}

src/pages/RGPD/RGPD.jsx

@@ -0,0 +1,143 @@
+import styles from "./RGPD.module.css";
+import {Link} from "react-router-dom";
+
+export default function RGPD() {
+    return (
+        <div className={`${styles.RGPD} glassCard`}>
+            <h1> Fiche d'informatino RGPD </h1>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}> 1. Présentation du site </h2>
+                <p>
+                    Le présent site web est un outil de gestion des bénévoles permettant notamment :
+                </p>
+                <ul>
+                    <li>L’inscription et la gestion des profils bénévoles</li>
+                    <li>L’organisation d’événements ou de missions</li>
+                    <li>La communication avec les bénévoles</li>
+                    <li>Le suivi des participations</li>
+                </ul>
+
+                <p>
+                    Le site est édité par :
+                </p>
+                <ul>
+                    <li>Nom de la structure : Comité des fêtes de Beaupont</li>
+                    <li>Forme juridique : Association loi 1901</li>
+                    <li>Adresse : Beaupont 01270</li>
+                    <li>Contact : <Link to="/contactez-nous">Formulaire de contact</Link></li>
+                </ul>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>2. Responsable du traitement</h2>
+                <p>
+                    Le responsable du traitement des données personnelles est Monsieur FRÈRE Robin
+                    <br />Il est responsable de la collecte et de l’utilisation des données personnelles conformément au Règlement Général sur la Protection des Données (RGPD – UE 2016/679).
+                </p>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>3. Données personnelles collectées</h2>
+                <p>Les données susceptibles d’être collectées sont notamment :</p>
+                <ul>
+                    <li>Les données d’identification : nom, prénom, adresse email et numéro de téléphone.</li>
+                    <li>Les données techniques : adresse IP, données de connexion (logs) et type de navigateur et appareil.</li>
+                </ul>
+
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>4. Finalités du traitement</h2>
+                <p>Les données personnelles sont collectées pour les finalités suivantes :</p>
+                <ul>
+                    <li>Gestion des comptes bénévoles</li>
+                    <li>Organisation et suivi des activités / tâches</li>
+                    <li>Communication interne (notifications)</li>
+                    <li>Gestion administrative et statistique</li>
+                    <li>Sécurité et bon fonctionnement du site</li>
+                </ul>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>5. Base légale du traitement</h2>
+                <p>Les traitements reposent sur :</p>
+                <ul>
+                    <li>Le consentement de l’utilisateur</li>
+                    <li>L’intérêt légitime de l’organisme (gestion des bénévoles)</li>
+                    <li>Une obligation légale, le cas échéant</li>
+                </ul>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>6. Durée de conservation</h2>
+                <p>Les données sont conservées :</p>
+                <ul>
+                    <li>Pendant la durée de l’engagement bénévole</li>
+                    <li>Puis archivées ou supprimées au plus tard 3 ans après la dernière activité ou contact</li>
+                </ul>
+                <p>Les logs techniques sont conservés pour une durée maximale de 2 mois.</p>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>7. Destinataires des données</h2>
+                <p>Les données sont accessibles uniquement :</p>
+                <ul>
+                    <li>Aux personnes habilitées de l’organisme</li>
+                    <li>Aux prestataires techniques (hébergement, maintenance), strictement nécessaires</li>
+                </ul>
+                <p>Aucune donnée n’est vendue ou cédée à des tiers.</p>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>8. Hébergement des données</h2>
+                <p>Les données sont hébergées par la société OVH :</p>
+                <ul>
+                    <li>Siège social : 2 rue Kellermann - 59100 Roubaix - France</li>
+                    <li>Site web : <Link to={"www.ovh.com"}>www.ovh.com</Link></li>
+                </ul>
+                <p>L’hébergeur garantit un niveau de sécurité conforme au RGPD.</p>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>9. Sécurité des données</h2>
+                <p>Des mesures techniques et organisationnelles sont mises en place :</p>
+                <ul>
+                    <li>Accès sécurisé par identifiant et mot de passe</li>
+                    <li>Sauvegardes régulières</li>
+                    <li>Accès limité aux personnes autorisées</li>
+                </ul>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>10. Droits des utilisateurs</h2>
+                <p>Conformément au RGPD, vous disposez des droits suivants :</p>
+                <ul>
+                    <li>Droit d’accès à vos données</li>
+                    <li>Droit de rectification</li>
+                    <li>Droit à l’effacement (droit à l’oubli)</li>
+                    <li>Droit à la limitation du traitement</li>
+                    <li>Droit d’opposition</li>
+                    <li>Droit à la portabilité des données</li>
+                </ul>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>11. Réclamation</h2>
+                <p>
+                    Si vous estimez que vos droits ne sont pas respectés, vous pouvez introduire une réclamation auprès de la :
+                    <br /><strong>CNIL</strong> – Commission Nationale de l’Informatique et des Libertés
+                    <br />Site : <a href="https://www.cnil.fr" target="_blank" rel="noreferrer">https://www.cnil.fr</a>
+                </p>
+            </section>
+
+            <section className={styles.section}>
+                <h2 className={styles.h2}>12. Mise à jour</h2>
+                <p>
+                    La présente fiche RGPD peut être mise à jour à tout moment afin de rester conforme à la réglementation en vigueur.
+                    <br /><em>Dernière mise à jour : 09/01/2026</em>
+                </p>
+            </section>
+        </div>
+    );
+}

src/pages/RGPD/RGPD.module.css

@@ -0,0 +1,15 @@
+.h2 {
+    justify-content: left;
+}
+
+.section {
+    margin: 2rem 0;
+}
+
+.section ul {
+    padding : 0 2em;
+}
+
+.RGPD{
+    margin: 16px 2em;
+}

src/router.js

@@ -11,6 +11,8 @@ import ValidationErrorPage from "./pages/waitValidationPage/ValidationErrorPage.
 import VolunteerProfilePage from "./pages/VolunteerProfile/VolunteerProfilePage.jsx";
 import PageNotFound from "./pages/PageNotFound/PageNotFound.jsx";
 import eventDetail from "./pages/eventDetail/eventDetail.jsx";
+import legalNotices from "./pages/LegalNotices/LegalNotices.jsx";
+import RGPD from "./pages/RGPD/RGPD.jsx";
 
 const router = createBrowserRouter([
     {
@@ -65,6 +67,14 @@ const router = createBrowserRouter([
                 path: "/events/:id",
                 Component: eventDetail,
             },
+            {
+                path: "/legalNotices",
+                Component: legalNotices,
+            },
+            {
+                path: "/RGPD",
+                Component: RGPD,
+            },
         ]
     }
 ])

src/utils/scrollToTop.js

@@ -0,0 +1,3 @@
+export default function scrollToTop () {
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+};