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

Merge branch 'dev' into fixcss/VolunteersPage

Browse Source
This commit is contained in:
ORDONNEAU Antoine
2026-04-01 18:20:25 +02:00
parent 483e281acd 57d68b43de
commit 476f4390fe
21 changed files with 478 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ConfirmEmailChange/ConfirmEmailChangePage.module.css
+26
View File
@@ -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;
}
}
src/pages/ConfirmEmailChange/ConfirmEmailChangePage.tsx
+41
View File
@@ -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>
}
src/pages/EventDetail/EventDetailPage.tsx
+2
View File
@@ -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>
src/pages/EventDetail/components/AssignUserBtn/AssignUserBtn.tsx
+17 -15
View File
@@ -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>
)}
src/pages/EventDetail/components/EditEventBtn/EditEventBtn.tsx
+92
View File
@@ -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>
</>
);
}
src/pages/EventDetail/components/EditTaskBtn/EditTaskBtn.tsx
+124
View File
@@ -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>
</>
);
}
src/pages/EventDetail/components/EventTask/EventTask.tsx
+3
View File
@@ -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}
src/pages/Profile/components/SettingsModal/SettingsModal.tsx
+64 -5
View File
@@ -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"