Merge branch 'dev' into 'features/searchBar'

Dev

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!22

src/pages/Login/LoginPage.jsx

@@ -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;

src/pages/Login/LoginPage.module.css

@@ -9,6 +9,7 @@
     align-items: center;
     padding: 20px;
     border-radius:12px;
+    margin-left: 33.3%;
 }
 
 

src/pages/Profile/ProfilePage.jsx

@@ -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;

src/pages/Profile/ProfilePage.module.css

@@ -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%;
+}
+}

src/pages/Register/RegisterPage.jsx

@@ -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;
+
+

src/pages/Register/RegisterPage.module.css

@@ -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;
+}

src/pages/Volunteers/VolunteersPage.jsx

@@ -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;

src/pages/Volunteers/VolunteersPage.module.css

@@ -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;
+  }
+}
+
+
+
+
+