Join page new design implemented

src/App.vue

@@ -7,27 +7,24 @@
       <v-container
         fluid
         fill-height
-        style="
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          z-index: 20;
-          background-color: rgba(255, 255, 255, 1);
-        "
         v-if="loading"
+        class="loading-container"
       >
         <v-row align="center" justify="center">
           <v-col class="text-center">
             <v-progress-circular
               indeterminate
-              color="primary"
+              class="loading-convene"
             ></v-progress-circular>
             <div>{{ $t("menu.loading", { appName: appName }) }}</div>
           </v-col>
         </v-row>
       </v-container>
+
+      <v-skeleton-loader
+        type="list-item-avatar-two-line, divider, list-item-three-line, card-heading"
+        v-if="loading"
+      ></v-skeleton-loader>
     </v-main>
   </v-app>
 </template>
@@ -190,4 +187,22 @@ export default {
     width: $main-desktop-width;
   }
 }
+.v-skeleton-loader--is-loading {
+  z-index: 100;
+}
+.loading {
+  &-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 20;
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  &-convene {
+    color: $very-very-purple;
+  }
+}
 </style>

src/assets/css/_variables.scss

@@ -1,12 +1,13 @@
+$font-family: "Poppins";
 $background: #ffffff;
 $app-background: #f6f6f6;
 $main-desktop-width: 900px;
 $dialog-desktop-width: 940px;
-
+$very-very-purple: #536dfe;
 
 $chat-background: $background;
 $chat-standard-padding: 32px;
 $chat-standard-padding-s: 16px;
 $chat-standard-padding-xs: 8px;
-$chat-text-size: 1.0px;
+$chat-text-size: 1px;
 $chat-button-height: 50px;

src/assets/css/join.scss

@@ -1,3 +1,4 @@
+@import "~vuetify/src/styles/settings/_variables.scss";
 @import "@/assets/css/main.scss";
 
 .v-btn.btn-light {
@@ -28,94 +29,127 @@
     margin-bottom: $chat-standard-padding-xs;
 }
 
-.join-root {
+.join-room {
-    margin-top: 10%;
+    .join-enter-room {
-    padding: 40px;
+        margin-top: 10px;
+        padding: 40px;
+        border-radius: 18px;
+        background: white;
+        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
 
-    .btn-login {
+        .join-user-info {
-        position: absolute;
+            display: flex;
-        top: 0;
+            flex-wrap: nowrap;
-        right: 0;
+            max-width: 500px;
-        margin: 20px;
+        }
+
+        @media #{map-get($display-breakpoints, 'sm-and-down')} {
+            padding: 20px;
+        }
     }
 
-    .join-user-info {
+    .join-lang {
-        display: flex;
+        text-align: center;
-        flex-wrap: nowrap;
+        margin-top: 2%;
-        max-width: 500px;
+        padding: 20px;
+        border-radius: 18px;
+        background: white;
+        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
+
+        .active {
+            color: $very-very-purple;
+            font-weight: bold;
+        }
+        .language-more {
+            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
+            border-radius: 18px;
+            border: 1px solid black;
+            padding: 0px 5px !important;
+            box-shadow: 0px 4px 4px 0px #00000040;
+            background-color: #FFFFFF !important;
+
+            &:hover {
+                background-color: black !important;
+                color: white;
+            }
+        }
     }
-}
 
-.join-avatar {
+    .join-avatar {
-    background-color: #ededed;
+        background-color: #ededed;
-    width: 100px !important;
+        width: 100px !important;
-    height: 100px !important;
+        height: 100px !important;
-    margin-bottom: 40px;
+        margin-bottom: 40px;
-}
+    }
 
-.join-title {
+    .join-welcome {
-    font-family: "Poppins", sans-serif;
+        text-transform: uppercase;
-    font-style: normal;
+        font-size: 12px;
-    font-weight: 800;
+    }
-    font-size: 40 * $chat-text-size;
-    line-height: 108.5%;
-    /* or 43px */
-    text-align: center;
-    letter-spacing: -0.8px;
 
-    color: #000000;
+    .join-line {
-    overflow-wrap: break-word;
+        border: 1px solid #ECECEC;
-}
+    }
 
-.join-message {
+    .join-title {
-    font-family: sans-serif;
+        font-family: "Poppins", sans-serif;
-    font-weight: 400;
+        font-style: normal;
-    font-size: 16 * $chat-text-size;
+        font-weight: 800;
-    color: black;
+        font-size: 28px;
-    margin-top: 20px;
+        line-height: 108.5%;
-    margin-bottom: 20px;
+        /* or 43px */
-}
+        text-align: center;
+        letter-spacing: -0.8px;
 
-.join-privacy {
+        color: #000000;
-    font-family: sans-serif;
+        overflow-wrap: break-word;
-    font-weight: 400;
+    }
-    font-size: 12 * $chat-text-size;
+
-    color: #464646;
+    .join-privacy {
-    margin-top: 20px;
+        font-family: sans-serif;
-    margin-bottom: 20px;
+        font-weight: 400;
-    a {
+        font-size: 12 * $chat-text-size;
         color: #464646;
-    }
+        margin-top: 20px;
-}
+        margin-bottom: 20px;
-
+        a {
-.join-or-divider {
+            color: #464646;
-    display: block;
+        }
-    margin-top: 20px;
+    }
-    margin-bottom: 20px;
+
-    margin-left: 20px;
+    .join-or-divider {
-    margin-right: 20px;
+        display: block;
-    height: 20px;
+        margin-top: 20px;
-    color: #666666;
+        margin-bottom: 20px;
-    text-align: center;
+        margin-left: 20px;
-    line-height: var(--v-theme-title-featured-line-height);
+        margin-right: 20px;
-    position: relative;
+        height: 20px;
-    font-family: sans-serif;
+        color: #666666;
-    font-style: normal;
+        text-align: center;
-    font-weight: bold;
+        line-height: var(--v-theme-title-featured-line-height);
-    font-size: 9.88014 * $chat-text-size;
+        position: relative;
-    line-height: 140%;
+        font-family: sans-serif;
-    /* identical to box height, or 14px */
+        font-style: normal;
-    letter-spacing: 0.29px;
+        font-weight: bold;
-    color: #9C9CAE;
+        font-size: 9.88014 * $chat-text-size;
-
+        line-height: 140%;
-    &::before {
+        /* identical to box height, or 14px */
-        position: absolute;
+        letter-spacing: 0.29px;
-        width: 100%;
+        color: #9C9CAE;
-        left: 0;
+
-        right: 0;
+        &::before {
-        top: 5px;
+            position: absolute;
-        height: 1px;
+            width: 100%;
-        background: #9C9CAE;
+            left: 0;
-        content: " ";
+            right: 0;
+            top: 5px;
+            height: 1px;
+            background: #9C9CAE;
+            content: " ";
+        }
+    }
+
+    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+        margin: 10px;
     }
 }

src/assets/translations/bo.json

@@ -1,4 +1,8 @@
 {
+    "project": {
+        "name": "Convene",
+        "tag_line": ""
+    },
     "fallbacks": {
         "download_name": "ཕབ་ལེན།",
         "original_text": "<མ་ཡིག>",
@@ -73,6 +77,7 @@
         "delete": "སུབས།",
         "edit": "ཕྱོགས་སྒྲིག",
         "ok": "ལེགས་སོ།",
+        "done": "",
         "send": "ཐོངས།",
         "back": "ཕྱིར་ལོག",
         "cancel": "ཕྱིར་འཐེན།",
@@ -94,7 +99,11 @@
         "temporary_identity": "ངོ་བོ་འདི་གནས་སྐབས་ཙམ་ཡིན། དེ་བསྐྱར་དུ་བཀོལ་བར་གསང་ཚིག་ཅིག་བཟོས།",
         "title": "ངའི་ཡིག་ཆ།",
         "display_name": "འཆར་མིང་།",
-        "select_language": "སྐད་ཡིག"
+        "select_language": "སྐད་ཡིག",
+        "set_language": "",
+        "language_description": "",
+        "dont_see_yours": "",
+        "tell_us": ""
     },
     "device_list": {
         "not_verified": "ར་སྤྲོད་བྱས་མི་འདུག",
@@ -203,10 +212,10 @@
     "join": {
         "status_joining": "ཁ་བརྡ་ཁང་དུ་འཛུལ་བཞིན་པ།...",
         "status_logging_in": "ནང་འཛུལ་བྱེད་བཞིན་པ།...",
-        "join_guest": "སྐུ་མགྲོན་གྱི་མིང་ཐོག་ནས་ཞུགས།",
+        "enter_room": "",
         "join": "ཁ་བརྡ་ཁང་དུ་འཛུལ།",
         "joining_as": "ཁྱེད་རང་ཞུགས་བཞིན་པ།:",
-        "shared_computer": "འདི་ནི་མཉམ་སྤྱོད་བྱས་པའི་ཡོ་ཆས་ཤིག་ཡིན།",
+        "remember_me": "",
         "user_name_label": "སྤྱོད་མིང་།",
         "title": "{roomName} ནང་དུ་ཕེབས་པར་དགའ་བསུ་ཞུ།",
         "join_failed": "ཁ་བརྡ་ཁང་དུ་འཛུལ་ཐུབ་མ་སོང་།"

src/assets/translations/en.json

@@ -1,5 +1,9 @@
 {
   "language_display_name": "English",
+  "project": {
+    "name": "Convene",
+    "tag_line": "Simply connect"
+  },
   "menu": {
     "start_private_chat": "Private chat with this user",
     "reply": "Reply",
@@ -7,6 +11,7 @@
     "delete": "Delete",
     "download": "Download",
     "ok": "Ok",
+    "done": "Done",
     "cancel": "Cancel",
     "send": "Send",
     "back": "BACK",
@@ -119,6 +124,10 @@
     "change_name": "Change name",
     "change_password": "Change password",
     "select_language": "Language",
+    "set_language": "Set your language",
+    "language_description": "Convene is available in many languages.",
+    "dont_see_yours": "Don't see yours?",
+    "tell_us": "Tell us.",
     "password_old": "Old password",
     "password_new": "New password",
     "password_repeat": "Repeat new password",
@@ -135,12 +144,12 @@
     "new_room": "+ New room"
   },
   "join": {
-    "title": "Welcome to {roomName}",
+    "title": "Welcome you have been invited to join",
     "user_name_label": "User name",
-    "shared_computer": "This is a shared device",
+    "remember_me": "Remember me",
     "joining_as": "You are joining as:",
     "join": "Join room",
-    "join_guest": "Join as guest",
+    "enter_room": "Enter room",
     "status_logging_in": "Logging in...",
     "status_joining": "Joining room...",
     "join_failed": "Failed to join room."

src/assets/translations/es.json

@@ -1,5 +1,9 @@
 {
     "language_display_name": "Español",
+    "project": {
+        "name": "Convene",
+        "tag_line": ""
+    },
     "room_info": {
         "identity": "Has iniciado sesión como {displayName}.",
         "my_profile": "Mi perfil",
@@ -46,10 +50,10 @@
     "join": {
         "status_joining": "Uniendose a la sala...",
         "status_logging_in": "Iniciando sesión...",
-        "join_guest": "Unirse como invitado",
+        "enter_room": "",
         "join": "Unirse a la sala",
         "joining_as": "Te estas uniendo como:",
-        "shared_computer": "Usando una computadora compartida",
+        "remember_me": "",
         "user_name_label": "Nombre de usuario",
         "title": "Bienvenido a {roomName}"
     },
@@ -154,6 +158,7 @@
         "send": "Enviar",
         "cancel": "Cancelar",
         "ok": "OK",
+        "done": "",
         "download": "Descargar",
         "delete": "Eliminar",
         "reply": "Responder",

src/assets/translations/nb_NO.json

@@ -1,4 +1,8 @@
 {
+    "project": {
+        "name": "Convene",
+        "tag_line": ""
+    },
     "message": {
         "user_changed_guest_access_open": "{user} tillot gjester å ta del i rommet",
         "user_powerlevel_change_from_to": "{user} fra {powerOld} til {powerNew}",
@@ -67,7 +71,7 @@
         "join": "Ta del i rom",
         "status_joining": "Tar del i rom…",
         "status_logging_in": "Logger inn …",
-        "join_guest": "Ta del som gjest",
+        "enter_room": "",
         "title": "Velkommen til {roomName}"
     },
     "profile_info_popup": {
@@ -81,6 +85,10 @@
         "password_new": "Nytt passord",
         "password_old": "Gammelt passord",
         "select_language": "Språk",
+        "set_language": "",
+        "language_description": "",
+        "dont_see_yours": "",
+        "tell_us": "",
         "change_password": "Endre passord",
         "change_name": "Endre navn",
         "set_password": "Sett passord",
@@ -140,6 +148,7 @@
         "login": "Logg inn",
         "send": "Send",
         "ok": "OK",
+        "done": "",
         "cancel": "Avbryt",
         "download": "last ned",
         "delete": "Slett",

src/assets/translations/pt_BR.json

@@ -1,4 +1,8 @@
 {
+    "project": {
+        "name": "Convene",
+        "tag_line": ""
+    },
     "invite": {
         "title": "Adiciona amigos",
         "done": "Feito",
@@ -20,6 +24,7 @@
         "delete": "Excluir",
         "download": "Baixar",
         "ok": "OK",
+        "done": "",
         "cancel": "Cancela",
         "send": "Envia",
         "back": "RETORNA",
@@ -132,6 +137,10 @@
         "change_name": "Altere o nome",
         "change_password": "Altere a senha",
         "select_language": "Idioma",
+        "set_language": "",
+        "language_description": "",
+        "dont_see_yours": "",
+        "tell_us": "",
         "password_old": "Senha antiga",
         "password_new": "Nova senha",
         "password_repeat": "Repita a nova senha",
@@ -150,10 +159,10 @@
     "join": {
         "title": "Bem-vindo ao {roomName}",
         "user_name_label": "Nome do usuário",
-        "shared_computer": "Este é um dispositivo compartilhado",
+        "remember_me": "",
         "joining_as": "Você está entrando como:",
         "join": "Entrar na sala",
-        "join_guest": "Entrar como um convidado",
+        "enter_room": "",
         "status_logging_in": "Fazendo login...",
         "status_joining": "Entrando na sala...",
         "join_failed": "Houve uma falha ao entrar na sala."

src/assets/translations/ro.json

@@ -1,6 +1,11 @@
 {
+    "project": {
+        "name": "Convene",
+        "tag_line": ""
+    },
     "menu": {
         "ok": "OK",
+        "done": "",
         "loading": "Se încarcă {appName}",
         "undo": "Anulează",
         "new_room": "Cameră nouă",
@@ -89,10 +94,10 @@
         "join_failed": "Nu a reușit să intre în cameră.",
         "status_joining": "Intrarea în cameră...",
         "status_logging_in": "Autentificare...",
-        "join_guest": "Alăturați-vă ca invitat",
+        "enter_room": "",
         "join": "Alăturați-vă camerei",
         "joining_as": "Vă înscrieți ca:",
-        "shared_computer": "Acesta este un dispozitiv partajat",
+        "remember_me": "",
         "user_name_label": "Numele utilizatorului",
         "title": "Bine ați venit la {roomName}"
     },
@@ -112,6 +117,10 @@
         "password_new": "Parolă nouă",
         "password_old": "Parolă veche",
         "select_language": "Limbă",
+        "set_language": "",
+        "language_description": "",
+        "dont_see_yours": "",
+        "tell_us": "",
         "change_password": "Schimbați parola",
         "change_name": "Schimbă numele",
         "set_password": "Setați parola",

src/assets/translations/si.json

@@ -1,6 +1,11 @@
 {
+    "project": {
+        "name": "Convene",
+        "tag_line": ""
+    },
     "menu": {
         "ok": "හරි",
+        "done": "",
         "download": "බාගන්න",
         "edit": "සංස්කරණය",
         "reply": "පිලිතුර",

src/assets/translations/ug.json

@@ -1,7 +1,12 @@
 {
+    "project": {
+        "name": "Convene",
+        "tag_line": ""
+    },
     "language_is_rtl": true,
     "menu": {
         "ok": "تامام",
+        "done": "",
         "download": "چۈشۈرۈش",
         "delete": "ئۆچۈرۈش",
         "edit": "تەھرىر",
@@ -101,10 +106,10 @@
         "join_failed": "مۇنازىرە ئۆيىگە قوشۇلۇش مەغلۇب بولدى.",
         "status_joining": "مۇنازىرىگە كىرىش...",
         "status_logging_in": "كىرىش ...",
-        "join_guest": "مېھمان سۈپىتىدە قاتنىشىڭ",
+        "enter_room": "",
         "join": "مۇنازىرىگە قوشۇلۇڭ",
         "joining_as": "سىز تۆۋەندىكىدەك قاتنىشىۋاتىسىز:",
-        "shared_computer": "بۇ ئورتاق ئىشلىتىلىدىغان ئۈسكۈنە",
+        "remember_me": "",
         "user_name_label": "قوللانغۇچى ئىسمى",
         "title": "{ياتاق ئىسمى} غا خۇش كەپسىز"
     },
@@ -198,6 +203,10 @@
         "password_new": "يېڭى پارول",
         "password_old": "كونا پارول",
         "select_language": "تىل",
+        "set_language": "",
+        "language_description": "",
+        "dont_see_yours": "",
+        "tell_us": "",
         "change_password": "پارولنى ئۆزگەرتىڭ",
         "change_name": "ئىسىم ئۆزگەرتىش",
         "set_password": "پارول بەلگىلەڭ",

src/assets/translations/zh_Hans.json

@@ -1,4 +1,8 @@
 {
+    "project": {
+        "name": "Convene",
+        "tag_line": ""
+    },
     "fallbacks": {
         "download_name": "下载",
         "original_text": "<原文>",
@@ -112,6 +116,7 @@
         "start_private_chat": "与该用户私人聊天",
         "logout": "退出",
         "ok": "好的",
+        "done": "",
         "reply": "回复",
         "back": "返回",
         "new_room": "新的聊天室",
@@ -159,10 +164,10 @@
     "join": {
         "status_joining": "正在加入聊天室...",
         "status_logging_in": "正在登录中...",
-        "join_guest": "以访客身份加入",
+        "enter_room": "",
         "join": "加入聊天室",
         "joining_as": "您以以下身份加入：",
-        "shared_computer": "这是一台共享设备",
+        "remember_me": "",
         "user_name_label": "用户名",
         "title": "欢迎来到 {roomName}",
         "join_failed": "加入聊天室失败。"
@@ -177,7 +182,11 @@
         "set_password": "设置密码",
         "temporary_identity": "这个身份是暂时的。为了再次使用这个暂时身份，请设置密码",
         "title": "我的简历",
-        "select_language": "语言"
+        "select_language": "语言",
+        "set_language": "",
+        "language_description": "",
+        "dont_see_yours": "",
+        "tell_us": ""
     },
     "new_room": {
         "status_avatar": "正在上传头像：{count}",

src/components/CreateRoom.vue

@@ -68,8 +68,8 @@
           </v-select>
           <v-checkbox
             class="mt-0"
-            v-model="sharedComputer"
+            v-model="rememberMe"
-            :label="$t('join.shared_computer')"
+            :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) {
+      set: function (rememberMe) {
-        this.$store.commit("setUseLocalStorage", !sharedComputer);
+        this.$store.commit("setUseLocalStorage", !rememberMe);
       },
     },
   },

src/components/Join.vue

@@ -1,71 +1,41 @@
 <template>
-  <div class="join-root">
+  <div class="join-room" v-if="!waitingForInfo && !waitingForMembership">
-    <div v-if="!waitingForInfo && !waitingForMembership" class="text-center">
+    <div class="join-enter-room">
-      <v-btn
+      <div>
-        class="btn-login"
+        <div class="text-center">
-        text
+          <v-avatar class="join-avatar">
-        small
+            <v-img v-if="roomAvatar" :src="roomAvatar" />
-        @click.stop="handleLogin"
+            <span v-else class="white--text headline">
-        :loading="loading"
+              {{roomName.substring(0, 1).toUpperCase() }}
-        v-if="!currentUser"
+            </span>
-        >{{ $t("menu.login") }}</v-btn
+          </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
+        <v-btn
-        class="btn-light"
+          class="btn-dark"
-        large
+          large
-        block
+          @click.stop="handleJoin"
-        @click.stop="handleOpenApp"
+          :loading="loading"
-        :loading="loading"
+          v-if="!currentUser"
-        >Open Keanu app</v-btn
+          >{{ $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
+    <div class="join-lang">
-        class="btn-dark"
+      <h3 class="mb-2">{{ $t("profile.select_language") }}</h3>
-        large
+      <v-row class="align-center">
-        block
+        <v-col v-for="(lang,key) in getSortedLangByActive.slice(0, 4)" :key="key">
-        @click.stop="handleJoin"
+          <span :class="$i18n.locale==lang.value?'active':''" >  {{lang.text}} </span>
-        :loading="loading"
+        </v-col>
-        v-if="!currentUser"
+        <v-col>
-        >{{ $t("join.join_guest") }}</v-btn
+          <v-btn
-      >
+            class="language-more"
-      <v-btn
+            @click="showSelectLanguageDialog = true"
-        class="btn-dark"
+          >
-        large
+          <v-icon >language</v-icon><v-icon >more_horiz</v-icon>
-        block
+          </v-btn>
-        @click.stop="handleJoin"
+        </v-col>
-        :loading="loading"
+        <SelectLanguageDialog
-        v-else
+          v-model="showSelectLanguageDialog"
-        >{{ $t("join.join") }}</v-btn
+          v-on:close="showSelectLanguageDialog = false"
-      >
+        />
+      </v-row>
+    </div>
 
-      <!-- <div class="join-privacy">
+    <div class="d-flex justify-center align-center mt-9">
-        Enhance your physical privacy. <a href="#">Learn how</a>
+      <div class="mr-2">
-      </div> -->
+        <img
-
+          src="@/assets/logo.svg"
-      <div v-if="loadingMessage">{{ loadingMessage }}</div>
+          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) {
+      set: function (rememberMe) {
-        this.$store.commit("setUseLocalStorage", !sharedComputer);
+        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"
+          v-model="rememberMe"
-          :label="$t('join.shared_computer')"
+          :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) {
+      set: function (rememberMe) {
-        this.$store.commit("setUseLocalStorage", !sharedComputer);
+        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"
+      <v-card-title class="dialog-title d-block">
-        ><h3>{{ $t("profile.select_language") }}</h3></v-card-title
+        <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() {
+  mixins: [LanguageMixin],
-    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,
-      });
-    }
-  },
 };
 </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,
+      });
+    }
+  }
+}