Resolve "Room setup: Not able to edit the room name once the room is created"

src/components/CreateRoom.vue

@@ -46,6 +46,7 @@
             color="black"
             :rules="roomNamerules"
             counter="50"
+            maxlength="50"
             background-color="white"
             v-on:keyup.enter="$refs.topic.focus()"
             :disabled="step > steps.INITIAL"

src/components/RoomAvatarPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker:null" v-if="isRoomAvatarLoaded">
+  <v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker():null" v-if="isRoomAvatarLoaded">
     <v-img v-if="roomAvatar" :src="roomAvatar"/>
     <span v-else class="white--text headline">{{
       roomName.substring(0, 1).toUpperCase()

src/components/RoomInfo.vue

@@ -25,9 +25,33 @@
 
     <div class="members ma-3 pa-3 mt-0 pt-0 text-center">
       <room-avatar-picker />
-      <div class="name">{{ roomName }}</div>
+      <div :class="{'name':true,'cursor-default':!userCanPurgeRoom}">
+        <span
+          v-if="!isEditMode"
+          @click="onRoomNameClicked()"
+        >
+          {{ roomName }}
+        </span>
+        <v-text-field
+          v-model="editedRoomName"
+          ref="editedRoomName"
+          :rules="[(v) => !!v || $t('room.room_name_required')]"
+          :error="roomNameErrorMessage != null"
+          :error-messages="roomNameErrorMessage"
+          required
+          color="black"
+          counter="50"
+          background-color="white"
+          autofocus
+          v-if="isEditMode"
+          maxlength="50"
+          @blur="updateRoomName()"
+          @keyup.enter="updateRoomName()"
+          solo
+        ></v-text-field>
+      </div>
       <div class="topic">{{ roomTopic }}</div>
-      <div class="created-by">
+      <div :class="{'created-by':true, 'cursor-default':!userCanPurgeRoom}">
         {{ $t("room_info.created_by", { user: creator }) }}
       </div>
     </div>

src/components/RoomInfoBottomSheet.vue

@@ -8,7 +8,30 @@
       <div class="text-center current-room">
         <room-avatar-picker />
         <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
-        <div class="h2">{{ roomName }}</div>
+        <div
+          class="h2"
+          v-if="!isEditMode"
+          @click="onRoomNameClicked()"
+        >
+          {{ roomName }}
+        </div>
+        <v-text-field
+          v-model="editedRoomName"
+          ref="editedRoomName"
+          :rules="[(v) => !!v || $t('room.room_name_required')]"
+          :error="roomNameErrorMessage != null"
+          :error-messages="roomNameErrorMessage"
+          required
+          color="black"
+          counter="50"
+          background-color="white"
+          autofocus
+          v-if="isEditMode"
+          maxlength="50"
+          @blur="updateRoomName()"
+          @keyup.enter="updateRoomName()"
+          solo
+        ></v-text-field>
         <v-btn
           id="btn-room-details"
           height="20px"

src/components/roomInfoMixin.js

@@ -3,7 +3,10 @@ export default {
     return {
       roomJoinRule: null,
       userCanChangeJoinRule: false,
-      userCanPurgeRoom: false
+      userCanPurgeRoom: false,
+      editedRoomName: "",
+      isEditMode: false,
+      roomNameErrorMessage: null
     }
   },
   mounted() {
@@ -88,6 +91,20 @@ export default {
     },
   },
   methods: {
+    onRoomNameClicked() {
+      if(this.userCanPurgeRoom) {
+        this.isEditMode = !this.isEditMode;
+        this.editedRoomName = this.roomName;
+      }
+    },
+    updateRoomName() {
+      if(this.editedRoomName) {
+        this.$matrix.matrixClient.setRoomName(this.room.roomId, this.editedRoomName);
+        this.isEditMode = !this.isEditMode;
+      } else {
+        this.$refs.editedRoomName.focus();
+      }
+    },
     setRoomJoinRule(ignoredJoinRule) {
       // Do nothing in the general mixin, override in RoomInfo.vue
     },