add section to update user password in parameters modal

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

@@ -11,6 +11,7 @@ import ExportCalendarBtn from "../../../../components/ExportCalendarBtn/ExportBt
 import { useNavigate } from "react-router";
 import toggleEmailNotifications from "../../../../utils/users/toggleEmailNotifications";
 import toggleWebNotifications from "../../../../utils/users/toggleWebNotifications";
+import updateUserPassword from "../../../../utils/users/updateUserPassword";
 
 
 interface TaskType {
@@ -55,6 +56,10 @@ export default function SettingsModal() {
     const [emailNotifications, setEmailNotifications] = useState<number>(user?.email_notifications ?? 0);
     const [webNotifications, setWebNotifications] = useState<number>(user?.web_notifications ?? 0);
 
+    const [currentPassword, setCurrentPassword] = useState<string>('');
+    const [newPassword, setNewPassword] = useState<string>('');
+    const [newPasswordConfirm, setNewPasswordConfirm] = useState<string>('');
+
     const handleLogout = (): void => {
         logout();
     };
@@ -104,6 +109,17 @@ export default function SettingsModal() {
         }
     };
 
+    const handlePasswordUpdate = async () => {
+        try {
+            await updateUserPassword(currentPassword, newPassword, newPasswordConfirm);
+            setCurrentPassword('');
+            setNewPassword('');
+            setNewPasswordConfirm('');
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
 
     return (
         <>
@@ -158,6 +174,26 @@ export default function SettingsModal() {
                         </Button>
                     </div>
 
+
+                    <div className={`glassBorder ${styles.section}`}>
+                        <h3>Changer le mot de passe</h3>
+                        <div className={styles.test}>
+                            <h4>Mot de passe actuel</h4>
+                            <TextInput value={currentPassword} onChange={e => setCurrentPassword(e.target.value)} type="password" />
+                        </div>
+                        <div className={styles.test}>
+                            <h4>Nouveau mot de passe</h4>
+                            <TextInput value={newPassword} onChange={e => setNewPassword(e.target.value)} type="password" />
+                        </div>
+                        <div className={styles.test}>
+                            <h4>Confirmer le nouveau mot de passe</h4>
+                            <TextInput value={newPasswordConfirm} onChange={e => setNewPasswordConfirm(e.target.value)} type="password" />
+                        </div>
+                        <Button className={styles.submitBtn} onClick={handlePasswordUpdate}>
+                            Confirmer
+                        </Button>
+                    </div>
+
                     <div className={`glassBorder ${styles.section}`}>
                         <h3>Apparence</h3>
                         <ThemeSwitcher/>