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-text-field
-              solo
-              @click.native.stop="
-                {
-                }
-              "
-              v-model="selectedProfile.name"
-            ></v-text-field>
+          <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-avatar @click="showAvatarPickerList">
+          <v-col cols="2" sm="5" class="py-0">
+            <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 = lastIndexDash > 0 ? lastIndexDash : roomName.lastIndexOf(":");
+      let lastIndex = 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() {
-      this.$refs.avatar.$refs.input.click();
+    showAvatarPicker() {
+      this.$refs.avatar.click();
+    },
+
+    handlePickedAvatar(event) {
+      util.loadAvatarFromFile(event, (image) => {
+        this.selectedProfile.image = image;
+      });
     },
   },
   mounted() {