Merge branch '626-add-display-and-checkbox-for-user-agreement' into 'dev'

Add checkbox for user agreement

See merge request keanuapp/keanuapp-weblite!336

src/assets/translations/en.json

@@ -265,7 +265,8 @@
     "logout": "Logout",
     "want_more": "Want more?",
     "powered_by": "This room is powered by {product}. Learn more at {productLink} or go ahead and create another room!",
-    "new_room": "New room"
+    "new_room": "New room",
+    "review_ua": "Review the Service User Agreement"
   },
   "join": {
     "title": "Welcome you have been invited to join",
@@ -281,7 +282,9 @@
     "status_joining": "Joining room...",
     "join_failed": "Failed to join room.",
     "choose_name": "Choose a name to use",
-    "you_have_been_banned": "You have been banned from this room."
+    "you_have_been_banned": "You have been banned from this room.",
+    "accept_ua": "I agree to the {agreement}",
+    "ua": "service user agreement"
   },
   "invite": {
     "title": "Add Friends",

src/components/CreateRoom.vue

@@ -37,8 +37,11 @@
             <v-card-text class="with-right-label">
               <div>
                 <div class="paragraph-bold">{{ $t('room_info.message_retention') }}</div>
-                <div class="caption-1-gray">{{ limitHistory ? $t('room_info.limit_history_info', {period: roomMessageRetentionDisplayString(limitHistoryMilliseconds)}) : $t('room_info.message_retention_info') }}</div>
+                <div class="caption-1-gray">{{ limitHistory ? $t('room_info.limit_history_info', {period:
-                <div v-show="limitHistory" @click="showRetentionDialog" class="paragraph paragraph-button mt-4 clickable">{{ $t('menu.edit') }}</div>
+                  roomMessageRetentionDisplayString(limitHistoryMilliseconds)}) : $t('room_info.message_retention_info')
+                  }}</div>
+                <div v-show="limitHistory" @click="showRetentionDialog"
+                  class="paragraph paragraph-button mt-4 clickable">{{ $t('menu.edit') }}</div>
               </div>
               <v-switch class="ma-0" v-model="limitHistory"></v-switch>
             </v-card-text>
@@ -100,16 +103,29 @@
                 :label="$t('join.remember_me')" />
             </v-col>
           </v-row>
+          <v-row class="mt-0">
+            <v-col class="py-0">
+              <v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA">
+                <template slot="label">
+                  <i18n path="join.accept_ua" tag="span">
+                    <template v-slot:agreement>
+                      <a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
+                    </template>
+                  </i18n>
+                </template>
+              </v-checkbox>
+            </v-col>
+          </v-row>
           <v-btn color="black" depressed class="filled-button" @click.stop="onEnterRoom"
-            :disabled="!selectedProfile.name">
+            :disabled="!acceptUA || !selectedProfile.name">
             {{ $t("join.enter_room") }}
           </v-btn>
         </v-container>
       </v-card>
     </v-dialog>
 
-    <MessageRetentionDialog :initialValue="limitHistoryMilliseconds" :show="selectRetentionDialog" v-on:close="selectRetentionDialog = false"
+    <MessageRetentionDialog :initialValue="limitHistoryMilliseconds" :show="selectRetentionDialog"
-      v-on:message-retention-update="onUpdateHistoryLimit" />
+      v-on:close="selectRetentionDialog = false" v-on:message-retention-update="onUpdateHistoryLimit" />
   </div>
 </template>
 
@@ -139,7 +155,8 @@ export default {
       selectRetentionDialog: false,
       publicRoom: false,
       limitHistory: false,
-      limitHistoryMilliseconds: 2 * 7 * 24 * 3600 * 1000, // 2 weeks default
+      limitHistoryMilliseconds: 2 * 7 * 24 * 3600 * 1000, // 2 weeks default,
+      acceptUA: false
     };
   },
 

src/components/Join.vue

@@ -22,27 +22,12 @@
 
         <v-row v-if="canEditProfile">
           <v-col cols="10" sm="7" class="py-0">
-            <v-select
+            <v-select ref="avatar" :items="availableAvatars" cache-items outlined dense @change="selectAvatar"
-              ref="avatar"
+              :value="selectedProfile" single-line autofocus>
-              :items="availableAvatars"
-              cache-items
-              outlined
-              dense
-              @change="selectAvatar"
-              :value="selectedProfile"
-              single-line
-              autofocus
-            >
               <template v-slot:selection>
-                <v-text-field
+                <v-text-field background-color="transparent" solo flat hide-details
-                  background-color="transparent"
+                  @click.native.stop="(event) => event.target.focus()" @focus="$event.target.select()"
-                  solo
+                  v-model="selectedProfile.name"></v-text-field>
-                  flat
-                  hide-details
-                  @click.native.stop="(event) => event.target.focus()"                 
-                  @focus="$event.target.select()"
-                  v-model="selectedProfile.name"
-                ></v-text-field>
               </template>
               <template v-slot:item="data">
                 <v-avatar size="32">
@@ -51,13 +36,8 @@
                 <div class="ms-2">{{ data.item.name }}</div>
               </template>
             </v-select>
-            <v-checkbox
+            <v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')"
-              id="chk-remember-me"
+              @change="onRememberMe" />
-              class="mt-0"
-              v-model="rememberMe"
-              :label="$t('join.remember_me')"
-              @change="onRememberMe"
-            />
           </v-col>
           <v-col cols="2" sm="5" class="py-0">
             <v-avatar @click="showAvatarPicker">
@@ -78,29 +58,34 @@
           </v-col>
         </v-row>
 
+        <v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA">
+          <template slot="label">
+            <i18n path="join.accept_ua" tag="span">
+              <template v-slot:agreement>
+                <a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
+              </template>
+            </i18n>
+          </template>
+        </v-checkbox>
+        
         <interactive-auth ref="interactiveAuth" />
 
-        <v-btn id="btn-join" class="btn-dark" :disabled="room && room.selfMembership == 'ban'" large @click.stop="handleJoin" :loading="loading" v-if="!currentUser">{{
+        <v-btn id="btn-join" class="btn-dark" :disabled="!acceptUA || (room && room.selfMembership == 'ban')" large
+          @click.stop="handleJoin" :loading="loading" v-if="!currentUser">{{
           roomId && roomId.startsWith("@") ? $t("join.enter_room_user") : $t("join.enter_room")
-        }}</v-btn>
+          }}</v-btn>
-        <v-btn id="btn-join" class="btn-dark" :disabled="room && room.selfMembership == 'ban'" large block @click.stop="handleJoin" :loading="loading" v-else>{{
+        <v-btn id="btn-join" class="btn-dark" :disabled="!acceptUA || (room && room.selfMembership == 'ban')" large
+          block @click.stop="handleJoin" :loading="loading" v-else>{{
           roomId && roomId.startsWith("@") ? $t("join.join_user") : $t("join.join")
-        }}</v-btn>
+          }}</v-btn>
 
         <div v-if="loadingMessage" class="text-center">{{ loadingMessage }}</div>
         <div v-if="room && room.selfMembership == 'ban'" class="text-center">{{ $t("join.you_have_been_banned") }}</div>
       </div>
     </div>
 
-    <input
+    <input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
-      id="room-avatar-picker"
+      accept="image/*" class="d-none" />
-      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>
@@ -131,20 +116,12 @@
     </div>
   </div>
 
- <!-- Loading indicator -->
+  <!-- Loading indicator -->
- <v-container
+  <v-container v-else fluid fill-height class="loading-indicator transparent">
-   v-else
-      fluid
-      fill-height
-      class="loading-indicator transparent"
-    >
     <v-row align="center" justify="center">
       <v-col class="text-center">
         <interactive-auth ref="interactiveAuth" v-if="waitingForRoomCreation" />
-        <v-progress-circular v-else
+        <v-progress-circular v-else indeterminate color="primary"></v-progress-circular>
-          indeterminate
-          color="primary"
-        ></v-progress-circular>
       </v-col>
     </v-row>
   </v-container>
@@ -178,6 +155,7 @@ export default {
       selectedProfile: null,
       showEditDisplaynameDialog: false,
       showSelectLanguageDialog: false,
+      acceptUA: false,
     };
   },
   computed: {

src/components/ProfileInfoPopup.vue

@@ -56,6 +56,8 @@
             </v-btn>
           </div>
         </div>
+
+        <a href="./ua.html" class="review-ua-link">{{ $t("profile_info_popup.review_ua") }}</a>
       </v-card-text>
     </v-card>
   </v-dialog>
@@ -198,6 +200,16 @@ export default {
     }
   }
 
+  .review-ua-link {
+    margin-top: 10px;
+    text-decoration: none;
+    color: #181719;
+    font-family: 'Inter', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10 * $chat-text-size !important;
+  }
+
   @media #{map-get($display-breakpoints, 'sm-and-up')} {
     width: 70%;
   }

src/router/index.js

@@ -138,7 +138,7 @@ router.beforeEach((to, from, next) => {
     }
     const roomId = util.sanitizeRoomId(to.params.roomId);
     router.app.$matrix.setCurrentRoomId(roomId);
-    if (roomId && roomId.startsWith('#')) {
+    if (roomId) {
       //Invite to public room
       authRequired = false;
     }