Move profile page components

src/pages/Profile/ProfilePage.jsx

@@ -2,8 +2,8 @@ import React, { useContext } from "react";
 import styles from "./ProfilePage.module.css";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 import formatDate from "../../utils/date/formatDate.js";
-import Task from "../../components/Task/Task";
-import SettingsModal from "../../components/SettingsModal/SettingsModal.jsx";
+import Task from "./components/Task/Task";
+import SettingsModal from "./components/SettingsModal/SettingsModal.jsx";
 
 function ProfilePage() {
 

src/pages/Profile/components/SettingsModal/SettingsModal.jsx

@@ -0,0 +1,86 @@
+import Modal from "../../../../components/ui/modal/modal.jsx";
+import Button from "../../../../components/ui/button/button.jsx";
+import styles from "./SettingsModal.module.css"
+import { useContext, useState } from "react";
+import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
+import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
+import TextInput from "../../../../components/ui/input/input.jsx";
+import updateUser from "../../../../utils/users/updateUser.js";
+import deleteUser from "../../../../utils/users/deleteUser.js";
+
+
+export default function SettingsModal() {
+
+    const { user, logout, update } = useContext(AuthContext);
+
+    const [open, setOpen] = useState(false);
+    const [isDelete, setIsDelete] = 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();
+    }
+
+    const handleDelete = async () => {
+        await deleteUser();
+        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>
+                        <Button variant={"danger"} onClick={() => setIsDelete(true)}> Supprimer le compte </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>
+
+
+            <Modal title={"Validation"} open={isDelete} onClose={() => setIsDelete(false)}>
+                <div className={styles.section}>
+                    <p className={styles.alignText}> Êtes vous vraiment sûr de vouloir supprimer votre compte ?</p>
+                    <Button variant={"danger"} className={styles.submitBtn} onClick={handleDelete}>Confirmer</Button>
+                </div>
+            </Modal>
+        </>
+    )
+}

src/pages/Profile/components/SettingsModal/SettingsModal.module.css

@@ -0,0 +1,73 @@
+.content {
+    width: 100%;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.modifyIcon {
+    height: 28px;
+    width: 28px;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 10px;
+}
+
+.section h3 {
+    font-size: 1.1rem;
+    margin-bottom: 5px;
+}
+
+.section h4 {
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+.submitBtn {
+    width: 100%;
+    margin-top: 15px;
+}
+
+.section button {
+    width: 100%;
+}
+
+@media (min-width: 600px) {
+    .content {
+        padding: 24px;
+    }
+
+    .section h3 {
+        font-size: 1.2rem;
+    }
+
+    .submitBtn {
+        width: auto;
+        align-self: center;
+        min-width: 200px;
+    }
+
+    .section button {
+        width: fit-content;
+    }
+}
+@media (min-width: 900px) {
+    .content {
+        padding: 30px;
+        gap: 30px;
+    }
+
+    .section {
+        gap: 14px;
+    }
+
+    .modifyIcon {
+        height: 30px;
+        width: 30px;
+    }
+}

src/pages/Profile/components/Task/Task.jsx

@@ -0,0 +1,29 @@
+import React, {useEffect, useState} from "react";
+import getEventById from "../../../../utils/events/getEventById.js";
+import styles from "./Task.module.css";
+import formatDate from "../../../../utils/date/formatDate.js";
+
+const Task = ({ task }) => {
+    const [event, setEvent] = useState(null);
+
+    useEffect(() => {
+        (async () => {
+            const e = await getEventById(task.id);
+            setEvent(e);
+        }) ()
+    }, [])
+
+    return (
+        <div className={`${styles.task} glassCard`}>
+            <div className={styles.content}>
+                <div>
+                    <h2> {event && event.name} - {task.name}</h2>
+                    <p className={styles.desc}> {task.description} </p>
+                    <p className={styles.date}> {formatDate(task.start)} </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Task;

src/pages/Profile/components/Task/Task.module.css

@@ -0,0 +1,22 @@
+.task {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+}
+
+.content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+.desc {
+    font-size: 0.8rem;
+    color: #666;
+    margin: 0 0 0 0;
+}
+
+.date {
+    font-size: 0.8rem;
+}