Merge branch 'dev'

src/assets/css/chat.scss

@@ -487,6 +487,8 @@ $admin-fg: white;
     text-align: center;
     margin: 20px;
     user-select: text;
+    overflow-wrap: break-word;
+    word-break: break-word;
 }
 
 .notice {

src/assets/translations/bo.json

@@ -47,7 +47,8 @@
         "password_required": "གསང་ཚིག་དགོས་ཀྱི་ཡོད།",
         "username_required": "སྤྱོད་མིང་དགོས་ཀྱི་ཡོད།",
         "create_room": "ཐོ་འགོད་དང་ཁ་བརྡ་ཁང་གསར་སྐྲུན།",
-        "or": "ཡང་ན།"
+        "or": "ཡང་ན།",
+        "invalid_message": ""
     },
     "new_room": {
         "next": "རྗེས་མ།",

src/assets/translations/de.json

@@ -110,7 +110,8 @@
         "password_required": "Das Passwort ist erforderlich",
         "login": "Anmelden",
         "create_room": "Registrieren und Raum erstellen",
-        "or": "ODER"
+        "or": "ODER",
+        "invalid_message": ""
     },
     "profile": {
         "title": "Mein Profil",

src/assets/translations/en.json

@@ -115,7 +115,8 @@
     "password_required": "Password is required",
     "login": "Login",
     "create_room": "Register & Create Room",
-    "or": "OR"
+    "or": "OR",
+    "invalid_message": "Invalid username or password"
   },
   "profile": {
     "title": "My Profile",

src/assets/translations/es.json

@@ -76,7 +76,8 @@
         "username": "Nombre de Usuario",
         "title": "Iniciar sesión",
         "create_room": "",
-        "or": ""
+        "or": "",
+        "invalid_message": ""
     },
     "device_list": {
         "not_verified": "No ha sido Verificado",

src/assets/translations/fi.json

@@ -60,7 +60,8 @@
         "login": "Kirjaudu sisään",
         "password": "Anna salasana",
         "password_required": "Salasana vaaditaan",
-        "create_room": "Rekisteröidy ja luo huone"
+        "create_room": "Rekisteröidy ja luo huone",
+        "invalid_message": ""
     },
     "join": {
         "joining_as": "Liityt jäsenenä:",

src/assets/translations/fr.json

@@ -110,7 +110,8 @@
         "password_required": "Le mot de passe est obligatoire",
         "create_room": "S’inscrire et créer un salon",
         "or": "OU",
-        "login": "Se connecter"
+        "login": "Se connecter",
+        "invalid_message": ""
     },
     "profile": {
         "temporary_identity": "Cette identité est temporaire. Définissez un mot de passe pour l’utiliser à nouveau",

src/assets/translations/it.json

@@ -109,7 +109,8 @@
         "login": "Accedi",
         "create_room": "Registrati e crea una stanza",
         "or": "O",
-        "username_required": "Il nome utente è richiesto"
+        "username_required": "Il nome utente è richiesto",
+        "invalid_message": ""
     },
     "profile": {
         "title": "Il mio profilo",

src/assets/translations/nb_NO.json

@@ -102,7 +102,8 @@
         "password": "Passord",
         "username": "Brukernavn",
         "create_room": "",
-        "or": ""
+        "or": "",
+        "invalid_message": ""
     },
     "new_room": {
         "add_people": "Legg til folk",

src/assets/translations/pt_BR.json

@@ -128,7 +128,8 @@
         "password_required": "A senha é obrigatória",
         "login": "Entrar",
         "create_room": "Cadastre-se e crie uma sala",
-        "or": "OU"
+        "or": "OU",
+        "invalid_message": ""
     },
     "profile": {
         "title": "Meu perfil",

src/assets/translations/ro.json

@@ -135,7 +135,8 @@
         "username": "Nume utilizator (ex: marta)",
         "title": "Autentificare",
         "create_room": "",
-        "or": ""
+        "or": "",
+        "invalid_message": ""
     },
     "device_list": {
         "not_verified": "Nu a fost verificat",

src/assets/translations/si.json

@@ -23,5 +23,8 @@
         "download_progress": "{percentage}% බාගත වී ඇත",
         "file_prefix": "ගොනුව: ",
         "you": "ඔබ"
+    },
+    "login": {
+        "invalid_message": ""
     }
 }

src/assets/translations/ug.json

@@ -221,7 +221,8 @@
         "username": "قوللانغۇچى ئىسمى (مەسىلەن: marta)",
         "title": "كىرىش",
         "create_room": "",
-        "or": ""
+        "or": "",
+        "invalid_message": ""
     },
     "device_list": {
         "not_verified": "دەلىللەنمىدى",

src/assets/translations/zh_Hans.json

@@ -50,7 +50,8 @@
         "username_required": "需要用户名",
         "username": "用户名 (如: marta)",
         "create_room": "",
-        "or": ""
+        "or": "",
+        "invalid_message": ""
     },
     "device_list": {
         "title": "设备",

src/components/Chat.vue

@@ -122,6 +122,7 @@
     <v-container v-if="room" fluid class="input-area-outer">
       <!-- "Scroll to end"-button -->
       <v-btn
+        id="btn-scroll-to-end"
         class="scroll-to-end"
         v-show="showScrollToEnd"
         fab
@@ -150,6 +151,7 @@
       <v-row class="input-area-inner align-center">
         <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
           <v-textarea
+            id="message-input"
             height="undefined"
             ref="messageInput"
             full-width
@@ -174,6 +176,7 @@
           v-if="editedEvent || replyToEvent"
         >
           <v-btn
+            id="btn-cancel-reply"
             fab
             small
             elevation="0"
@@ -189,6 +192,7 @@
           v-if="!currentInput || currentInput.length == 0 || showRecorder"
         >
           <v-btn
+            id="btn-microphone"
             v-if="canRecordAudio"
             class="mic-button"
             ref="mic_button"
@@ -203,6 +207,7 @@
           </v-btn>
           <v-btn
             v-else
+            id="btn-microphone"
             class="mic-button"
             ref="mic_button"
             fab
@@ -221,6 +226,7 @@
           v-else
         >
           <v-btn
+            id="btn-send"
             fab
             small
             elevation="0"
@@ -239,6 +245,7 @@
           class="input-area-button text-center flex-grow-0 flex-shrink-1"
         >
           <v-btn
+            id="btn-stickers"
             v-if="!showRecorder"
             icon
             large
@@ -254,6 +261,7 @@
           <label icon flat ref="attachmentLabel">
             <v-btn
               v-if="!showRecorder"
+              id="btn-attach"
               icon
               large
               color="black"
@@ -263,6 +271,7 @@
               <v-icon x-large>add_circle_outline</v-icon>
             </v-btn>
             <input
+              id="attachment-picker"
               ref="attachment"
               type="file"
               name="attachment"
@@ -339,10 +348,11 @@
           <v-divider></v-divider>
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn color="primary" text @click="cancelSendAttachment">{{
+            <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel">{{
               $t("menu.cancel")
             }}</v-btn>
             <v-btn
+              id="btn-attachment-send"
               color="primary"
               text
               @click="sendAttachment"
@@ -419,6 +429,7 @@
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn
+            id="btn-ok"
             color="primary"
             text
             @click="showNoRecordingAvailableDialog = false"

src/components/ChatHeader.vue

@@ -8,7 +8,7 @@
         @click.stop="onHeaderClicked"
       >
         <v-avatar size="40" class="me-2">
-          <v-img :src="room.avatar" />
+          <v-img :src="room.avatar || memberAvatar" />
         </v-avatar>
       </v-col>
 
@@ -24,7 +24,7 @@
         <div class="num-members">{{ $tc("room.members", memberCount) }}</div>
       </v-col>
       <v-col cols="auto" class="text-end ma-0 pa-0">
-        <v-btn text class="leave-button" @click.stop="leaveRoom">{{
+        <v-btn id="btn-leave-room" text class="leave-button" @click.stop="leaveRoom">{{
           $t("room.leave")
         }}</v-btn>
       </v-col>
@@ -88,8 +88,27 @@ export default {
     room() {
       return this.$matrix.currentRoom;
     },
+    memberAvatar() {
+      let roomMember;
+      if (this.room) {
+        this.room.getMembers().forEach(member => {
+          if(this.room.name === member.name) {
+            roomMember =  member;
+          }
+        });
+        if (roomMember) {
+          return roomMember.getAvatarUrl(
+            this.$matrix.matrixClient.getHomeserverUrl(),
+            40,
+            40,
+            "scale",
+            true
+          );
+        }
+      }
+      return null;
+    }
   },
-
   watch: {
     room: {
       handler(newVal, ignoredOldVal) {

src/components/CreateRoom.vue

@@ -4,6 +4,7 @@
       <v-container fluid>
         <div class="room-name no-upper">{{ $t("new_room.new_room") }}</div>
         <v-btn
+          id="btn-back"
           text
           class="header-button-left"
           v-show="$navigation && $navigation.canPop()"
@@ -67,6 +68,7 @@
             </template>
           </v-select>
           <v-checkbox
+            id="chk-remember-me"
             class="mt-0"
             v-model="rememberMe"
             :label="$t('join.remember_me')"
@@ -104,6 +106,7 @@
             :disabled="step > steps.INITIAL"
           ></v-text-field>
           <v-btn
+            id="btn-room-create"
             color="black"
             depressed
             class="filled-button"
@@ -201,6 +204,7 @@
       <!-- </div> -->
     </v-fade-transition>
     <input
+      id="room-avatar-picker"
       ref="avatar"
       type="file"
       name="avatar"

src/components/CreatedRoomWelcomeHeader.vue

@@ -4,7 +4,7 @@
     <div class="mt-2" v-if="roomJoinRule == 'public'">
       <i18n path="room_welcome.join_public" tag="span">
         <template v-slot:link>
-          <a :href="publicRoomLink">{{ publicRoomLink }}</a>
+          <a :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
         </template>
       </i18n>
     </div>
@@ -19,7 +19,7 @@
       {{ roomHistoryDescription }}
     </div>
     <div class="text-right">
-      <v-btn text @click.stop="$emit('close')" style="text-transform: none">{{
+      <v-btn id="btn-got-it" text @click.stop="$emit('close')" style="text-transform: none">{{
         $t("room_welcome.got_it")
       }}</v-btn>
     </div>

src/components/Invite.vue

@@ -3,6 +3,7 @@
     <div class="flex-grow-0 flex-shrink-0">
       <div class="room-name">{{$t('invite.title')}}</div>
       <v-btn
+        id="btn-invite-done"
         :loading="loading"
         text
         class="header-button-right"

src/components/Join.vue

@@ -27,7 +27,7 @@
               @click.native.stop="{}"
               v-model="selectedProfile.name"
             ></v-text-field>
-            <v-checkbox class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')" />
+            <v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')" />
           </v-col>
           <v-col cols="2" sm="5">
             <v-avatar @click="showAvatarPickerList">
@@ -51,6 +51,7 @@
         </v-row>
 
         <v-btn
+          id="btn-join"
           class="btn-dark"
           large
           @click.stop="handleJoin"
@@ -59,6 +60,7 @@
           >{{ $t("join.enter_room") }}</v-btn
         >
         <v-btn
+          id="btn-join"
           class="btn-dark"
           large
           block
@@ -80,6 +82,7 @@
         </v-col>
         <v-col>
           <v-btn
+            id="btn-select-language"
             class="language-more"
             @click="showSelectLanguageDialog = true"
           >

src/components/LeaveRoomDialog.vue

@@ -43,6 +43,7 @@
         <v-row cols="12">
           <v-col cols="6">
             <v-btn
+              id="btn-back"
               depressed
               text
               block
@@ -53,6 +54,7 @@
           </v-col>
           <v-col cols="6" align="center">
             <v-btn
+              id="btn-leave"
               color="red"
               depressed
               block

src/components/Login.vue

@@ -15,7 +15,7 @@
             <div class="room-name no-upper">{{ $t("login.title") }}</div>
           </v-col>
           <v-col class="text-right">
-            <v-btn text v-if="showCloseButton" @click.stop="$navigation.pop">
+            <v-btn id="btn-close" text v-if="showCloseButton" @click.stop="$navigation.pop">
               <v-icon>close</v-icon>
             </v-btn>
           </v-col>
@@ -37,6 +37,7 @@
           :error-messages="userErrorMessage"
           required
           v-on:keyup.enter="$refs.password.focus()"
+          v-on:keydown="hasError=false"
         ></v-text-field>
         <v-text-field
           prepend-inner-icon="$vuetify.icons.password"
@@ -51,6 +52,7 @@
           :error="passErrorMessage != null"
           :error-messages="passErrorMessage"
           required
+          v-on:keydown="hasError=false"
           v-on:keyup.enter="
             () => {
               if (isValid && !loading) {
@@ -59,12 +61,15 @@
             }
           "
         ></v-text-field>
+        <div class="error--text" v-if="hasError">{{ this.message }}</div>
         <v-checkbox
+          id="chk-remember-me"
           class="mt-0"
           v-model="rememberMe"
           :label="$t('join.remember_me')"
         />
         <v-btn
+          id="btn-login"
           :disabled="!isValid || loading"
           color="black"
           depressed
@@ -76,6 +81,7 @@
         >
         <div class="mt-2 overline">{{ $t("login.or") }}</div>
         <v-btn
+          id="btn-create-room"
           color="primary"
           depressed
           block
@@ -102,6 +108,7 @@ export default {
       message: "",
       userErrorMessage: null,
       passErrorMessage: null,
+      hasError: false
     };
   },
   computed: {
@@ -142,19 +149,7 @@ export default {
         this.passErrorMessage = null;
       },
       deep: true,
-    },
+    }
-    message() {
-      if (this.message && this.message.toLowerCase().includes("user")) {
-        this.userErrorMessage = this.message;
-      } else {
-        this.userErrorMessage = null;
-      }
-      if (this.message && this.message.toLowerCase().includes("pass")) {
-        this.passErrorMessage = this.message;
-      } else {
-        this.passErrorMessage = null;
-      }
-    },
   },
   methods: {
     handleLogin() {
@@ -189,6 +184,10 @@ export default {
               (error.data && error.data.error) ||
               error.message ||
               error.toString();
+            if(error.data.errcode ==='M_FORBIDDEN') {
+              this.message = this.$i18n.messages[this.$i18n.locale].login.invalid_message;
+              this.hasError = true;
+            }
             console.log("Message set to ", this.message);
           }
         );

src/components/Profile.vue

@@ -4,6 +4,7 @@
       <v-container fluid>
         <div class="room-name no-upper">{{ $t("profile.title") }}</div>
         <v-btn
+          id="btn-close"
           text
           class="header-button-right"
           v-show="$navigation && $navigation.canPop()"
@@ -26,6 +27,7 @@
             <img v-if="userAvatar" :src="userAvatar" />
             <span v-else class="white--text">{{ userAvatarLetter }}</span>
             <input
+              id="avatar-picker"
               ref="avatar"
               type="file"
               name="avatar"
@@ -41,7 +43,7 @@
           <!-- <div v-if="$matrix.currentUser.is_guest">
             {{ $t("profile.temporary_identity") }}
           </div> -->
-          <v-btn depressed block class="outlined-button" @click.stop="logout">{{
+          <v-btn id="btn-logout" depressed block class="outlined-button" @click.stop="logout">{{
             $t("menu.logout")
           }}</v-btn>
         </v-col>
@@ -101,10 +103,11 @@
         <v-divider></v-divider>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn text @click="closeEditPasswordDialog">{{
+          <v-btn id="btn-password-cancel" text @click="closeEditPasswordDialog">{{
             $t("menu.cancel")
           }}</v-btn>
           <v-btn
+            id="btn-password-set"
             :disabled="!passwordsMatch"
             color="primary"
             text
@@ -136,10 +139,11 @@
         <v-divider></v-divider>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn text @click="showEditDisplaynameDialog = false">{{
+          <v-btn id="btn-displayname-cancel" text @click="showEditDisplaynameDialog = false">{{
             $t("menu.cancel")
           }}</v-btn>
           <v-btn
+            id="btn-displayname-set"
             color="primary"
             text
             @click="

src/components/ProfileInfoPopup.vue

@@ -3,7 +3,6 @@
     v-model="showDialog"
     content-class="profile-info-popup"
     class="ma-0 pa-0"
-    :width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
   >
     <v-card flat>
       <v-card-text>
@@ -31,7 +30,7 @@
                 class="avatar-32"
                 size="32"
                 color="#e0e0e0"
-                @click.stop="showProfileInfo = true"
+                @click.stop="viewProfile"
               >
                 <img v-if="userAvatar" :src="userAvatar" />
                 <span v-else class="white--text">{{ userAvatarLetter }}</span>
@@ -67,7 +66,7 @@
             style="position: relative; width: 100%; height: 40px"
             class="text-end"
           >
-            <v-btn class="new_room" text @click="createRoom">{{
+            <v-btn id="btn-new-room" class="new_room" text @click="createRoom">{{
               $t("profile_info_popup.new_room")
             }}</v-btn>
           </div>
@@ -149,6 +148,8 @@ export default {
     left: 10px;
   }
   border-radius: 40px;
+  width: 95%;
+
   &::before {
     content: "▲";
     position: fixed;
@@ -183,12 +184,18 @@ export default {
       font-size: 13 * $chat-text-size !important;
     }
   }
+
+  @media #{map-get($display-breakpoints, 'sm-and-up')} {
+    width: 70%;
+  }
+
   @media #{map-get($display-breakpoints, 'lg-and-up')} {
     overflow: unset;
     width: $main-desktop-width;;
     position: absolute;
     top: 70px;
     right: unset;
+    width: $dialog-desktop-width;
 
     &::before {
       position: absolute;

src/components/PurgeRoomDialog.vue

@@ -1,10 +1,14 @@
 <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 ? '940px' : '95%'"
+  >
     <div v-if="timeout == -1" class="dialog-content text-center">
       <template>
         <v-img contain height="28" src="@/assets/icons/trash_black.svg" />
         <h2 class="dialog-title">{{ $t("purge_room.title") }}</h2>
-        <div class="dialog-text">
+        <div class="dialog-text text-center">
           {{ $t("purge_room.info") }}
         </div>
         <div class="dialog-text">
@@ -15,6 +19,7 @@
         <v-row cols="12">
           <v-col cols="6">
             <v-btn
+              id="btn-purge-room-cancel"
               depressed
               text
               block
@@ -26,6 +31,7 @@
           </v-col>
           <v-col cols="6" align="center">
             <v-btn
+              id="btn-purge-room"
               color="red"
               depressed
               block
@@ -60,6 +66,7 @@
         <v-row cols="12">
           <v-col cols="12">
             <v-btn
+              id="btn-purge-room-undo"
               depressed
               text
               block

src/components/QuoteView.vue

@@ -28,6 +28,7 @@
 
         <v-btn
           v-if="joinedToAnyRoom"
+          id="btn-goodbye-view-other"
           color="white"
           text
           class="close"
@@ -36,6 +37,7 @@
         >
         <v-btn
           v-else
+          id="btn-goodbye-close"
           color="white"
           text
           class="close"

src/components/RoomInfo.vue

@@ -4,6 +4,7 @@
       <v-container fluid>
         <div class="room-name no-upper">{{ $t("room_info.title") }}</div>
         <v-btn
+          id="btn-back"
           text
           class="header-button-left"
           v-show="$navigation && $navigation.canPop()"
@@ -13,6 +14,7 @@
           <span>{{ $t("menu.back") }}</span>
         </v-btn>
         <v-btn
+          id="btn-leave-room"
           color="black"
           depressed
           class="header-button-right filled-button me-3"
@@ -55,6 +57,7 @@
           <v-col align="center" class="mt-0 pt-0">
             <v-btn
               v-if="publicRoomLinkCopied"
+              id="btn-copy-room-link"
               color="#DEE6FF"
               depressed
               class="filled-button link-copied-in-place"
@@ -63,6 +66,7 @@
             >
             <v-btn
               v-else
+              id="btn-copy-room-link"
               color="black"
               depressed
               class="filled-button"
@@ -166,6 +170,7 @@
     <!-- PURGE ROOM -->
     <div class="members ma-3 pa-3 text-center">
       <v-btn
+        id="btn-purge-room"
         v-if="userCanPurgeRoom"
         color="red"
         depressed

src/components/RoomInfoBottomSheet.vue

@@ -14,6 +14,7 @@
         <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
         <div class="h2">{{ roomName }}</div>
         <v-btn
+          id="btn-room-details"
           height="20px"
           color="black"
           class="filled-button"

src/components/RoomList.vue

@@ -26,6 +26,7 @@
         </v-list-item-content>
         <v-list-item-action>
           <v-btn
+            id="btn-accept"
             class="filled-button"
             depressed
             color="black"
@@ -33,6 +34,7 @@
             >{{ $t("menu.join") }}</v-btn
           >
           <v-btn
+            id="btn-reject"
             class="filled-button"
             color="black"
             @click.stop="rejectInvitation(room)"

src/components/SelectLanguageDialog.vue

@@ -28,6 +28,7 @@
       </v-card-text>
       <v-card-actions>
         <v-btn
+          id="btn-done"
           color="black"
           depressed
           block

src/components/VoiceRecorder.vue

@@ -16,6 +16,7 @@
           <v-col cols="4" align="center">
             <v-btn
               v-if="state == states.RECORDING"
+              id="btn-pause"
               style="background-color: white; padding: 30px"
               icon
               @click.stop="pauseRecording"
@@ -24,6 +25,7 @@
             </v-btn>
             <v-btn
               v-else-if="state == states.RECORDED"
+              id="btn-send"
               style="background-color: #3ae17d; padding: 30px"
               icon
               :disabled="!recordedFile"
@@ -33,6 +35,7 @@
             </v-btn>
             <v-btn
               v-else
+              id="btn-record"
               style="background-color: red; padding: 30px"
               icon
               @click.stop="startRecording"
@@ -41,7 +44,7 @@
             </v-btn>
           </v-col>
           <v-col cols="4" align="center">
-            <v-btn icon @click.stop="cancelRecording">
+            <v-btn id="btn-record-cancel" icon @click.stop="cancelRecording">
               <v-icon color="white">close</v-icon>
             </v-btn>
           </v-col>
@@ -97,12 +100,12 @@
                 </div>
               </v-col>
               <v-col cols="3">
-                <v-btn @click.stop="cancelRecording" text class="swipe-info">{{
+                <v-btn id="btn-record-cancel" @click.stop="cancelRecording" text class="swipe-info">{{
                   $t("menu.cancel")
                 }}</v-btn>
               </v-col>
               <v-col cols="3">
-                <v-btn @click.stop="stopRecording" icon class="swipe-info"
+                <v-btn id="btn-record-stop" @click.stop="stopRecording" icon class="swipe-info"
                   ><v-icon color="white">stop</v-icon></v-btn
                 >
               </v-col>
@@ -124,7 +127,7 @@
               </div>
             </v-col>
             <v-col align="right">
-              <v-btn icon @click.stop="cancelRecording">
+              <v-btn id="btn-record-cancel" icon @click.stop="cancelRecording">
                 <v-icon color="white">close</v-icon>
               </v-btn>
             </v-col>

src/components/YouAre.vue

@@ -22,7 +22,7 @@
           </template>
         </i18n>
       </span>
-      <v-avatar color="#e0e0e0" right @click.stop="showProfileInfo = true">
+      <v-avatar color="#e0e0e0" right @click.stop="viewProfile">
         <img v-if="userAvatar" :src="userAvatar" />
         <span v-else class="white--text">{{ userAvatarLetter }}</span>
       </v-avatar>

src/components/messages/AudioPlayer.vue

@@ -3,10 +3,10 @@
     <audio ref="player" :src="src" @durationchange="updateDuration">
       <slot></slot>
     </audio>
-    <v-btn v-if="playing" @click.stop="pause" icon
+    <v-btn v-if="playing" id="btn-pause" @click.stop="pause" icon
       ><v-icon size="20">pause</v-icon></v-btn
     >
-    <v-btn v-else @click.stop="play" icon
+    <v-btn v-else id="btn-play" @click.stop="play" icon
       ><v-icon size="20">play_arrow</v-icon></v-btn
     >
     <div class="play-time" style="flex: 1 0 80px">

src/components/messages/AvatarOperations.vue

@@ -6,7 +6,7 @@
       outgoing: !incoming,
     }"
   >
-    <v-btn v-if="incoming" text @click.stop="startPrivateChat" class="ma-0 pa-0"
+    <v-btn id="btn-private-chat" v-if="incoming" text @click.stop="startPrivateChat" class="ma-0 pa-0"
       >{{ $t("menu.start_private_chat") }}</v-btn
     >
   </div>

src/components/messages/MessageIncoming.vue

@@ -16,7 +16,7 @@
     <!-- SLOT FOR CONTENT -->
     <slot></slot>
     <div class="op-button" ref="opbutton">
-      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+      <v-btn id="btn-more" icon @click.stop="showContextMenu($refs.opbutton)"
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>

src/components/messages/MessageOperations.vue

@@ -1,14 +1,14 @@
 <template>
   <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
     <template v-for="(item,index) in emojis">
-      <v-btn v-if="index < maxRecents" :key="item.data" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense>
+      <v-btn v-if="index < maxRecents" :key="item.data" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense>
         <span class="recent-emoji">{{ item.data }}</span>
       </v-btn>
     </template>
-    <v-btn v-if="incoming" icon @click.stop="addReply" class="ma-0 pa-0" large>
+    <v-btn v-if="incoming" id="btn-reply" icon @click.stop="addReply" class="ma-0 pa-0" large>
       <v-icon>reply</v-icon>
     </v-btn>
-    <v-btn icon @click.stop="more" class="ma-0 pa-0" large>
+    <v-btn id="btn-more" icon @click.stop="more" class="ma-0 pa-0" large>
       <v-icon>more_horiz</v-icon>
     </v-btn>  </div>
 </template>

src/components/messages/MessageOperationsPicker.vue

@@ -9,25 +9,25 @@
     <v-container fluid>
       <v-row>
         <v-col v-if="incoming">
-          <v-btn icon @click.stop="addReply" class="ma-0 pa-0">
+          <v-btn id="btn-add-reply" icon @click.stop="addReply" class="ma-0 pa-0">
             <v-icon>reply</v-icon>
           </v-btn>
           <div>{{$t('menu.reply')}}</div>
         </v-col>
         <v-col v-if="isEditable">
-          <v-btn icon @click.stop="edit" class="ma-0 pa-0">
+          <v-btn id="btn-edit" icon @click.stop="edit" class="ma-0 pa-0">
             <v-icon>edit</v-icon>
           </v-btn>
           <div>{{$t('menu.edit')}}</div>
         </v-col>
         <v-col v-if="isRedactable">
-          <v-btn icon @click.stop="redact" class="ma-0 pa-0">
+          <v-btn id="btn-redact" icon @click.stop="redact" class="ma-0 pa-0">
             <v-icon>delete</v-icon>
           </v-btn>
           <div>{{$t('menu.delete')}}</div>
         </v-col>
         <v-col v-if="isDownloadable">
-          <v-btn icon @click.stop="download" class="ma-0 pa-0">
+          <v-btn id="btn-download" icon @click.stop="download" class="ma-0 pa-0">
             <v-icon>get_app</v-icon>
           </v-btn>
           <div>{{$t('menu.download')}}</div>

src/components/messages/MessageOutgoing.vue

@@ -10,7 +10,7 @@
 
     <QuickReactions :event="event" :reactions="reactions" />
     <div class="op-button" ref="opbutton">
-      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
+      <v-btn id="btn-show-menu" icon @click.stop="showContextMenu($refs.opbutton)"
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>