Add kick,ban,make admin and make moderator operations

src/components/messages/ContactBanned.vue

@@ -0,0 +1,25 @@
+<template>
+  <!-- Contact left the chat -->
+  <div class="messageJoin">
+    {{ (event.getStateKey() == this.$matrix.currentUserId) ?
+    $t('message.user_was_banned_you')
+    :
+    event.getSender() == this.$matrix.currentUserId ?
+    $t('message.user_was_banned_by_you',{user: eventStateKeyDisplayName(event)})
+    :
+    $t('message.user_was_banned',{user: eventStateKeyDisplayName(event)})
+    }}
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/messages/ContactChanged.vue

@@ -33,7 +33,7 @@ export default {
       if (this.displayNameChange) {
         return this.event.getPrevContent().displayname;
       }
-      return this.stateEventDisplayName(this.event);
+      return this.eventStateKeyDisplayName(this.event);
     },
   }
 };

src/components/messages/ContactInvited.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- Contact invited to the chat -->
   <div class="messageJoin">
-    {{ $t('message.user_was_invited', {user: event.getContent().displayname || stateEventDisplayName(event)}) }}
+    {{ $t('message.user_was_invited', {user: event.getContent().displayname || eventStateKeyDisplayName(event)}) }}
   </div>
 </template>
 

src/components/messages/ContactJoin.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- Contact joined the chat -->
   <div class="messageJoin">
-    {{ $t('message.user_joined',{user: stateEventDisplayName(event)}) }}
+    {{ $t('message.user_joined',{user: eventSenderDisplayName(event)}) }}
   </div>
 </template>
 

src/components/messages/ContactKicked.vue

@@ -0,0 +1,25 @@
+<template>
+  <!-- Contact left the chat -->
+  <div class="messageJoin">
+    {{ (event.getStateKey() == this.$matrix.currentUserId) ?
+    $t('message.user_was_kicked_you')
+    :
+    event.getSender() == this.$matrix.currentUserId ?
+    $t('message.user_was_kicked_by_you',{user: eventStateKeyDisplayName(event)})
+    :
+    $t('message.user_was_kicked',{user: eventStateKeyDisplayName(event)})
+    }}
+  </div>
+</template>
+
+<script>
+import messageMixin from "./messageMixin";
+
+export default {
+  mixins: [messageMixin],
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/messages/ContactLeave.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- Contact left the chat -->
   <div class="messageJoin">
-    {{ $t('message.user_left',{user: stateEventDisplayName(event)}) }}
+    {{ $t('message.user_left',{user: eventStateKeyDisplayName(event)}) }}
   </div>
 </template>
 

src/components/messages/MessageIncoming.vue

@@ -2,7 +2,7 @@
   <!-- BASE CLASS FOR INCOMING MESSAGE -->
   <div :class="messageClasses">
     <div v-if="showSenderAndTime" class="senderAndTime">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+      <div class="sender">{{ eventSenderDisplayName(event) }}</div>
       <div class="time">
         {{ formatTime(event.event.origin_server_ts) }}
       </div>
@@ -10,7 +10,7 @@
     <v-avatar class="avatar" ref="avatar" size="32" color="#ededed" @click.stop="otherAvatarClicked($refs.avatar.$el)">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{
-        messageEventDisplayName(event).substring(0, 1).toUpperCase()
+        eventSenderDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>
     <!-- SLOT FOR CONTENT -->

src/components/messages/RoomAliased.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="statusEvent">
-    {{ $t('message.user_aliased_room', {user: stateEventDisplayName(event), alias: event.getContent().alias}) }}
+    {{ $t('message.user_aliased_room', {user: eventSenderDisplayName(event), alias: event.getContent().alias}) }}
   </div>
 </template>
 

src/components/messages/RoomAvatarChanged.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- ROOM AVATAR CHANGED -->
   <div class="statusEvent">
-    {{ $t('message.user_changed_room_avatar',{user: stateEventDisplayName(event)}) }}
+    {{ $t('message.user_changed_room_avatar',{user: eventSenderDisplayName(event)}) }}
   </div>
 </template>
 

src/components/messages/RoomCreated.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="statusEvent">
-    {{ $t('message.user_created_room', {user: stateEventDisplayName(event)}) }}
+    {{ $t('message.user_created_room', {user: eventSenderDisplayName(event)}) }}
   </div>
 </template>
 

src/components/messages/RoomDeletionNotice.vue

@@ -4,7 +4,7 @@
     👋 
     {{
       $t("purge_room.room_deletion_notice", {
-        user: stateEventDisplayName(event),
+        user: eventSenderDisplayName(event),
       })
     }}
   </div>

src/components/messages/RoomEncrypted.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="statusEvent">
-    {{ $t('message.user_encrypted_room', {user: stateEventDisplayName(event)}) }}
+    {{ $t('message.user_encrypted_room', {user: eventSenderDisplayName(event)}) }}
   </div>
 </template>
 

src/components/messages/RoomGuestAccessChanged.vue

@@ -3,10 +3,10 @@
     {{
       openToGuests
         ? $t("message.user_changed_guest_access_open", {
-            user: stateEventDisplayName(event),
+            user: eventSenderDisplayName(event),
           })
         : $t("message.user_changed_guest_access_closed", {
-            user: stateEventDisplayName(event),
+            user: eventSenderDisplayName(event),
           })
     }}
   </div>

src/components/messages/RoomHistoryVisibility.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- ROOM AVATAR CHANGED -->
   <div class="statusEvent">
-    {{ $t('message.user_changed_room_history',{user: stateEventDisplayName(event), type: history(event)}) }}
+    {{ $t('message.user_changed_room_history',{user: eventSenderDisplayName(event), type: history(event)}) }}
   </div>
 </template>
 

src/components/messages/RoomJoinRules.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- ROOM JOIN RULES CHANGED -->
   <div class="statusEvent">
-    {{ $t('message.user_changed_join_rules', { user: stateEventDisplayName(event), type: joinRule(event)}) }}
+    {{ $t('message.user_changed_join_rules', { user: eventSenderDisplayName(event), type: joinRule(event)}) }}
   </div>
 </template>
 

src/components/messages/RoomNameChanged.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- ROOM NAME CHANGED -->
   <div class="statusEvent">
-    {{ $t('message.user_changed_room_name', {user: stateEventDisplayName(event), name: event.getContent().name}) }}
+    {{ $t('message.user_changed_room_name', {user: eventSenderDisplayName(event), name: event.getContent().name}) }}
   </div>
 </template>
 

src/components/messages/RoomTopicChanged.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- ROOM TOPIC CHANGED -->
   <div class="statusEvent">
-    {{ $t('message.user_changed_room_topic', {user: stateEventDisplayName(event), topic: event.getContent().topic}) }}
+    {{ $t('message.user_changed_room_topic', {user: eventSenderDisplayName(event), topic: event.getContent().topic}) }}
   </div>
 </template>
 

src/components/messages/messageMixin.js

@@ -50,7 +50,7 @@ export default {
         const originalEvent = this.timelineSet.findEventById(originalEventId);
         if (originalEvent) {
           this.inReplyToEvent = originalEvent;
-          this.inReplyToSender = this.messageEventDisplayName(originalEvent);
+          this.inReplyToSender = this.eventSenderDisplayName(originalEvent);
         }
       }
     }
@@ -157,7 +157,7 @@ export default {
     /**
      * Get a display name given an event.
      */
-    stateEventDisplayName(event) {
+    eventSenderDisplayName(event) {
       if (event.getSender() == this.$matrix.currentUserId) {
         return this.$t('message.you');
       }
@@ -167,11 +167,26 @@ export default {
           return member.name;
         }
       }
-      return event.getContent().displayname || event.event.state_key;
+      return event.getContent().displayname || event.getSender();
     },
 
-    messageEventDisplayName(event) {
-      return this.stateEventDisplayName(event);
+    /**
+     * In the case where the state_key points out a userId for an operation (e.g. membership events)
+     * return the display name of the affected user.
+     * @param event 
+     * @returns 
+     */
+    eventStateKeyDisplayName(event) {
+      if (event.getStateKey() == this.$matrix.currentUserId) {
+        return this.$t('message.you');
+      }
+      if (this.room) {
+        const member = this.room.getMember(event.getStateKey());
+        if (member) {
+          return member.name;
+        }
+      }
+      return event.getStateKey();
     },
 
     messageEventAvatar(event) {