Update user info

src/components/SettingsModal/SettingsModal.jsx

@@ -4,18 +4,29 @@ import styles from "./SettingsModal.module.css"
 import { useContext, useState } from "react";
 import ThemeSwitcher from "../ui/themeSwitcher/ThemeSwitcher.jsx";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import TextInput from "../ui/input/input.jsx";
+import updateUser from "../../utils/users/updateUser.js";
 
 
 export default function SettingsModal() {
 
+    const { user, logout, update } = useContext(AuthContext);
+
     const [open, setOpen] = useState(false);
 
-    const { logout } = useContext(AuthContext);
+    const [name, setName] = useState(user.name);
+    const [lastname, setLastName] = useState(user.lastname);
+    const [phone, setPhone] = useState(user.phone);
 
     const handleLogout = () => {
         logout();
     }
 
+    const handleSubmit = async () => {
+        await updateUser(name, lastname, phone);
+        update();
+    }
+
     return (
         <>
             <Button variant={"transparent"} onClick={() => setOpen(!open)}>
@@ -28,6 +39,24 @@ export default function SettingsModal() {
                     <div className={styles.section}>
                         <h3>Compte</h3>
                         <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+
+                        <div className={styles.section}>
+                            <h4>Changer de Prénom</h4>
+                            <TextInput value={name} onChange={e => setName(e.target.value)} type={"text"} />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de nom</h4>
+                            <TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de numéro de téléphone</h4>
+                            <TextInput value={phone} onChange={e => setPhone(e.target.value)} type={"text"} />
+                        </div>
+
+                        <Button className={styles.submitBtn} onClick={handleSubmit}>Confirmer</Button>
+
                     </div>
 
                     <div className={styles.section}>

src/components/SettingsModal/SettingsModal.module.css

@@ -14,5 +14,10 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    margin-bottom: 30px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+.submitBtn {
+    align-self: center;
 }

src/utils/users/updateUser.js

@@ -0,0 +1,32 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function updateUser(name, lastname, phone) {
+
+    const csrfToken = await getXSRFToken();
+
+    try {
+        const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/update`, {
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                'Accept': 'application/json',
+                'X-XSRF-TOKEN': csrfToken,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                name: name,
+                phone: phone,
+                lastname: lastname,
+            })
+        });
+
+        if (!res.ok) {
+            throw new Error(`Erreur serveur : ${res.status}`);
+        }
+
+        return await res.json();
+    } catch (err) {
+        console.error('Erreur :', err);
+        return null;
+    }
+}