Merge branch 'dev' into 'features/stat'
# Conflicts: # package-lock.json # src/router.js # vite.config.js
This commit is contained in:
T'JAMPENS QUENTIN p2406187
@@ -0,0 +1,251 @@
|
||||
import {useState} from "react";
|
||||
import Event from "../../components/Event/Event.jsx";
|
||||
import {Link} from "react-router";
|
||||
import styles from "./EventsPage.module.css";
|
||||
import Filter from "../../components/Filter/Filter.jsx";
|
||||
|
||||
|
||||
|
||||
function EventsPage(){
|
||||
const [isFilterVisible, setIsFilterVisible] = useState(false);
|
||||
const toggleFilters = () => {
|
||||
setIsFilterVisible(prev => !prev);
|
||||
};
|
||||
|
||||
const [filters, setFilters] = useState({
|
||||
alphabetical: "asc",
|
||||
yearOrder: "asc",
|
||||
});
|
||||
|
||||
const [events] = useState([
|
||||
{
|
||||
id: 1,
|
||||
name: "Marathon de la Ville",
|
||||
description: "Participez au marathon annuel et soutenez les associations locales.",
|
||||
image: null,
|
||||
tasks: [
|
||||
{
|
||||
name: "Inscription des participants",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Centre sportif",
|
||||
description: "Accueillir et enregistrer tous les coureurs.",
|
||||
volunteers_count: 5
|
||||
},
|
||||
{
|
||||
name: "Distribution des dossards",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Salle principale",
|
||||
description: "Remettre les dossards et goodies aux participants.",
|
||||
volunteers_count: 3
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Festival de Musique d’Été",
|
||||
description: "Un week-end de concerts en plein air avec des artistes locaux et internationaux.",
|
||||
image: null,
|
||||
tasks: [
|
||||
{
|
||||
name: "Montage de la scène",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Parc central",
|
||||
description: "Installer la scène, les éclairages et le son.",
|
||||
volunteers_count: 6
|
||||
},
|
||||
{
|
||||
name: "Accueil du public",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Entrée principale",
|
||||
description: "Vérifier les billets et orienter les visiteurs.",
|
||||
volunteers_count: 4
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Conférence Tech Innovante",
|
||||
description: "Journée de conférences et workshops autour des nouvelles technologies.",
|
||||
image: null,
|
||||
tasks: [
|
||||
{
|
||||
name: "Préparation des salles",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Campus Tech",
|
||||
description: "Installer les chaises, projecteurs et matériel pour les conférences.",
|
||||
volunteers_count: 4
|
||||
},
|
||||
{
|
||||
name: "Accueil des intervenants",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Hall principal",
|
||||
description: "Assister les speakers et orienter vers les salles.",
|
||||
volunteers_count: 2
|
||||
},
|
||||
{
|
||||
name: "Gestion du buffet",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Salle de restauration",
|
||||
description: "Distribuer boissons et repas aux participants.",
|
||||
volunteers_count: 3
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Atelier de Jardinage Urbain",
|
||||
description: "Apprenez à cultiver vos plantes en ville et participez à la création de jardins partagés.",
|
||||
image: null,
|
||||
tasks: [
|
||||
{
|
||||
name: "Installation du matériel",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Jardin partagé",
|
||||
description: "Préparer outils et terreaux pour les participants.",
|
||||
volunteers_count: 2
|
||||
},
|
||||
{
|
||||
name: "Encadrement des participants",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Jardin partagé",
|
||||
description: "Aider et conseiller sur la plantation et l’entretien.",
|
||||
volunteers_count: 3
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Collecte de Sang",
|
||||
description: "Aidez à sauver des vies en participant à notre collecte de sang annuelle.",
|
||||
image: null,
|
||||
tasks: [
|
||||
{
|
||||
name: "Accueil et enregistrement",
|
||||
start: "2020-09-24 22:21:20",
|
||||
end: "2020-09-24 22:21:20",
|
||||
place: "Salle municipale",
|
||||
description: "Enregistrer les donneurs et expliquer le processus.",
|
||||
volunteers_count: 4
|
||||
},
|
||||
{
|
||||
name: "Préparation des salles",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Salle municipale",
|
||||
description: "Installer les lits, tables et matériel médical.",
|
||||
volunteers_count: 3
|
||||
},
|
||||
{
|
||||
name: "Assistance post-don",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Salle municipale",
|
||||
description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
|
||||
volunteers_count: 2
|
||||
},
|
||||
{
|
||||
name: "Accueil et enregistrement",
|
||||
start: "2020-09-24 22:21:20",
|
||||
end: "2020-09-24 22:21:20",
|
||||
place: "Salle municipale",
|
||||
description: "Enregistrer les donneurs et expliquer le processus.",
|
||||
volunteers_count: 4
|
||||
},
|
||||
{
|
||||
name: "Préparation des salles",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Salle municipale",
|
||||
description: "Installer les lits, tables et matériel médical.",
|
||||
volunteers_count: 3
|
||||
},
|
||||
{
|
||||
name: "Assistance post-don",
|
||||
start: "2018-09-24 22:21:20",
|
||||
end: "2018-09-24 22:21:20",
|
||||
place: "Salle municipale",
|
||||
description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
|
||||
volunteers_count: 2
|
||||
},
|
||||
]
|
||||
},
|
||||
]);
|
||||
|
||||
const compareDate = (dateA, dateB) => {
|
||||
const dA = new Date(dateA);
|
||||
const dB = new Date(dateB);
|
||||
|
||||
if (filters.yearOrder === "asc") {
|
||||
return dB - dA;
|
||||
} else {
|
||||
return dA - dB;
|
||||
}
|
||||
};
|
||||
|
||||
const sortedEvents = [...events].sort((a, b) => {
|
||||
const sortedATasks = a.tasks.sort((taskA, taskB) =>
|
||||
compareDate(taskA.start, taskB.start)
|
||||
);
|
||||
const sortedBTasks = b.tasks.sort((taskA, taskB) =>
|
||||
compareDate(taskA.start, taskB.start)
|
||||
);
|
||||
|
||||
const timeComparison = compareDate(
|
||||
sortedATasks[0].start,
|
||||
sortedBTasks[0].start
|
||||
);
|
||||
|
||||
if (timeComparison !== 0) {
|
||||
return timeComparison;
|
||||
}
|
||||
|
||||
if (filters.alphabetical !== null) {
|
||||
return filters.alphabetical === "asc"
|
||||
? a.name.localeCompare(b.name)
|
||||
: b.name.localeCompare(a.name);
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.eventsContainer}>
|
||||
<div className={styles.eventsButtons}>
|
||||
<Link
|
||||
to="/event/create"
|
||||
className={`${styles.createButton} glassCard`}>
|
||||
+
|
||||
</Link>
|
||||
<div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
|
||||
<button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
|
||||
<path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div className={styles.filterMenu}>
|
||||
<Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.eventsList}>
|
||||
{sortedEvents.map((event, index) => (
|
||||
<Event key={index} event={event} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EventsPage;
|
||||
@@ -0,0 +1,99 @@
|
||||
.eventsContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.eventsList{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.eventsButtons {
|
||||
overflow: visible;
|
||||
position: fixed;
|
||||
top: 10rem;
|
||||
right: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.filterContainer{
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.filterMenu{
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
|
||||
.createButton, .sortButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.createButton {
|
||||
font-size: 2rem;
|
||||
color: #019AFF;
|
||||
}
|
||||
|
||||
.sortButton svg {
|
||||
transform: scale(0.8);
|
||||
fill: #019AFF;
|
||||
}
|
||||
|
||||
.sortButton:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.createButton:hover, .mobileFilter:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
|
||||
.sortButton:focus {
|
||||
outline: none;
|
||||
}
|
||||
.sortButton:focus-visible {
|
||||
outline: 2px solid black;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.eventsButtons {
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.filterContainer{
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.filterMenu{
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.createButton:hover, .mobileFilter:hover {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
import styles from "./LoginPage.module.css";
|
||||
import LoginForm from "../../components/form/form.jsx";
|
||||
import LoginForm from "../../components/loginform/loginForm.jsx";
|
||||
import Background from "../../components/background/background.jsx";
|
||||
|
||||
function LoginPage() {
|
||||
return (
|
||||
return <Background>
|
||||
|
||||
<div className={styles.container}>
|
||||
<LoginForm />
|
||||
<LoginForm />
|
||||
</div>
|
||||
);
|
||||
|
||||
</Background>
|
||||
}
|
||||
|
||||
export default LoginPage;
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-radius:12px;
|
||||
margin-left: 33.3%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
import React, { useState } from "react";
|
||||
import styles from "./ProfilePage.module.css";
|
||||
|
||||
function Event({ title,date, tasks }) {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
const toggleExpand = () => {
|
||||
setIsExpanded(!isExpanded);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${styles.event} glassCard`}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<div style={{display:'flex', flexDirection:'column'}}>
|
||||
<h3>{title}</h3>
|
||||
<p style={{ fontSize: '0.8rem', color: '#666', margin: '0 0 0 0' }}>{date}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={toggleExpand}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: '1.2rem',
|
||||
}}
|
||||
>
|
||||
{isExpanded ? '▼' : '▶'}
|
||||
</button>
|
||||
</div>
|
||||
<ul
|
||||
className={`${styles.eventTasks} ${isExpanded ? styles.expanded : ''}`}
|
||||
>
|
||||
{tasks.map((task, index) => (
|
||||
<li key={index}>-- {task}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function ProfilePage() {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={`${styles.profileboard} glassCard`}>
|
||||
<div className={styles.contentWrapper}>
|
||||
<div className={styles.profilePictureContainer}>
|
||||
<img
|
||||
src="../src/assets/react.svg"
|
||||
alt="Photo de profil"
|
||||
className={styles.profilePicture}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.description}>
|
||||
<h2>LEBLOND Malo</h2>
|
||||
<div className={styles.topDescription}>
|
||||
<div className={styles.infoBlock}>
|
||||
<p><strong>Role :</strong> Président</p>
|
||||
<p><strong>Membre depuis :</strong> 2019</p>
|
||||
</div>
|
||||
<div className={styles.infoBlock}>
|
||||
<p><strong>Mail :</strong> mailpro@gmail.com</p>
|
||||
<p><strong>Téléphone :</strong> 08 67 87 32 21</p>
|
||||
</div>
|
||||
<button href="/../UpdateProfile.jsx">M</button>
|
||||
</div>
|
||||
<h2>Vos Événements :</h2>
|
||||
<Event
|
||||
title="Titre event 1"
|
||||
date="04/11/2025"
|
||||
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
|
||||
/>
|
||||
<Event
|
||||
title="Titre event 2"
|
||||
date="04/11/2025"
|
||||
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
|
||||
/>
|
||||
<Event
|
||||
title="Titre event 3"
|
||||
date="04/11/2025"
|
||||
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
|
||||
/>
|
||||
<Event
|
||||
title="Titre event 4"
|
||||
date="04/11/2025"
|
||||
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
|
||||
/>
|
||||
<Event
|
||||
title="Titre event 5"
|
||||
date="04/11/2025"
|
||||
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
|
||||
/>
|
||||
<Event
|
||||
title="Titre event 6"
|
||||
date="04/11/2025"
|
||||
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
|
||||
/>
|
||||
<Event
|
||||
title="Titre event 7"
|
||||
date="04/11/2025"
|
||||
tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfilePage;
|
||||
@@ -0,0 +1,158 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profileboard {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profilePictureContainer {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.profilePicture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.description {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-left:4%;
|
||||
}
|
||||
|
||||
.topDescription {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.infoBlock {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.event {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.eventTasks {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out, opacity 0.2s ease;
|
||||
opacity: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.eventTasks.expanded {
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.description h2{
|
||||
font-size:30px;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.profilePicture{
|
||||
width:90%;
|
||||
}
|
||||
/* Tablette (768px et plus) */
|
||||
@media screen and (min-width: 768px) {
|
||||
.contentWrapper {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.profilePictureContainer {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
width: calc(100% - 170px);
|
||||
margin-left:4%;
|
||||
}
|
||||
|
||||
.topDescription {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.infoBlock {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.event {
|
||||
padding: 15px;
|
||||
}
|
||||
.description h2{
|
||||
font-size:30px;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.profilePicture{
|
||||
width:90%;
|
||||
}
|
||||
}
|
||||
.description button{
|
||||
width:50px;
|
||||
height:50px;
|
||||
|
||||
}
|
||||
|
||||
/* Desktop (1024px et plus) */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.profileboard {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.profilePictureContainer {
|
||||
width: 30%;
|
||||
height:auto;
|
||||
}
|
||||
.profilePicture{
|
||||
width:90%;
|
||||
}
|
||||
.description {
|
||||
width: calc(100% - 200px);
|
||||
margin-left:4%;
|
||||
}
|
||||
|
||||
.event {
|
||||
padding: 18px;
|
||||
}
|
||||
.description h2{
|
||||
font-size:30px;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
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 register from "../../utils/register.js";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
|
||||
function RegisterPage() {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
return <Background>
|
||||
|
||||
<div className={styles.container}>
|
||||
|
||||
<div className={"glassCard"}>
|
||||
|
||||
<h1>Créer un compte</h1>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<Input
|
||||
value={name}
|
||||
placeholder="Prénom"
|
||||
onChange={e => setName(e.target.value)}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<Input
|
||||
value={lastName}
|
||||
placeholder="Nom"
|
||||
onChange={e => setLastName(e.target.value)}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.formGroup}>
|
||||
<Input
|
||||
type="email"
|
||||
value={email}
|
||||
placeholder="Adresse mail"
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.formGroup}>
|
||||
<div style={{ position: 'relative', width: '100%' }}>
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
placeholder="Mot de passe"
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '30px',
|
||||
right: '10px',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
{showPassword ? '👁️' : '🔒'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.logButton}>
|
||||
<Button variant={"transparent"} onClick={() => navigate("/login")}>Vous avez déjà un compte ?</Button>
|
||||
<Button variant={"default"} onClick={handleSubmit}> Se connecter </Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Background>
|
||||
}
|
||||
|
||||
export default RegisterPage;
|
||||
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
width: 30%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-radius:12px;
|
||||
}
|
||||
|
||||
:global(.glassCard) {
|
||||
--glass-bg: #ffffff9f;
|
||||
}
|
||||
.logButton{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.formGroup{
|
||||
margin-top:23px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
|
||||
import React, { useState } from "react";
|
||||
import styles from "./VolunteersPage.module.css";
|
||||
|
||||
function Volunteer({ name, role, since, email, phone, photo }) {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
const toggleExpand = () => {
|
||||
setIsExpanded(!isExpanded);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${styles.profileboard} glassCard`}>
|
||||
<div className={styles.mainContent}>
|
||||
{!isExpanded ? (
|
||||
<div className={styles.basicInfo}>
|
||||
<h2>{name}</h2>
|
||||
<p><strong>Rôle :</strong> {role}</p>
|
||||
<p><strong>Membre depuis :</strong> {since}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.expandedContent}>
|
||||
<div className={styles.profilePictureContainer}>
|
||||
<img src={photo} alt={`${name}'s profile`} className={styles.profilePicture} />
|
||||
</div>
|
||||
<div className={styles.textInfo}>
|
||||
<div className={styles.basicInfo}>
|
||||
<h2>{name}</h2>
|
||||
<p><strong>Rôle :</strong> {role}</p>
|
||||
<p><strong>Membre depuis :</strong> {since}</p>
|
||||
</div>
|
||||
<div className={styles.contactInfo}>
|
||||
<p><strong>Email :</strong> {email}</p>
|
||||
<p><strong>Téléphone :</strong> {phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
className={`${styles.expandButton} glassCard`}
|
||||
onClick={toggleExpand}
|
||||
>
|
||||
{isExpanded ? "▲" : "▼"}
|
||||
</button>
|
||||
{isExpanded && (
|
||||
<div className="voirPlus">
|
||||
<a href="#" className={styles.voirPlus}>VOIR PLUS</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function VolunteerPage() {
|
||||
const volunteers = [
|
||||
{
|
||||
name: "LEBLOND Malo",
|
||||
role: "Président",
|
||||
since: "2019",
|
||||
email: "malo.leblond@example.com",
|
||||
phone: "08 67 87 32 21",
|
||||
photo: "../src/assets/react.svg",
|
||||
},
|
||||
{
|
||||
name: "DUPONT Jean",
|
||||
role: "Bénévole",
|
||||
since: "2020",
|
||||
email: "jean.dupont@example.com",
|
||||
phone: "06 12 34 56 78",
|
||||
photo: "../src/assets/react.svg",
|
||||
},
|
||||
{
|
||||
name: "MARTIN Sophie",
|
||||
role: "Bénévole",
|
||||
since: "2021",
|
||||
email: "sophie.martin@example.com",
|
||||
phone: "06 87 65 43 21",
|
||||
photo: "../src/assets/react.svg",
|
||||
},
|
||||
{
|
||||
name: "MARTIN Sophie",
|
||||
role: "Bénévole",
|
||||
since: "2021",
|
||||
email: "sophie.martin@example.com",
|
||||
phone: "06 87 65 43 21",
|
||||
photo: "../src/assets/react.svg",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{volunteers.map((volunteer, index) => (
|
||||
<Volunteer
|
||||
key={index}
|
||||
name={volunteer.name}
|
||||
role={volunteer.role}
|
||||
since={volunteer.since}
|
||||
email={volunteer.email}
|
||||
phone={volunteer.phone}
|
||||
photo={volunteer.photo}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default VolunteerPage;
|
||||
@@ -0,0 +1,125 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.profileboard {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 3%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.basicInfo {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.expandedContent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profilePictureContainer {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.profilePicture {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.textInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contactInfo {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.contactInfo p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.expandButton {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.voirPlus {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.voirPlus:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.profilePictureContainer {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.voirPlus{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
margin-top:50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.profileboard {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.profilePictureContainer {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user