Leave room confirmation

Work on issue #21. We need correct wording.

src/components/ChatHeader.vue

@@ -17,6 +17,23 @@
         <v-btn text class="leave-button" @click.stop="leaveRoom">Leave</v-btn>
       </v-col>
     </v-row>
+
+    <!-- "REALLY LEAVE?" dialog -->
+    <v-dialog v-model="showLeaveConfirmation" class="ma-0 pa-0" width="50%">
+        <v-card>
+          <v-card-title>Leave room?</v-card-title>
+          <v-card-text>
+            <div>Do you really want to leave the room?</div>
+          </v-card-text>
+          <v-divider></v-divider>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn text @click="showLeaveConfirmation = false">Cancel</v-btn>
+            <v-btn color="primary" text @click="doLeaveRoom();showLeaveConfirmation = false">Ok</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+
   </v-container>
 </template>
 
@@ -26,6 +43,7 @@ export default {
   data() {
     return {
       memberCount: null,
+      showLeaveConfirmation: false
     };
   },
   mounted() {
@@ -78,6 +96,10 @@ export default {
     },
 
     leaveRoom() {
+      this.showLeaveConfirmation = true;
+    },
+
+    doLeaveRoom() {
       //this.$matrix.matrixClient.forget(this.room.roomId, true, undefined)
       const roomId = this.room.roomId;
       this.$matrix.matrixClient.leave(roomId, undefined)