Merge branch '192-improve-interaction-of-input-bar-for-changing-identity' into 'dev'

Resolve "Improve interaction of input bar for changing identity"

See merge request keanuapp/keanuapp-weblite!51

src/components/Profile.vue

@@ -147,7 +147,7 @@
             color="primary"
             text
             @click="
-              setDisplayName(editValue);
+              updateDisplayName(editValue);
               showEditDisplaynameDialog = false;
             "
             >{{ $t("menu.ok") }}</v-btn
@@ -241,10 +241,6 @@ export default {
   },
 
   methods: {
-    setDisplayName(name) {
-      this.$matrix.matrixClient.setDisplayName(name);
-    },
-
     setPassword(oldPassword, newPassword) {
       this.settingPassword = true;
       this.passwordErrorMessage = null;

src/components/ProfileInfoPopup.vue

@@ -9,18 +9,32 @@
         <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="
+                        updateDisplayName($event.target.value);
+                        editDisplayName = !editDisplayName;
+                      "
+                      @focus="editDisplayName = !editDisplayName"
+                    />
                   </template>
                 </i18n>
               </div>
               <div v-else>
                 <i18n path="profile_info_popup.identity" tag="span">
                   <template v-slot:displayName>
-                    <b>{{ displayName }}</b>
+                    <input
+                      v-model="displayName"
+                      @blur="
+                        updateDisplayName($event.target.value);
+                        editDisplayName = !editDisplayName;
+                      "
+                      @focus="editDisplayName = !editDisplayName"
+                    />
                   </template>
                 </i18n>
               </div>
@@ -93,6 +107,7 @@ export default {
   data() {
     return {
       showDialog: false,
+      editDisplayName: false
     };
   },
   computed: {
@@ -165,6 +180,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,11 +7,16 @@ export default {
       return this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
     },
 
-    displayName() {
+    displayName: {
-      if (!this.user) {
+      get() {
-        return null;
+        if (!this.user) {
+          return null;
+        }
+        return (this.user.displayName || this.user.userId);
+      },
+      set(newValue) {
+        this.user.displayName = newValue
       }
-      return (this.user.displayName || this.user.userId);
     },
 
     userAvatar() {
@@ -40,5 +45,8 @@ export default {
         this.$navigation.push({path: "/login"}, -1);
       })
     },
+    updateDisplayName(name) {
+      this.$matrix.matrixClient.setDisplayName(name);
+    }
   }
 }