Add confirmation for ban/make admin etc

Also, fix Firefox problem with dialog jumping around.
This commit is contained in:
N-Pex 2025-06-10 16:23:35 +02:00
parent 724ad4caaa
commit a28ef2e6d8
13 changed files with 108 additions and 21 deletions

View file

@ -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) {
if (this.room) {
this.$matrix.makeAdmin(this.room.roomId, member.userId)
makeAdmin() {
if (this.room && this.activeMember) {
this.showConfirmMakeAdmin = true;
this.showDialog = false;
}
},
makeModerator(member) {
if (this.room) {
this.$matrix.makeModerator(this.room.roomId, member.userId)
doMakeAdmin() {
if (this.room && this.activeMember) {
this.$matrix.makeAdmin(this.room.roomId, this.activeMember.userId)
this.showDialog = false;
}
},
revokeModerator(member) {
if (this.room) {
this.$matrix.revokeModerator(this.room.roomId, member.userId)
makeModerator() {
if (this.room && this.activeMember) {
this.showConfirmMakeModerator = true;
this.showDialog = false;
}
},
banUser(member) {
if (this.room) {
this.$matrix.banUser(this.room.roomId, member.userId)
doMakeModerator() {
if (this.room && this.activeMember) {
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>