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

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>