Guest avatars

src/assets/css/join.scss

@@ -38,6 +38,12 @@
         right: 0;
         margin: 20px;
     }
+
+    .join-user-info {
+        display: flex;
+        flex-wrap: nowrap;
+        max-width: 40%;
+    }
 }
 
 .join-avatar {

src/components/Chat.vue

@@ -650,10 +650,10 @@ export default {
     showAttachmentPicker() {
       // Guests not currently allowed to send attachments (=actually upload them)
       // See https://matrix.org/docs/spec/client_server/r0.2.0#guest-access
-      if (this.$matrix.currentUser && this.$matrix.currentUser.is_guest) {
+      // if (this.$matrix.currentUser && this.$matrix.currentUser.is_guest) {
-        this.showNotAllowedForGuests = true;
+      //   this.showNotAllowedForGuests = true;
-        return;
+      //   return;
-      }
+      // }
       this.$refs.attachment.click()
     },
 

src/components/Join.vue

@@ -21,15 +21,26 @@
       <div class="join-message">
         <!-- Join the group chat in a web browser or with the Keanu app. -->
       </div>
-      <v-combobox
+      <v-container class="join-user-info">
-        v-if="!currentUser || currentUser"
+        <v-row>
-        @update:search-input="updateDisplayName"
+          <v-col class="flex-grow-0 flex-shrink-0">
-        :items="defaultDisplayNames"
+            <v-avatar @click="showAvatarPicker = true">
-        :value="displayName"
+              <v-img v-if="userAvatar" :src="userAvatar.image" />
-        label="User name"
+            </v-avatar>
-        outlined
+          </v-col>
-        dense
+          <v-col class="flex-shrink-1 flex-grow-1">
-      ></v-combobox>
+            <v-combobox
+              v-if="!currentUser || currentUser"
+              @update:search-input="updateDisplayName"
+              :items="defaultDisplayNames"
+              :value="displayName"
+              label="User name"
+              outlined
+              dense
+            ></v-combobox>
+          </v-col>
+        </v-row>
+      </v-container>
 
       <!--<v-btn
         class="btn-light"
@@ -67,6 +78,48 @@
 
       <div v-if="loadingMessage">{{ loadingMessage }}</div>
     </div>
+
+    <v-dialog
+      scrollable
+      :fullscreen="$vuetify.breakpoint.xs"
+      width="500"
+      transition="dialog-bottom-transition"
+      v-model="showAvatarPicker"
+    >
+      <v-card>
+        <v-toolbar dark flat color="primary">
+          <v-btn icon dark @click="showAvatarPicker = false">
+            <v-icon>close</v-icon>
+          </v-btn>
+          <v-toolbar-title>Select an Avatar</v-toolbar-title>
+          <v-spacer></v-spacer>
+        </v-toolbar>
+        <v-card-text>
+          <v-container row wrap>
+            <v-col
+              v-for="avatar in availableAvatars"
+              :key="avatar.id"
+              xs4
+              sm3
+              d-flex
+            >
+              <v-card tile flat class="d-flex">
+                <v-card-text class="d-flex">
+                  <v-avatar
+                    size="48"
+                    @click="selectAvatar(avatar)"
+                    class="avatar-picker-avatar"
+                    :class="{ current: avatar === userAvatar }"
+                  >
+                    <img :src="avatar.image" />
+                  </v-avatar>
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </v-container>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -86,12 +139,17 @@ export default {
       loadingMessage: null,
       waitingForInfo: true,
       waitingForMembership: false,
+      userAvatar: null,
       displayName: null,
-      defaultDisplayNames: ["Guest Pandolin", "Guest Iguana", "Guest Horse"],
+      defaultDisplayNames: [],
+      availableAvatars: [],
+      showAvatarPicker: false,
     };
   },
   mounted() {
     this.$matrix.on("Room.myMembership", this.onMyMembership);
+    this.availableAvatars = util.getDefaultAvatars();
+    this.userAvatar = this.availableAvatars[0];
 
     this.roomId = this.$matrix.currentRoomId;
     this.roomName = this.roomId;
@@ -124,11 +182,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) => {
+      var values = require("!!raw-loader!../assets/usernames.txt")
-        return item.length > 0;
+        .default.split("\n")
-      })
+        .filter((item) => {
+          return item.length > 0;
+        });
       this.displayName = values[Math.floor(Math.random() * values.length)];
       this.defaultDisplayNames = values;
     }
@@ -188,20 +248,48 @@ 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(function(user) {
+        .then(
-          if ((this.currentUser && !this.currentUser.is_guest) || !this.displayName) {
+          function (user) {
-            return Promise.resolve(user);
+            if (
-          } else {
+              (this.currentUser && !this.currentUser.is_guest) ||
-            return this.$matrix.matrixClient.setDisplayName(this.displayName, undefined);
+              !this.displayName
-          }   
+            ) {
-        }.bind(this))
+              return Promise.resolve(user);
-        .then(function(ignoreduser) {
+            } else {
-          this.loadingMessage = "Joining room...";
+              return this.$matrix.matrixClient.setDisplayName(
-          return this.$matrix.matrixClient.joinRoom(this.roomId);
+                this.displayName,
-        }.bind(this))
+                undefined
+              );
+            }
+          }.bind(this)
+        )
+        .then(
+          function () {
+            if (
+              (this.currentUser && !this.currentUser.is_guest) ||
+              !this.userAvatar
+            ) {
+              return Promise.resolve("no avatar");
+            } else {
+              return util.setAvatar(
+                this.$matrix.matrixClient,
+                this.userAvatar.image,
+                function (progress) {
+                  console.log("Progress: " + JSON.stringify(progress));
+                }
+              );
+            }
+          }.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;
@@ -222,7 +310,12 @@ export default {
 
     updateDisplayName(value) {
       this.displayName = value;
-    }
+    },
+
+    selectAvatar(avatar) {
+      this.userAvatar = avatar;
+      this.showAvatarPicker = false;
+    },
   },
 };
 </script>

src/components/RoomInfo.vue

@@ -1,45 +1,65 @@
 <template>
   <div v-if="room">
-    <v-container fluid>
+    <div class="chat-header">
-      <v-row class="chat-header-row align-center">
+      <v-container fluid>
+        <v-row class="chat-header-row align-center">
+          <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
+            <v-btn
+              v-show="$navigation && $navigation.canPop()"
+              icon
+              @click.stop="$navigation.pop"
+            >
+              <v-icon>arrow_back</v-icon>
+            </v-btn>
+          </v-col>
 
-        <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
+          <!-- <v-col class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
-          <v-btn v-show="$navigation && $navigation.canPop()" icon @click.stop="$navigation.pop">
-            <v-icon>arrow_back</v-icon>
-          </v-btn>
-        </v-col>
-
-        <!-- <v-col class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
           <v-btn icon class="members-icon" @click.stop="showRoomInfo">
             <v-icon>people</v-icon>
           </v-btn>
           <div class="num-members">{{ memberCount }}</div>
         </v-col> -->
 
-        <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
+          <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
-          <div class="room-name" v-if="room">{{ room.summary.info.title }}</div>        
+            <div class="room-name" v-if="room">
-        </v-col>
+              {{ room.summary.info.title }}
-        <!-- <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
+            </div>
+          </v-col>
+          <!-- <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
           <v-btn class="leave-button">Leave</v-btn>
         </v-col> -->
-      </v-row>
+        </v-row>
-    </v-container>
+      </v-container>
+    </div>
 
     <v-card class="members ma-3">
-      <v-card-title>Members<v-spacer></v-spacer><div>{{ room.getJoinedMemberCount() }}</div></v-card-title>
+      <v-card-title
+        >Members<v-spacer></v-spacer>
+        <div>{{ room.getJoinedMemberCount() }}</div></v-card-title
+      >
       <v-card-text>
-        <div class="member ma-2" v-for="member in room.getJoinedMembers()" :key="member.userId">
+        <div
-                <v-avatar class="avatar" size="40" color="grey">
+          class="member ma-2"
-        <img
+          v-for="member in room.getJoinedMembers()"
-          v-if="memberAvatar(member)"
+          :key="member.userId"
-          :src="memberAvatar(member)"
+        >
-        />
+          <v-avatar class="avatar" size="40" color="grey">
-        <span v-else class="white--text headline">{{
+            <img v-if="memberAvatar(member)" :src="memberAvatar(member)" />
-          member.name.substring(0, 1).toUpperCase()
+            <span v-else class="white--text headline">{{
-        }}</span>
+              member.name.substring(0, 1).toUpperCase()
-      </v-avatar>
+            }}</span>
-          {{ member.user ? member.user.displayName : member.name }}{{ (member.userId == $matrix.currentUserId) ? " (you)" : "" }}
+          </v-avatar>
-          <v-btn color="black" v-if="member.userId == $matrix.currentUserId" text absolute right @click.stop="showEditDialog = true">edit</v-btn>
+          {{ member.user ? member.user.displayName : member.name
+          }}{{ member.userId == $matrix.currentUserId ? " (you)" : "" }}
+          <v-btn
+            color="black"
+            v-if="member.userId == $matrix.currentUserId"
+            text
+            absolute
+            right
+            @click.stop="showEditDialog = true"
+            >edit</v-btn
+          >
         </div>
       </v-card-text>
     </v-card>
@@ -54,22 +74,29 @@
       </v-card-text>
     </v-card>
 
-      <!-- EDIT dialog -->
+    <!-- EDIT dialog -->
-      <v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
+    <v-dialog v-model="showEditDialog" class="ma-0 pa-0" width="50%">
-        <v-card>
+      <v-card>
-          <v-card-title>Display name</v-card-title>
+        <v-card-title>Display name</v-card-title>
-          <v-card-text>
+        <v-card-text>
-            <v-text-field v-model="displayName" />
+          <v-text-field v-model="displayName" />
-          </v-card-text>
+        </v-card-text>
-          <v-divider></v-divider>
+        <v-divider></v-divider>
-          <v-card-actions>
+        <v-card-actions>
-            <v-spacer></v-spacer>
+          <v-spacer></v-spacer>
-            <v-btn text @click="showEditDialog = false">Cancel</v-btn>
+          <v-btn text @click="showEditDialog = false">Cancel</v-btn>
-            <v-btn color="primary" text @click="$matrix.matrixClient.setDisplayName(displayName);showEditDialog = false">Ok</v-btn>
+          <v-btn
-          </v-card-actions>
+            color="primary"
-        </v-card>
+            text
-      </v-dialog>
+            @click="
-
+              $matrix.matrixClient.setDisplayName(displayName);
+              showEditDialog = false;
+            "
+            >Ok</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -82,7 +109,7 @@ export default {
       showEditDialog: false,
       user: null,
       displayName: "",
-    }
+    };
   },
   mounted() {
     this.$matrix.on("Room.timeline", this.onEvent);
@@ -106,8 +133,8 @@ export default {
       handler(newVal, ignoredOldVal) {
         console.log("RoomInfo: Current room changed");
         this.memberCount = newVal.getJoinedMemberCount();
-      }
+      },
-    }
+    },
   },
 
   methods: {
@@ -124,9 +151,7 @@ export default {
       this.memberCount = this.room.getJoinedMemberCount();
     },
 
-    showRoomInfo() {
+    showRoomInfo() {},
-      
-    },
 
     memberAvatar(member) {
       if (member) {
@@ -142,14 +167,20 @@ export default {
     },
 
     upgradeAccount() {
-      this.$matrix.upgradeGuestAccount()
+      this.$matrix
-      .then(() => {
+        .upgradeGuestAccount()
-        console.log("Done");
+        .then(user => {
-      })
+          // Done, login with the "new" account to get a real token instead of our guest token.
-      .catch(err => {
+          this.user = user;
-        console.log("ERROR", err);
+          return this.$store.dispatch("auth/login", this.user);
-      })
+        })
-    }
+        .then(() => {
+          console.log("Upgrade done!");
+        })
+        .catch((err) => {
+          console.log("ERROR", err);
+        });
+    },
   },
 };
 </script>

src/plugins/utils.js

@@ -365,6 +365,56 @@ class Util {
         // key wasn't found
         return null;
     }
+
+    _importAll(r) {
+        var images = [];
+        r.keys().forEach(res => {
+            console.log("Avatar", res);
+            // // Remove"./"
+            // const parts = res.split("/");
+            // const pack = parts[1];
+            // const sticker = parts[2].split(".")[0];
+            const image = r(res);
+            images.push({ id: res, image: image });
+            // if (stickerPacks[pack] !== undefined) {
+            //     stickerPacks[pack].push({ image: image, name: sticker });
+            // }
+        });
+        return images;
+    }
+
+    getDefaultAvatars() {
+        return this._importAll(require.context('../assets/avatars/', true, /\.(jpeg|jpg|png)$/));
+    }
+
+    setAvatar(matrixClient, file, onUploadProgress) {
+        return new Promise((resolve, reject) => {
+            axios.get(file, { responseType: 'arraybuffer' })
+                .then(response => {
+                    const opts = {
+                        type: response.headers['content-type'].split(';')[0],
+                        name: "Avatar",
+                        progressHandler: onUploadProgress,
+                        onlyContentUri: false
+                    };
+                    matrixClient.uploadContent(response.data, opts)
+                        .then((response) => {
+                            const uri = response.content_uri;
+                            return matrixClient.setProfileInfo('avatar_url', { avatar_url: uri });
+                        })
+                        .then(result => {
+                            resolve(result);
+                        })
+                        .catch(err => {
+                            reject(err);
+                        });
+                })
+                .catch(err => {
+                    reject(err);
+                });
+
+        })
+    }
 }
 export default new Util();
 

src/services/matrix.service.js

@@ -65,10 +65,20 @@ export default {
                     var promiseLogin;
 
                     if (user.is_guest) {
+                        // Generate random username and password. We don't user REAL matrix
+                        // guest accounts because 1. They are not allowed to post media, 2. They
+                        // can not use avatars and 3. They can not seamlessly be upgraded to real accounts.
+                        //
+                        // Instead, we use an ILAG approach, Improved Landing as Guest.
+                        const user = util.randomUser();
+                        const pass = util.randomPass();
                         promiseLogin = tempMatrixClient
-                            .registerGuest({}, undefined)
+                            .register(user, pass, null, {
+                                type: "m.login.dummy",
+                              })
                             .then((response) => {
                                 console.log("Response", response);
+                                response.password = pass;
                                 response.is_guest = true;
                                 localStorage.setItem('user', JSON.stringify(response));
                                 return response;
@@ -106,19 +116,19 @@ export default {
                     if (!this.matrixClient || !this.currentUser || !this.currentUser.is_guest) {
                         return Promise.reject("Invalid params");
                     }
-                    const randomUsername = util.randomUser();
                     const randomPassword = util.randomPass();
-                    const data = {
+                    const self = this;
-                        username:randomUsername,
+                    return this.matrixClient.register(this.matrixClient.getUserIdLocalpart(), randomPassword, null, {
-                        password:randomPassword,
+                        type: "m.login.dummy",
-                        guest_access_token:this.currentUser.access_token
+                      }, undefined, this.currentUser.access_token)
-                    };
-                    return this.matrixClient.registerRequest(data, undefined, undefined)
                         .then((response) => {
                             console.log("Response", response);
                             response.is_guest = false;
-                            localStorage.setItem('user', JSON.stringify(response));
+                            response.password = randomPassword;
-                            return response;
+                            self.currentUser = response;
+                            localStorage.setItem('user', JSON.stringify(response)); // Update local storage as well.
+                            self.logout();
+                            return self.currentUser;
                         });
                 },
 
@@ -163,12 +173,13 @@ export default {
                         deviceId: user.device_id,
                         accessToken: user.access_token,
                         timelineSupport: true,
-                        unstableClientRelationAggregation: true
+                        unstableClientRelationAggregation: true,
+                        //useAuthorizationHeader: true
                     }
                     this.matrixClient = sdk.createClient(opts);
-                    if (user.is_guest) {
+                    // if (user.is_guest) {
-                        this.matrixClient.setGuest(true);
+                    //     this.matrixClient.setGuest(true);
-                    }
+                    // }
                     return this.matrixClient
                         .initCrypto()
                         .then(() => {
@@ -210,6 +221,7 @@ export default {
                     if (client) {
                         client.on("event", this.onEvent);
                         client.on("Room", this.onRoom);
+                        client.on("Session.logged_out", this.onSessionLoggedOut);
                     }
                 },
 
@@ -217,6 +229,7 @@ export default {
                     if (client) {
                         client.off("event", this.onEvent);
                         client.off("Room", this.onRoom);
+                        client.off("Session.logged_out", this.onSessionLoggedOut);
                     }
                 },
 
@@ -244,6 +257,11 @@ export default {
                     this.reloadRooms();
                 },
 
+                onSessionLoggedOut() {
+                    console.log("Logged out!");
+                    this.logout();
+                },
+
                 reloadRooms() {
                     this.rooms = this.matrixClient.getVisibleRooms();
                     this.rooms.forEach(room => {