Add quotes on leaving

Issue #21

src/components/LeaveRoomDialog.vue

@@ -6,8 +6,13 @@
         <h2 class="dialog-title">
           Goodbye, {{ $matrix.currentUserDisplayName }}.
         </h2>
-        <div v-if="$matrix.currentUser.is_guest && onlyJoinedToThisRoom" class="dialog-text">
-          If you want to join this group again, you can join under a new identity. To keep {{ $matrix.currentUserDisplayName }}, <a @click.prevent="viewProfile">create an account</a>.
+        <div
+          v-if="$matrix.currentUser.is_guest && lastRoom"
+          class="dialog-text"
+        >
+          If you want to join this group again, you can join under a new
+          identity. To keep {{ $matrix.currentUserDisplayName }},
+          <a @click.prevent="viewProfile">create an account</a>.
         </div>
         <div v-else class="dialog-text">
           You can always join this room again if you know the link.
@@ -38,10 +43,7 @@
               depressed
               block
               class="filled-button"
-              @click.stop="
-                onLeaveRoom();
-                showDialog = false;
-              "
+              @click.stop="onLeaveRoom()"
               >Leave</v-btn
             >
           </v-col>
@@ -67,6 +69,7 @@ export default {
   data() {
     return {
       showDialog: false,
+      lastRoom: false,
     };
   },
   watch: {
@@ -78,29 +81,42 @@ export default {
     showDialog() {
       if (!this.showDialog) {
         this.$emit("close");
+      } else {
+        this.lastRoom = this.onlyJoinedToThisRoom();
       }
     },
   },
 
-  computed: {
+  methods: {
     onlyJoinedToThisRoom() {
       const joinedRooms = this.$matrix.joinedRooms;
-      if (joinedRooms && joinedRooms.length == 1 && joinedRooms[0].roomId == this.room.roomId) {
+      if (
+        joinedRooms &&
+        joinedRooms.length == 1 &&
+        joinedRooms[0].roomId == this.room.roomId
+      ) {
         return true;
       }
       return false;
-    }
-  },
+    },
 
-  methods: {
     onLeaveRoom() {
+      const lastRoom = this.onlyJoinedToThisRoom();
       //this.$matrix.matrixClient.forget(this.room.roomId, true, undefined)
       const roomId = this.room.roomId;
       this.$matrix
         .leaveRoom(roomId)
         .then(() => {
+          this.showDialog = false;
           console.log("Left room");
-          this.$navigation.push({ name: "Home", params: { roomId: null } }, -1);
+          if (lastRoom) {
+            this.$navigation.push({ name: "Goodbye" }, -1);
+          } else {
+            this.$navigation.push(
+              { name: "Home", params: { roomId: null } },
+              -1
+            );
+          }
         })
         .catch((err) => {
           console.log("Error leaving", err);

src/components/QuoteView.vue

@@ -0,0 +1,76 @@
+<template>
+  <transition name="slow-fade">
+    <div
+      v-if="mounted"
+      style="
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 100;
+        background-color: black;
+        align-items: center;
+        justify-content: center;
+        padding: 40px;
+      "
+      class="text-center d-flex flex-column"
+    >
+    
+      <div class="quote white--text">{{ quote }}</div>
+      <div class="author white--text mt-4">- {{ author }}</div>
+    
+      <v-btn color="white" text class="close" @click.stop="closeBrowserTab">Close your browser tab</v-btn>
+    </div>
+  </transition>
+</template>
+<script>
+import quotes from "../assets/quotes";
+
+export default {
+  name: "QuoteView",
+  data() {
+    return {
+      mounted: false,
+      quote: "",
+      author: "",
+    }
+  },
+  mounted() {
+    const n = quotes.quotes.length;
+    const quote = quotes.quotes[Math.floor(Math.random() * n)];
+    this.quote = quote.quote;
+    this.author = quote.author;
+    this.mounted = true;
+  },
+
+  methods: {
+    closeBrowserTab() {
+       window.location.href="about:blank";
+    }
+  }
+
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+
+.author {
+  font-size: 80%;
+}
+
+.close {
+  position: absolute;
+  bottom: 40px;
+}
+
+.slow-fade-enter-active,
+.slow-fade-leave-active {
+  transition: opacity 2.5s;
+}
+.slow-fade-enter, .slow-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+</style>