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

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);