profile elements without css render

frontend/public/icons/edit.svg

+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.3332 10L39.9998 20.6667M2.66651 47.3333H12.5047C13.0352 47.3333 13.5439 47.1226 13.919 46.7476L46.5856 14.0809C47.3667 13.2998 47.3667 12.0335 46.5856 11.2525L38.7474 3.41422C37.9663 2.63317 36.7 2.63317 35.919 3.41422L3.25229 36.0809C2.87722 36.456 2.6665 36.9647 2.6665 37.4951L2.66651 47.3333Z" stroke="white" stroke-width="5"/>
+</svg>
\ No newline at end of file

frontend/src/router/index.js

@@ -33,7 +33,7 @@ const routes = [
     component: () => import('../views/Login.vue')
   },
   {
-    path: '/profile',
+    path: '/profile/:id',
     name: 'Profile',
     component: () => import('../views/Profile.vue')
   }

frontend/src/views/Profile.vue

 <template>
     <div class="profile">
         <page-title pagetitle="Profil"/>
-        <div>
-            <avatar size=250 :src="'avatar/'+this.user.AVATAR" :username="this.user.LOGIN"/>
-            <svg-button svg="icons/edit.svg"/>
+        <div class="avatar-area" >
+            <avatar size=250 :avatar="this.profile.avatar" :username="this.profile.login"/>
+            <svg-button v-if="editable" id="edit-avatar-button" svg="icons/edit.svg"/>
         </div>
+        <div class="login-area">
+            <p>{{profile.login}}</p>
+            <svg-button v-if="editable" id="edit-login-button" svg="icons/edit.svg"/>
+        </div>
+        <div class="mail-area">
+            <p>{{profile.mail}}</p>
+            <svg-button v-if="editable" id="edit-mail-button" svg="icons/edit.svg"/>
+        </div>
+        <div class="firstname-area">
+            <p class="label">Prénom</p>
+            <p>{{profile.firstname}}</p>
+            <svg-button v-if="editable" id="edit-firstname-button" svg="icons/edit.svg"/>
+        </div>
+        
+        <div class="lastname-area">
+            <p class="label">Nom</p>
+            <p>{{profile.lastname}}</p>
+            <svg-button v-if="editable" id="edit-lastname-button" svg="icons/edit.svg"/>
+        </div>
+        
+        <form class="password-area" v-if="editable">
+            <pwd-input id="password1" label="Nouveau mot de passe"/>
+            <pwd-input id="password2" label="Confirmer"/>
+                
+            <div class="submit-buttons">
+                <svg-button id="validate" svg="/icons/validate.svg"/>
+                <svg-button id="back" svg="/icons/back.svg"/>
+            </div> 
+        </form>
+        
       
 
   </div>
@@ -12,35 +42,66 @@
 
 <script>
 import Avatar from '../components/Avatar.vue';
-import PageTitle from '../components/PageTitle.vue'
+import PageTitle from '../components/PageTitle.vue';
 import SvgButton from '../components/SvgButton.vue';
+import User from '@/model/user.js'
+import PwdInput from '../components/form/PwdInput.vue';
 // @ is an alias to /src
 
 
 export default {
   name: 'profile',
+  props: {
+    id: {type: Number}
+  },
   components: {
     PageTitle,
     Avatar,
-    SvgButton
+    SvgButton,
+    PwdInput
   },
   methods: {
-      getUserInfo: async function(){
-      let user = localStorage.getItem('user');
-      console.log(user);
-      this.user = {"ID_USER":"3","ID_ROLE":"1","LOGIN":"dupontd95","PASWORD":"hasheddupontpwd","AVATAR":"macdougall.jpg","LASTNAME":"dupont","FIRSTNAME":"dupond","MAIL":"dupont.dupond@free.fr","BAN_ACCOUNT":"0","LAST_IP":"92.169.12.3"};
+    getUserInfo: async function(){
+      let userJson = JSON.parse(localStorage.getItem('user'));
+      let user = new User(userJson.id_user, userJson.id_role, userJson.login, userJson.avatar, userJson.lastname, userJson.firstname, userJson.mail);
+      let token = userJson.jwt_token;
+      this.user = user;
+      this.token = token;
+    },
+    getProfileInfo: async function (){
+        const head = new Headers();
+        head.append('Authorization', this.token);
+        await fetch(this.$apiRoot+'/user/'+this.$route.params.id, {method: 'GET'})
+        .then(res => res.json())
+        .then(json => {
+            let userJson = json[0];
+            let userObj = new User(userJson.ID_USER, userJson.ID_ROLE, userJson.LOGIN, userJson.AVATAR, userJson.LASTNAME, userJson.FIRSTNAME, userJson.MAIL);
+            this.profile=userObj;
+            
+        }).catch( (err) => console.log(err));
     }
-
-    
+  },
+  computed :{
+      editable () {
+          return this.user.id_user == this.$route.params.id || this.user.id_role == 2
+      }
   },
   data () {
     return {
-      user: {}
+        dataLoaded: false,    
+        user: new User(0, 0, '', '', '', '', ''),
+        token: '',
+        profile: new User(0, 0, '', '', '', '', ''),
     }
   },
 
   mounted () {
       this.getUserInfo();
+      this.getProfileInfo();
+  },
+
+  beforeUpdate() {
+      this.getProfileInfo();
   }
 }
 </script>