modify profil strating setup

frontend/src/Apps/Profil.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import {reactive} from 'vue'
+  import {reactive, ref} from 'vue'
   import {getUser,register} from '../rest/Users.js'
  /* 
   const user = getUser(); 
@@ -29,7 +29,9 @@
   },
   option:"IT",
   degree:"BAC1",
+  password:"CeciEstUnMotDePasse123",
   })
+  
   /*
   Teacher user
   const user =reactive({
@@ -58,6 +60,9 @@
   faculty:"Science",
   })*/
 
+const modif = ref(false);
+
+const toModify = Object.assign({}, user);
 
 </script>
 
@@ -70,7 +75,7 @@
       <img class="subContainter" src="../assets/Clyde.png">
     </div>
       <div class="globalInfos">
-        <div  class="infosContainer" >
+        <div v-if="modif==false" class="infosContainer" >
           <div>
             {{user.firstName}} {{user.lastName.toUpperCase()}}   
           </div>
@@ -85,15 +90,40 @@
             Role: {{user.role}}
           </div>
           <div>
-            <button> Modifier données personnelles </button>
+            <button @click="modif=!modif"> Modifier données personnelles </button>
           </div>
           <div v-if="(user.role==='student')">
             <button>Réinscription</button>
             <button style="float:right;background-color:rgb(150,0,0);">Désinscription</button>
           </div>
         </div>
+        <div v-else class="infosContainer">
+          <div>
+            Profil Picture
+            <input type="file">
+          </div>
+          <div>
+            E-mail:  
+            <input type="mail" v-model="toModify.email" />
+          </div>
+          <div>
+            Address:
+            <input type="text" v-model="toModify.address">
+          </div>
+          <div>
+            Password
+            <input type="password" v-model="toModify.password">
+          </div>
+          <div>
+            Confirm Password
+            <input type="password" id="confirm">
+          </div>
+          <div>
+            <button @click=" modif=!modif">Confirm</button>
+          </div>
+        </div>
       </div>
-      <div class="moreInfos">
+      <div v-if="modif==false"class="moreInfos">
 
         <div v-if="(user.role==='student')">
           <div class="listTitle">