Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' into 'features/volunteersTollBar'

Browse Source 
# Conflicts:
#   src/pages/Events/EventsPage.jsx
#   src/pages/Volunteers/VolunteerCard.jsx
This commit is contained in:
JOSSERAND GIOVANNI p2405212
2025-12-10 10:54:24 +00:00
parent 516277c77d c1a7db12e3
commit cac2ef2c3e
25 changed files with 715 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/icons/settings-wheel.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M30.015 12.97l-2.567-0.569c-0.2-0.64-0.462-1.252-0.762-1.841l1.389-2.313c0.518-0.829 0.78-2.047 0-2.829l-1.415-1.414c-0.78-0.781-2.098-0.64-2.894-0.088l-2.251 1.434c-0.584-0.303-1.195-0.563-1.829-0.768l-0.576-2.598c-0.172-0.953-1.005-1.984-2.11-1.984h-2c-1.104 0-1.781 1.047-2 2l-0.642 2.567c-0.678 0.216-1.328 0.492-1.948 0.819l-2.308-1.47c-0.795-0.552-2.114-0.692-2.894 0.088l-1.415 1.414c-0.781 0.782-0.519 2 0 2.828l1.461 2.435c-0.274 0.552-0.517 1.123-0.705 1.72l-2.566 0.569c-0.953 0.171-1.984 1.005-1.984 2.109v2c0 1.105 1.047 1.782 2 2l2.598 0.649c0.179 0.551 0.404 1.080 0.658 1.593l-1.462 2.438c-0.518 0.828-0.78 2.047 0 2.828l1.415 1.414c0.78 0.782 2.098 0.64 2.894 0.089l2.313-1.474c0.623 0.329 1.277 0.608 1.96 0.823l0.64 2.559c0.219 0.953 0.896 2 2 2h2c1.105 0 1.938-1.032 2.11-1.985l0.577-2.604c0.628-0.203 1.23-0.459 1.808-0.758l2.256 1.438c0.796 0.552 2.114 0.692 2.895-0.089l1.415-1.414c0.78-0.782 0.518-2 0-2.828l-1.39-2.317c0.279-0.549 0.521-1.12 0.716-1.714l2.599-0.649c0.953-0.219 2-0.895 2-2v-2c0-1.104-1.031-1.938-1.985-2.11zM30.001 16.939c-0.085 0.061-0.245 0.145-0.448 0.192l-3.708 0.926-0.344 1.051c-0.155 0.474-0.356 0.954-0.597 1.428l-0.502 0.986 1.959 3.267c0.125 0.2 0.183 0.379 0.201 0.485l-1.316 1.314c-0.127-0.040-0.271-0.092-0.341-0.14l-3.292-2.099-1.023 0.529c-0.493 0.256-0.999 0.468-1.503 0.631l-1.090 0.352-0.824 3.723c-0.038 0.199-0.145 0.36-0.218 0.417h-1.8c-0.061-0.085-0.145-0.245-0.191-0.448l-0.921-3.681-1.066-0.338c-0.549-0.173-1.097-0.404-1.63-0.684l-1.028-0.543-3.293 2.099c-0.135 0.091-0.279 0.143-0.409 0.143l-1.311-1.276c0.018-0.104 0.072-0.274 0.181-0.449l2.045-3.408-0.487-0.98c-0.227-0.462-0.407-0.895-0.547-1.325l-0.343-1.052-3.671-0.918c-0.231-0.052-0.398-0.139-0.485-0.2v-1.86c0.001 0.001 0.002 0.001 0.005 0.001 0.034 0 0.198-0.117 0.335-0.142l3.772-0.835 0.346-1.103c0.141-0.449 0.333-0.917 0.588-1.43l0.487-0.98-2.024-3.373c-0.125-0.201-0.184-0.38-0.201-0.485l1.315-1.314c0.128 0.041 0.271 0.093 0.34 0.14l3.354 2.138 1.027-0.542c0.527-0.278 1.073-0.507 1.622-0.682l1.063-0.338 0.912-3.649c0.053-0.231 0.138-0.398 0.2-0.485h1.859c-0.014 0.020 0.115 0.195 0.142 0.339l0.84 3.794 1.089 0.352c0.511 0.165 1.023 0.38 1.523 0.639l1.023 0.532 3.224-2.053c0.135-0.092 0.279-0.143 0.409-0.143l1.313 1.276c-0.017 0.104-0.072 0.276-0.181 0.45l-1.98 3.296 0.505 0.988c0.273 0.533 0.48 1.033 0.635 1.529l0.346 1.104 3.697 0.82c0.224 0.041 0.398 0.171 0.434 0.241zM16.013 9.99c-3.321 0-6.023 2.697-6.023 6.010s2.702 6.010 6.023 6.010 6.023-2.697 6.023-6.009c0-3.313-2.702-6.010-6.023-6.010zM16 20c-2.205 0-4-1.794-4-4s1.794-4 4-4c2.206 0 4 1.794 4 4s-1.794 4-4 4z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

public/icons/theme/dark.svg
+33
View File
@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg
fill="#000000"
width="800"
height="800"
viewBox="0 0 24 24"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="Dark">
<path
d="m 12.741,20.917 a 9.389,9.389 0 0 1 -1.395,-0.105 9.141,9.141 0 0 1 -1.465,-17.7 1.177,1.177 0 0 1 1.21,0.281 1.273,1.273 0 0 1 0.325,1.293 8.112,8.112 0 0 0 -0.353,2.68 8.266,8.266 0 0 0 4.366,6.857 7.628,7.628 0 0 0 3.711,0.993 1.242,1.242 0 0 1 0.994,1.963 v 0 a 9.148,9.148 0 0 1 -7.393,3.738 z M 10.261,4.05 a 0.211,0.211 0 0 0 -0.065,0.011 8.137,8.137 0 1 0 9.131,12.526 v 0 A 0.224,0.224 0 0 0 19.34,16.352 0.232,0.232 0 0 0 19.134,16.216 8.619,8.619 0 0 1 14.946,15.1 9.274,9.274 0 0 1 10.063,7.4 9.123,9.123 0 0 1 10.463,4.392 0.286,0.286 0 0 0 10.394,4.107 0.184,0.184 0 0 0 10.261,4.05 Z"
id="path1" />
</g>
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.6;stroke-opacity:1"
d="M 12.27,19.887864 C 8.6252997,19.678981 5.5285722,16.983616 4.802205,13.387962 4.6751742,12.759136 4.6511961,12.497206 4.6531749,11.76 c 0.00153,-0.569372 0.01461,-0.787852 0.068001,-1.135667 C 4.9722048,8.989005 5.6646891,7.5303876 6.7700292,6.3087222 7.5904449,5.4019665 8.7542199,4.6113468 9.8911899,4.1883372 10.240576,4.0583481 10.339583,4.0517409 10.40655,4.1539446 10.47235,4.2543711 10.46876,4.3012971 10.3656,4.6890069 10.138096,5.5440534 10.057589,6.1522074 10.055041,7.035 c -0.002,0.7022856 0.03507,1.0781595 0.174729,1.7704386 0.441048,2.1862074 1.740566,4.2313134 3.533802,5.5612914 1.522152,1.128924 3.239127,1.76416 5.001426,1.850398 0.426916,0.02089 0.522077,0.04974 0.567784,0.172121 0.01351,0.03616 0.01272,0.09717 -0.0018,0.135571 -0.0463,0.122854 -0.480151,0.639299 -0.836032,0.99518 -1.646591,1.64659 -3.893995,2.501458 -6.225,2.367864 z"
id="path2" />
<path
style="fill:#000000;stroke-width:0.6"
d="M 12.24,20.891972 C 11.360122,20.823621 10.700414,20.69763 9.9480678,20.454259 8.4650988,19.974545 7.068363,19.071092 6.0273591,17.91822 3.5681787,15.194772 2.9603488,11.317696 4.4732148,8.0050236 5.4683391,5.8260321 7.3075485,4.1019471 9.54,3.2553909 c 0.474857,-0.1800684 0.671021,-0.2157843 0.918134,-0.1671678 0.388517,0.076436 0.689105,0.3111453 0.870584,0.6797817 0.07976,0.1620108 0.09971,0.2428032 0.110439,0.4473105 0.01165,0.2220426 -0.0021,0.3102909 -0.125027,0.7996359 -0.186386,0.7422312 -0.231182,1.0670649 -0.250567,1.816968 -0.01825,0.7060722 0.01143,1.0908765 0.130201,1.6880808 0.513779,2.583326 2.113703,4.659009 4.525866,5.871694 1.023273,0.514437 1.887784,0.742874 3.138603,0.829338 0.686858,0.04748 0.813587,0.08854 1.095191,0.354845 0.396466,0.374925 0.503868,0.948025 0.265728,1.417923 -0.188868,0.372671 -1.032844,1.304647 -1.622363,1.791523 -1.361429,1.124387 -3.007202,1.834185 -4.749821,2.048528 -0.372347,0.0458 -1.32298,0.08018 -1.606968,0.05812 z m 1.812099,-1.059112 c 2.09671,-0.362295 3.901569,-1.432794 5.155126,-3.05761 0.138666,-0.179734 0.168974,-0.239673 0.166437,-0.329157 -0.0049,-0.17327 -0.112259,-0.246087 -0.362835,-0.246118 -0.638294,-9e-5 -1.608859,-0.157002 -2.343213,-0.378853 -0.845921,-0.255557 -1.94952,-0.811781 -2.743228,-1.382616 C 12.717736,13.570686 11.728623,12.407926 11.05893,11.07 10.402835,9.7592388 10.076992,8.4125052 10.082658,7.035 10.086058,6.2084796 10.19082,5.4236802 10.394064,4.7021844 10.501518,4.3207323 10.50584,4.2345858 10.422823,4.1290458 10.333346,4.0152951 10.211226,4.0262211 9.8074461,4.1841018 8.7208542,4.6089669 7.7283636,5.269389 6.9148926,6.1088616 6.4866426,6.5508003 6.2969187,6.7845894 5.9734524,7.2689589 5.2794414,8.3081952 4.8329166,9.5184891 4.659645,10.83 4.602754,11.260615 4.6119,12.415262 4.675686,12.855 c 0.1862775,1.284197 0.6107841,2.410878 1.2942264,3.435 0.3498402,0.524227 0.5965434,0.824106 1.0489137,1.275 1.2796647,1.275489 2.8952232,2.063697 4.7361019,2.310675 0.483003,0.0648 1.818404,0.03991 2.297171,-0.04282 z"
id="path3" />
<path
style="fill:#000000;stroke-width:2.75694"
d="m 4.285738,11.874144 c 0.031414,-0.01988 0.3856,-0.02656 0.7854538,-0.01483 0.3998535,0.01172 0.3734269,0.02799 -0.058508,0.03615 -0.4319739,0.0082 -0.7591449,-0.0014 -0.7269853,-0.02132 z"
id="path4" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

public/icons/theme/light.svg
+29
View File
@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#231F20" cx="32.003" cy="32.005" r="16.001"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#231F20" d="M12.001,31.997c0-2.211-1.789-4-4-4H4c-2.211,0-4,1.789-4,4
s1.789,4,4,4h4C10.212,35.997,12.001,34.208,12.001,31.997z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#231F20" d="M12.204,46.139l-2.832,2.833c-1.563,1.562-1.563,4.094,0,5.656
c1.562,1.562,4.094,1.562,5.657,0l2.833-2.832c1.562-1.562,1.562-4.095,0-5.657C16.298,44.576,13.767,44.576,12.204,46.139z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#231F20" d="M32.003,51.999c-2.211,0-4,1.789-4,4V60c0,2.211,1.789,4,4,4
s4-1.789,4-4l-0.004-4.001C36.003,53.788,34.21,51.999,32.003,51.999z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#231F20" d="M51.798,46.143c-1.559-1.566-4.091-1.566-5.653-0.004
s-1.562,4.095,0,5.657l2.829,2.828c1.562,1.57,4.094,1.562,5.656,0s1.566-4.09,0-5.656L51.798,46.143z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#231F20" d="M60.006,27.997l-4.009,0.008
c-2.203-0.008-3.992,1.781-3.992,3.992c-0.008,2.211,1.789,4,3.992,4h4.001c2.219,0.008,4-1.789,4-4
C64.002,29.79,62.217,27.997,60.006,27.997z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#231F20" d="M51.798,17.859l2.828-2.829c1.574-1.566,1.562-4.094,0-5.657
c-1.559-1.567-4.09-1.567-5.652-0.004l-2.829,2.836c-1.562,1.555-1.562,4.086,0,5.649C47.699,19.426,50.239,19.418,51.798,17.859z"
/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#231F20" d="M32.003,11.995c2.207,0.016,4-1.789,4-3.992v-4
c0-2.219-1.789-4-4-4c-2.211-0.008-4,1.781-4,3.993l0.008,4.008C28.003,10.206,29.792,11.995,32.003,11.995z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#231F20" d="M12.212,17.855c1.555,1.562,4.079,1.562,5.646-0.004
c1.574-1.551,1.566-4.09,0.008-5.649l-2.829-2.828c-1.57-1.571-4.094-1.559-5.657,0c-1.575,1.559-1.575,4.09-0.012,5.653
L12.212,17.855z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

src/components/SettingsModal/SettingsModal.jsx
+70
View File
@@ -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
+23
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+23 -15
View File
@@ -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
+5 -2
View File
@@ -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
+18 -5
View File
@@ -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
+12
View File
@@ -0,0 +1,12 @@
.themeBtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 5px;
}
.themeIcon {
height: 20px;
width: 20px;
}
src/contexts/auth/authProvider.jsx
+6 -1
View File
@@ -30,8 +30,13 @@ export function AuthProvider({ children }) {
setUser(null);
};
const update = async () => {
const u = await getUser();
setUser(u);
}
return (
<AuthContext.Provider value={{ user, loading, login, logout }}>
<AuthContext.Provider value={{ user, loading, login, logout, update }}>
{children}
</AuthContext.Provider>
);
src/index.css
+13
View File
@@ -65,6 +65,19 @@ body {
overflow: hidden;
}
.glassBorder{
border-radius: 20px;
padding: 15px;
margin-top: 16px;
border: none;
background: rgb(255, 255, 255, 0.25);
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 3.2em;
line-height: 1.1;
src/pages/Events/EventsPage.jsx
-1
View File
@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
import Event from "../../components/Event/Event.jsx";
import styles from "./EventsPage.module.css";
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
import filter from "../../utils/filter.js";
import getAllEvents from "../../utils/event/getAllEvents.js";
src/pages/Home/HomePage.jsx
+173 -3
View File
@@ -1,11 +1,181 @@
import { useState } from "react";
import { useMemo } from "react";
import styles from "./HomePage.module.css";
function HomePage() {
const events = {
"2025-11-07": ["Réunion de projet", "Anniversaire de Marie"],
"2025-11-10": ["Cours de React", "Rendez-vous médecin"],
"2025-11-14": ["Sortie cinéma"],
};
function HomePage(){
const monthNames = [
"Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
];
const today = new Date();
const [currentMonth, setCurrentMonth] = useState(today.getMonth());
const [currentYear, setCurrentYear] = useState(today.getFullYear());
const [selectedDay, setSelectedDay] = useState(() => {
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, "0");
const day = String(today.getDate()).padStart(2, "0");
const key = `${year}-${month}-${day}`;
return { date: key, events: events[key] || [] };
});
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
const startDay = (firstDay + 6) % 7;
const days = [];
for (let i = 0; i < startDay; i++) days.push(null);
for (let i = 1; i <= daysInMonth; i++) days.push(i);
const handlePrevMonth = () => {
let newMonth = currentMonth - 1;
let newYear = currentYear;
if (newMonth < 0) {
newMonth = 11;
newYear--;
}
setCurrentMonth(newMonth);
setCurrentYear(newYear);
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
setSelectedDay({ date: key, events: events[key] || [] });
};
const handleNextMonth = () => {
let newMonth = currentMonth + 1;
let newYear = currentYear;
if (newMonth > 11) {
newMonth = 0;
newYear++;
}
setCurrentMonth(newMonth);
setCurrentYear(newYear);
const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`;
setSelectedDay({ date: key, events: events[key] || [] });
};
const handleDayClick = (day) => {
if (!day) return;
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
setSelectedDay({ date: key, events: events[key] || [] });
};
const sortedEvents = useMemo(() => {
return Object.entries(events)
.map(([dateKey, eventList]) => ({ date: dateKey, events: eventList }))
.sort((a, b) => new Date(a.date) - new Date(b.date));
}, [events]);
const formatDate = (dateString) => {
const [year, month, day] = dateString.split('-');
return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
};
return (
<div>
<div className={styles.allContent}>
<div className={styles.glassCard}>
<div className={styles.calendarContainer}>
<div className={styles.calendarHeader}>
<button onClick={handlePrevMonth}>◀</button>
<p>{monthNames[currentMonth]} {currentYear}</p>
<button onClick={handleNextMonth}>▶</button>
</div>
<table className={styles.calendar}>
<thead>
<tr>
<th>Lun</th>
<th>Mar</th>
<th>Mer</th>
<th>Jeu</th>
<th>Ven</th>
<th>Sam</th>
<th>Dim</th>
</tr>
</thead>
<tbody>
{Array.from({ length: Math.ceil(days.length / 7) }).map((_, weekIndex) => (
<tr key={weekIndex}>
{days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
const hasEvent = events[key];
return (
<td
key={index}
className={[
day === today.getDate() &&
currentMonth === today.getMonth() &&
currentYear === today.getFullYear()
? styles.today : "",
hasEvent ? styles.hasEvent : "",
selectedDay?.date === key ? styles.selected : ""
].join(" ")}
onClick={() => handleDayClick(day)}
>
{day || ""}
</td>
);
})}
</tr>
))}
</tbody>
</table>
{selectedDay && (
<div className={styles.eventBox}>
<h3>Événements du {formatDate(selectedDay.date)}</h3>
{selectedDay.events.length > 0 ? (
<ul>
{selectedDay.events.map((ev, i) => (
<li key={i}>{ev}</li>
))}
</ul>
) : (
<p>Aucun événement ce jour-là.</p>
)}
</div>
)}
</div>
</div>
<div className={styles.glassCard}>
<div className={styles.eventListContainer}>
<h2>Liste des Événements à Venir</h2>
{sortedEvents.length > 0 ? (
<ul className={styles.eventList}>
{sortedEvents.map((eventGroup) => (
<li key={eventGroup.date} className={styles.eventGroup}>
<div className={styles.eventDate}>
<strong>{formatDate(eventGroup.date)}</strong>
</div>
<ul className={styles.eventDetails}>
{eventGroup.events.map((event, i) => (
<li key={i}>- {event}</li>
))}
</ul>
</li>
))}
</ul>
) : (
<p>Aucun événement planifié pour l'instant.</p>
)}
</div>
</div>
</div>
)
);
}
export default HomePage;
src/pages/Home/HomePage.module.css
+172 -2
View File
@@ -1,3 +1,173 @@
.title {
color: red;
.calendarContainer {
padding: 20px;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
.calendarHeader {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.calendarHeader p {
width: auto;
text-align: center;
font-weight: bold;
font-size: 40px;
}
.calendarHeader button {
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: transparent;
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
font-size: 15px;
color: #019AFF;
cursor: pointer;
}
.calendar {
border-collapse: collapse;
width: 80%;
max-width: 500px;
}
.calendar th, .calendar td {
border: none;
padding: 10px;
width: 14.2%;
line-height: 130%;
text-align: center;
cursor: pointer;
}
.today {
color: #007bff;
}
.hasEvent {
position: relative;
}
.hasEvent::before {
content: "";
position: absolute;
left: 50%;
bottom: 10px;
width: 20px;
height: 2px;
background-color: #007bff;
transform: translateX(-50%);
border-radius: 10px;
}
.hasEvent.selected::before {
width: 25px;
height: 2px;
bottom: 10px;
}
.selected {
position: relative;
font-size: 18px;
font-weight: 600;
}
.selected::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
transform: translate(-50%, -50%);
border-radius: 38%;
pointer-events: none;
background: transparent;
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
}
.eventBox {
border-radius: 20px;
padding: 15px;
margin-top: 16px;
border: none;
background: rgb(255, 255, 255, 0.25);
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
}
.eventBox ul {
list-style-type: disc;
}
.eventGroup{
border-radius: 20px;
padding: 15px;
margin-top: 16px;
border: none;
background: rgb(255, 255, 255, 0.25);
box-shadow:
inset 1.25px 1.25px 1px rgba(255, 255, 255, 1),
inset -1.25px -1.25px 1px rgba(255, 255, 255, 1),
inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2),
inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2);
}
.glassCard {
width: 45%;
margin: 16px;
padding: 10px 20px 10px 20px;
height: fit-content;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
overflow: hidden;
}
.allContent{
display: flex;
flex-direction: row;
}
@media (max-width: 768px) {
.glassCard {
width: 100%;
margin: 0px;
margin-top: 16px;
margin-bottom: 16px;
display: flex;
}
.allContent{
display: flex;
flex-direction: column;
}
}
src/pages/Login/LoginPage.jsx
+13
View File
@@ -1,8 +1,21 @@
import styles from "./LoginPage.module.css";
import LoginForm from "../../components/loginform/loginForm.jsx";
import Background from "../../components/background/background.jsx";
import { useEffect, useContext } from "react";
import { AuthContext } from "../../contexts/auth/AuthContext.js";
import { useNavigate } from "react-router";
function LoginPage() {
const { user, loading } = useContext(AuthContext)
const navigate = useNavigate();
useEffect(() => {
if (!loading && user) {
navigate("/");
}
}, [loading, user]);
return (
<Background>
<div className={styles.container}>
src/pages/Profile/ProfilePage.jsx
+3 -16
View File
@@ -3,18 +3,11 @@ 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 Button from "../../components/ui/button/button.jsx";
import { useNavigate } from "react-router";
import ThemeSwitcher from "../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
import SettingsModal from "../../components/SettingsModal/SettingsModal.jsx";
function ProfilePage() {
const { user, logout } = useContext(AuthContext);
const navigate = useNavigate();
const handleLogout = () => {
logout();
}
const { user } = useContext(AuthContext);
return (
<div className={styles.container}>
@@ -30,10 +23,6 @@ function ProfilePage() {
<div className={styles.description}>
<div className={styles.headerProfile}>
<h2> {user.name} {user.lastname} </h2>
<div className={styles.settingsBtns}>
<ThemeSwitcher />
<Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
</div>
</div>
<div className={styles.topDescription}>
<div className={styles.infoBlock}>
@@ -44,9 +33,7 @@ function ProfilePage() {
<p><strong>Mail :</strong> {user.email} </p>
<p><strong>Téléphone :</strong> {user.phone}</p>
</div>
<Button variant={"transparent"} onClick={() => navigate("/profile/update")}>
<img src={"/icons/pen.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
</Button>
<SettingsModal />
</div>
<h2>Vos Événements :</h2>
src/pages/Profile/ProfilePage.module.css
+5 -9
View File
@@ -38,10 +38,11 @@
}
.topDescription {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.infoBlock {
@@ -122,11 +123,6 @@
}
.modifyIcon {
height:50px;
width:50px;
}
.headerProfile {
display: flex;
flex-direction: row;
src/pages/Register/RegisterPage.jsx
+60 -6
View File
@@ -2,9 +2,11 @@ import styles from "./RegisterPage.module.css";
import Background from "../../components/background/background.jsx";
import Input from "../../components/ui/input/input.jsx";
import Button from "../../components/ui/button/button.jsx";
import { useState } from "react";
import {useContext, useEffect, useState} from "react";
import register from "../../utils/register.js";
import { useNavigate } from "react-router";
import { AuthContext } from "../../contexts/auth/AuthContext.js";
import Modal from "../../components/ui/modal/modal.jsx";
function RegisterPage() {
@@ -12,20 +14,54 @@ function RegisterPage() {
const navigate = useNavigate();
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [name, setName] = useState("");
const [lastName, setLastName] = useState("");
const [open, setOpen] = useState(false);
const [title, setTitle] = useState("");
const [message, setMessage] = useState("");
const [showPassword, setShowPassword] = useState(false);
const { user, loading } = useContext(AuthContext)
useEffect(() => {
if (!loading && user) {
navigate("/");
}
}, [loading, user]);
const handleModal = (t, m) => {
setTitle(t)
setMessage(m)
setOpen(true);
}
async function handleSubmit(e) {
e.preventDefault();
const res = await register(email, password, name, lastName);
if (!res || res.status !== 200) throw new Error("Register error");
navigate("/login");
if(!(password === confirmPassword)) handleModal("Mot de passe invalide", "Les mots de passes ne conrrespondent pas");
else if(password.length < 8) handleModal("Mot de passe invalide", "Le mot de passe doit faire plus de 8 charactères");
else {
const res = await register(email, password, name, lastName, phone);
if (res.status === 422) {
if (res.errors.email) handleModal("Adresse Email invalide", "Le formet de votre adresse Email n'est pas valide");
if (res.errors.phone) handleModal("Numéro de téléphone invalide", "Le formet de votre numéro de téléphone n'est pas valide");
} else navigate("/login");
}
}
const handlePhone = (e) => {
const value = e.target.value;
if (value === "" || /^[0-9 +]+$/.test(value)) {
setPhone(value);
}
};
return <Background>
<div className={styles.container}>
@@ -61,8 +97,22 @@ function RegisterPage() {
style={{ width: '100%' }}
/>
</div>
<div className={styles.formGroup}>
<Input password={true} onChange={e => setPassword(e.target.value)} value={password} />
<Input
value={phone}
placeholder="Numéro de téléphone"
onChange={handlePhone}
style={{ width: '100%' }}
/>
</div>
<div className={styles.formGroup}>
<Input password={true} onChange={e => setPassword(e.target.value)} value={password} placeholder={"Mot de passe"}/>
</div>
<div className={styles.formGroup}>
<Input password={true} onChange={e => setConfirmPassword(e.target.value)} value={confirmPassword} placeholder={"Confirmer le mot de passe"} />
</div>
<div className={styles.logButton}>
@@ -72,6 +122,10 @@ function RegisterPage() {
</div>
</div>
<Modal open={open} onClose={() => setOpen(false)} title={title}>
<p>{message}</p>
</Modal>
</Background>
}
src/pages/Volunteers/VolunteerCard.jsx
+2 -2
View File
@@ -58,8 +58,8 @@ export default function VolunteerCard({ user }) {
{isExpanded && (
<div className={styles.bottomBar}>
<Button
onClick={() => navigate(`/profile/${user.id}`)}
variant="transparent"
onClick={() => navigate(`/profile/${id}`)}
variant="primary"
>
Voir plus
</Button>
src/router.js
+1 -1
View File
@@ -26,7 +26,7 @@ const router = createBrowserRouter([
Component: HomePage,
},
{
path: "/stat",
path: "/admin",
Component:StatPage,
},
{
src/utils/register.js
+15 -9
View File
@@ -1,6 +1,6 @@
import getXSRFToken from "./getXSRF.js";
export default async function register(email, password, name, lastname) {
export default async function register(email, password, name, lastname, phone) {
const csrfToken = await getXSRFToken();
try {
@@ -12,19 +12,25 @@ export default async function register(email, password, name, lastname) {
'X-XSRF-TOKEN': csrfToken,
'Accept': 'application/json'
},
body: JSON.stringify({ email, password, name, lastname }),
body: JSON.stringify({ email, password, name, lastname, phone }),
});
console.log('Code HTTP :', response.status);
if (!response.ok) {
throw new Error(`Erreur HTTP ${response.status}`);
}
const data = await response.json();
if (!response.ok) {
if (response.status === 422) {
return {
status: 422,
errors: data.errors
};
}
throw new Error(`Erreur HTTP ${response.status}`);
}
return { status: response.status, data };
} catch (error) {
return error;
return { status: "error", error };
}
}
src/utils/searchEvents.js
+1 -1
View File
@@ -2,7 +2,7 @@ export default async function searchEvents(query) {
try {
const encodedQuery = encodeURIComponent(query);
const response = await fetch(
`http://localhost:80/api/events/search?query=${encodedQuery}`,
`http://${import.meta.env.VITE_API_URL}/api/events/search?query=${encodedQuery}`,
{
method: 'GET',
credentials: 'include',
src/utils/users/updateUser.js
+32
View File
@@ -0,0 +1,32 @@
import getXSRFToken from "../getXSRF.js";
export default async function updateUser(name, lastname, phone) {
const csrfToken = await getXSRFToken();
try {
const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/update`, {
method: 'POST',
credentials: 'include',
headers: {
'Accept': 'application/json',
'X-XSRF-TOKEN': csrfToken,
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: name,
phone: phone,
lastname: lastname,
})
});
if (!res.ok) {
throw new Error(`Erreur serveur : ${res.status}`);
}
return await res.json();
} catch (err) {
console.error('Erreur :', err);
return null;
}
}