Add confirmation for ban/make admin etc

Also, fix Firefox problem with dialog jumping around.

src/assets/translations/en.json

@@ -383,7 +383,11 @@
     "message_history_warning": "warning: Full message history will be visible to new participants",
     "report": "Report",
     "report_info": "Report this room to service administrators for illegal, abusive or otherwise harmful content",
-    "report_reason": "Reason"
+    "report_reason": "Reason",
+    "confirm_make_admin": "Do you want to make this user an administrator?",
+    "confirm_make_moderator": "Do you want to make this user a moderator?",
+    "confirm_revoke_moderator": "Do you want to remove moderator rights from this user?",
+    "confirm_ban": "Do you want to kick this user from the room?"
   },
   "room_info_sheet": {
     "this_room": "This room",

src/components/ConfirmationDialog.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-dialog
+    v-bind="{ ...$props }"
+    class="ma-0 pa-0"
+    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+    scroll-strategy="none"
+    @click:outside="$emit('update:modelValue', false)"
+  >
+    <v-card>
+      <v-card-text class="pa-4 black--text">{{ message }}</v-card-text>
+      <v-card-actions class="pt-3">
+        <v-spacer></v-spacer>
+        <v-btn variant="flat" class="text-button" @click.stop="$emit('update:modelValue', false)">{{ $t("menu.cancel") }}</v-btn>
+        <v-btn variant="flat" class="text-button" @click.stop="onOkButton">{{ $t("menu.ok") }}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+export default {
+  name: "ConfirmationDialog",
+  props: ["modelValue"],
+  emits: ["update:modelValue", "ok"],
+  props: {
+    message: {
+      type: String,
+      default: "?",
+    },
+  },
+  methods: {
+    onOkButton() {
+      this.$emit("ok");
+      this.$emit("update:modelValue", false);
+    },
+  },
+};
+</script>

src/components/LeaveRoomDialog.vue

@@ -3,6 +3,7 @@
     v-model="showDialog"
     class="ma-0 pa-0"
     :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+    scroll-strategy="none"
   >
     <div class="dialog-content text-center">
       <template v-if="roomJoinRule == 'public'">

src/components/LogoutRoomDialog.vue

@@ -1,5 +1,6 @@
 <template>
   <v-dialog :modelValue="showLogoutPopup" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+    scroll-strategy="none"
     @click:outside="$emit('onOutsideLogoutPopupClicked')">
     <div class="dialog-content text-center">
       <h2 class="dialog-title">{{ $t("logout.confirm_text") }}</h2>

src/components/MessageRetentionDialog.vue

@@ -2,7 +2,9 @@
   <v-dialog 
     v-model="showDialog"
     class="ma-0 pa-0" 
-    :width="$vuetify.display.smAndUp ? '688px' : '95%'">
+    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+    scroll-strategy="none"
+    >
     <div class="dialog-content text-center">
       <h2 class="dialog-title">{{ $t("room_info.message_retention") }}</h2>
       <v-container fluid>

src/components/Profile.vue

@@ -112,6 +112,7 @@
       v-model="showEditPasswordDialog"
       class="ma-0 pa-0"
       :width="$vuetify.display.smAndUp ? '940px' : '80%'"
+      scroll-strategy="none"
     >
       <v-card :disabled="settingPassword" class="dialog-content">
         <h2 class="dialog-title">{{ $matrix.currentUser.is_guest ? $t("profile.set_password") : $t("profile.change_password") }}</h2>
@@ -219,6 +220,7 @@
       persistent
       class="ma-0 pa-0"
       :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+      scroll-strategy="none"
     >
       <div class="dialog-content text-center">
         <v-icon  size="30">notifications_active</v-icon>

src/components/ProfileInfoPopup.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="showDialog" content-class="profile-info-popup" class="ma-0 pa-0">
+  <v-dialog v-model="showDialog" content-class="profile-info-popup" class="ma-0 pa-0" scroll-strategy="none">
     <v-card variant="flat">
       <v-card-text>
         <div class="you-are">{{ $t("profile_info_popup.you_are") }}</div>

src/components/PurgeRoomDialog.vue

@@ -4,6 +4,7 @@
     v-model="showDialog"
     class="ma-0 pa-0"
     :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+    scroll-strategy="none"
   >
     <div v-if="timeout == -1" class="dialog-content text-center">
       <template>

src/components/QRCodePopup.vue

@@ -3,6 +3,7 @@
     v-model="showDialog"
     class="ma-0 pa-0"
     :width="$vuetify.display.smAndUp ? '940px' : '95%'"
+    scroll-strategy="none"
   >
     <div class="dialog-content text-center" ref="qrContainer">
       <div class="d-flex justify-center">

src/components/ReportRoomDialog.vue

@@ -3,6 +3,7 @@
     v-model="showDialog"
     class="ma-0 pa-0"
     :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+    scroll-strategy="none"
   >
     <div class="dialog-content text-center">
       <h2 class="dialog-title">{{ $t("room_info.report") }}</h2>

src/components/RoundedDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-bind="{ ...$props, ...$attrs }" content-class="v-dialog-rounded">
+  <v-dialog v-bind="{ ...$props, ...$attrs }" content-class="v-dialog-rounded" scroll-strategy="none">
     <slot></slot>
   </v-dialog>
 </template>

src/components/UnsupportedBrowserAlert.vue

@@ -4,6 +4,7 @@
     v-model="isUnSupportedBrowser"
     persistent
     :width="$vuetify.display.smAndUp ? '50%' : '90%'"
+    scroll-strategy="none"
   >
     <div class="dialog-content text-center">
       <h2 class="dialog-title">{{ $t("global.different_browser_title") }}</h2>

src/components/UserProfileDialog.vue

@@ -3,6 +3,7 @@
     v-model="showDialog"
     class="ma-0 pa-0"
     :width="$vuetify.display.smAndUp ? '688px' : '95%'"
+    scroll-strategy="none"
   >
     <div class="dialog-content text-center member-action-dialog">
       <div class="pt-4">
@@ -35,6 +36,7 @@
           <p class="font-weight-light">{{ sharedRooms.slice(0, 3).join(", ") }}</p>
         </template>
       </div>
+      {{ message }}
       <DeviceList :member="activeMember" />
       <div class="py-3" v-if="activeMember.userId != $matrix.currentUserId">
         <div v-if="activeMember.membership == 'knock'">
@@ -44,23 +46,28 @@
           <v-icon start>$vuetify.icons.direct_chat</v-icon>  {{ $t("menu.direct_chat") }}
         </v-btn>
         <div v-if="canBanUserComp">
-          <v-btn variant="text" x-large block v-if="activeMember.userId != $matrix.currentUserId && canBanUserComp" class="start-private-chat clickable d-block text-none justify-start" @click="banUser(activeMember)">
+          <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && canBanUserComp" class="start-private-chat clickable d-block text-none justify-start" @click="banUser">
             <v-icon start>$vuetify.icons.kickout</v-icon> {{ $t("menu.user_kick_and_ban") }}
           </v-btn>
         </div>
-        <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !isAdminComp && canMakeAdminComp" class="start-private-chat clickable d-block text-none justify-start" @click="makeAdmin(activeMember)">
+        <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !isAdminComp && canMakeAdminComp" class="start-private-chat clickable d-block text-none justify-start" @click="makeAdmin">
           <v-icon start>$vuetify.icons.make_admin</v-icon> {{ $t("menu.user_make_admin") }}
         </v-btn>
-        <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !isModeratorComp && !isAdminComp && canMakeModeratorComp" class="start-private-chat clickable d-block text-none justify-start" @click="makeModerator(activeMember)">
+        <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !isModeratorComp && !isAdminComp && canMakeModeratorComp" class="start-private-chat clickable d-block text-none justify-start" @click="makeModerator">
           <v-icon start>$vuetify.icons.make_moderator</v-icon> {{ $t("menu.user_make_moderator") }}
         </v-btn>
-        <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && isModeratorComp && canRevokeModeratorComp" class="start-private-chat clickable d-block text-none justify-start" @click="revokeModerator(activeMember)">
+        <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && isModeratorComp && canRevokeModeratorComp" class="start-private-chat clickable d-block text-none justify-start" @click="revokeModerator">
           <v-icon start>$vuetify.icons.revoke</v-icon> {{ $t("menu.user_revoke_moderator") }}
         </v-btn>
         </div>
       </div>
     </div>
   </v-dialog>
+
+  <ConfirmationDialog :message="$t('room_info.confirm_make_admin')" v-model="showConfirmMakeAdmin" v-on:ok="doMakeAdmin" />
+  <ConfirmationDialog :message="$t('room_info.confirm_make_moderator')" v-model="showConfirmMakeModerator" v-on:ok="doMakeModerator" />
+  <ConfirmationDialog :message="$t('room_info.confirm_revoke_moderator')" v-model="showConfirmRevokeModerator" v-on:ok="doRevokeModerator" />
+  <ConfirmationDialog :message="$t('room_info.confirm_ban')" v-model="showConfirmBan" v-on:ok="doBanUser" />
 </template>
 <script>
 import roomInfoMixin from "./roomInfoMixin";
@@ -68,13 +75,15 @@ import DeviceList from "../components/DeviceList";
 import AuthedImage from "./AuthedImage.vue";
 import util from "../plugins/utils";
 import RoomDialogBase from "./RoomDialogBase.vue";
+import ConfirmationDialog from "./ConfirmationDialog.vue";
 
 export default {
   name: "UserProfileDialog",
   extends: RoomDialogBase,
   components: {
     DeviceList,
-    AuthedImage
+    AuthedImage,
+    ConfirmationDialog
   },
   props: {
     activeMember: {
@@ -86,6 +95,10 @@ export default {
   },
   data() {
     return {
+      showConfirmMakeAdmin: false,
+      showConfirmMakeModerator: false,
+      showConfirmRevokeModerator: false,
+      showConfirmBan: false
     };
   },
   computed: {
@@ -210,30 +223,53 @@ export default {
       }
       return false;
     },
-    makeAdmin(member) {
+    makeAdmin() {
-      if (this.room) {
+      if (this.room && this.activeMember) {
-        this.$matrix.makeAdmin(this.room.roomId, member.userId)
+        this.showConfirmMakeAdmin = true;
         this.showDialog = false;
       }
     },
-    makeModerator(member) {
+    doMakeAdmin() {
-      if (this.room) {
+      if (this.room && this.activeMember) {
-        this.$matrix.makeModerator(this.room.roomId, member.userId)
+        this.$matrix.makeAdmin(this.room.roomId, this.activeMember.userId)
         this.showDialog = false;
       }
     },
-    revokeModerator(member) {
+    makeModerator() {
-      if (this.room) {
+      if (this.room && this.activeMember) {
-        this.$matrix.revokeModerator(this.room.roomId, member.userId)
+        this.showConfirmMakeModerator = true;
         this.showDialog = false;
       }
     },
-    banUser(member) {
+    doMakeModerator() {
-      if (this.room) {
+      if (this.room && this.activeMember) {
-        this.$matrix.banUser(this.room.roomId, member.userId)
+        this.$matrix.makeModerator(this.room.roomId, this.activeMember.userId)
         this.showDialog = false;
       }
     },
+    revokeModerator() {
+      if (this.room && this.activeMember) {
+        this.showConfirmRevokeModerator = true;
+        this.showDialog = false;
+      }
+    },
+    doRevokeModerator() {
+      if (this.room && this.activeMember) {
+        this.$matrix.revokeModerator(this.room.roomId, this.activeMember.userId)
+        this.showDialog = false;
+      }
+    },
+    banUser() {
+      if (this.room && this.activeMember) {
+        this.showConfirmBan = true;
+        this.showDialog = false;
+      }
+    },
+    doBanUser() {
+      if (this.room && this.activeMember) {
+        this.$matrix.banUser(this.room.roomId, this.activeMember.userId)
+      }
+    }
   },
 };
 </script>