Join page new design implemented

src/components/CreateRoom.vue

@@ -68,8 +68,8 @@
           </v-select>
           <v-checkbox
             class="mt-0"
-            v-model="sharedComputer"
-            :label="$t('join.shared_computer')"
+            v-model="rememberMe"
+            :label="$t('join.remember_me')"
           />
         </v-col>
       </v-row>
@@ -287,12 +287,12 @@ export default {
       }
       return true;
     },
-    sharedComputer: {
+    rememberMe: {
       get: function () {
         return !this.$store.state.useLocalStorage;
       },
-      set: function (sharedComputer) {
-        this.$store.commit("setUseLocalStorage", !sharedComputer);
+      set: function (rememberMe) {
+        this.$store.commit("setUseLocalStorage", !rememberMe);
       },
     },
   },

src/components/Join.vue

@@ -1,71 +1,41 @@
 <template>
-  <div class="join-root">
-    <div v-if="!waitingForInfo && !waitingForMembership" class="text-center">
-      <v-btn
-        class="btn-login"
-        text
-        small
-        @click.stop="handleLogin"
-        :loading="loading"
-        v-if="!currentUser"
-        >{{ $t("menu.login") }}</v-btn
-      >
+  <div class="join-room" v-if="!waitingForInfo && !waitingForMembership">
+    <div class="join-enter-room">
+      <div>
+        <div class="text-center">
+          <v-avatar class="join-avatar">
+            <v-img v-if="roomAvatar" :src="roomAvatar" />
+            <span v-else class="white--text headline">
+              {{roomName.substring(0, 1).toUpperCase() }}
+            </span>
+          </v-avatar>
+          <div class="join-welcome font-weight-bold">
+            {{ $t("join.title") }}
+          </div>
+          <div class="join-title">
+            {{ roomName }}
+          </div>
+        </div>
+
+        <hr class="my-10 join-line">
+        <div class="font-weight-black mb-2" v-if="!currentUser"> Choose a name to use.</div>
 
-      <v-avatar class="join-avatar">
-        <v-img v-if="roomAvatar" :src="roomAvatar" />
-        <span v-else class="white--text headline">{{
-          roomName.substring(0, 1).toUpperCase()
-        }}</span>
-      </v-avatar>
-      <div class="join-title">
-        {{ $t("join.title", { roomName: roomName }) }}
-      </div>
-      <div class="join-message">
-        <!-- Join the group chat in a web browser or with the Keanu app. -->
-      </div>
-      <v-container class="join-user-info">
         <v-row v-if="canEditProfile">
-          <v-col class="flex-grow-0 flex-shrink-0">
+          <v-col cols="10" sm="7">
+            <v-text-field
+              solo
+              @click.native.stop="{}"
+              v-model="selectedProfile.name"
+            ></v-text-field>
+            <v-checkbox class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')" />
+          </v-col>
+          <v-col cols="2" sm="5">
             <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 class="mt-0" v-model="sharedComputer" :label="$t('join.shared_computer')" />
-          </v-col>
         </v-row>
-        <v-row v-else>
+        <v-row v-else class="text-center">
           <v-col>
             {{ $t("join.joining_as") }}
             <div style="display: inline-block">
@@ -79,52 +49,79 @@
             {{ userDisplayName }}
           </v-col>
         </v-row>
-      </v-container>
 
-      <!--<v-btn
-        class="btn-light"
-        large
-        block
-        @click.stop="handleOpenApp"
-        :loading="loading"
-        >Open Keanu app</v-btn
-      >
+        <v-btn
+          class="btn-dark"
+          large
+          @click.stop="handleJoin"
+          :loading="loading"
+          v-if="!currentUser"
+          >{{ $t("join.enter_room") }}</v-btn
+        >
+        <v-btn
+          class="btn-dark"
+          large
+          block
+          @click.stop="handleJoin"
+          :loading="loading"
+          v-else
+          >{{ $t("join.join") }}</v-btn
+        >
 
-      <div class="join-or-divider">OR</div> -->
+        <div v-if="loadingMessage" class="text-center">{{ loadingMessage }}</div>
+      </div>
+    </div>
 
-      <v-btn
-        class="btn-dark"
-        large
-        block
-        @click.stop="handleJoin"
-        :loading="loading"
-        v-if="!currentUser"
-        >{{ $t("join.join_guest") }}</v-btn
-      >
-      <v-btn
-        class="btn-dark"
-        large
-        block
-        @click.stop="handleJoin"
-        :loading="loading"
-        v-else
-        >{{ $t("join.join") }}</v-btn
-      >
+    <div class="join-lang">
+      <h3 class="mb-2">{{ $t("profile.select_language") }}</h3>
+      <v-row class="align-center">
+        <v-col v-for="(lang,key) in getSortedLangByActive.slice(0, 4)" :key="key">
+          <span :class="$i18n.locale==lang.value?'active':''" >  {{lang.text}} </span>
+        </v-col>
+        <v-col>
+          <v-btn
+            class="language-more"
+            @click="showSelectLanguageDialog = true"
+          >
+          <v-icon >language</v-icon><v-icon >more_horiz</v-icon>
+          </v-btn>
+        </v-col>
+        <SelectLanguageDialog
+          v-model="showSelectLanguageDialog"
+          v-on:close="showSelectLanguageDialog = false"
+        />
+      </v-row>
+    </div>
 
-      <!-- <div class="join-privacy">
-        Enhance your physical privacy. <a href="#">Learn how</a>
-      </div> -->
-
-      <div v-if="loadingMessage">{{ loadingMessage }}</div>
+    <div class="d-flex justify-center align-center mt-9">
+      <div class="mr-2">
+        <img
+          src="@/assets/logo.svg"
+          width="32"
+          height="32"
+          class="d-inline"
+        />
+      </div>
+      <div>
+        <strong>{{ $t("project.name") }}</strong>
+        {{ $t("project.tag_line") }}
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import util from "../plugins/utils";
+import LanguageMixin from "./languageMixin";
+
+import SelectLanguageDialog from "./SelectLanguageDialog.vue";
 
 export default {
   name: "Join",
+  mixins: [LanguageMixin],
+  components: {
+    SelectLanguageDialog,
+  },
   data() {
     return {
       roomName: null,
@@ -135,20 +132,10 @@ export default {
       waitingForMembership: false,
       availableAvatars: [],
       selectedProfile: null,
+      showEditDisplaynameDialog: false,
+      showSelectLanguageDialog: false,
     };
   },
-  mounted() {
-    this.$matrix.on("Room.myMembership", this.onMyMembership);
-    this.availableAvatars = util.getDefaultAvatars();
-    this.selectAvatar(
-      this.availableAvatars[
-        Math.floor(Math.random() * this.availableAvatars.length)
-      ]
-    );
-  },
-  destroyed() {
-    this.$matrix.off("Room.myMembership", this.onMyMembership);
-  },
   computed: {
     currentUser() {
       return this.$store.state.auth.user;
@@ -204,14 +191,25 @@ export default {
         .substring(0, 1)
         .toUpperCase();
     },
-    sharedComputer: {
+    rememberMe: {
       get: function () {
         return !this.$store.state.useLocalStorage;
       },
-      set: function (sharedComputer) {
-        this.$store.commit("setUseLocalStorage", !sharedComputer);
+      set: function (rememberMe) {
+        this.$store.commit("setUseLocalStorage", !rememberMe);
       },
     },
+
+    getSortedLangByActive() {
+      const context = this;
+      return this.getLanguages().sort(function(lang) {
+        if(lang.value == context.$i18n.locale) {
+          return -1;
+        } else {
+          return 1;
+        }
+      });
+    }
   },
   watch: {
     roomId: {
@@ -265,7 +263,6 @@ export default {
       },
     },
   },
-
   methods: {
     getRoomInfo() {
       if (this.roomId.startsWith("#")) {
@@ -306,10 +303,6 @@ export default {
       }
     },
 
-    handleLogin() {
-      this.$navigation.push({ path: "/login" }, 1);
-    },
-
     handleOpenApp() {
       console.log("Open app..."); //TODO
     },
@@ -408,9 +401,21 @@ export default {
       this.$refs.avatar.$refs.input.click();
     },
   },
+  mounted() {
+    this.$matrix.on("Room.myMembership", this.onMyMembership);
+    this.availableAvatars = util.getDefaultAvatars();
+    this.selectAvatar(
+      this.availableAvatars[
+        Math.floor(Math.random() * this.availableAvatars.length)
+      ]
+    );
+  },
+  destroyed() {
+    this.$matrix.off("Room.myMembership", this.onMyMembership);
+  }
 };
 </script>
 
 <style lang="scss">
-@import "@/assets/css/join.scss";
+  @import "@/assets/css/join.scss";
 </style>

src/components/LeaveRoomDialog.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" width="80%">
+  <v-dialog
+    v-model="showDialog"
+    v-show="room"
+    class="ma-0 pa-0"
+    :width="$vuetify.breakpoint.smAndUp ? '688px' : '80%'"
+  >
     <div class="dialog-content text-center">
       <template v-if="roomJoinRule == 'public'">
         <h1>👋</h1>
@@ -142,4 +147,4 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
-</style> 
+</style>

src/components/Login.vue

@@ -61,8 +61,8 @@
         ></v-text-field>
         <v-checkbox
           class="mt-0"
-          v-model="sharedComputer"
-          :label="$t('join.shared_computer')"
+          v-model="rememberMe"
+          :label="$t('join.remember_me')"
         />
         <v-btn
           :disabled="!isValid || loading"
@@ -114,12 +114,12 @@ export default {
     showCloseButton() {
       return this.$navigation && this.$navigation.canPop();
     },
-    sharedComputer: {
+    rememberMe: {
       get: function () {
         return !this.$store.state.useLocalStorage;
       },
-      set: function (sharedComputer) {
-        this.$store.commit("setUseLocalStorage", !sharedComputer);
+      set: function (rememberMe) {
+        this.$store.commit("setUseLocalStorage", !rememberMe);
       },
     },
   },

src/components/SelectLanguageDialog.vue

@@ -3,12 +3,17 @@
     class="ma-0 pa-0"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
-    :width="$vuetify.breakpoint.smAndUp ? '940px' : '80%'"
+    :width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
   >
     <v-card class="dialog-card">
-      <v-card-title class="dialog-title"
-        ><h3>{{ $t("profile.select_language") }}</h3></v-card-title
-      >
+      <v-card-title class="dialog-title d-block">
+        <h2>{{ $t("profile.set_language") }}</h2>
+        <div class="subtitle-1">{{ $t("profile.language_description") }}</div>
+        <div class="subtitle-1">
+          {{ $t("profile.dont_see_yours") }}
+          <a href="https://letsconvene.im/">{{ $t("profile.tell_us") }}</a>
+        </div>
+      </v-card-title>
       <v-card-text>
         <v-select
           v-model="$i18n.locale"
@@ -26,9 +31,9 @@
           color="black"
           depressed
           block
-          class="filled-button"
+          class="btn-dark"
           @click="$emit('close')"
-          >{{ $t("menu.ok") }}</v-btn
+          >{{ $t("menu.done") }}</v-btn
         >
       </v-card-actions>
     </v-card>
@@ -36,20 +41,10 @@
 </template>
 
 <script>
+import LanguageMixin from "./languageMixin";
+
 export default {
-  data() {
-    return {
-      languages: [],
-    };
-  },
-  mounted() {
-    for (const locale of Object.keys(this.$i18n.messages)) {
-      this.languages.push({
-        text: this.$i18n.messages[locale].language_display_name || locale,
-        value: locale,
-      });
-    }
-  },
+  mixins: [LanguageMixin],
 };
 </script>
 

src/components/languageMixin.js

@@ -0,0 +1,21 @@
+export default {
+  data() {
+    return {
+      languages: [],
+      activeLang:null,
+    }
+  },
+  methods: {
+    getLanguages() {
+      return this.languages;
+    }
+  },
+  mounted() {
+    for (const locale of Object.keys(this.$i18n.messages)) {
+      this.languages.push({
+        text: this.$i18n.messages[locale].language_display_name || locale,
+        value: locale,
+      });
+    }
+  }
+}