Merge branch 'dev'

2022-02-02 16:21:16 +01:00 · 2022-02-02 16:21:16 +01:00 · bf633c44a9
commit bf633c44a9
parent b91b462b08 a6870a78d4
38 changed files with 146 additions and 58 deletions
--- a/src/assets/css/chat.scss
+++ b/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 {
--- a/src/assets/translations/bo.json
+++ b/src/assets/translations/bo.json
@ -47,7 +47,8 @@
        "password_required": "གསང་ཚིག་དགོས་ཀྱི་ཡོད།",
        "username_required": "སྤྱོད་མིང་དགོས་ཀྱི་ཡོད།",
        "create_room": "ཐོ་འགོད་དང་ཁ་བརྡ་ཁང་གསར་སྐྲུན།",
-        "or": "ཡང་ན།"
+        "or": "ཡང་ན།",
+        "invalid_message": ""
    },
    "new_room": {
        "next": "རྗེས་མ།",
--- a/src/assets/translations/de.json
+++ b/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",
--- a/src/assets/translations/en.json
+++ b/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",
--- a/src/assets/translations/es.json
+++ b/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",
--- a/src/assets/translations/fi.json
+++ b/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ä:",
--- a/src/assets/translations/fr.json
+++ b/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",
--- a/src/assets/translations/it.json
+++ b/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",
--- a/src/assets/translations/nb_NO.json
+++ b/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",
--- a/src/assets/translations/pt_BR.json
+++ b/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",
--- a/src/assets/translations/ro.json
+++ b/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",
--- a/src/assets/translations/si.json
+++ b/src/assets/translations/si.json
@ -23,5 +23,8 @@
        "download_progress": "{percentage}% බාගත වී ඇත",
        "file_prefix": "ගොනුව: ",
        "you": "ඔබ"
+    },
+    "login": {
+        "invalid_message": ""
    }
 }
--- a/src/assets/translations/ug.json
+++ b/src/assets/translations/ug.json
@ -221,7 +221,8 @@
        "username": "قوللانغۇچى ئىسمى (مەسىلەن: marta)",
        "title": "كىرىش",
        "create_room": "",
-        "or": ""
+        "or": "",
+        "invalid_message": ""
    },
    "device_list": {
        "not_verified": "دەلىللەنمىدى",
--- a/src/assets/translations/zh_Hans.json
+++ b/src/assets/translations/zh_Hans.json
@ -50,7 +50,8 @@
        "username_required": "需要用户名",
        "username": "用户名 (如: marta)",
        "create_room": "",
-        "or": ""
+        "or": "",
+        "invalid_message": ""
    },
    "device_list": {
        "title": "设备",
--- a/src/components/Chat.vue
+++ b/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"
--- a/src/components/ChatHeader.vue
+++ b/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) {
--- a/src/components/CreateRoom.vue
+++ b/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"
--- a/src/components/CreatedRoomWelcomeHeader.vue
+++ b/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>
--- a/src/components/Invite.vue
+++ b/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"
--- a/src/components/Join.vue
+++ b/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"
          >
--- a/src/components/LeaveRoomDialog.vue
+++ b/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
--- a/src/components/Login.vue
+++ b/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);
          }
        );
--- a/src/components/Profile.vue
+++ b/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="
--- a/src/components/ProfileInfoPopup.vue
+++ b/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;
--- a/src/components/PurgeRoomDialog.vue
+++ b/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
--- a/src/components/QuoteView.vue
+++ b/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"
--- a/src/components/RoomInfo.vue
+++ b/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
--- a/src/components/RoomInfoBottomSheet.vue
+++ b/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"
--- a/src/components/RoomList.vue
+++ b/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)"
--- a/src/components/SelectLanguageDialog.vue
+++ b/src/components/SelectLanguageDialog.vue
@ -28,6 +28,7 @@
      </v-card-text>
      <v-card-actions>
        <v-btn
+          id="btn-done"
          color="black"
          depressed
          block
--- a/src/components/VoiceRecorder.vue
+++ b/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>
--- a/src/components/YouAre.vue
+++ b/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>
--- a/src/components/messages/AudioPlayer.vue
+++ b/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">
--- a/src/components/messages/AvatarOperations.vue
+++ b/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>
--- a/src/components/messages/MessageIncoming.vue
+++ b/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>
--- a/src/components/messages/MessageOperations.vue
+++ b/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>
--- a/src/components/messages/MessageOperationsPicker.vue
+++ b/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>
--- a/src/components/messages/MessageOutgoing.vue
+++ b/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>