Don't redirect to login page if we have no account

src/components/Join.vue

@@ -18,18 +18,41 @@
         </div>
 
         <hr class="my-10 join-line" />
-        <div class="font-weight-black mb-2" v-if="!currentUser">Choose a name to use.</div>
+        <div class="font-weight-black mb-4" v-if="!currentUser">Choose a name to use.</div>
 
         <v-row v-if="canEditProfile">
-          <v-col cols="10" sm="7">
+          <v-col cols="10" sm="7" class="py-0">
+            <v-select
+              ref="avatar"
+              :items="availableAvatars"
+              cache-items
+              outlined
+              dense
+              @change="selectAvatar"
+              :value="availableAvatars[0]"
+              single-line
+              autofocus
+            >
+              <template v-slot:selection>
                 <v-text-field
+                  background-color="transparent"
                   solo
+                  flat
+                  hide-details
                   @click.native.stop="
                     {
                     }
                   "
                   v-model="selectedProfile.name"
                 ></v-text-field>
+              </template>
+              <template v-slot:item="data">
+                <v-avatar size="32">
+                  <v-img :src="data.item.image" />
+                </v-avatar>
+                <div class="ms-2">{{ data.item.name }}</div>
+              </template>
+            </v-select>
             <v-checkbox
               id="chk-remember-me"
               class="mt-0"
@@ -38,8 +61,8 @@
               @change="onRememberMe"
             />
           </v-col>
-          <v-col cols="2" sm="5">
+          <v-col cols="2" sm="5" class="py-0">
-            <v-avatar @click="showAvatarPickerList">
+            <v-avatar @click="showAvatarPicker">
               <v-img v-if="selectedProfile" :src="selectedProfile.image" />
             </v-avatar>
           </v-col>
@@ -68,6 +91,16 @@
       </div>
     </div>
 
+    <input
+      id="room-avatar-picker"
+      ref="avatar"
+      type="file"
+      name="avatar"
+      @change="handlePickedAvatar($event)"
+      accept="image/*"
+      class="d-none"
+    />
+
     <div class="join-lang">
       <h3 class="mb-2">{{ $t("profile.select_language") }}</h3>
       <v-row class="align-center">
@@ -232,8 +265,10 @@ export default {
   },
   methods: {
     removeHomeServer(roomName) {
-      let lastIndexDash = roomName.lastIndexOf("-");
+      let lastIndex = roomName.lastIndexOf(":");
-      let lastIndex = lastIndexDash > 0 ? lastIndexDash : roomName.lastIndexOf(":");
+      if (roomName && roomName.startsWith("@")) {
+        return roomName.substring(roomName.indexOf("@") + 1, lastIndex);
+      }
       return roomName ? roomName.substring(roomName.indexOf("#") + 1, lastIndex) : "";
     },
     getRoomInfo() {
@@ -375,8 +410,14 @@ export default {
       this.selectedProfile = Object.assign({}, value); // Make a copy, so editing does not destroy data
     },
 
-    showAvatarPickerList() {
+    showAvatarPicker() {
-      this.$refs.avatar.$refs.input.click();
+      this.$refs.avatar.click();
+    },
+
+    handlePickedAvatar(event) {
+      util.loadAvatarFromFile(event, (image) => {
+        this.selectedProfile.image = image;
+      });
     },
   },
   mounted() {

src/components/Profile.vue

@@ -197,11 +197,7 @@
 
 <script>
 import SelectLanguageDialog from "./SelectLanguageDialog.vue";
-import dataUriToBuffer from "data-uri-to-buffer";
 import ActionRow from "./ActionRow.vue";
-import ImageResize from "image-resize";
-const sizeOf = require("image-size");
-//const dataUriToBuffer = require("data-uri-to-buffer");
 import util from "../plugins/utils";
 import profileInfoMixin from "./profileInfoMixin";
 import LogoutRoomDialog from './LogoutRoomDialog.vue';
@@ -318,58 +314,9 @@ export default {
     },
 
     handlePickedAvatar(event) {
-      const self = this;
+      util.loadAvatarFromFile(event, (image) => {
-      if (event.target.files && event.target.files[0]) {
+        this.setAvatar(image);
-        var reader = new FileReader();
-        reader.onload = (e) => {
-          const file = event.target.files[0];
-          if (file.type.startsWith("image/")) {
-            try {
-              var image = e.target.result;
-
-              var dimens = sizeOf(dataUriToBuffer(e.target.result));
-
-              // Need to resize?
-              const w = dimens.width;
-              const h = dimens.height;
-              if (w > 640 || h > 640) {
-                var aspect = w / h;
-                var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed());
-                var newHeight = parseInt(
-                  (w > h ? 640 / aspect : 640).toFixed()
-                );
-                var imageResize = new ImageResize({
-                  format: "png",
-                  width: newWidth,
-                  height: newHeight,
-                  outputType: "blob",
       });
-                imageResize
-                  .play(event.target)
-                  .then((img) => {
-                    var resizedImageFile = new File([img], file.name, {
-                      type: img.type,
-                      lastModified: Date.now(),
-                    });
-                    var reader2 = new FileReader();
-                    reader2.onload = (e) => {
-                      self.setAvatar(e.target.result);
-                    };
-                    reader2.readAsDataURL(resizedImageFile);
-                  })
-                  .catch((err) => {
-                    console.error("Resize failed:", err);
-                  });
-              } else {
-                self.setAvatar(image);
-              }
-            } catch (error) {
-              console.error("Failed to get image dimensions: " + error);
-            }
-          }
-        };
-        reader.readAsDataURL(event.target.files[0]);
-      }
     },
     setAvatar(image) {
       const self = this;

src/plugins/utils.js

@@ -1,5 +1,10 @@
 import axios from 'axios';
 import * as ContentHelpers from "matrix-js-sdk/lib/content-helpers";
+import dataUriToBuffer from "data-uri-to-buffer";
+import ImageResize from "image-resize";
+
+const sizeOf = require("image-size");
+
 var dayjs = require('dayjs');
 var sha256 = require('js-sha256').sha256;
 var aesjs = require('aes-js');
@@ -597,6 +602,60 @@ class Util {
         });
     }
 
+    loadAvatarFromFile(event, onLoad) {
+        if (event.target.files && event.target.files[0]) {
+          var reader = new FileReader();
+          reader.onload = (e) => {
+            const file = event.target.files[0];
+            if (file.type.startsWith("image/")) {
+              try {
+                var image = e.target.result;
+  
+                var dimens = sizeOf(dataUriToBuffer(e.target.result));
+  
+                // Need to resize?
+                const w = dimens.width;
+                const h = dimens.height;
+                if (w > 640 || h > 640) {
+                  var aspect = w / h;
+                  var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed());
+                  var newHeight = parseInt(
+                    (w > h ? 640 / aspect : 640).toFixed()
+                  );
+                  var imageResize = new ImageResize({
+                    format: "png",
+                    width: newWidth,
+                    height: newHeight,
+                    outputType: "blob",
+                  });
+                  imageResize
+                    .play(event.target)
+                    .then((img) => {
+                      var resizedImageFile = new File([img], file.name, {
+                        type: img.type,
+                        lastModified: Date.now(),
+                      });
+                      var reader2 = new FileReader();
+                      reader2.onload = (e) => {
+                        onLoad(e.target.result);
+                      };
+                      reader2.readAsDataURL(resizedImageFile);
+                    })
+                    .catch((err) => {
+                      console.error("Resize failed:", err);
+                    });
+                } else {
+                    onLoad(image);
+                }
+              } catch (error) {
+                console.error("Failed to get image dimensions: " + error);
+              }
+            }
+          };
+          reader.readAsDataURL(event.target.files[0]);
+        }
+      }
+
     /**
      * Return number of whole days between the timestamps, at end of that day.
      * @param {*} ts1