fix merge features/ts into dev

2026-03-03 14:32:36 +01:00
parent ad696888da edd81b66de
commit 430c95db78
22 changed files with 659 additions and 349 deletions
@@ -1,7 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module "*.module.css" {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-// permet à TS de reconnaître les fichiers modules.css 
@@ -1,23 +1,16 @@
-import { ReactNode, MouseEvent } from "react";
-import { createPortal } from "react-dom";
+/*import { createPortal } from "react-dom";
 import styles from "./modal.module.css";
-import Button from "../button/button";
+import Button from "../button/button.jsx";

-interface ModalProps {
-    open: boolean;
-    onClose: () => void;
-    children: ReactNode;
-    title?: string;
-}
+const Modal = ({ open, onClose, children, title }) => {

-const Modal = ({ open, onClose, children, title }: ModalProps) => {
    if (!open) return null;

    const handleOverlayClick = () => {
        onClose();
    };

-    const handleModalClick = (e: MouseEvent<HTMLDivElement>) => {
+    const handleModalClick = (e) => {
        e.stopPropagation();
    };

@@ -35,4 +28,44 @@ const Modal = ({ open, onClose, children, title }: ModalProps) => {
    );
 };

+export default Modal;*/
+
+import { createPortal } from "react-dom";
+import styles from "./modal.module.css";
+import Button from "../button/button";
+import { ReactNode, MouseEvent } from "react";
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  title?: string;
+}
+
+const Modal = ({ open, onClose, children, title }: ModalProps) => {
+  if (!open) return null;
+
+  const handleOverlayClick = () => {
+    onClose();
+  };
+
+  const handleModalClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  };
+
+  return createPortal(
+    <div className={styles.overlay} onClick={handleOverlayClick}>
+      <div className={styles.modal} onClick={handleModalClick}>
+        {title && <h2>{title}</h2>}
+        {children}
+        <div className={styles.modalFooter}>
+          <Button onClick={onClose}>Fermer</Button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
 export default Modal;
+
@@ -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 <Button variant={"default"} onClick={switchTheme} className={styles.themeBtn}>
+            <img src={`/icons/theme/${theme}.svg`} alt={`${theme} icon`} className={styles.themeIcon} />
+            <p>Changer de thème </p>
+    </Button>
+}*/
+
+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<Theme | "">("");
+
+    useEffect(() => {
+        const savedTheme = localStorage.getItem("theme") as Theme | null;
+        if (savedTheme) {
+            setTheme(savedTheme);
+        } else {
+            setTheme("light");
+        }
+    }, []);
+
+    const switchTheme = () => {
+        const newTheme: Theme = theme === "light" ? "dark" : "light";
+        localStorage.setItem("theme", newTheme);
+        setTheme(newTheme);
+        window.dispatchEvent(new Event("theme-changed"));
+    };
+
+    return (
+        <Button
+            variant="default"
+            onClick={switchTheme}
+            className={styles.themeBtn}
+        >
+            <img
+                src={`/icons/theme/${theme}.svg`}
+                alt={`${theme} icon`}
+                className={styles.themeIcon}
+            />
+            <p>Changer de thème</p>
+        </Button>
+    );
+}
@@ -15,6 +15,7 @@ export interface User {
  email: string;
  phone: string | null;
  created_at: string;
+  profile_photo_path?: string | null;
  tasks: Task[];
 }

@@ -5,7 +5,7 @@ import {EventContext} from "../../../../contexts/events/EventContext.js";

 function Calendar() {

-    const { events } = useContext(EventContext);
+    const { events=[] } = useContext(EventContext);

    const monthNames = [
        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
@@ -4,33 +4,32 @@ import EventItem from "./eventItem.jsx";
 import { EventContext } from "../../../../contexts/events/EventContext.js";
 import { useContext } from "react";

-
 function EventList() {
-
-    const { events } = useContext(EventContext);
+    // Utilise une valeur par défaut pour `events` si elle est `undefined`
+    const { events = [] } = useContext(EventContext);

    const sortedEvents = useMemo(() => {
+        // Vérifie explicitement que `events` est un tableau avant de trier
+        if (!Array.isArray(events)) return [];
        return [...events].sort(
            (a, b) => new Date(a.start) - new Date(b.start)
        );
    }, [events]);

-
    return (
        <div className={`${styles.glassCard} glassCard`}>
-                <h2>Liste des événements à venir</h2>
-                {sortedEvents.length > 0 ? (
-                    <div className={styles.eventList}>
-                        {sortedEvents.map((eventGroup, index) => (
-                            <EventItem eventGroup={eventGroup} key={index} />
-                        ))}
-                    </div>
-                ) : (
-                    <p>Aucun événement planifié pour l'instant.</p>
-                )}
+            <h2>Liste des événements à venir</h2>
+            {sortedEvents.length > 0 ? (
+                <div className={styles.eventList}>
+                    {sortedEvents.map((eventGroup, index) => (
+                        <EventItem eventGroup={eventGroup} key={index} />
+                    ))}
+                </div>
+            ) : (
+                <p>Aucun événement planifié pour l'instant.</p>
+            )}
        </div>
-
    );
 }

-export default EventList;
+export default EventList;
@@ -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;
+  }
 }
@@ -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] = useState<User | null>(null);
+  const [profilePicture, setProfilePicture] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);

-    const navigate = useNavigate();
-    const {id} = useParams();
-    const {user, update} = useContext(AuthContext) as AuthContextType;
-    const [profileUser, setProfileUser] = useState<User | null>(null);
+  const isOwnProfile = !id || user?.id.toString() === id;

-    const isOwnProfile = !id || user.id.toString() === id;
+  useEffect(() => {
+    (async () => {
+      if (!isOwnProfile && id) {
+        const res = await getUserById(id);
+        if (res.status === 404) {
+          navigate("/404");
+          return;
+        }
+        if (res.status !== 200) {
+          console.error("Erreur lors du chargement du profil", res);
+          return;
+        }
+        setProfileUser(res.data);
+      } else {
+        update();
+        setProfileUser(user);
+        if (user?.profile_photo_path) {
+          setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
+        }
+      }
+    })();
+  }, [user, id]);

-    useEffect(() => {
+  const handleEditPictureClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };

-        (async () => {
+  // Remplacé : handleFileChange extrait vers utils/users/uploadProfilePhoto
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;

-            if (!isOwnProfile) {
-                console.log(id);
-                const res = await getUserById(id);
+    try {
+      const res = await uploadProfilePhoto(file);
+      if (res.ok) {
+        setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`);
+        setSuccess("Photo mise à jour !");
+        setError(null);
+        await update();
+      } else {
+        setError(res.data?.message || res.error || "Erreur lors de l'upload.");
+        setSuccess(null);
+      }
+    } catch (err) {
+      setError("Erreur réseau.");
+      setSuccess(null);
+    }
+  };

-                if (res.status === 404) {
-                    navigate("/404");
-                    return;
-                }
+  // Remplacé : handleDeletePicture extrait vers utils/users/deleteProfilePhoto
+  const handleDeletePicture = async () => {
+    try {
+      const res = await deleteProfilePhoto();
+      if (res.status >= 200 && res.status < 300) {
+        setProfilePicture(null);
+        setSuccess("Photo supprimée !");
+        setError(null);
+        await update();
+      } else {
+        setError(res.data?.message || "Erreur lors de la suppression.");
+        setSuccess(null);
+      }
+    } catch (err) {
+      setError("Erreur réseau.");
+      setSuccess(null);
+    }
+  };

-                if (res.status !== 200) {
-                    console.error("Erreur lors du chargement du profil", res);
-                    return;
-                }
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.profileboard} glassCard`}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.profilePictureContainer}>
+            <img
+              src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
+              alt="Photo de profil"
+              className={styles.profilePicture}
+            />
+          </div>

-                setProfileUser(res.data);
-            } else {
-                setProfileUser(user)
-            }
-        })()
-    }, [user, id]);
-
-    return (
-        <div className={styles.container}>
-            <div className={`${styles.profileboard} glassCard`}>
-                <div className={styles.contentWrapper}>
-                    <div className={styles.profilePictureContainer}>
-                        <img
-                            src="/react.svg"
-                            alt="Photo de profil"
-                            className={styles.profilePicture}
-                        />
-                    </div>
-
-                    <div className={styles.description}>
-                        <div className={styles.headerProfile}>
-                            <h2>
-                                {profileUser?.name} {profileUser?.lastname}
-                            </h2>
-                            {(user?.isAdmin && profileUser && !isOwnProfile) && (
-                                <ManageMember userToManage={profileUser}/>
-                            )}
-                        </div>
-
-                        <div className={styles.topDescription}>
-                            <div className={`${styles.infoBlock} glassBorder`}>
-                                <p>
-                                    <strong>Role :</strong> {profileUser?.role}
-                                </p>
-                                <p>
-                                    <strong>Membre depuis :</strong>{" "}
-                                    {profileUser && formatDate(profileUser.created_at)}
-                                </p>
-                            </div>
-
-                            <div className={`${styles.infoBlock} glassBorder`}>
-                                <p>
-                                    <strong>Mail :</strong> {profileUser?.email}
-                                </p>
-                                <p>
-                                    <strong>Téléphone :</strong>{" "}
-                                    {profileUser?.phone ?? "Pas de numéro enregistré"}
-                                </p>
-                            </div>
-
-                            {isOwnProfile && (
-                                <div className={styles.settingImage}>
-                                    <SettingsModal/>
-                                </div>
-                            )}
-                        </div>
-
-                        <h2>Tâches :</h2>
-
-                        {profileUser && profileUser.tasks.length > 0 ? (
-                            profileUser.tasks.map((task) => (
-                                <Task key={task.id} task={task}/>
-                            ))
-                        ) : (
-                            <p>Aucune tâche pour le moment.</p>
-                        )}
-                    </div>
-                </div>
+          {isOwnProfile && (
+            <div className={styles.pictureButtons}>
+              <button onClick={handleEditPictureClick} className={styles.editPictureButton}>
+                Modifier la photo
+              </button>
+              {user?.profile_photo_path && (
+                <button onClick={handleDeletePicture} className={styles.deletePictureButton}>
+                  Supprimer
+                </button>
+              )}
            </div>
+          )}
+
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            accept="image/*"
+            style={{ display: "none" }}
+          />
+          {error && <p className={styles.errorMessage}>{error}</p>}
+          {success && <p className={styles.successMessage}>{success}</p>}
+
+          <div className={styles.description}>
+            <div className={styles.headerProfile}>
+              <h2>
+                {profileUser?.name} {profileUser?.lastname}
+              </h2>
+              {user?.isAdmin && profileUser && !isOwnProfile && (
+                <ManageMember userToManage={profileUser} />
+              )}
+            </div>
+
+            <div className={styles.topDescription}>
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p><strong>Role :</strong> {profileUser?.role}</p>
+                <p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}</p>
+              </div>
+
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p><strong>Mail :</strong> {profileUser?.email}</p>
+                <p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
+              </div>
+
+              {isOwnProfile && (
+                <div className={styles.settingImage}>
+                  <SettingsModal />
+                </div>
+              )}
+            </div>
+
+            <h2>Tâches :</h2>
+            {profileUser?.tasks.length ? (
+              profileUser.tasks.map((task) => <Task key={task.id} task={task} />)
+            ) : (
+              <p>Aucune tâche.</p>
+            )}
+          </div>
        </div>
-    );
+      </div>
+    </div>
+  );
 }

 export default ProfilePage;
@@ -164,4 +164,4 @@ export default function SettingsModal() {
            </Modal>
        </>
    );
-}
+}
@@ -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",
-            },
-        };
-    }
-}
@@ -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<T = any> {
+    status: number;
+    data: T | null;
+}
+
+export default async function fetchWrapper(
+    path: string,
+    data: any = null,
+    method: string = "GET",
+    headers: Record<string, string> = {}
+): Promise<FetchResponse> {
+    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",
+            },
+        };
+    }
+}
+
@@ -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');
-}
@@ -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<string> {
+    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');
+}
+
@@ -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" };
+  }
+}
@@ -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 }
-    );
-}
@@ -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 }
+    );
+}
@@ -0,0 +1,5 @@
+import uploadProfilePhoto from "./uploadProfilePhoto";
+
+export default async function replaceProfilePhoto(file: File) {
+  return uploadProfilePhoto(file);
+}
@@ -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 }
-    );
-}
@@ -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<Response> {
+    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);
+}
+
@@ -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" };
+  }
+}
@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
@@ -1,49 +1,4 @@
 {
-  // Visit https://aka.ms/tsconfig to read more about this file
-  /*"compilerOptions": {*/
-    // File Layout
-    // "rootDir": "./src",
-    // "outDir": "./dist",
-
-    // Environment Settings
-    // See also https://aka.ms/tsconfig/module
-    /*"module": "nodenext",
-    "target": "esnext",
-    "types": [],*/
-    // For nodejs:
-    // "lib": ["esnext"],
-    // "types": ["node"],
-    // and npm install -D @types/node
-
-    // Other Outputs
-    /*"sourceMap": true,
-    "declaration": true,
-    "declarationMap": true,*/
-
-    // Stricter Typechecking Options
-    /*"noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true,*/
-
-    // Style Options
-    // "noImplicitReturns": true,
-    // "noImplicitOverride": true,
-    // "noUnusedLocals": true,
-    // "noUnusedParameters": true,
-    // "noFallthroughCasesInSwitch": true,
-    // "noPropertyAccessFromIndexSignature": true,
-
-    // Recommended Options
-   /* "strict": true,
-    "jsx": "react-jsx",
-    "verbatimModuleSyntax": true,
-    "isolatedModules": true,
-    "noUncheckedSideEffectImports": true,
-    "moduleDetection": "force",
-    "skipLibCheck": true,
-  }
-}
-
-{*/
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
@@ -52,11 +7,13 @@
    "jsx": "react-jsx",
    "strict": true,
    "isolatedModules": true,
-
-    "noUncheckedIndexedAccess": true,
+    "noUncheckedIndexedAccess": false,
    "exactOptionalPropertyTypes": true,
-
    "resolveJsonModule": true,
-    "skipLibCheck": true
-  }
+    "skipLibCheck": true,
+    "allowJs": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"]
+  //  "exclude": ["**/*.js"]
 }