From ab749cd9320c304659d8a601148e3d315ab22b0e Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 20 Feb 2022 11:38:22 +0200
Subject: [PATCH 1/4] Change identity from profile popup

---
 src/components/ProfileInfoPopup.vue | 25 +++++++++++++++++++++++--
 src/components/profileInfoMixin.js  | 16 ++++++++++++----
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index 24bb16a..9237276 100644
--- a/src/components/ProfileInfoPopup.vue
+++ b/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;
diff --git a/src/components/profileInfoMixin.js b/src/components/profileInfoMixin.js
index 7da0444..87758ec 100644
--- a/src/components/profileInfoMixin.js
+++ b/src/components/profileInfoMixin.js
@@ -7,11 +7,16 @@ export default {
       return this.$matrix.matrixClient.getUser(this.$matrix.currentUserId);
     },
 
-    displayName() {
-      if (!this.user) {
-        return null;
+    displayName: {
+      get() {
+        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);
       })
     },
+    setDisplayName(name) {
+      this.$matrix.matrixClient.setDisplayName(name);
+    }
   }
 }
\ No newline at end of file

From d4351a3a438f6713658d403a642788adec7dffb9 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 20 Feb 2022 11:41:35 +0200
Subject: [PATCH 2/4] renamed method

---
 src/components/ProfileInfoPopup.vue | 2 +-
 src/components/profileInfoMixin.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index 9237276..ae441fc 100644
--- a/src/components/ProfileInfoPopup.vue
+++ b/src/components/ProfileInfoPopup.vue
@@ -16,7 +16,7 @@
                     <input
                       v-model="displayName"
                       @blur="
-                        setDisplayName($event.target.value);
+                        updateDisplayName($event.target.value);
                         editDisplayName = !editDisplayName;
                       "
                       @focus="editDisplayName = !editDisplayName"
diff --git a/src/components/profileInfoMixin.js b/src/components/profileInfoMixin.js
index 87758ec..b93ba9a 100644
--- a/src/components/profileInfoMixin.js
+++ b/src/components/profileInfoMixin.js
@@ -45,7 +45,7 @@ export default {
         this.$navigation.push({path: "/login"}, -1);
       })
     },
-    setDisplayName(name) {
+    updateDisplayName(name) {
       this.$matrix.matrixClient.setDisplayName(name);
     }
   }

From aebe869a4edfe46aa0ac9f196f523e76d7e94bbc Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 20 Feb 2022 12:04:43 +0200
Subject: [PATCH 3/4] updated else section

---
 src/components/ProfileInfoPopup.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index ae441fc..d66b826 100644
--- a/src/components/ProfileInfoPopup.vue
+++ b/src/components/ProfileInfoPopup.vue
@@ -27,7 +27,14 @@
               <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>

From a03640c380fb329f1b8365711522c26614c6e939 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 20 Feb 2022 12:14:24 +0200
Subject: [PATCH 4/4] moved updateDisplayName to profileMixin

---
 src/components/Profile.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index c598129..f947591 100644
--- a/src/components/Profile.vue
+++ b/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;