-
- );
+
+
+
+ );
+}
+
+
+function ProfilePage() {
+ return (
+
+
+
+
+
+ {title}
+{date}
+-
+ {tasks.map((task, index) => (
+
- -- {task} + ))} +
+
+ );
+}
+
+export default ProfilePage;
diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css
new file mode 100644
index 0000000..54569c6
--- /dev/null
+++ b/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%;
+}
+}
diff --git a/src/pages/Register/RegisterPage.jsx b/src/pages/Register/RegisterPage.jsx
new file mode 100644
index 0000000..489858d
--- /dev/null
+++ b/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
+
+
+
+
+ 
+
+
+
+
+ LEBLOND Malo
+
+
+
+
+ Role : Président
+Membre depuis : 2019
+
+
+
+ Mail : mailpro@gmail.com
+Téléphone : 08 67 87 32 21
+Vos Événements :
+
+
+
+
+
+
+
+ Créer un compte
+ +
+ setName(e.target.value)}
+ style={{ width: '100%' }}
+ />
+
+
+
+ setLastName(e.target.value)}
+ style={{ width: '100%' }}
+ />
+
+
+
+ setEmail(e.target.value)}
+ style={{ width: '100%' }}
+ />
+
+
+
+
+
+ setPassword(e.target.value)}
+ style={{ width: '100%' }}
+ />
+
+
+
+
+
+
+
+
+ );
+}
+
+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 (
+
+ {!isExpanded ? (
+
+
+
+ ) : (
+ {name}
+Rôle : {role}
+Membre depuis : {since}
+
+
+ )}
+
+ {isExpanded && (
+
+ 
+
+
+
+
+
+ {name}
+Rôle : {role}
+Membre depuis : {since}
+
+
+ Email : {email}
+Téléphone : {phone}
+
+ VOIR PLUS
+
+ )}
+
+ {volunteers.map((volunteer, index) => (
+
+ );
+}
+
+export default VolunteerPage;
diff --git a/src/pages/Volunteers/VolunteersPage.module.css b/src/pages/Volunteers/VolunteersPage.module.css
new file mode 100644
index 0000000..01bb808
--- /dev/null
+++ b/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;
+ }
+}
+
+
+
+
+
diff --git a/src/router.js b/src/router.js
index 43fa802..49775e1 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,9 +2,20 @@ import { createBrowserRouter } from "react-router";
import Layout from "./layout.jsx";
import HomePage from "./pages/Home/HomePage";
import LoginPage from "./pages/Login/LoginPage";
+import RegisterPage from "./pages/Register/RegisterPage.jsx";
+import VolunteersPage from "./pages/Volunteers/VolunteersPage";
+import ProfilePage from "./pages/Profile/ProfilePage";
import EventsPage from "./pages/Events/EventsPage.jsx";
const router = createBrowserRouter([
+ {
+ path: "/login",
+ Component: LoginPage,
+ },
+ {
+ path: "/register",
+ Component: RegisterPage,
+ },
{
path: "/",
Component: Layout,
@@ -17,9 +28,17 @@ const router = createBrowserRouter([
path: "/login",
Component: LoginPage,
},
+ {
+ path:"/profile",
+ Component:ProfilePage,
+ },
{
path: "/events",
Component: EventsPage,
+ },
+ {
+ path: "/volunteers",
+ Component: VolunteersPage,
}
]
}
diff --git a/src/utils/getUser.js b/src/utils/getUser.js
index 5345926..b5c817d 100644
--- a/src/utils/getUser.js
+++ b/src/utils/getUser.js
@@ -1,12 +1,21 @@
export default async function getUser() {
- await fetch('http://localhost:8000/api/me', {
- method: 'GET',
- credentials: 'include',
- headers: {
- 'Accept': 'application/json'
+ try {
+ const res = await fetch('http://localhost:80/api/users/me', {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
}
- })
- .then(res => res.json())
- .then(data => console.log('Utilisateur connecté :', data))
- .catch(err => console.error('Erreur :', err));
-}
\ No newline at end of file
+
+ const data = await res.json();
+ return data;
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+}
diff --git a/src/utils/getUserNotifications.js b/src/utils/getUserNotifications.js
index 69d2431..1b93395 100644
--- a/src/utils/getUserNotifications.js
+++ b/src/utils/getUserNotifications.js
@@ -1,7 +1,7 @@
export default async function getUserNotifications() {
try {
const response = await fetch(
- 'http://localhost:8000/api/users/1/notifications',
+ 'http://localhost:80/api/users/1/notifications',
{
method: 'GET',
credentials: 'include',
diff --git a/src/utils/getXSRF.js b/src/utils/getXSRF.js
index 1bed25f..46a9415 100644
--- a/src/utils/getXSRF.js
+++ b/src/utils/getXSRF.js
@@ -1,5 +1,5 @@
export default async function getXSRFToken() {
- const response = await fetch('http://localhost:8000/sanctum/csrf-cookie', {
+ const response = await fetch('http://localhost:80/sanctum/csrf-cookie', {
method: 'GET',
credentials: 'include'
});
diff --git a/src/utils/login.js b/src/utils/login.js
index 529d27c..6107185 100644
--- a/src/utils/login.js
+++ b/src/utils/login.js
@@ -3,31 +3,29 @@ import getXSRFToken from "./getXSRF.js";
export default async function login(email, password) {
const csrfToken = await getXSRFToken();
-
- await fetch('http://localhost:8000/api/users/login', {
- method: 'POST',
- credentials: 'include',
- headers: {
- 'Content-Type': 'application/json',
- 'X-XSRF-TOKEN': csrfToken,
- 'Accept': 'application/json'
- },
- body: JSON.stringify({
- email: email,
- password: password
- })
- })
- .then(response => {
- console.log('Code HTTP :', response.status);
- if (!response.ok) {
- throw new Error(`Erreur HTTP ${response.status}`);
- }
- return response.json();
- })
- .then(data => {
- console.log('Connexion réussie ! Données utilisateur :', data);
- })
- .catch(error => {
- console.error('Erreur lors de la connexion :', error.message);
+ try {
+ const response = await fetch('http://localhost:80/api/users/login', {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-XSRF-TOKEN': csrfToken,
+ 'Accept': 'application/json'
+ },
+ body: JSON.stringify({ email, password })
});
-}
\ No newline at end of file
+
+ console.log('Code HTTP :', response.status);
+
+ if (!response.ok) {
+ throw new Error(`Erreur HTTP ${response.status}`);
+ }
+
+ const data = await response.json();
+ console.log('Connexion réussie ! Données utilisateur :', data);
+
+ return { status: response.status, data };
+ } catch (error) {
+ return error;
+ }
+}
diff --git a/src/utils/register.js b/src/utils/register.js
new file mode 100644
index 0000000..2cdacf6
--- /dev/null
+++ b/src/utils/register.js
@@ -0,0 +1,30 @@
+import getXSRFToken from "./getXSRF.js";
+
+export default async function register(email, password, name, lastname) {
+ const csrfToken = await getXSRFToken();
+
+ try {
+ const response = await fetch('http://localhost:80/api/users/register', {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-XSRF-TOKEN': csrfToken,
+ 'Accept': 'application/json'
+ },
+ body: JSON.stringify({ email, password, name, lastname }),
+ });
+
+ console.log('Code HTTP :', response.status);
+
+ if (!response.ok) {
+ throw new Error(`Erreur HTTP ${response.status}`);
+ }
+
+ const data = await response.json();
+
+ return { status: response.status, data };
+ } catch (error) {
+ return error;
+ }
+}