Change identity from profile popup

src/components/ProfileInfoPopup.vue

@@ -9,11 +9,18 @@
         <div class="you-are">{{ $t("profile_info_popup.you_are") }}</div>
         <v-container fluid>
           <v-row>
-            <v-col class="username" cols="pa-2">
+            <v-col :class="['username',{'editable': editDisplayName }]" cols="pa-2" ref="username">
               <div v-if="$matrix.currentUser.is_guest">
                 <i18n path="profile_info_popup.identity_temporary" tag="span">
                   <template v-slot:displayName>
-                    <b>{{ displayName }}</b>
+                    <input
+                      v-model="displayName"
+                      @blur="
+                        setDisplayName($event.target.value);
+                        editDisplayName = !editDisplayName;
+                      "
+                      @focus="editDisplayName = !editDisplayName"
+                    />
                   </template>
                 </i18n>
               </div>
@@ -96,6 +103,7 @@ export default {
   data() {
     return {
       showDialog: false,
+      editDisplayName: false
     };
   },
   computed: {
@@ -168,6 +176,19 @@ export default {
   .username {
     border-radius: 4px;
     background-color: #f5f5f5;
+
+    &.editable {
+      background-color: unset;
+      box-shadow: 0px 2px 6px rgb(0 0 0 / 8%);
+    }
+
+    input {
+      width: 100%;
+
+      &:focus {
+        outline: none;
+      }
+    }
   }
   .more-container {
     border-radius: 10px;

src/components/profileInfoMixin.js

@@ -7,12 +7,17 @@ export default {
       return this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
     },
 
-    displayName() {
+    displayName: {
+      get() {
         if (!this.user) {
           return null;
         }
         return (this.user.displayName || this.user.userId);
       },
+      set(newValue) {
+        this.user.displayName = newValue
+      }
+    },
 
     userAvatar() {
       if (!this.user || !this.user.avatarUrl) {
@@ -40,5 +45,8 @@ export default {
         this.$navigation.push({path: "/login"}, -1);
       })
     },
+    setDisplayName(name) {
+      this.$matrix.matrixClient.setDisplayName(name);
+    }
   }
 }