Merge branch 'features/footer' into 'dev'

Features/footer See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!64
2026-01-14 08:04:28 +00:00
parent 4746de72ab 89a8ef87bb
commit e22178ad00
10 changed files with 345 additions and 25 deletions
@@ -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(){
-    return (
-        <footer className={`${styles.footer} ${"glassCard"}`} >
+export default function Footer(){
+    const currentYear = new Date().getFullYear();
+    const [isCopyrightModal, setIsCopyrightModal] = useState(false);
+
+
+    return <>
+        <footer className={`${styles.footer} glassCard`}>
            <div className={styles.footerContent}>
-                <Link to="" className={styles.link}>Contact</Link>
-                <Link to="" className={styles.link}>RGPD</Link>
-                <Link to="" className={styles.link}>Mentions légales</Link>
+                <Button
+                    variant={"transparent"}
+                    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>
+    </>
+}
@@ -1,34 +1,76 @@
-.footer{
+.footer {
    width: 100%;
-    display: flex;
-    align-items: center;
-    height: fit-content;
-    padding: 2rem;
+    padding: 1.5rem 2rem;
+    margin-top: auto;
 }

 .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;
-    text-align: center;
+    font-size: 0.9rem;
+    white-space: nowrap;
+}
+
+.section{
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
 }



-@media screen and (max-width: 480px) {
-    .footer{
-        padding: 1rem;
+
+@media screen and (max-width: 768px) {
+    .footerContent {
+        flex-direction: column-reverse;
+        gap: 1rem;
+        text-align: center;
    }

-    .footerContent{
-        flex-direction: column;
-        align-items: center;
-        gap: 0.5rem;
+    .footerNav {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .link {
+        margin: 0.5rem 1rem;
+    }
+
+    .separator {
+        display: none;
    }
 }
@@ -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)}>
@@ -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>
@@ -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>
+    );
+}
@@ -0,0 +1,16 @@
+.h2 {
+    justify-content: left;
+}
+
+.section {
+    margin: 2rem 0;
+}
+
+.section ul {
+    padding : 0 2em;
+}
+
+
+.legalNotices{
+    margin: 16px 2em;
+}
@@ -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>
+    );
+}
@@ -0,0 +1,15 @@
+.h2 {
+    justify-content: left;
+}
+
+.section {
+    margin: 2rem 0;
+}
+
+.section ul {
+    padding : 0 2em;
+}
+
+.RGPD{
+    margin: 16px 2em;
+}
@@ -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,
+            },
        ]
    }
 ])
@@ -0,0 +1,3 @@
+export default function scrollToTop () {
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+};