+
,
+ document.body
+ );
+};
+
export default Modal;
+
diff --git a/src/components/ui/themeSwitcher/ThemeSwitcher.tsx b/src/components/ui/themeSwitcher/ThemeSwitcher.tsx
new file mode 100644
index 0000000..4062bb8
--- /dev/null
+++ b/src/components/ui/themeSwitcher/ThemeSwitcher.tsx
@@ -0,0 +1,73 @@
+/*import Button from "../button/button.jsx";
+import { useState, useEffect } from "react";
+import styles from "./ThemeSwitcher.module.css";
+
+
+export default function ThemeSwitcher() {
+
+ const [theme, setTheme] = useState("");
+
+ useEffect(() => {
+ const t = localStorage.getItem("theme");
+ if(t) setTheme(t);
+ else setTheme("light");
+ }, []);
+
+ const switchTheme = () => {
+
+ let newTheme = theme === "light" ? "dark" : "light";
+
+ if(theme === null || theme === "") newTheme = "dark";
+
+ localStorage.setItem("theme", newTheme);
+ setTheme(newTheme);
+
+ window.dispatchEvent(new Event("theme-changed"));
+ };
+
+ return
+}*/
+
+import Button from "../button/button";
+import { useState, useEffect } from "react";
+import styles from "./ThemeSwitcher.module.css";
+
+type Theme = "light" | "dark";
+
+export default function ThemeSwitcher() {
+ const [theme, setTheme] = useState
+ {title &&
+ {title}
} + {children} +
+
+
+
-
-
);
}
-export default EventList;
\ No newline at end of file
+export default EventList;
diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css
index a03cb05..2bcecee 100644
--- a/src/pages/Profile/ProfilePage.module.css
+++ b/src/pages/Profile/ProfilePage.module.css
@@ -1,7 +1,9 @@
+/* Conteneur principal */
.container {
- width: 100%;
- padding: 12px;
- box-sizing: border-box;
+ width: 100%;
+ padding: 12px;
+ box-sizing: border-box;
+ margin: 0 auto;
}
.profileboard {
@@ -18,35 +20,68 @@
}
.contentWrapper {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ gap: 20px;
}
.profilePictureContainer {
- width: 120px;
- height: 120px;
- margin-bottom: 16px;
+ width: 120px;
+ height: 120px;
+ margin-bottom: 0;
+ position: relative;
+ display: flex;
+ justify-content: center;
}
.profilePicture {
- width: 100%;
- height: 100%;
- border-radius: 50%;
- object-fit: cover;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.editPictureButton {
+ margin-top: 16px;
+ padding-top: 12px;
+ padding-bottom: 12px;
+ background: rgba(255, 255, 255, 0.95);
+ border: none;
+ border-radius: 24px;
+ cursor: pointer;
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #e74c3c;
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+ transition: all 0.3s ease;
+ backdrop-filter: blur(5px);
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ width: auto;
+ min-width: 140px;
+}
+
+.editPictureButton:hover {
+ background: rgba(255, 255, 255, 1);
+ transform: translateY(-2px);
+ box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
+ color: #c0392b;
}
.description {
- width: 100%;
- text-align: left;
+ width: 100%;
+ text-align: left;
}
-
.headerProfile {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 16px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
}
.description h2 {
@@ -78,84 +113,91 @@
margin: 0;
}
+/* Conteneur des informations principales */
.topDescription {
- display: flex;
- flex-direction: column;
- gap: 12px;
- margin-bottom: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ width: 100%;
+ margin-bottom: 20px;
}
+/* Bloc d'informations */
.infoBlock {
- width: 100%;
- padding: 12px;
+ width: 100%;
+ padding: 12px;
+ box-sizing: border-box;
}
-.eventTasks {
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.3s ease, opacity 0.2s ease;
- opacity: 0;
- padding-left: 16px;
-}
-
-.eventTasks.expanded {
- max-height: 500px;
- opacity: 1;
- margin-top: 10px;
+/* Conteneur pour les paramètres */
+.settingImage {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ margin-top: 16px;
}
+/* Adaptation pour tablette et PC */
@media (min-width: 768px) {
- .contentWrapper {
- flex-direction: row;
- align-items: flex-start;
- }
+ .contentWrapper {
+ flex-direction: row;
+ align-items: flex-start;
+ gap: 24px;
+ }
- .profilePictureContainer {
- width: 150px;
- height: 150px;
- margin-right: 24px;
- margin-bottom: 0;
- }
+ .profilePictureContainer {
+ width: 150px;
+ height: 150px;
+ margin-right: 0;
+ }
- .description {
- width: calc(100% - 180px);
- }
+ .description {
+ width: calc(100% - 180px);
+ }
- .topDescription {
- flex-direction: row;
- justify-content: space-between;
- }
+ .topDescription {
+ flex-direction: row;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ }
- .infoBlock {
- width: 48%;
- }
+ .infoBlock {
+ flex: 1;
+ min-width: calc(50% - 8px);
+ max-width: calc(50% - 8px);
+ }
- .description h2 {
- font-size: 1.8rem;
- }
+ .editPictureButton {
+ margin: 16px auto 0 auto;
+ display: block;
+ }
+
+ .headerProfile h2 {
+ font-size: 1.8rem;
+ }
}
+/* Adaptation pour grand écran */
@media (min-width: 1024px) {
- .container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 24px;
- }
+ .container {
+ max-width: 1200px;
+ padding: 24px;
+ }
- .profileboard {
- padding: 28px;
- }
+ .profileboard {
+ padding: 28px;
+ }
- .profilePictureContainer {
- width: 180px;
- height: 180px;
- }
+ .profilePictureContainer {
+ width: 180px;
+ height: 180px;
+ }
- .description {
- width: calc(100% - 220px);
- }
+ .description {
+ width: calc(100% - 220px);
+ }
- .description h2 {
- font-size: 2rem;
- }
+ .headerProfile h2 {
+ font-size: 2rem;
+ }
}
diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx
index 5369f96..eddae6a 100644
--- a/src/pages/Profile/ProfilePage.tsx
+++ b/src/pages/Profile/ProfilePage.tsx
@@ -1,3 +1,5 @@
+import getXSRFToken from "../../utils/getXSRF.js";
+// import fetchWrapper from "../../utils/fetchWrapper";
import {useContext, useEffect, useState} from "react";
import styles from "./ProfilePage.module.css";
import {AuthContext} from "../../contexts/auth/AuthContext";
@@ -6,18 +8,32 @@ import Task from "../../components/Task/Task";
import SettingsModal from "./components/SettingsModal/SettingsModal";
import {useParams} from "react-router";
import {useNavigate} from "react-router";
+import {useRef} from "react";
import getUserById from "../../utils/users/getUserById.js";
import ManageMember from "./components/manageMember/ManageMember.jsx";
+import uploadProfilePhoto from "../../utils/users/uploadProfilePhoto";
+import deleteProfilePhoto from "../../utils/users/deleteProfilePhoto.js";
+
interface TaskType {
- id: number;
- title?: string;
- completed?: boolean;
-
- [key: string]: unknown;
+ id: number;
+ name: string;
+ description: string;
+ location: string;
+ start: string;
+ end: string;
+ max_participants: number;
+ events_id: number;
+ created_at: string;
+ updated_at: string;
+ pivot: {
+ user_id: number;
+ task_id: number;
+ };
}
+
interface User {
id: number;
name: string;
@@ -28,111 +44,170 @@ interface User {
created_at: string;
isAdmin: boolean;
tasks: TaskType[];
+ profile_photo_path?: string | null;
}
interface AuthContextType {
- user: User;
+ user: User | null;
update: () => void;
}
function ProfilePage() {
+ const navigate = useNavigate();
+ const { id } = useParams();
+ const { user, update } = useContext(AuthContext) as AuthContextType;
+ const [profileUser, setProfileUser] = useStateListe des événements à venir
- {sortedEvents.length > 0 ? ( -
- {sortedEvents.map((eventGroup, index) => (
-
- ) : (
- Aucun événement planifié pour l'instant.
- )} +Liste des événements à venir
+ {sortedEvents.length > 0 ? ( +
+ {sortedEvents.map((eventGroup, index) => (
+
+ ) : (
+ Aucun événement planifié pour l'instant.
+ )}
+
+ {
+ status: number;
+ data: T | null;
+}
+
+export default async function fetchWrapper(
+ path: string,
+ data: any = null,
+ method: string = "GET",
+ headers: Record = {}
+): Promise {
+ try {
+ const res = await fetch(
+ `${import.meta.env.VITE_API_URL}${path}`,
+ {
+ method,
+ credentials: "include",
+ headers: {
+ "Accept": "application/json",
+ "Content-Type": "application/json",
+ ...headers,
+ },
+ body: data ? JSON.stringify(data) : null,
+ }
+ );
+
+ let responseData = null;
+
+ try {
+ responseData = await res.json();
+ } catch (_) {
+ responseData = null;
+ }
+
+ return {
+ status: res.status,
+ data: responseData,
+ };
+
+ } catch (err) {
+ console.error("❌ Erreur réseau :", err);
+
+ return {
+ status: 0,
+ data: {
+ message: "Network error",
+ },
+ };
+ }
+}
+
diff --git a/src/utils/getXSRF.js b/src/utils/getXSRF.js
deleted file mode 100644
index f1dc5fc..0000000
--- a/src/utils/getXSRF.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export default async function getXSRFToken() {
- const response = await fetch(`${import.meta.env.VITE_API_URL}/sanctum/csrf-cookie`, {
- method: 'GET',
- credentials: 'include'
- });
-
- if (!response.ok && response.status !== 204) {
- throw new Error(`Error : ${response.status}`);
- }
-
- const name = 'XSRF-TOKEN';
- const value = `; ${document.cookie}`;
- const parts = value.split(`; ${name}=`);
- if (parts.length === 2) {
- return decodeURIComponent(parts.pop().split(';').shift());
- }
-
- throw new Error('Error: Invalid XSRF-TOKEN');
-}
diff --git a/src/utils/getXSRF.ts b/src/utils/getXSRF.ts
new file mode 100644
index 0000000..f96606d
--- /dev/null
+++ b/src/utils/getXSRF.ts
@@ -0,0 +1,40 @@
+/*export default async function getXSRFToken() {
+ const response = await fetch(`${import.meta.env.VITE_API_URL}/sanctum/csrf-cookie`, {
+ method: 'GET',
+ credentials: 'include'
+ });
+
+ if (!response.ok && response.status !== 204) {
+ throw new Error(`Error : ${response.status}`);
+ }
+
+ const name = 'XSRF-TOKEN';
+ const value = `; ${document.cookie}`;
+ const parts = value.split(`; ${name}=`);
+ if (parts.length === 2) {
+ return decodeURIComponent(parts.pop().split(';').shift());
+ }
+
+ throw new Error('Error: Invalid XSRF-TOKEN');
+}*/
+
+export default async function getXSRFToken(): Promise {
+ const response = await fetch(`${import.meta.env.VITE_API_URL}/sanctum/csrf-cookie`, {
+ method: 'GET',
+ credentials: 'include'
+ });
+
+ if (!response.ok && response.status !== 204) {
+ throw new Error(`Error : ${response.status}`);
+ }
+
+ const name = 'XSRF-TOKEN';
+ const value = `; ${document.cookie}`;
+ const parts = value.split(`; ${name}=`);
+ if (parts.length === 2) {
+ return decodeURIComponent(parts.pop()!.split(';').shift()!);
+ }
+
+ throw new Error('Error: Invalid XSRF-TOKEN');
+}
+
diff --git a/src/utils/users/deleteProfilePhoto.ts b/src/utils/users/deleteProfilePhoto.ts
new file mode 100644
index 0000000..d0ca642
--- /dev/null
+++ b/src/utils/users/deleteProfilePhoto.ts
@@ -0,0 +1,10 @@
+import fetchWrapper from "../fetchWrapper";
+
+export default async function deleteProfilePhoto(): Promise<{ status: number; ok: boolean; data?: any; error?: string }> {
+ try {
+ const response = await fetchWrapper("/api/profile-photo", null, "DELETE");
+ return { status: response.status || 0, ok: response.status >= 200 && response.status < 300, data: response.data };
+ } catch (err: any) {
+ return { status: 0, ok: false, error: err?.message || "Network error" };
+ }
+}
diff --git a/src/utils/users/deleteUser.js b/src/utils/users/deleteUser.js
deleted file mode 100644
index 4cb9dcf..0000000
--- a/src/utils/users/deleteUser.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import fetchWrapper from "../fetchWrapper.js";
-import getXSRFToken from "../getXSRF.js";
-
-export default async function deleteUser() {
- const csrfToken = await getXSRFToken();
-
- return fetchWrapper(
- "/api/users",
- null,
- "DELETE",
- { "X-XSRF-TOKEN": csrfToken }
- );
-}
diff --git a/src/utils/users/deleteUser.ts b/src/utils/users/deleteUser.ts
new file mode 100644
index 0000000..193e5b0
--- /dev/null
+++ b/src/utils/users/deleteUser.ts
@@ -0,0 +1,13 @@
+import fetchWrapper from "../fetchWrapper";
+import getXSRFToken from "../getXSRF";
+
+export default async function deleteUser(): Promise<{status: number;data: any;}> {
+ const csrfToken: string = await getXSRFToken();
+
+ return fetchWrapper(
+ "/api/users",
+ null,
+ "DELETE",
+ { "X-XSRF-TOKEN": csrfToken }
+ );
+}
diff --git a/src/utils/users/replaceProfilePhoto.ts b/src/utils/users/replaceProfilePhoto.ts
new file mode 100644
index 0000000..92569eb
--- /dev/null
+++ b/src/utils/users/replaceProfilePhoto.ts
@@ -0,0 +1,5 @@
+import uploadProfilePhoto from "./uploadProfilePhoto";
+
+export default async function replaceProfilePhoto(file: File) {
+ return uploadProfilePhoto(file);
+}
diff --git a/src/utils/users/updateUser.js b/src/utils/users/updateUser.js
deleted file mode 100644
index af18273..0000000
--- a/src/utils/users/updateUser.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import fetchWrapper from "../fetchWrapper.js";
-import getXSRFToken from "../getXSRF.js";
-
-export default async function updateUser(name, lastname, phone) {
- const csrfToken = await getXSRFToken();
-
- return fetchWrapper(
- "/api/users/update",
- { name, lastname, phone },
- "POST",
- { "X-XSRF-TOKEN": csrfToken }
- );
-}
diff --git a/src/utils/users/updateUser.ts b/src/utils/users/updateUser.ts
new file mode 100644
index 0000000..6714250
--- /dev/null
+++ b/src/utils/users/updateUser.ts
@@ -0,0 +1,33 @@
+/*import fetchWrapper from "../fetchWrapper.js";
+import getXSRFToken from "../getXSRF.js";
+
+export default async function updateUser(name, lastname, phone) {
+ const csrfToken = await getXSRFToken();
+
+ return fetchWrapper(
+ "/api/users/update",
+ { name, lastname, phone },
+ "POST",
+ { "X-XSRF-TOKEN": csrfToken }
+ );
+}*/
+
+import fetchWrapper from "../fetchWrapper";
+import getXSRFToken from "../getXSRF";
+
+interface UserUpdateData {
+ name: string;
+ lastname: string;
+ phone: string | null;
+}
+
+interface RequestHeaders {
+ "X-XSRF-TOKEN": string;
+}
+export default async function updateUser(name: string,lastname: string,phone: string | null): Promise {
+ const csrfToken: string = await getXSRFToken();
+ const userData: UserUpdateData = {name,lastname,phone,};
+ const headers: RequestHeaders = {"X-XSRF-TOKEN": csrfToken,};
+ return fetchWrapper("/api/users/update",userData,"POST",headers);
+}
+
diff --git a/src/utils/users/uploadProfilePhoto.ts b/src/utils/users/uploadProfilePhoto.ts
new file mode 100644
index 0000000..ca252a2
--- /dev/null
+++ b/src/utils/users/uploadProfilePhoto.ts
@@ -0,0 +1,28 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function uploadProfilePhoto(file: File): Promise<{ status: number; ok: boolean; data?: any; error?: string }> {
+ const formData = new FormData();
+ formData.append("photo", file);
+
+ try {
+ const csrfToken = await getXSRFToken();
+ const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile-photo`, {
+ method: "POST",
+ headers: { "X-XSRF-TOKEN": decodeURIComponent(csrfToken) },
+ credentials: "include",
+ body: formData,
+ });
+
+ const status = response.status;
+ let data = null;
+ try {
+ data = await response.json();
+ } catch (e) {
+ // no json
+ }
+
+ return { status, ok: response.ok, data };
+ } catch (err: any) {
+ return { status: 0, ok: false, error: err?.message || "Network error" };
+ }
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..b67473e
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,6 @@
+///
+
+ );
}
export default ProfilePage;
\ No newline at end of file
diff --git a/src/pages/Profile/components/SettingsModal/SettingsModal.tsx b/src/pages/Profile/components/SettingsModal/SettingsModal.tsx
index fa6701f..e028735 100644
--- a/src/pages/Profile/components/SettingsModal/SettingsModal.tsx
+++ b/src/pages/Profile/components/SettingsModal/SettingsModal.tsx
@@ -164,4 +164,4 @@ export default function SettingsModal() {
);
-}
\ No newline at end of file
+}
diff --git a/src/utils/fetchWrapper.js b/src/utils/fetchWrapper.js
deleted file mode 100644
index aa9f0a0..0000000
--- a/src/utils/fetchWrapper.js
+++ /dev/null
@@ -1,45 +0,0 @@
-export default async function fetchWrapper(
- path,
- data = null,
- method = "GET",
- headers = {}
-) {
- try {
- const res = await fetch(
- `${import.meta.env.VITE_API_URL}${path}`,
- {
- method,
- credentials: "include",
- headers: {
- "Accept": "application/json",
- "Content-Type": "application/json",
- ...headers,
- },
- body: data ? JSON.stringify(data) : null,
- }
- );
-
- let responseData = null;
-
- try {
- responseData = await res.json();
- } catch (_) {
- responseData = null;
- }
-
- return {
- status: res.status,
- data: responseData,
- };
-
- } catch (err) {
- console.error("❌ Erreur réseau :", err);
-
- return {
- status: 0,
- data: {
- message: "Network error",
- },
- };
- }
-}
diff --git a/src/utils/fetchWrapper.ts b/src/utils/fetchWrapper.ts
new file mode 100644
index 0000000..a130373
--- /dev/null
+++ b/src/utils/fetchWrapper.ts
@@ -0,0 +1,92 @@
+/*export default async function fetchWrapper(path,data = null,method = "GET",headers = {}) {
+ try {
+ const res = await fetch(
+ `${import.meta.env.VITE_API_URL}${path}`,
+ {
+ method,
+ credentials: "include",
+ headers: {
+ "Accept": "application/json",
+ "Content-Type": "application/json",
+ ...headers,
+ },
+ body: data ? JSON.stringify(data) : null,
+ }
+ );
+
+ let responseData = null;
+
+ try {
+ responseData = await res.json();
+ } catch (_) {
+ responseData = null;
+ }
+
+ return {
+ status: res.status,
+ data: responseData,
+ };
+
+ } catch (err) {
+ console.error("❌ Erreur réseau :", err);
+
+ return {
+ status: 0,
+ data: {
+ message: "Network error",
+ },
+ };
+ }
+}*/
+
+interface FetchResponse
+ 
+
- setProfileUser(res.data);
- } else {
- setProfileUser(user)
- }
- })()
- }, [user, id]);
-
- return (
-
-
+
-
- );
+
-
+ {isOwnProfile && (
+
- 
-
-
-
-
-
- ))
- ) : (
-
-
-
- )}
-
-
- - {profileUser?.name} {profileUser?.lastname} -
- {(user?.isAdmin && profileUser && !isOwnProfile) && ( -
-
-
-
-
-
- - Role : {profileUser?.role} -
-- Membre depuis :{" "} - {profileUser && formatDate(profileUser.created_at)} -
-
-
-
- {isOwnProfile && (
- - Mail : {profileUser?.email} -
-- Téléphone :{" "} - {profileUser?.phone ?? "Pas de numéro enregistré"} -
-
-
- )}
- Tâches :
- - {profileUser && profileUser.tasks.length > 0 ? ( - profileUser.tasks.map((task) => ( -Aucune tâche pour le moment.
- )} -
+
+ {user?.profile_photo_path && (
+
+ )}
+ )}
+
+
+ {error && {error}
} + {success &&{success}
} + +
+
+
+
+ + {profileUser?.name} {profileUser?.lastname} +
+ {user?.isAdmin && profileUser && !isOwnProfile && ( +
+
+
+
+
+
+ Role : {profileUser?.role}
+Membre depuis : {profileUser && formatDate(profileUser.created_at)}
+
+
+
+ {isOwnProfile && (
+ Mail : {profileUser?.email}
+Téléphone : {profileUser?.phone ?? "Non renseigné"}
+
+
+ )}
+ Tâches :
+ {profileUser?.tasks.length ? ( + profileUser.tasks.map((task) =>Aucune tâche.
+ )} +