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;