diff --git a/database/migration/sqitch.plan b/database/migration/sqitch.plan
index 5487716..4654b35 100644
--- a/database/migration/sqitch.plan
+++ b/database/migration/sqitch.plan
@@ -9,3 +9,4 @@ user 2024-06-07T20:47:39Z Nils <nils@fedora> # create a user table to store ever
 esp 2024-06-26T08:20:01Z dylan <dylanbossoku@dylan> # create a esp table to stove every esp data
 2024-07-05 2024-07-05T08:58:10Z Nils <nils@fedora> # Grant user the ability to remove users
 2024-07-10 2024-07-10T08:08:27Z Nils <nils@fedora> # Give the esp permission to know it's id
+add_new_permission 2024-12-17T14:46:26Z Colin <colin@JT-24-11-07-Colin> # Add a permission for the user to edit the user's datas
diff --git a/nextjs-interface/src/app/dashboard/users/page.tsx b/nextjs-interface/src/app/dashboard/users/page.tsx
index 3fe859e..3bb0cf9 100644
--- a/nextjs-interface/src/app/dashboard/users/page.tsx
+++ b/nextjs-interface/src/app/dashboard/users/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect } from "react";
 import { useAllUsers } from "@/lib/data";
-import {User, Trash2, Edit} from "lucide-react";
+import {User, Trash2} from "lucide-react";
 import { AddUserElement } from "@/app/ui/dashboard/AddUserElement";
 import {
   Card,
@@ -72,7 +72,7 @@ export default function Page() {
 
               <div className="mb-3 flex items-center gap-4">
 
-                <EditUsersData />
+                <EditUsersData username={user.username} password={user.password}/>
 
                 <Trash2
                     className="delete-icon cursor-pointer"
diff --git a/nextjs-interface/src/app/ui/dashboard/EditUsersData.tsx b/nextjs-interface/src/app/ui/dashboard/EditUsersData.tsx
index 58c954e..d814281 100644
--- a/nextjs-interface/src/app/ui/dashboard/EditUsersData.tsx
+++ b/nextjs-interface/src/app/ui/dashboard/EditUsersData.tsx
@@ -1,41 +1,61 @@
 import {Input} from "@/components/ui/input";
 import {Button} from "@/components/ui/button";
-import React, {useState} from "react";
-import {getToken} from "@/lib/context";
+import React, {useEffect, useState} from "react";
+import {getToken, user} from "@/lib/context";
 import {Edit} from "lucide-react";
 import {
     Popover,
     PopoverContent,
     PopoverTrigger,
 } from "@/components/ui/popover";
+import useFindIpById, {useAllUsers} from "@/lib/data";
+import bcrypt from "bcryptjs";
+
+
+export default function EditUsersData({username, password}: { username: string; password: string }) {
 
-export default function EditUsersData({username, password}:{username: string; password: string}) {
     const [newUsername, setNewUsername] = useState("");
     const [newPassword, setNewPassword] = useState("");
     const [confirm, setConfirm] = React.useState(false);
 
     const updateUsersData = async (newUsername: string, newPassword: string) => {
 
-        const url = `/postgrest/users?username=eq.${username}`;
 
-        const response = await fetch(url, {
+        const hashedPassword: string = await bcrypt.hash(password, 10);
+
+        const token = getToken();
+
+        const editDatas = await fetch(`/postgrest/users?username=eq.${username}`, {
             method: "PATCH",
             headers: {
                 "Content-Type": "application/json",
-                Authorization: `Bearer ${getToken()}`,
+                Authorization: `Bearer ${token}`,
             },
-            body: JSON.stringify({name: newUsername, password: newPassword}),
+            body: JSON.stringify({
+                username: newUsername,
+                password: hashedPassword
+            }),
         });
 
-        if (!response.ok) {
-            const errorData = await response.json();
-            console.error(`An error occurred: ${response.status}`, errorData);
-            throw new Error(`An error occurred: ${response.status}`);
-        } else {
-            window.location.href = `/dashboard/users`;
+        window.location.href = `/dashboard/users`;
+
+        if (!editDatas.ok) {
+
+            const errorData = await editDatas.json();
+
+            console.error(`An error occurred: ${editDatas.status}`, errorData);
+            throw new Error(`An error occurred: ${editDatas.status}`);
+
         }
+
+        console.log("Ancien username: " + username);
+        console.log("Ancien password: " + password);
+        console.log("Nouveau username: " + newUsername);
+        console.log("Nouveau password: " + newPassword);
+
     };
 
+
     return (
         <div className="flex cursor-pointer gap-2">
             <Popover>
@@ -44,6 +64,7 @@ export default function EditUsersData({username, password}:{username: string; pa
                 </PopoverTrigger>
                 <PopoverContent className="mr-5 mt-2 flex w-fit flex-col gap-2 dark:bg-zinc-800">
                     <div className="flex flex-row gap-x-5">
+
                         <Input
                             type="text"
                             placeholder="Nouveau nom d'utilisateur"
@@ -54,6 +75,7 @@ export default function EditUsersData({username, password}:{username: string; pa
                                 setConfirm(true)
                             }}
                         />
+
                         <Input
                             type="text"
                             placeholder="Nouveau mot de passe"
@@ -80,6 +102,7 @@ export default function EditUsersData({username, password}:{username: string; pa
                                 Confirmer
                             </Button>
                         )}
+
                     </div>
                 </PopoverContent>
             </Popover>