Profile view without edition

frontend/src/views/Profile.vue

 <template>
     <div class="profile">
         <page-title pagetitle="Profil"/>
-        <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 class="profile-top-area" >
+            <avatar size=250 :pathToImage="this.profile.avatar" :username="this.profile.login"/>
+            <div>
+                <p class="profile-login">{{profile.login}}</p>
+                <p class="profile-mail">{{profile.mail}}</p>
+            </div>
+            
         </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 class="profile-bottom-area">
+            <div class="profile-name">
+                <p class="profile-label">Prénom</p>
+                <p>{{profile.firstname}}</p>
+            </div>
+            
+            <div class="profile-name">
+                <p class="profile-label">Nom</p>
+                <p>{{profile.lastname}}</p>
+            </div>
         </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"/>
+        <form action="/">
                 
             <div class="submit-buttons">
-                <svg-button id="validate" svg="/icons/validate.svg"/>
                 <svg-button id="back" svg="/icons/back.svg"/>
             </div> 
         </form>
@@ -45,7 +39,6 @@ import Avatar from '../components/Avatar.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
 
 
@@ -57,8 +50,7 @@ export default {
   components: {
     PageTitle,
     Avatar,
-    SvgButton,
-    PwdInput
+    SvgButton
   },
   methods: {
     getUserInfo: async function(){
@@ -69,26 +61,42 @@ export default {
       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];
+        fetch(this.$apiRoot+'/user/'+this.$route.params.id, {method: 'GET'})
+        .then(response => response.json())
+        .then(user => {
+            let userJson = user[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));
+            console.log(userObj);
+            console.log(this.profile);
+            let props = Object.getOwnPropertyNames(userObj);
+            let areIdentical = true;
+
+
+            for (let i = 0; i < props.length; i++) {
+                let propName = props[i];
+
+                // If values of same property are not equal,
+                // objects are not equivalent
+                if (userObj[propName] !== this.profile[propName]) {
+                    areIdentical = false;
+                }
+            }
+
+            if(areIdentical){
+                return;
+            }
+            else{
+                console.log("svp")
+                this.profile=userObj
+            }
+        })
+        
     }
   },
   computed :{
-      editable () {
-          return this.user.id_user == this.$route.params.id || this.user.id_role == 2
-      }
   },
   data () {
     return {
-        dataLoaded: false,    
         user: new User(0, 0, '', '', '', '', ''),
         token: '',
         profile: new User(0, 0, '', '', '', '', ''),
@@ -100,12 +108,67 @@ export default {
       this.getProfileInfo();
   },
 
-  beforeUpdate() {
+  updated() {
+      console.log("aidez moi")
       this.getProfileInfo();
   }
 }
 </script>
 
 <style>
+.profile *{
+    //background: rgba(255, 255, 255, 0.1);
+    justify-content: center;
+}
+
+.profile{
+    color: white;
+    width: 80%;
+    margin: 100px auto;
+}
+
+
+.profile-top-area, .bottom-area{
+    display: flex;
+    text-align: left;
+}
+
+.profile-top-area .profile-login{
+    font-family: Shojumaru;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 96px;
+    line-height: 127px;
+    margin: 0 40px
+}
+
+.profile-top-area .profile-mail{
+    font-style: normal;
+    font-weight: normal;
+    font-size: 36px;
+    line-height: 127px;
+    margin: 0 40px
+}
+
+.profile-bottom-area{
+    display: flex;
+    justify-content: center;
+    margin: 60px 100px 0 100px
+}
+
+.profile-bottom-area .profile-label{
+    color: black;
+    font-weight: bold;
+}
+
+.profile-name{
+    width: 100%;
+    display: flex;
+    font-size: 36px;
+    justify-content: space-around;
+    text-align: right;
+    
+}
+
 
 </style>