Merge branch '469-no-history-message-for-new-room-members' into 'dev'

For issue #469

See merge request keanuapp/keanuapp-weblite!179

src/assets/icons/ic_security-shield.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M25.619 7.08953L25.5625 7.07888C21.9335 6.38303 18.5747 4.43518 15.2936 1.12288L15.279 1.10825C15.079 0.906348 14.8083 0.790138 14.5241 0.784177C14.2399 0.778215 13.9646 0.88297 13.7563 1.0763L13.7064 1.12288C10.4253 4.43518 7.06646 6.38303 3.4375 7.07889L3.38096 7.08954C3.13088 7.13759 2.90535 7.27127 2.74316 7.46759C2.58096 7.6639 2.49221 7.91059 2.49219 8.16524V8.22179C2.49207 12.2448 3.55097 16.197 5.56245 19.681C7.57393 23.165 10.4671 26.0582 13.9512 28.0696C14.1095 28.1608 14.2881 28.211 14.4707 28.2156C14.6533 28.2203 14.8342 28.1792 14.9969 28.0962L15.0488 28.0696C18.5329 26.0582 21.4261 23.165 23.4375 19.681C25.449 16.197 26.5079 12.2448 26.5078 8.22179V8.16524C26.5078 7.91059 26.419 7.6639 26.2568 7.46758C26.0946 7.27126 25.8691 7.13759 25.619 7.08953ZM14.5 25.6827V3.59895C17.5695 6.48016 20.7467 8.30761 24.1581 9.15314C24.0015 12.4832 23.0412 15.7258 21.3594 18.6042C19.6776 21.4826 17.3241 23.9112 14.5 25.6827Z"
+            fill="#1D1D1D" />
+    </svg>
+</template>

src/assets/translations/en.json

@@ -113,7 +113,8 @@
     "join_public": "Anyone can join by opening this link: {link}.",
     "join_invite": "Only people you invite can join.",
     "info_permissions": "You can change ‘join permissions’ at any time in the room settings.",
-    "got_it": "Got it"
+    "got_it": "Got it",
+    "no_past_messages": "Welcome! For your security, past messages are not available."
   },
   "new_room": {
     "new_room": "New Room",

src/components/Chat.vue

@@ -42,7 +42,7 @@
 
       <CreatedRoomWelcomeHeader v-if="showCreatedRoomWelcomeHeader" v-on:close="closeCreateRoomWelcomeHeader" />
 
-      <div v-for="(event, index) in events" :key="event.getId()" :eventId="event.getId()">
+      <div v-for="(event, index) in filteredEvents" :key="event.getId()" :eventId="event.getId()">
         <!-- DAY Marker, shown for every new day in the timeline -->
         <div v-if="showDayMarkerBeforeEvent(event) && !!componentForEvent(event, isForExport = false)" class="day-marker" :title="dayForEvent(event)" />
 
@@ -69,6 +69,8 @@
           </div>
         </div>
       </div>
+
+      <NoHistoryRoomWelcomeHeader v-if="showNoHistoryRoomWelcomeHeader" />
     </div>
 
     <!-- Input area -->
@@ -268,6 +270,7 @@ import ChatHeader from "./ChatHeader";
 import VoiceRecorder from "./VoiceRecorder";
 import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
 import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
+import NoHistoryRoomWelcomeHeader from "./NoHistoryRoomWelcomeHeader.vue";
 import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
 import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
 import BottomSheet from "./BottomSheet.vue";
@@ -317,6 +320,7 @@ export default {
     VoiceRecorder,
     RoomInfoBottomSheet,
     CreatedRoomWelcomeHeader,
+    NoHistoryRoomWelcomeHeader,
     MessageOperationsBottomSheet,
     StickerPickerBottomSheet,
     BottomSheet,
@@ -529,6 +533,34 @@ export default {
         return util.useVoiceMode(this.room);
       },
     },
+    /**
+     * If we have no events and the room is encrypted, show info about this
+     * to the user.
+     */
+    showNoHistoryRoomWelcomeHeader() {
+      return this.filteredEvents.length == 0 && this.room && this.$matrix.matrixClient.isRoomEncrypted(this.room.roomId);
+    },
+
+    filteredEvents() {
+      if (this.room && this.$matrix.matrixClient.isRoomEncrypted(this.room.roomId)) {
+        if (this.room.getHistoryVisibility() == "joined") {
+          // For encrypted rooms where history is set to "joined" we can't read old events.
+          // We might, however, have old status events from room creation etc.
+          // We filter out anything that happened before our own join event.
+          for (let idx = this.events.length - 1; idx >= 0; idx--) {
+            const e = this.events[idx];
+            if (e.getType() == "m.room.member" &&
+              e.getContent().membership == "join" &&
+              (!e.getPrevContent() || e.getPrevContent().membership != "join") &&
+              e.getStateKey() == this.$matrix.currentUserId) {
+              // Our own join event.
+              return this.events.slice(idx + 1);
+            }
+          }
+        }
+      }
+      return this.events;
+    }
   },
 
   watch: {

src/components/NoHistoryRoomWelcomeHeader.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="text-center">
+    <v-icon size="27" class="shield">$vuetify.icons.ic_security-shield</v-icon>
+    <div>{{ $t("room_welcome.no_past_messages") }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NoHistoryRoomWelcomeHeader",
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+.shield {
+  margin-bottom: 12px;  
+}
+</style>