keanu-weblite/src/components/LeaveRoomDialog.vue

<template>
  <v-dialog
    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'">
        <h1>👋</h1>
        <h2 class="dialog-title">
          {{
            $t("leave.title_public", { user: $matrix.currentUserDisplayName })
          }}
        </h2>
        <div
          v-if="$matrix.currentUser.is_guest && lastRoom"
          class="dialog-text"
        >
          <i18n-t keypath="leave.text_public_lastroom" tag="p">
            <template v-slot:user>
              <span>{{ $matrix.currentUserDisplayName }}</span>
            </template>
            <template v-slot:action>
              <a @click.prevent="viewProfile">{{
                $t("leave.create_account")
              }}</a>
            </template>
          </i18n-t>
        </div>
        <div v-else class="dialog-text">{{ $t("leave.text_public") }}</div>
      </template>
      <template v-else>
        <v-icon color="black" size="30">lock</v-icon>
        <h2 class="dialog-title">
          {{
            $t("leave.title_invite", { user: $matrix.currentUserDisplayName })
          }}
        </h2>
        <div class="dialog-text">{{ $t("leave.text_invite") }}</div>
      </template>
      <v-container fluid>
        <v-row cols="12">
          <v-col cols="6">
            <v-btn
              id="btn-back"
              variant="flat"
              block
              class="text-button"
              @click="showDialog = false"
              >{{ $t("leave.go_back") }}</v-btn
            >
          </v-col>
          <v-col cols="6" align="center">
            <v-btn
              id="btn-leave"
              color="red"
              variant="flat"
              block
              class="filled-button"
              @click.stop="onLeaveRoom()"
              >{{ $t("leave.leave") }}</v-btn
            >
          </v-col>
        </v-row>
      </v-container>
    </div>
  </v-dialog>
</template>
<script>
import RoomDialogBase from "./RoomDialogBase.vue";
import roomInfoMixin from "./roomInfoMixin";

export default {
  name: "LeaveRoomDialog",
  extends: RoomDialogBase,
  data() {
    return {
      lastRoom: false,
    };
  },
  methods: {
    onOpenDialog() {  
      this.lastRoom = this.onlyJoinedToThisRoom();
    },
    onlyJoinedToThisRoom() {
      const joinedRooms = this.$matrix.joinedRooms;
      if (
        joinedRooms &&
        joinedRooms.length == 1 &&
        joinedRooms[0].roomId == this.room.roomId
      ) {
        return true;
      }
      return false;
    },

    onLeaveRoom() {
      this.$matrix.leaveRoomAndNavigate(this.room.roomId)
        .then(() => {
          this.showDialog = false;
          console.log("Left room");
        })
        .catch((err) => {
          console.log("Error leaving", err);
        });
    },

    viewProfile() {
      this.showDialog = false;
      this.$navigation.push({ name: "Profile" }, 1);
    },
  },
};
</script>

<style lang="scss">
@use "@/assets/css/chat.scss" as *;
</style>