add section to update user email in parameters modal

src/pages/Profile/components/SettingsModal/SettingsModal.tsx

@@ -12,6 +12,7 @@ import { useNavigate } from "react-router";
 import toggleEmailNotifications from "../../../../utils/users/toggleEmailNotifications";
 import toggleWebNotifications from "../../../../utils/users/toggleWebNotifications";
 import updateUserPassword from "../../../../utils/users/updateUserPassword";
+import updateUserEmail from "../../../../utils/users/updateUserEmail";
 
 
 interface TaskType {
@@ -59,6 +60,7 @@ export default function SettingsModal() {
     const [currentPassword, setCurrentPassword] = useState<string>('');
     const [newPassword, setNewPassword] = useState<string>('');
     const [newPasswordConfirm, setNewPasswordConfirm] = useState<string>('');
+    const [email, setEmail] = useState<string>('');
 
     const handleLogout = (): void => {
         logout();
@@ -120,6 +122,16 @@ export default function SettingsModal() {
         }
     };
 
+    const handleEmailUpdate = async () => {
+        try {
+            await updateUserEmail(email);
+            setEmail('');
+            update();
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
 
     return (
         <>
@@ -139,7 +151,7 @@ export default function SettingsModal() {
                 <div className={styles.content}>
                     <div className={`glassBorder ${styles.section}`}>
                         <h3>Modifier les informations du compte</h3>
-                        <div className={styles.test}>
+                        <div>
                             <h4>Changer de Prénom</h4>
                             <TextInput
                                 value={name}
@@ -148,7 +160,7 @@ export default function SettingsModal() {
                             />
                         </div>
 
-                        <div className={styles.test}>
+                        <div>
                         <h4>Changer de nom</h4>
                             <TextInput
                                 value={lastname}
@@ -157,7 +169,7 @@ export default function SettingsModal() {
                             />
                         </div>
 
-                        <div className={styles.test}>
+                        <div>
                         <h4>Changer de numéro de téléphone</h4>
                             <TextInput
                                 value={phone}
@@ -174,18 +186,29 @@ export default function SettingsModal() {
                         </Button>
                     </div>
 
+                    <div className={`glassBorder ${styles.section}`}>
+                        <h3>Changer l'adresse email</h3>
+                        <div>
+                            <h4>Nouvelle adresse email</h4>
+                            <TextInput value={email} onChange={e => setEmail(e.target.value)} type="email" />
+                        </div>
+                        <Button className={styles.submitBtn} onClick={handleEmailUpdate}>
+                        Confirmer
+                        </Button>
+                    </div>
+
 
                     <div className={`glassBorder ${styles.section}`}>
                         <h3>Changer le mot de passe</h3>
-                        <div className={styles.test}>
+                        <div>
                             <h4>Mot de passe actuel</h4>
                             <TextInput value={currentPassword} onChange={e => setCurrentPassword(e.target.value)} type="password" />
                         </div>
-                        <div className={styles.test}>
+                        <div>
                             <h4>Nouveau mot de passe</h4>
                             <TextInput value={newPassword} onChange={e => setNewPassword(e.target.value)} type="password" />
                         </div>
-                        <div className={styles.test}>
+                        <div>
                             <h4>Confirmer le nouveau mot de passe</h4>
                             <TextInput value={newPasswordConfirm} onChange={e => setNewPasswordConfirm(e.target.value)} type="password" />
                         </div>
@@ -202,7 +225,7 @@ export default function SettingsModal() {
                     <div className={`glassBorder ${styles.section}`}>
                         <h3>Notifications</h3>
 
-                        <div className={styles.test}>
+                        <div>
                             <h4>Notifications par email</h4>
                             <input
                                 type="checkbox"
@@ -211,7 +234,7 @@ export default function SettingsModal() {
                             />
                         </div>
 
-                        <div className={styles.test}>
+                        <div>
                             <h4>Notifications sur le site</h4>
                             <input
                                 type="checkbox"