Resolve "Improve UX/UI of new room (with no remembered identity)"

src/assets/css/join.scss

@@ -37,12 +37,6 @@
         background: white;
         box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
 
-        .join-user-info {
-            display: flex;
-            flex-wrap: nowrap;
-            max-width: 500px;
-        }
-
         @media #{map-get($display-breakpoints, 'sm-and-down')} {
             padding: 20px;
         }

src/assets/translations/bo.json

@@ -222,7 +222,8 @@
         "remember_me": "ང་དྲན་པར་བྱོས།",
         "user_name_label": "སྤྱོད་མིང་།",
         "title": "ཁྱེད་རང་ནང་དུ་ཞུགས་པར་དགའ་བསུ་ཞུ།",
-        "join_failed": "ཁ་བརྡ་ཁང་དུ་འཛུལ་ཐུབ་མ་སོང་།"
+        "join_failed": "ཁ་བརྡ་ཁང་དུ་འཛུལ་ཐུབ་མ་སོང་།",
+        "choose_name": ""
     },
     "profile_info_popup": {
         "powered_by": "ཁ་བརྡ་ཁང་འདི་{product} ནུས་ཤུགས་བསྩལ་ཡོད། {productLink} ནས་དེ་ལས་མང་བ་སྦྱོང་ཆོག་ལ། མདུན་དུ་བསྐྱོད་དེ་ཁ་བརྡ་ཁང་གཞན་ཞིག་བསྐྲུན་ཆོག",

src/assets/translations/de.json

@@ -144,7 +144,8 @@
         "status_logging_in": "Wird angemeldet …",
         "status_joining": "Raum beitreten …",
         "join_failed": "Beitritt zum Raum fehlgeschlagen.",
-        "title": "Willkommen in {roomName}"
+        "title": "Willkommen in {roomName}",
+        "choose_name": ""
     },
     "invite": {
         "title": "Freunde hinzufügen",

src/assets/translations/en.json

@@ -90,7 +90,7 @@
     "new_room": "New Room",
     "create": "Create",
     "next": "Next",
-    "name_room": "Name room",
+    "name_room": "Room name",
     "room_topic": "Add a description if you like",
     "join_permissions": "Join permissions",
     "set_join_permissions": "Set Join Permissions",
@@ -158,7 +158,8 @@
     "enter_room": "Enter room",
     "status_logging_in": "Logging in...",
     "status_joining": "Joining room...",
-    "join_failed": "Failed to join room."
+    "join_failed": "Failed to join room.",
+    "choose_name": "Choose a name to use"
   },
   "invite": {
     "title": "Add Friends",

src/assets/translations/es.json

@@ -63,7 +63,8 @@
         "remember_me": "Recordarme",
         "user_name_label": "Nombre de usuario",
         "title": "Bienvenido has sido invitado a unirte",
-        "join_failed": "No se pudo unir a la sala."
+        "join_failed": "No se pudo unir a la sala.",
+        "choose_name": ""
     },
     "profile": {
         "display_name": "Nombre para mostrar",

src/assets/translations/fi.json

@@ -72,7 +72,8 @@
         "user_name_label": "Käyttäjätunnus",
         "status_joining": "Liittyminen huoneeseen…",
         "status_logging_in": "Kirjautuminen sisään…",
-        "join_failed": "Huoneeseen liittyminen epäonnistui."
+        "join_failed": "Huoneeseen liittyminen epäonnistui.",
+        "choose_name": ""
     },
     "leave": {
         "title_public": "Näkemiin, {user}",

src/assets/translations/fr.json

@@ -144,7 +144,8 @@
         "status_joining": "Adhésion au salon…",
         "join_failed": "Impossible de rejoindre le salon.",
         "joining_as": "Vous rejoignez en tant que :",
-        "join_guest": "Rejoindre comme invité·e"
+        "join_guest": "Rejoindre comme invité·e",
+        "choose_name": ""
     },
     "invite": {
         "title": "Ajouter des amis",

src/assets/translations/it.json

@@ -143,7 +143,8 @@
         "join_guest": "Unisciti come ospite",
         "status_joining": "Unendosi alla stanza…",
         "join_failed": "Impossibile unirsi alla stanza.",
-        "status_logging_in": "Accesso in corso…"
+        "status_logging_in": "Accesso in corso…",
+        "choose_name": ""
     },
     "invite": {
         "title": "Aggiungi amici",

src/assets/translations/nb_NO.json

@@ -75,7 +75,8 @@
         "status_joining": "Tar del i rom…",
         "status_logging_in": "Logger inn …",
         "enter_room": "",
-        "title": "Velkommen til {roomName}"
+        "title": "Velkommen til {roomName}",
+        "choose_name": ""
     },
     "profile_info_popup": {
         "identity_temporary": "{displayName}",

src/assets/translations/pt_BR.json

@@ -171,7 +171,8 @@
         "enter_room": "Entre na sala",
         "status_logging_in": "Fazendo login...",
         "status_joining": "Entrando na sala...",
-        "join_failed": "Houve uma falha ao entrar na sala."
+        "join_failed": "Houve uma falha ao entrar na sala.",
+        "choose_name": ""
     },
     "leave": {
         "title_public": "Adeus, {user}",

src/assets/translations/ro.json

@@ -99,7 +99,8 @@
         "joining_as": "Vă înscrieți ca:",
         "remember_me": "Amintește-ți de mine",
         "user_name_label": "Numele utilizatorului",
-        "title": "Bine ați venit, ați fost invitat să vă alăturați"
+        "title": "Bine ați venit, ați fost invitat să vă alăturați",
+        "choose_name": ""
     },
     "profile_info_popup": {
         "new_room": "+ Cameră nouă",

src/assets/translations/ug.json

@@ -114,7 +114,8 @@
         "joining_as": "سىز تۆۋەندىكىدەك قاتنىشىۋاتىسىز:",
         "remember_me": "",
         "user_name_label": "قوللانغۇچى ئىسمى",
-        "title": "{ياتاق ئىسمى} غا خۇش كەپسىز"
+        "title": "{ياتاق ئىسمى} غا خۇش كەپسىز",
+        "choose_name": ""
     },
     "room_welcome": {
         "info_permissions": "ياتاق تەڭشىكىدە خالىغان ۋاقىتتا «قوشۇلۇش ئىجازەتنامىسى» نى ئۆزگەرتەلەيسىز.",

src/assets/translations/zh_Hans.json

@@ -174,7 +174,8 @@
         "remember_me": "记得我",
         "user_name_label": "用户名",
         "title": "欢迎您被邀请加入",
-        "join_failed": "加入聊天室失败。"
+        "join_failed": "加入聊天室失败。",
+        "choose_name": ""
     },
     "profile": {
         "display_name": "显示名称",

src/components/CreateRoom.vue

@@ -20,7 +20,7 @@
             !roomName || (step != steps.INITIAL && step != steps.CREATED)
           "
           class="header-button-right"
-          @click.stop="next"
+          @click.stop="onCreate"
         >
           <span>{{
             step == steps.CREATED ? $t("new_room.done") : $t("new_room.next")
@@ -28,54 +28,6 @@
         </v-btn> -->
       </v-container>
     </div>
-    <v-container class="join-user-info">
-      <v-row v-if="canEditProfile">
-        <v-col class="flex-grow-0 flex-shrink-0">
-          <v-avatar @click="showAvatarPickerList">
-            <v-img v-if="selectedProfile" :src="selectedProfile.image" />
-          </v-avatar>
-        </v-col>
-        <v-col class="flex-shrink-1 flex-grow-1">
-          <v-select
-            ref="avatar"
-            :items="availableAvatars"
-            cache-items
-            :label="$t('join.user_name_label')"
-            outlined
-            dense
-            @change="selectAvatar"
-            :value="availableAvatars[0]"
-            single-line
-          >
-            <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"
-            v-model="rememberMe"
-            :label="$t('join.remember_me')"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
 
     <v-container fluid class="mt-40">
       <v-row align="center">
@@ -86,34 +38,47 @@
           </v-avatar>
         </v-col>
       </v-row>
-      <v-row cols="12" align="center">
+      <v-row cols="12" align="center" justify="center">
-        <v-col cols="8" offset="2" align="center">
+        <v-col sm="8"  align="center">
+          <div class="text-left font-weight-light">{{ $t("new_room.name_room") }}</div>
           <v-text-field
             v-model="roomName"
-            :label="$t('new_room.name_room')"
             color="black"
             background-color="white"
             v-on:keyup.enter="$refs.topic.focus()"
             :disabled="step > steps.INITIAL"
+            autofocus
+            solo
           ></v-text-field>
+          <div class="text-left font-weight-light" v-show="roomName.length> 0">{{ $t("new_room.room_topic") }}</div>
           <v-text-field
             v-model="roomTopic"
             v-show="roomName.length > 0"
-            :label="$t('new_room.room_topic')"
             color="black"
             background-color="white"
             v-on:keyup.enter="$refs.create.focus()"
             :disabled="step > steps.INITIAL"
+            solo
           ></v-text-field>
           <v-btn
             id="btn-room-create"
             color="black"
             depressed
             class="filled-button"
-            @click.stop="next"
+            @click.stop="onCreate"
-            :disabled="roomName.length == 0"
+            :disabled="status ? true : roomName.length == 0"
-            >{{ $t("new_room.create") }}</v-btn
+            >
-          >
+              <div v-if="status && !enterRoomDialog" class="text-center">
+                {{ status }}
+                <v-progress-circular
+                  v-if="step == steps.CREATING"
+                  indeterminate
+                  color="primary"
+                  size="20"
+                ></v-progress-circular>
+              </div>
+              <span v-else>{{ $t("new_room.create") }}</span>
+            </v-btn>
         </v-col>
       </v-row>
     </v-container>
@@ -192,7 +157,7 @@
           {{ $t("new_room.link_copied") }}
         </div>
 -->
-      <div v-if="status" class="text-center">
+      <!-- <div v-if="status && !enterRoomDialog" class="text-center">
         <v-progress-circular
           v-if="step == steps.CREATING"
           indeterminate
@@ -200,7 +165,7 @@
           size="20"
         ></v-progress-circular>
         {{ status }}
-      </div>
+      </div> -->
       <!-- </div> -->
     </v-fade-transition>
     <input
@@ -212,11 +177,79 @@
       accept="image/*"
       class="d-none"
     />
+    <v-dialog
+      v-model="enterRoomDialog"
+      :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'"
+    >
+      <v-card>
+        <v-container v-if="canEditProfile" class="pa-10">
+          <v-row class="align-center">
+            <v-col class="py-0">
+              <div class="text-left font-weight-bold">{{ $t("join.choose_name") }}</div>
+              <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-col>
+              <v-col cols="2" class="py-0">
+                 <v-avatar @click="showAvatarPickerList">
+                <v-img v-if="selectedProfile" :src="selectedProfile.image" />
+              </v-avatar>
+            </v-col>
+          </v-row>
+          <v-row class="mt-0">
+            <v-col class="py-0">
+              <v-checkbox
+                id="chk-remember-me"
+                class="mt-0"
+                v-model="rememberMe"
+                @change="onRememberMe"
+                :label="$t('join.remember_me')"
+              />
+            </v-col>
+          </v-row>
+          <v-btn
+            color="black"
+            depressed
+            class="filled-button"
+            @click.stop="onEnterRoom"
+            :disabled="!selectedProfile.name"
+            >
+              {{ $t("join.enter_room") }}
+            </v-btn>
+        </v-container>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script>
 import util from "../plugins/utils";
+import rememberMeMixin from "./rememberMeMixin";
 
 const steps = Object.freeze({
   INITIAL: 0,
@@ -227,6 +260,7 @@ const steps = Object.freeze({
 
 export default {
   name: "CreateRoom",
+  mixins:[rememberMeMixin],
   data() {
     return {
       steps,
@@ -255,7 +289,12 @@ export default {
       publicRoomLink: null,
       publicRoomLinkCopied: false,
       availableAvatars: [],
-      selectedProfile: null,
+      selectedProfile: {
+        id: "",
+        image: "",
+        name: ""
+      },
+      enterRoomDialog: false
     };
   },
 
@@ -290,15 +329,7 @@ export default {
         return false;
       }
       return true;
-    },
+    }
-    rememberMe: {
-      get: function () {
-        return this.$store.state.useLocalStorage;
-      },
-      set: function (rememberMe) {
-        this.$store.commit("setUseLocalStorage", rememberMe);
-      },
-    },
   },
 
   methods: {
@@ -309,7 +340,17 @@ export default {
         this.$navigation.pop();
       }
     },
-    next() {
+
+    onCreate() {
+      if(this.currentUser) {
+        this.onEnterRoom();
+      } else {
+        this.enterRoomDialog = true;
+      }
+    },
+
+    onEnterRoom() {
+      this.enterRoomDialog = false;
       if (this.step == steps.CREATED) {
         this.openRoom();
       } else if (this.step == steps.INITIAL) {

src/components/Join.vue

@@ -27,7 +27,13 @@
               @click.native.stop="{}"
               v-model="selectedProfile.name"
             ></v-text-field>
-            <v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')" />
+            <v-checkbox
+              id="chk-remember-me"
+              class="mt-0"
+              v-model="rememberMe"
+              :label="$t('join.remember_me')"
+              @change="onRememberMe"
+            />
           </v-col>
           <v-col cols="2" sm="5">
             <v-avatar @click="showAvatarPickerList">
@@ -119,12 +125,13 @@
 <script>
 import util from "../plugins/utils";
 import LanguageMixin from "./languageMixin";
+import rememberMeMixin from "./rememberMeMixin";
 
 import SelectLanguageDialog from "./SelectLanguageDialog.vue";
 
 export default {
   name: "Join",
-  mixins: [LanguageMixin],
+  mixins: [LanguageMixin,rememberMeMixin],
   components: {
     SelectLanguageDialog,
   },
@@ -197,14 +204,6 @@ export default {
         .substring(0, 1)
         .toUpperCase();
     },
-    rememberMe: {
-      get: function () {
-        return this.$store.state.useLocalStorage;
-      },
-      set: function (rememberMe) {
-        this.$store.commit("setUseLocalStorage", rememberMe);
-      },
-    },
     getDisplayLanguage() {
       let displayLanguages = [...this.getLanguages()];
       return displayLanguages.filter(lang => lang.display && lang.value !== this.$i18n.locale);

src/components/Login.vue

@@ -66,6 +66,7 @@
           id="chk-remember-me"
           class="mt-0"
           v-model="rememberMe"
+          @change="onRememberMe"
           :label="$t('join.remember_me')"
         />
         <v-btn
@@ -97,9 +98,11 @@
 <script>
 import User from "../models/user";
 import util from "../plugins/utils";
+import rememberMeMixin from "./rememberMeMixin";
 
 export default {
   name: "Login",
+  mixins:[rememberMeMixin],
   data() {
     return {
       user: new User(this.$config.defaultServer, "", ""),
@@ -120,15 +123,7 @@ export default {
     },
     showCloseButton() {
       return this.$navigation && this.$navigation.canPop();
-    },
+    }
-    rememberMe: {
-      get: function () {
-        return this.$store.state.useLocalStorage;
-      },
-      set: function (rememberMe) {
-        this.$store.commit("setUseLocalStorage", rememberMe);
-      },
-    },
   },
   created() {
     if (this.loggedIn) {

src/components/rememberMeMixin.js

@@ -0,0 +1,12 @@
+export default {
+  data() {
+    return {
+      rememberMe: false
+    }
+  },
+  methods: {
+    onRememberMe(val) {
+      this.$store.commit("setUseLocalStorage", val);
+    }
+  }
+}