logout confirmation popup

src/components/LogoutRoomDialog.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-dialog
+    :value="showLogoutPopup"
+    class="ma-0 pa-0"
+    :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
+    @click:outside="$emit('onOutsideLogoutPopupClicked')"
+  >
+    <div class="dialog-content text-center">
+      <template>
+        <h2 class="dialog-title">
+         {{ $t("logout.confirm_text")}}
+        </h2>
+      </template>
+      <v-container fluid>
+        <v-row cols="12">
+          <v-col cols="6">
+            <v-btn
+              depressed
+              text
+              block
+              class="text-button"
+              @click.stop="$emit('onCancelLogoutClicked')"
+              >{{ $t("menu.cancel") }}</v-btn
+            >
+          </v-col>
+          <v-col cols="6" align="center">
+            <v-btn
+              color="red"
+              depressed
+              block
+              class="filled-button"
+              @click.stop="logout"
+              >{{ $t("menu.logout") }}</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+  </v-dialog>
+</template>
+<script>
+import profileInfoMixin from "./profileInfoMixin";
+
+export default {
+  name: "LogoutRoomDialog",
+  mixins: [profileInfoMixin],
+  props: {
+    showLogoutPopup: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>

src/components/Profile.vue

@@ -53,9 +53,14 @@
           <!-- <div v-if="$matrix.currentUser.is_guest">
             {{ $t("profile.temporary_identity") }}
           </div> -->
-          <v-btn id="btn-logout" depressed block class="outlined-button" @click.stop="logout">{{
-            $t("menu.logout")
-          }}</v-btn>
+          <v-btn id="btn-logout" depressed block class="outlined-button" @click.stop="showLogoutPopup=true">
+            {{ $t("menu.logout") }}
+          </v-btn>
+          <LogoutRoomDialog
+            :showLogoutPopup="showLogoutPopup"
+            @onOutsideLogoutPopupClicked="showLogoutPopup=false"
+            @onCancelLogoutClicked="showLogoutPopup=false"
+          />
         </v-col>
       </v-row>
     </v-container>
@@ -182,6 +187,7 @@ const sizeOf = require("image-size");
 //const dataUriToBuffer = require("data-uri-to-buffer");
 import util from "../plugins/utils";
 import profileInfoMixin from "./profileInfoMixin";
+import LogoutRoomDialog from './LogoutRoomDialog.vue';
 
 export default {
   name: "Profile",
@@ -189,12 +195,14 @@ export default {
   components: {
     ActionRow,
     SelectLanguageDialog,
+    LogoutRoomDialog,
   },
   data() {
     return {
       showEditPasswordDialog: false,
       showEditDisplaynameDialog: false,
       showSelectLanguageDialog: false,
+      showLogoutPopup: false,
       editValue: null,
       password: null,
       newPassword1: null,

src/components/ProfileInfoPopup.vue

@@ -60,10 +60,15 @@
             :text="$t('profile_info_popup.edit_profile')"
           />
           <ActionRow
-            @click="logout"
+            @click.stop="showLogoutPopup=true"
             :icon="'logout'"
             :text="$t('profile_info_popup.logout')"
           />
+          <LogoutRoomDialog
+            :showLogoutPopup="showLogoutPopup"
+            @onOutsideLogoutPopupClicked="showLogoutPopup=false"
+            @onCancelLogoutClicked="showLogoutPopup=false"
+          />
         </v-container>
 
         <div class="more-container">
@@ -89,12 +94,14 @@
 <script>
 import profileInfoMixin from "./profileInfoMixin";
 import ActionRow from "./ActionRow.vue";
+import LogoutRoomDialog from './LogoutRoomDialog.vue';
 
 export default {
   name: "ProfileInfoPopup",
   mixins: [profileInfoMixin],
   components: {
     ActionRow,
+    LogoutRoomDialog
   },
   props: {
     show: {
@@ -107,7 +114,8 @@ export default {
   data() {
     return {
       showDialog: false,
-      editDisplayName: false
+      editDisplayName: false,
+      showLogoutPopup: false
     };
   },
   computed: {