Initial work on setting user name when joining room

src/assets/css/chat.scss

@@ -3,6 +3,38 @@
 $admin-bg: black;
 $admin-fg: white;
 
+.chat-header {
+    margin: 0;
+    padding: 0;
+    height: 72px;
+    background-color: #ffffff;
+    border-bottom: 1px solid #eeeeee;
+    .chat-header-row {
+        margin: 0;
+        padding: 4px 10px;
+        align-items: center;
+        height: 100%;
+    }
+    .num-members {
+        font-family: 'Inter', sans-serif;
+        font-weight: 400;
+        font-size: 12 * $chat-text-size;
+        color: black;
+    }
+    .v-btn.leave-button {
+        font-family: 'Inter', sans-serif;
+        font-weight: 700;
+        font-size: 11 * $chat-text-size;
+        color: white;
+        background-color: #f74e4e !important;
+        border: none;
+        border-radius: $chat-standard-padding / 2;
+        height: $chat-standard-padding;
+        margin-top: $chat-standard-padding-xs;
+        margin-bottom: $chat-standard-padding-xs;
+    }
+}
+
 .chat-root {
     position: absolute;
     left: 0px;
@@ -17,36 +49,6 @@ $admin-fg: white;
     background-color: $chat-background;
     overflow: hidden;
 
-    .chat-header {
-        margin: 0;
-        padding: 0;
-        background-color: #ffffff;
-        border-bottom: 1px solid #eeeeee;
-        .chat-header-row {
-            margin: 0;
-            padding: 4px 10px;
-            align-items: center;
-        }
-        .num-members {
-            font-family: 'Inter', sans-serif;
-            font-weight: 400;
-            font-size: 12 * $chat-text-size;
-            color: black;
-        }
-        .v-btn.leave-button {
-            font-family: 'Inter', sans-serif;
-            font-weight: 700;
-            font-size: 11 * $chat-text-size;
-            color: white;
-            background-color: #f74e4e !important;
-            border: none;
-            border-radius: $chat-standard-padding / 2;
-            height: $chat-standard-padding;
-            margin-top: $chat-standard-padding-xs;
-            margin-bottom: $chat-standard-padding-xs;
-        }
-    }
-
     .chat-content {
         margin: 0;
         padding-top: $chat-standard-padding-s;
@@ -371,7 +373,8 @@ $admin-fg: white;
 .room-name {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
-    font-size: 21 * $chat-text-size;
+    font-size: 14 * $chat-text-size;
+    text-transform: uppercase;
     color: black;
 }
 

src/assets/usernames.txt

@@ -0,0 +1,5 @@
+Guest Pangolin
+Guest Cat
+Guest Dog
+Guest Iguana
+Guest Sloth

src/components/Join.vue

@@ -21,6 +21,16 @@
       <div class="join-message">
         <!-- Join the group chat in a web browser or with the Keanu app. -->
       </div>
+      <v-combobox
+        v-if="!currentUser || currentUser"
+        @update:search-input="updateDisplayName"
+        :items="defaultDisplayNames"
+        :value="displayName"
+        label="User name"
+        outlined
+        dense
+      ></v-combobox>
+
       <!--<v-btn
         class="btn-light"
         large
@@ -76,6 +86,8 @@ export default {
       loadingMessage: null,
       waitingForInfo: true,
       waitingForMembership: false,
+      displayName: null,
+      defaultDisplayNames: ["Guest Pandolin", "Guest Iguana", "Guest Horse"],
     };
   },
   mounted() {
@@ -112,6 +124,13 @@ export default {
         .catch((ignoredErr) => {
           this.waitingForMembership = false;
         });
+    } 
+    if (!this.currentUser || this.currentUser.is_guest) {
+      var values = require("!!raw-loader!../assets/usernames.txt").default.split('\n').filter((item) => {
+        return item.length > 0;
+      })
+      this.displayName = values[Math.floor(Math.random() * values.length)];
+      this.defaultDisplayNames = values;
     }
 
     if (this.roomId.startsWith("#")) {
@@ -147,7 +166,10 @@ export default {
   methods: {
     onMyMembership(room, membership, ignoredprevMembership) {
       if (room && room.roomId == this.roomId && membership == "join") {
-        this.$navigation.push({ name: "Chat", params: { roomId: this.roomId } },-1);
+        this.$navigation.push(
+          { name: "Chat", params: { roomId: this.roomId } },
+          -1
+        );
       }
     },
 
@@ -166,13 +188,20 @@ export default {
       if (this.currentUser) {
         clientPromise = this.$matrix.getMatrixClient(this.currentUser);
       } else {
-        clientPromise = this.$store.dispatch("auth/login", this.guestUser);
+        clientPromise = this.$store.dispatch("auth/login", this.guestUser)
       }
       return clientPromise
-        .then((ignoreduser) => {
+        .then(function(user) {
+          if ((this.currentUser && !this.currentUser.is_guest) || !this.displayName) {
+            return Promise.resolve(user);
+          } else {
+            return this.$matrix.matrixClient.setDisplayName(this.displayName, undefined);
+          }   
+        }.bind(this))
+        .then(function(ignoreduser) {
           this.loadingMessage = "Joining room...";
           return this.$matrix.matrixClient.joinRoom(this.roomId);
-        })
+        }.bind(this))
         .then((room) => {
           this.loading = false;
           this.loadingMessage = null;
@@ -190,6 +219,10 @@ export default {
           this.loadingMessage = err.toString();
         });
     },
+
+    updateDisplayName(value) {
+      this.displayName = value;
+    }
   },
 };
 </script>