From 680383b08f0554b6169c5abc34b5d3c0c44520da Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Thu, 27 Jan 2022 11:35:20 +0000
Subject: [PATCH 1/7] fixed: direct chat with person avatar profile

---
 src/components/ChatHeader.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index a8c089a..20097c9 100644
--- 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>
 
@@ -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) {

From a3b365d7acffedaf79bd67df008543467ee82739 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Thu, 27 Jan 2022 11:40:56 +0000
Subject: [PATCH 2/7] fixed: Login error message improved and necessary
 translation string added

---
 src/assets/translations/bo.json      |  3 ++-
 src/assets/translations/de.json      |  3 ++-
 src/assets/translations/en.json      |  3 ++-
 src/assets/translations/es.json      |  3 ++-
 src/assets/translations/fi.json      |  3 ++-
 src/assets/translations/fr.json      |  3 ++-
 src/assets/translations/it.json      |  3 ++-
 src/assets/translations/nb_NO.json   |  3 ++-
 src/assets/translations/pt_BR.json   |  3 ++-
 src/assets/translations/ro.json      |  3 ++-
 src/assets/translations/si.json      |  3 +++
 src/assets/translations/ug.json      |  3 ++-
 src/assets/translations/zh_Hans.json |  3 ++-
 src/components/Login.vue             | 22 +++++++++-------------
 14 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/assets/translations/bo.json b/src/assets/translations/bo.json
index 0fa658c..91bafdf 100644
--- 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": "རྗེས་མ།",
diff --git a/src/assets/translations/de.json b/src/assets/translations/de.json
index b182c64..f0ec7fd 100644
--- 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",
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index e9f60d1..a58777f 100644
--- 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",
diff --git a/src/assets/translations/es.json b/src/assets/translations/es.json
index 31278b9..8e7d9de 100644
--- 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",
diff --git a/src/assets/translations/fi.json b/src/assets/translations/fi.json
index 1e4b4f0..79691d9 100644
--- 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ä:",
diff --git a/src/assets/translations/fr.json b/src/assets/translations/fr.json
index e19a604..4349670 100644
--- 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",
diff --git a/src/assets/translations/it.json b/src/assets/translations/it.json
index 4470c8b..9c53650 100644
--- 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",
diff --git a/src/assets/translations/nb_NO.json b/src/assets/translations/nb_NO.json
index 0921857..afddc9b 100644
--- 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",
diff --git a/src/assets/translations/pt_BR.json b/src/assets/translations/pt_BR.json
index c2530dd..0077600 100644
--- 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",
diff --git a/src/assets/translations/ro.json b/src/assets/translations/ro.json
index d167c07..4ab741e 100644
--- 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",
diff --git a/src/assets/translations/si.json b/src/assets/translations/si.json
index deca16d..817bbdc 100644
--- 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": ""
     }
 }
\ No newline at end of file
diff --git a/src/assets/translations/ug.json b/src/assets/translations/ug.json
index c444844..7c78103 100644
--- 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": "دەلىللەنمىدى",
diff --git a/src/assets/translations/zh_Hans.json b/src/assets/translations/zh_Hans.json
index fb4d61c..e7f5dbe 100644
--- 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": "设备",
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 07ea475..5184455 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -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,6 +61,7 @@
             }
           "
         ></v-text-field>
+        <div class="error--text" v-if="hasError">{{ this.message }}</div>
         <v-checkbox
           class="mt-0"
           v-model="rememberMe"
@@ -102,6 +105,7 @@ export default {
       message: "",
       userErrorMessage: null,
       passErrorMessage: null,
+      hasError: false
     };
   },
   computed: {
@@ -142,19 +146,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 +181,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);
           }
         );

From ecadf85e6c0f1637ba00627c8fdc619f3b112d14 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Thu, 27 Jan 2022 11:59:25 +0000
Subject: [PATCH 3/7] Delete popup width fixed

---
 src/components/PurgeRoomDialog.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/PurgeRoomDialog.vue b/src/components/PurgeRoomDialog.vue
index 14f036d..8c8f6b9 100644
--- 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">

From 6ecb70176c76a686158f18968b118e7c26647c87 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Thu, 27 Jan 2022 12:09:33 +0000
Subject: [PATCH 4/7] joined link text overflow fixed

---
 src/assets/css/chat.scss                    | 2 ++
 src/components/CreatedRoomWelcomeHeader.vue | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 2751361..653c22c 100644
--- 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 {
diff --git a/src/components/CreatedRoomWelcomeHeader.vue b/src/components/CreatedRoomWelcomeHeader.vue
index 0dfacfa..8f97574 100644
--- 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>

From 7a50e2247154ec10bd9cf255b7bda90364472b4c Mon Sep 17 00:00:00 2001
From: N Pex <npexdev@gmail.com>
Date: Thu, 27 Jan 2022 14:56:48 +0000
Subject: [PATCH 5/7] Resolve "set fields to use meaningful ID names for
 automated test"

---
 src/components/Chat.vue                             | 13 ++++++++++++-
 src/components/ChatHeader.vue                       |  2 +-
 src/components/CreateRoom.vue                       |  4 ++++
 src/components/CreatedRoomWelcomeHeader.vue         |  2 +-
 src/components/Invite.vue                           |  1 +
 src/components/Join.vue                             |  5 ++++-
 src/components/LeaveRoomDialog.vue                  |  2 ++
 src/components/Login.vue                            |  5 ++++-
 src/components/Profile.vue                          | 10 +++++++---
 src/components/ProfileInfoPopup.vue                 |  2 +-
 src/components/PurgeRoomDialog.vue                  |  3 +++
 src/components/QuoteView.vue                        |  2 ++
 src/components/RoomInfo.vue                         |  5 +++++
 src/components/RoomInfoBottomSheet.vue              |  1 +
 src/components/RoomList.vue                         |  2 ++
 src/components/SelectLanguageDialog.vue             |  1 +
 src/components/VoiceRecorder.vue                    | 11 +++++++----
 src/components/messages/AudioPlayer.vue             |  4 ++--
 src/components/messages/AvatarOperations.vue        |  2 +-
 src/components/messages/MessageIncoming.vue         |  2 +-
 src/components/messages/MessageOperations.vue       |  6 +++---
 src/components/messages/MessageOperationsPicker.vue |  8 ++++----
 src/components/messages/MessageOutgoing.vue         |  2 +-
 23 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 80744d3..4b06a3f 100644
--- 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"
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index 20097c9..193da0c 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -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>
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index 2a6cc9a..f2867ff 100644
--- 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"
diff --git a/src/components/CreatedRoomWelcomeHeader.vue b/src/components/CreatedRoomWelcomeHeader.vue
index 8f97574..7fa4abd 100644
--- a/src/components/CreatedRoomWelcomeHeader.vue
+++ b/src/components/CreatedRoomWelcomeHeader.vue
@@ -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>
diff --git a/src/components/Invite.vue b/src/components/Invite.vue
index 2a23f36..2a035f8 100644
--- 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"
diff --git a/src/components/Join.vue b/src/components/Join.vue
index ae8fd2c..f94aca3 100644
--- 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"
           >
diff --git a/src/components/LeaveRoomDialog.vue b/src/components/LeaveRoomDialog.vue
index e7ff897..18cfe15 100644
--- 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
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 5184455..2f4cb6c 100644
--- 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>
@@ -63,11 +63,13 @@
         ></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
@@ -79,6 +81,7 @@
         >
         <div class="mt-2 overline">{{ $t("login.or") }}</div>
         <v-btn
+          id="btn-create-room"
           color="primary"
           depressed
           block
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 50eeefe..c598129 100644
--- 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="
diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index 0e74bf4..a3c28f0 100644
--- a/src/components/ProfileInfoPopup.vue
+++ b/src/components/ProfileInfoPopup.vue
@@ -67,7 +67,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>
diff --git a/src/components/PurgeRoomDialog.vue b/src/components/PurgeRoomDialog.vue
index 8c8f6b9..6f89b6e 100644
--- a/src/components/PurgeRoomDialog.vue
+++ b/src/components/PurgeRoomDialog.vue
@@ -19,6 +19,7 @@
         <v-row cols="12">
           <v-col cols="6">
             <v-btn
+              id="btn-purge-room-cancel"
               depressed
               text
               block
@@ -30,6 +31,7 @@
           </v-col>
           <v-col cols="6" align="center">
             <v-btn
+              id="btn-purge-room"
               color="red"
               depressed
               block
@@ -64,6 +66,7 @@
         <v-row cols="12">
           <v-col cols="12">
             <v-btn
+              id="btn-purge-room-undo"
               depressed
               text
               block
diff --git a/src/components/QuoteView.vue b/src/components/QuoteView.vue
index a17011b..a4ddc4a 100644
--- 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"
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index b296906..9a00a1c 100644
--- 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
diff --git a/src/components/RoomInfoBottomSheet.vue b/src/components/RoomInfoBottomSheet.vue
index bfdfbac..aa10dce 100644
--- 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"
diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue
index a2c0765..83261be 100644
--- 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)"
diff --git a/src/components/SelectLanguageDialog.vue b/src/components/SelectLanguageDialog.vue
index 6ffbc8f..e30e6d5 100644
--- 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
diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue
index 92895b4..460fe46 100644
--- 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>
diff --git a/src/components/messages/AudioPlayer.vue b/src/components/messages/AudioPlayer.vue
index 8f5e7fd..7a7b940 100644
--- 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">
diff --git a/src/components/messages/AvatarOperations.vue b/src/components/messages/AvatarOperations.vue
index 4e4bd08..509ce2d 100644
--- 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>
diff --git a/src/components/messages/MessageIncoming.vue b/src/components/messages/MessageIncoming.vue
index f328848..3f11f2b 100644
--- 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>
diff --git a/src/components/messages/MessageOperations.vue b/src/components/messages/MessageOperations.vue
index bd70ba1..8e48215 100644
--- 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>
diff --git a/src/components/messages/MessageOperationsPicker.vue b/src/components/messages/MessageOperationsPicker.vue
index 00c4f27..d1b80fb 100644
--- 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>
diff --git a/src/components/messages/MessageOutgoing.vue b/src/components/messages/MessageOutgoing.vue
index f40f520..c14d2c9 100644
--- 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>

From 41c9f53484602607cd45b393e947efe2c8897f31 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sat, 29 Jan 2022 11:06:48 +0200
Subject: [PATCH 6/7] Identity popover cut off fixed

---
 src/components/ProfileInfoPopup.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index a3c28f0..8ca1860 100644
--- 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>
@@ -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;

From 167ef171ca009ce6d331d8a87987c9cfe720bb84 Mon Sep 17 00:00:00 2001
From: N Pex <npexdev@gmail.com>
Date: Wed, 2 Feb 2022 12:49:57 +0000
Subject: [PATCH 7/7] Resolve "Nothing happens on clicking on the room icon on
 the right top side when we again visit the IM without deleting the browser
 cookies"

---
 src/components/CreateRoom.vue       | 4 ++--
 src/components/Join.vue             | 4 ++--
 src/components/Login.vue            | 4 ++--
 src/components/ProfileInfoPopup.vue | 2 +-
 src/components/YouAre.vue           | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index f2867ff..d745d02 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -293,10 +293,10 @@ export default {
     },
     rememberMe: {
       get: function () {
-        return !this.$store.state.useLocalStorage;
+        return this.$store.state.useLocalStorage;
       },
       set: function (rememberMe) {
-        this.$store.commit("setUseLocalStorage", !rememberMe);
+        this.$store.commit("setUseLocalStorage", rememberMe);
       },
     },
   },
diff --git a/src/components/Join.vue b/src/components/Join.vue
index f94aca3..eb2452e 100644
--- a/src/components/Join.vue
+++ b/src/components/Join.vue
@@ -196,10 +196,10 @@ export default {
     },
     rememberMe: {
       get: function () {
-        return !this.$store.state.useLocalStorage;
+        return this.$store.state.useLocalStorage;
       },
       set: function (rememberMe) {
-        this.$store.commit("setUseLocalStorage", !rememberMe);
+        this.$store.commit("setUseLocalStorage", rememberMe);
       },
     },
 
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 2f4cb6c..0bd2679 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -123,10 +123,10 @@ export default {
     },
     rememberMe: {
       get: function () {
-        return !this.$store.state.useLocalStorage;
+        return this.$store.state.useLocalStorage;
       },
       set: function (rememberMe) {
-        this.$store.commit("setUseLocalStorage", !rememberMe);
+        this.$store.commit("setUseLocalStorage", rememberMe);
       },
     },
   },
diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index 8ca1860..24bb16a 100644
--- a/src/components/ProfileInfoPopup.vue
+++ b/src/components/ProfileInfoPopup.vue
@@ -30,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>
diff --git a/src/components/YouAre.vue b/src/components/YouAre.vue
index 35112a8..5745c0e 100644
--- 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>