Merge branch 'dev' into 'features/volunteersTollBar'

# Conflicts:
#   src/pages/Events/EventsPage.jsx
#   src/pages/Volunteers/VolunteerCard.jsx

src/components/SettingsModal/SettingsModal.jsx

@@ -0,0 +1,70 @@
+import Modal from "../ui/modal/modal.jsx";
+import Button from "../ui/button/button.jsx";
+import styles from "./SettingsModal.module.css"
+import { useContext, useState } from "react";
+import ThemeSwitcher from "../ui/themeSwitcher/ThemeSwitcher.jsx";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import TextInput from "../ui/input/input.jsx";
+import updateUser from "../../utils/users/updateUser.js";
+
+
+export default function SettingsModal() {
+
+    const { user, logout, update } = useContext(AuthContext);
+
+    const [open, setOpen] = useState(false);
+
+    const [name, setName] = useState(user.name);
+    const [lastname, setLastName] = useState(user.lastname);
+    const [phone, setPhone] = useState(user.phone);
+
+    const handleLogout = () => {
+        logout();
+    }
+
+    const handleSubmit = async () => {
+        await updateUser(name, lastname, phone);
+        update();
+    }
+
+    return (
+        <>
+            <Button variant={"transparent"} onClick={() => setOpen(!open)}>
+                <img src={"/icons/settings-wheel.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
+            </Button>
+
+            <Modal title={"Paramètres"} open={open} onClose={() => setOpen(false)}>
+                <div className={styles.content}>
+
+                    <div className={styles.section}>
+                        <h3>Compte</h3>
+                        <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+
+                        <div className={styles.section}>
+                            <h4>Changer de Prénom</h4>
+                            <TextInput value={name} onChange={e => setName(e.target.value)} type={"text"} />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de nom</h4>
+                            <TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de numéro de téléphone</h4>
+                            <TextInput value={phone} onChange={e => setPhone(e.target.value)} type={"text"} />
+                        </div>
+
+                        <Button className={styles.submitBtn} onClick={handleSubmit}>Confirmer</Button>
+
+                    </div>
+
+                    <div className={styles.section}>
+                        <h3>Apparence</h3>
+                        <ThemeSwitcher />
+                    </div>
+                </div>
+            </Modal>
+        </>
+    )
+}

src/components/SettingsModal/SettingsModal.module.css

@@ -0,0 +1,23 @@
+.content {
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.modifyIcon {
+    height: 30px;
+    width: 30px;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+.submitBtn {
+    align-self: center;
+}

src/components/loginform/loginForm.jsx

@@ -30,7 +30,7 @@ function LoginForm({ className }) {
                 />
             </div>
             <div className={styles.formgroup}>
-                <Input password={true} onChange={e => setPassword(e.target.value)} value={password} />
+                <Input password={true} onChange={e => setPassword(e.target.value)} value={password} placeholder={"Mot de passe"} />
             </div>
 
             <div className={styles.logButton}>

src/components/ui/input/input.jsx

@@ -18,7 +18,7 @@ const TextInput = ({ placeholder, onChange, value, borderStyle, password, classN
             <TextInput
                 type={showPassword ? "text" : "password"}
                 value={value}
-                placeholder="Mot de passe"
+                placeholder={placeholder}
                 onChange={onChange}
                 className={styles.passwordInput}
             />

src/components/ui/modal/modal.jsx

@@ -1,23 +1,31 @@
-import styles from "./modal.module.css"
+import { createPortal } from "react-dom";
+import styles from "./modal.module.css";
 import Button from "../button/button.jsx";
 
 const Modal = ({ open, onClose, children, title }) => {
 
-    if(!open) return null;
+    if (!open) return null;
 
-    return <div className={styles.overlay}>
+    const handleOverlayClick = () => {
+        onClose();
+    };
 
-        <div className={styles.modal}>
+    const handleModalClick = (e) => {
+        e.stopPropagation();
+    };
 
-            {title && <h2>{title}</h2>}
+    return createPortal(
+        <div className={styles.overlay} onClick={handleOverlayClick}>
+            <div className={styles.modal} onClick={handleModalClick}>
+                {title && <h2>{title}</h2>}
+                {children}
+                <div className={styles.modalFooter}>
+                    <Button onClick={onClose}>Fermer</Button>
+                </div>
+            </div>
+        </div>,
+        document.body
+    );
+};
 
-            {children}
-
-            <div className={styles.modalFooter}> <Button onClick={onClose}>Fermer</Button> </div>
-
-        </div>
-
-    </div>
-}
-
-export default Modal;
+export default Modal;

src/components/ui/modal/modal.module.css

@@ -7,8 +7,10 @@
     background-color: rgba(0, 0, 0, 0.25);
     display: flex;
     justify-content: center;
-    align-items: center;
     z-index: 1000;
+    align-items: flex-start;
+    overflow-y: auto;
+    padding: 40px 0;
 }
 
 .modal {
@@ -16,9 +18,10 @@
     border-radius: 8px;
     min-width: 300px;
     max-width: 70%;
+    max-height: none;
     position: relative;
     box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-    width: fit-content;
+    width: clamp(300px, 50vw, 600px);
     border: 1px solid rgba(200, 200, 200, 0.3);
     background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(10px);

src/components/ui/themeSwitcher/ThemeSwitcher.jsx

@@ -1,19 +1,32 @@
 import Button from "../button/button.jsx";
-import React from "react";
+import { useState, useEffect } from "react";
+import styles from "./ThemeSwitcher.module.css";
+
 
 export default function ThemeSwitcher() {
 
+    const [theme, setTheme] = useState("");
+
+    useEffect(() => {
+        const t = localStorage.getItem("theme");
+        if(t) setTheme(t);
+        else setTheme("light");
+    }, []);
+
     const switchTheme = () => {
 
-        const currentTheme = localStorage.getItem("theme");
-        let newTheme = currentTheme === "light" ? "dark" : "light";
+        let newTheme = theme === "light" ? "dark" : "light";
 
-        if(currentTheme === null) newTheme = "dark";
+        if(theme === null || theme === "") newTheme = "dark";
 
         localStorage.setItem("theme", newTheme);
+        setTheme(newTheme);
 
         window.dispatchEvent(new Event("theme-changed"));
     };
 
-    return <Button variant={"default"} onClick={switchTheme}> Changer de thème </Button>
+    return <Button variant={"default"} onClick={switchTheme} className={styles.themeBtn}>
+            <img src={`/public/icons/theme/${theme}.svg`} alt={`${theme} icon`} className={styles.themeIcon} />
+            <p>Changer de thème </p>
+    </Button>
 }

src/components/ui/themeSwitcher/ThemeSwitcher.module.css

@@ -0,0 +1,12 @@
+.themeBtn {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+
+.themeIcon {
+    height: 20px;
+    width: 20px;
+}