Merge branch 'dev' into fixcss/VolunteersPage

This commit is contained in:
ORDONNEAU Antoine
2026-04-01 18:20:25 +02:00
21 changed files with 478 additions and 90 deletions
+3 -5
View File
@@ -5,7 +5,6 @@ import getUserNotifications from "../../utils/notifications/getUserNotifications
import deleteNotificationUser from "../../utils/notifications/deleteNotificationUser.js";
import initEcho from "../../utils/echo/initEcho.js"
import readNotifications from "../../utils/notifications/readNotifications.js";
import { adminNotificationsListener } from "../../utils/echo/listeners/adminNotificationsListener";
import { userNotificationsListener } from "../../utils/echo/listeners/userNotificationsListener.js";
import NotificationCard from "../NotificationCard/NotificationCard";
import { EventContext } from "../../contexts/Events/EventContext.js";
@@ -35,14 +34,13 @@ function Header() {
try {
const echo = initEcho();
echoInstance = echo;
adminNotificationsListener(echo, user, setNotifications, setunreadNotification, updatePendingMembers);
userNotificationsListener(echo, user, setNotifications, setunreadNotification);
userNotificationsListener(echo, user, setNotifications, setunreadNotification, updatePendingMembers);
const notifData = await getUserNotifications();
const data: Notification[] = notifData || [];
setNotifications(data);
const hasUnread = data.some(n => n.pivot && n.pivot.unread === 1);
const hasUnread = data.some(n => n.read_at === null);
setunreadNotification(hasUnread);
} catch (err) {
console.error("Erreur initialisation Header:", err);
@@ -88,7 +86,7 @@ function Header() {
}
async function deleteNotification(notificationId: number) {
async function deleteNotification(notificationId: string) {
try {
const result = await deleteNotificationUser(notificationId);
if (result) {
@@ -5,6 +5,7 @@
gap: 0.75rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
transition: background 0.2s ease;
margin: 0.5rem 0;
}
.cardHeader {
@@ -5,13 +5,13 @@ import Notification from "../../interfaces/notification.interface";
interface NotificationCardProps {
notifications: Notification[];
deleteNotification: (id: number) => void;
deleteNotification: (id: string) => void;
}
function NotificationCard({ notifications, deleteNotification }: NotificationCardProps) {
return (
notifications.map((notification, index) => (
<div className={`${styles.notificationCard} glassBorder`}key={index}>
<div className={`${styles.notificationCard} glassBorder`} key={index}>
<div className={styles.cardHeader}>
<span className={styles.timeTag}>
Le {formatDate(notification.created_at)} à {formatTime(notification.created_at)}
@@ -25,9 +25,9 @@ function NotificationCard({ notifications, deleteNotification }: NotificationCar
</button>
</div>
<div className={styles.cardContent}>
<div>
<p className={styles.message}>
{notification.content}
{notification.data.message}
</p>
</div>
</div>
+7 -5
View File
@@ -1,6 +1,8 @@
export default interface Notification {
id: number;
content: string;
created_at: string | number;
pivot: { unread: number };
}
id: string;
data: {
message: string;
};
read_at: string | null;
created_at: string;
}
@@ -0,0 +1,26 @@
.title {
color: white;
font-size: xx-large;
margin-bottom: 20px;
}
.content {
display: flex;
flex-direction: column;
z-index: 2;
padding: 10px;
}
.container {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
p {
font-size: large;
white-space: pre-line;
}
}
@@ -0,0 +1,41 @@
import { useEffect, useState } from "react";
import { useSearchParams, useNavigate } from "react-router";
import confirmEmailChange from "../../utils/users/confirmEmailChange";
import styles from "./ConfirmEmailChangePage.module.css";
import Background from "../../components/Background/Background";
export default function ConfirmEmailChange() {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const [message, setMessage] = useState<string>('Validation en cours...');
const [success, setSuccess] = useState<boolean | null>(null);
useEffect(() => {
const token = searchParams.get('token');
if (!token) {
setMessage('Token manquant.');
setSuccess(false);
return;
}
confirmEmailChange(token)
.then(() => {
setMessage('Votre adresse email a bien été mise à jour.\nVous allez être redirigé vers la page de connexion...');
setSuccess(true);
setTimeout(() => navigate('/login'), 3000);
})
.catch(() => {
setMessage('Token invalide ou expiré.');
setSuccess(false);
});
}, []);
return <Background>
<div className={styles.content}>
<h1 className={styles.title}> Validation de votre adresse email </h1>
<div className={`${styles.container} glassCard`}>
<p>{message}</p>
</div>
</div>
</Background>
}
@@ -7,6 +7,7 @@ import { AuthContext } from "../../contexts/Auth/AuthContext";
import { EventDetailContext } from "../../contexts/EventDetail/EventDetailContext";
import CreateTaskBtn from "./components/CreateTaskBtn/CreateTaskBtn";
import DeleteEventBtn from "./components/DeleteEventBtn/DeleteEventBtn";
import EditEventBtn from "./components/EditEventBtn/EditEventBtn";
function EventDetailPage() {
const params = useParams();
@@ -42,6 +43,7 @@ function EventDetailPage() {
{user?.isAdmin && (
<div className={styles.manageEvent}>
<EditEventBtn id={id} />
<DeleteEventBtn id={id} />
<CreateTaskBtn id={id} />
</div>
@@ -55,19 +55,24 @@ export default function AssignUserBtn({ taskId, eventId }: AssignUserBtnProps):
})();
}, []);
const isUserAssigned = (u: User): boolean =>
u.tasks.some(t => t.id === taskId);
const [assignedIds, setAssignedIds] = useState<Set<number>>(new Set());
useEffect(() => {
setAssignedIds(new Set(
users.filter(u => u.tasks.some(t => t.id === taskId)).map(u => u.id)
));
}, [users, taskId]);
const handleAssign = async (selectedUser: User) => {
setAssignedIds(prev => new Set(prev).add(selectedUser.id));
await assignOtherUser(taskId as number, selectedUser.id);
updateEventInfo(eventId)
setOpen(false);
updateEventInfo(eventId);
};
const handleUnassign = async (selectedUser: User) => {
setAssignedIds(prev => { const next = new Set(prev); next.delete(selectedUser.id); return next; });
await unAssignOtherUser(taskId as number, selectedUser.id);
updateEventInfo(eventId)
setOpen(false);
updateEventInfo(eventId);
};
return <>
@@ -75,18 +80,15 @@ export default function AssignUserBtn({ taskId, eventId }: AssignUserBtnProps):
<Modal open={open} onClose={() => setOpen(false)} title={"Assigner un utilisateur à cette tâche"}>
<div className={styles.usersList}>
{loading ? <Loading /> : users.map((user: User, index) => (
<div key={index} className={`${styles.userCard} glassBorder`}>
<p className={styles.userName}>
{user.name} {user.lastname}
</p>
{isUserAssigned(user) ? (
<Button variant={"danger"} onClick={() => handleUnassign(user)}>
{loading ? <Loading /> : users.map((u: User) => (
<div key={u.id} className={`${styles.userCard} glassBorder`}>
<p className={styles.userName}>{u.name} {u.lastname}</p>
{assignedIds.has(u.id) ? (
<Button variant={"danger"} onClick={() => handleUnassign(u)}>
Désassigner
</Button>
) : (
<Button onClick={() => handleAssign(user)}>
<Button onClick={() => handleAssign(u)}>
Assigner
</Button>
)}
@@ -0,0 +1,92 @@
import styles from "../../EventDetailPage.module.css";
import Button from "../../../../components/ui/Button/Button";
import Modal from "../../../../components/ui/Modal/Modal";
import TextInput from "../../../../components/ui/Input/Input";
import { useContext, useState, useEffect } from "react";
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
import updateEvent from "../../../../utils/events/updateEvent";
type EditEventBtnProps = {
id: string | number;
};
export default function EditEventBtn({ id }: EditEventBtnProps) {
const { eventInfo, updateEventInfo } = useContext(EventDetailContext) as any;
const [open, setOpen] = useState(false);
const [name, setName] = useState<string>("");
const [description, setDescription] = useState<string>("");
const [start, setStart] = useState<string>("");
const [end, setEnd] = useState<string>("");
useEffect(() => {
if (open && eventInfo) {
setName(eventInfo.name ?? "");
setDescription(eventInfo.description ?? "");
setStart(eventInfo.start ? eventInfo.start.slice(0, 16) : "");
setEnd(eventInfo.end ? eventInfo.end.slice(0, 16) : "");
}
}, [open, eventInfo]);
const handleSubmit = async () => {
const res = await updateEvent(Number(id), name, description, start, end);
await updateEventInfo(id);
setOpen(false);
};
return (
<>
<Button
variant={"default"}
className={styles.manageBtn}
onClick={() => setOpen(true)}
>
Modifier
</Button>
<Modal open={open} onClose={() => setOpen(false)} title={"Modifier l'événement"}>
<div className={styles.modalContent}>
<div>
<p>Nom</p>
<TextInput
value={name}
onChange={(e: any) => setName(e.target.value)}
placeholder="Nom de l'événement"
/>
</div>
<div>
<p>Description</p>
<TextInput
value={description}
onChange={(e: any) => setDescription(e.target.value)}
placeholder="Description"
/>
</div>
<div>
<p>Début</p>
<TextInput
type="datetime-local"
value={start}
onChange={(e: any) => setStart(e.target.value)}
/>
</div>
<div>
<p>Fin</p>
<TextInput
type="datetime-local"
value={end}
onChange={(e: any) => setEnd(e.target.value)}
/>
</div>
<Button variant="default" onClick={handleSubmit}>
Confirmer
</Button>
</div>
</Modal>
</>
);
}
@@ -0,0 +1,124 @@
import { useContext, useEffect, useState } from "react";
import { AuthContext } from "../../../../contexts/Auth/AuthContext";
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
import Button from "../../../../components/ui/Button/Button";
import Modal from "../../../../components/ui/Modal/Modal";
import TextInput from "../../../../components/ui/Input/Input";
import styles from "../../EventDetailPage.module.css";
import updateTask from "../../../../utils/tasks/updateTask";
type EditTaskBtnProps = {
taskId: number;
eventId: number | string;
};
export default function EditTaskBtn({ taskId, eventId }: EditTaskBtnProps) {
const { user } = useContext(AuthContext) as any;
const { tasks, updateEventInfo } = useContext(EventDetailContext) as any;
const task = tasks?.find((t: any) => t.id === taskId);
const [open, setOpen] = useState(false);
const [name, setName] = useState<string>("");
const [description, setDescription] = useState<string>("");
const [start, setStart] = useState<string>("");
const [end, setEnd] = useState<string>("");
const [location, setLocation] = useState<string>("");
const [maxParticipants, setMaxParticipants] = useState<string>("");
useEffect(() => {
if (open && task) {
setName(task.name ?? "");
setDescription(task.description ?? "");
setStart(task.start ? task.start.slice(0, 16) : "");
setEnd(task.end ? task.end.slice(0, 16) : "");
setLocation(task.location ?? "");
setMaxParticipants(task.max_participants?.toString() ?? "");
}
}, [open, task]);
if (!user?.isAdmin) return null;
const handleSubmit = async () => {
await updateTask(taskId, {
name,
description,
start,
end,
location,
max_participants: Number(maxParticipants),
});
await updateEventInfo(eventId);
setOpen(false);
};
return (
<>
<Button variant={"default"} onClick={() => setOpen(true)}>
Modifier
</Button>
<Modal open={open} onClose={() => setOpen(false)} title={"Modifier la tâche"}>
<div className={styles.modalContent}>
<div>
<p>Nom</p>
<TextInput
value={name}
onChange={(e: any) => setName(e.target.value)}
placeholder="Nom de la tâche"
/>
</div>
<div>
<p>Description</p>
<TextInput
value={description}
onChange={(e: any) => setDescription(e.target.value)}
placeholder="Description"
/>
</div>
<div>
<p>Lieu</p>
<TextInput
value={location}
onChange={(e: any) => setLocation(e.target.value)}
placeholder="Lieu"
/>
</div>
<div>
<p>Participants max</p>
<TextInput
type="number"
value={maxParticipants}
onChange={(e: any) => setMaxParticipants(e.target.value)}
placeholder="Participants max"
/>
</div>
<div>
<p>Début</p>
<TextInput
type="datetime-local"
value={start}
onChange={(e: any) => setStart(e.target.value)}
/>
</div>
<div>
<p>Fin</p>
<TextInput
type="datetime-local"
value={end}
onChange={(e: any) => setEnd(e.target.value)}
/>
</div>
<Button variant="default" onClick={handleSubmit}>
Confirmer
</Button>
</div>
</Modal>
</>
);
}
@@ -10,6 +10,7 @@ import { AuthContext } from "../../../../contexts/Auth/AuthContext";
import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
import DeleteTaskBtn from "../DeleteTaskBtn/DeleteTaskBtn";
import AssignUserBtn from "../AssignUserBtn/AssignUserBtn";
import EditTaskBtn from "../EditTaskBtn/EditTaskBtn";
type EventTaskProps = {
taskId: number;
@@ -135,6 +136,8 @@ export default function EventTask({ taskId, index }: EventTaskProps) {
</Button>
)}
<EditTaskBtn taskId={task.id} eventId={eventId} />
<DeleteTaskBtn
eventId={eventId}
taskId={task.id}
@@ -11,6 +11,8 @@ import ExportCalendarBtn from "../../../../components/ExportCalendarBtn/ExportBt
import { useNavigate } from "react-router";
import toggleEmailNotifications from "../../../../utils/users/toggleEmailNotifications";
import toggleWebNotifications from "../../../../utils/users/toggleWebNotifications";
import updateUserPassword from "../../../../utils/users/updateUserPassword";
import updateUserEmail from "../../../../utils/users/updateUserEmail";
interface TaskType {
@@ -55,6 +57,11 @@ export default function SettingsModal() {
const [emailNotifications, setEmailNotifications] = useState<number>(user?.email_notifications ?? 0);
const [webNotifications, setWebNotifications] = useState<number>(user?.web_notifications ?? 0);
const [currentPassword, setCurrentPassword] = useState<string>('');
const [newPassword, setNewPassword] = useState<string>('');
const [newPasswordConfirm, setNewPasswordConfirm] = useState<string>('');
const [email, setEmail] = useState<string>('');
const handleLogout = (): void => {
logout();
};
@@ -104,6 +111,27 @@ export default function SettingsModal() {
}
};
const handlePasswordUpdate = async () => {
try {
await updateUserPassword(currentPassword, newPassword, newPasswordConfirm);
setCurrentPassword('');
setNewPassword('');
setNewPasswordConfirm('');
} catch (err) {
console.error(err);
}
};
const handleEmailUpdate = async () => {
try {
await updateUserEmail(email);
setEmail('');
update();
} catch (err) {
console.error(err);
}
};
return (
<>
@@ -123,7 +151,7 @@ export default function SettingsModal() {
<div className={styles.content}>
<div className={`glassBorder ${styles.section}`}>
<h3>Modifier les informations du compte</h3>
<div className={styles.test}>
<div>
<h4>Changer de Prénom</h4>
<TextInput
value={name}
@@ -132,7 +160,7 @@ export default function SettingsModal() {
/>
</div>
<div className={styles.test}>
<div>
<h4>Changer de nom</h4>
<TextInput
value={lastname}
@@ -141,7 +169,7 @@ export default function SettingsModal() {
/>
</div>
<div className={styles.test}>
<div>
<h4>Changer de numéro de téléphone</h4>
<TextInput
value={phone}
@@ -158,6 +186,37 @@ export default function SettingsModal() {
</Button>
</div>
<div className={`glassBorder ${styles.section}`}>
<h3>Changer l'adresse email</h3>
<div>
<h4>Nouvelle adresse email</h4>
<TextInput value={email} onChange={e => setEmail(e.target.value)} type="email" />
</div>
<Button className={styles.submitBtn} onClick={handleEmailUpdate}>
Confirmer
</Button>
</div>
<div className={`glassBorder ${styles.section}`}>
<h3>Changer le mot de passe</h3>
<div>
<h4>Mot de passe actuel</h4>
<TextInput value={currentPassword} onChange={e => setCurrentPassword(e.target.value)} type="password" />
</div>
<div>
<h4>Nouveau mot de passe</h4>
<TextInput value={newPassword} onChange={e => setNewPassword(e.target.value)} type="password" />
</div>
<div>
<h4>Confirmer le nouveau mot de passe</h4>
<TextInput value={newPasswordConfirm} onChange={e => setNewPasswordConfirm(e.target.value)} type="password" />
</div>
<Button className={styles.submitBtn} onClick={handlePasswordUpdate}>
Confirmer
</Button>
</div>
<div className={`glassBorder ${styles.section}`}>
<h3>Apparence</h3>
<ThemeSwitcher/>
@@ -166,7 +225,7 @@ export default function SettingsModal() {
<div className={`glassBorder ${styles.section}`}>
<h3>Notifications</h3>
<div className={styles.test}>
<div>
<h4>Notifications par email</h4>
<input
type="checkbox"
@@ -175,7 +234,7 @@ export default function SettingsModal() {
/>
</div>
<div className={styles.test}>
<div>
<h4>Notifications sur le site</h4>
<input
type="checkbox"
+5
View File
@@ -12,6 +12,7 @@ import PageNotFoundPage from "./pages/PageNotFound/PageNotFoundPage.jsx";
import eventDetail from "./pages/EventDetail/EventDetailPage.tsx";
import legalNotices from "./pages/LegalNotices/LegalNoticesPage.tsx";
import RGPDPage from "./pages/RGPD/RGPDPage.jsx";
import ConfirmEmailChangePage from "./pages/ConfirmEmailChange/ConfirmEmailChangePage.tsx";
const router = createBrowserRouter([
{
@@ -34,6 +35,10 @@ const router = createBrowserRouter([
path: "/404",
Component: PageNotFoundPage,
},
{
path: "/confirm/email/change",
Component: ConfirmEmailChangePage,
},
{
path: "/",
Component: Layout,
@@ -1,24 +0,0 @@
export const adminNotificationsListener = (echo, userData, setNotifications, setUnreadNotification, updatePendingMembers) => {
if (userData.isAdmin) {
const channelName = "users.admin";
const handleNotification = (id, content) => {
const newNotification = {
id,
content,
created_at: new Date().toISOString(),
pivot: { unread: 1 }
};
setNotifications(prev => [newNotification, ...prev]);
setUnreadNotification(true);
};
echo.private(channelName)
.listen(".users.registration", (event) => {
handleNotification(event.notificationId, `Nouvelle demande d'inscription : ${event.user.name} ${event.user.lastname}`);
updatePendingMembers();
});
return channelName;
}
return null;
};
@@ -1,37 +1,23 @@
export const userNotificationsListener = (echo, userData, setNotifications, setUnreadNotification) => {
export const userNotificationsListener = (echo, userData, setNotifications, setUnreadNotification, updatePendingMembers) => {
const channelName = `user.${userData.id}`;
const channelName = `App.Models.User.${userData.id}`;
const handleNotification = (id, content) => {
echo.private(channelName)
.notification((notification) => {
const newNotification = {
id: notification.id,
data: { message: notification.message },
read_at: null,
created_at: new Date().toISOString(),
};
const newNotification = {
id,
content,
created_at: new Date().toISOString(),
pivot: { unread: 1 }
};
setNotifications(prev => [newNotification, ...prev]);
setUnreadNotification(true);
setNotifications(prev => [newNotification, ...prev]);
setUnreadNotification(true);
};
return echo.private(channelName)
.listen('.event.participation.cancelled', (event) => {
handleNotification(event.notificationId,`L'événement ${event.event.name} a été supprimé. Vous n'y participez donc plus.`);
})
.listen(`.task.participation.cancelled`, (event) => {
handleNotification(event.notificationId,`La tâche ${event.task.name} de l'événement ${event.event.name} a été supprimée. Vous n'y participez donc plus.`);
})
.listen('.volunteer.assigned.to.task', (event) => {
handleNotification(event.notificationId,`Vous avez été assigné à la tâche ${event.task.name} de l'événement ${event.event.name}.`);
})
.listen('.volunteer.unassigned.to.task', (event) => {
handleNotification(event.notificationId,`Vous avez été désassigné de la tâche ${event.task.name} de l'événement ${event.event.name}.`);
})
.listen('.volunteer.role.updated', (event) => {
handleNotification(event.notificationId, `Votre rôle a changé pour : ${event.role} `);
})
.listen('.task.date.updated', (event) => {
handleNotification(event.notificationId,`La date de la tâche ${event.task.name} de l'événement ${event.event.name} à été mis à jour. Cette tâche aura maintenant lieu du ${event.start} au ${event.end}.`);
if (notification.type === 'App\\Notifications\\UserRegistered' && updatePendingMembers) {
updatePendingMembers();
}
});
return channelName;
};
+13
View File
@@ -0,0 +1,13 @@
import fetchWrapper from "../fetchWrapper";
import getXSRFToken from "../getXSRF";
export default async function updateEvent(id: number, name: string, description: string, start: string, end: string) {
const csrfToken = await getXSRFToken();
return fetchWrapper(
`/api/events/${id}/update`,
{ name, description, start, end },
"POST",
{ "X-XSRF-TOKEN": csrfToken }
);
}
@@ -1,6 +1,6 @@
import getXSRFToken from "../getXSRF";
export default async function deleteNotificationUser(notificationId:number) {
export default async function deleteNotificationUser(notificationId:string) {
const csrfToken = await getXSRFToken();
try {
+22
View File
@@ -0,0 +1,22 @@
import fetchWrapper from "../fetchWrapper";
import getXSRFToken from "../getXSRF";
interface UpdateTaskParams {
name: string;
description: string;
start: string;
end: string;
location: string;
max_participants: number;
}
export default async function updateTask(id: number, params: UpdateTaskParams): Promise<any> {
const csrfToken = await getXSRFToken();
return fetchWrapper(
`/api/events/tasks/${id}/update`,
params,
"POST",
{ "X-XSRF-TOKEN": csrfToken }
);
}
+12
View File
@@ -0,0 +1,12 @@
import fetchWrapper from "../fetchWrapper";
import getXSRFToken from "../getXSRF";
export default async function confirmEmailChange(token: string) {
const csrfToken = await getXSRFToken();
return fetchWrapper(
"/api/users/update/email/confirm",
{ token },
"POST",
{ "X-XSRF-TOKEN": csrfToken }
);
}
+12
View File
@@ -0,0 +1,12 @@
import fetchWrapper from "../fetchWrapper";
import getXSRFToken from "../getXSRF";
export default async function updateUserEmail(email: string) {
const csrfToken = await getXSRFToken();
return fetchWrapper(
"/api/users/update/email/request",
{ email },
"POST",
{ "X-XSRF-TOKEN": csrfToken }
);
}
+12
View File
@@ -0,0 +1,12 @@
import fetchWrapper from "../fetchWrapper";
import getXSRFToken from "../getXSRF";
export default async function updateUserPassword(current_password: string, new_password: string, new_password_confirmation: string) {
const csrfToken = await getXSRFToken();
return fetchWrapper(
"/api/users/update/password",
{ current_password, new_password, new_password_confirmation },
"POST",
{ "X-XSRF-TOKEN": csrfToken }
);
}