Improve navigation

package-lock.json

@@ -23,7 +23,8 @@
         "vue-resize": "^0.5.0",
         "vue-router": "^3.2.0",
         "vuetify": "^2.2.11",
-        "vuex": "^3.5.1"
+        "vuex": "^3.5.1",
+        "vuex-persist": "^3.1.3"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -2753,9 +2754,9 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
     "node_modules/axios": {
-      "version": "0.21.0",
+      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
       "dependencies": {
         "follow-redirects": "^1.10.0"
       }
@@ -13580,6 +13581,31 @@
         "vue": "^2.0.0"
       }
     },
+    "node_modules/vuex-persist": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-3.1.3.tgz",
+      "integrity": "sha512-QWOpP4SxmJDC5Y1+0+Yl/F4n7z27syd1St/oP+IYCGe0X0GFio0Zan6kngZFufdIhJm+5dFGDo3VG5kdkCGeRQ==",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "flatted": "^3.0.5"
+      },
+      "peerDependencies": {
+        "vuex": ">=2.5"
+      }
+    },
+    "node_modules/vuex-persist/node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/vuex-persist/node_modules/flatted": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz",
+      "integrity": "sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA=="
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -17011,9 +17037,9 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
     "axios": {
-      "version": "0.21.0",
+      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
       "requires": {
         "follow-redirects": "^1.10.0"
       }
@@ -25728,6 +25754,27 @@
       "integrity": "sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ==",
       "requires": {}
     },
+    "vuex-persist": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-3.1.3.tgz",
+      "integrity": "sha512-QWOpP4SxmJDC5Y1+0+Yl/F4n7z27syd1St/oP+IYCGe0X0GFio0Zan6kngZFufdIhJm+5dFGDo3VG5kdkCGeRQ==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "flatted": "^3.0.5"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+        },
+        "flatted": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz",
+          "integrity": "sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA=="
+        }
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -24,7 +24,8 @@
     "vue-resize": "^0.5.0",
     "vue-router": "^3.2.0",
     "vuetify": "^2.2.11",
-    "vuex": "^3.5.1"
+    "vuex": "^3.5.1",
+    "vuex-persist": "^3.1.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -69,7 +69,7 @@ export default {
     },
     logOut() {
       this.$store.dispatch("auth/logout");
-      this.$navigation.push("/login", true);
+      this.$navigation.push("/login", -1);
     },
   },
   computed: {

src/components/Chat.vue

@@ -8,7 +8,7 @@
       v-on:scroll="onScroll"
       @click.prevent="closeContextMenuIfOpen"
     >
-      <div class="message-operations-strut">
+      <div ref="messageOperationsStrut" class="message-operations-strut">
       <message-operations
         :style="opStyle"
               v-on:close="showContextMenu = false"
@@ -261,6 +261,8 @@ export default {
       editedEvent: null,
       replyToEvent: null,
       showContextMenu: false,
+      showContextMenuAnchor: null,
+
       /**
        * Current chat container size. We need to keep track of this so that if and when
        * a soft keyboard is shown/hidden we can restore the scroll position correctly.
@@ -287,14 +289,14 @@ export default {
   },
 
   computed: {
+    currentUser() {
+      return this.$store.state.auth.user;
+    },
     room() {
       return this.$matrix.currentRoom;
     },
     roomId() {
-      if (!this.room) {
+      return this.$matrix.currentRoomId;
-        return null;
-      }
-      return this.room.roomId;
     },
     attachButtonDisabled() {
       return this.editedEvent != null || this.replyToEvent != null || this.currentInput.length > 0;
@@ -316,11 +318,17 @@ export default {
       // Calculate where to show the context menu.
       //
       const ref = this.selectedEvent && this.$refs[this.selectedEvent.getId()];
+      var top = 0;
+      var left = 0;
       if (ref && ref[0]) {
-        const offset = ref[0].offsetTop - this.scrollPosition.node.offsetTop;
+        if (this.showContextMenuAnchor) {
-        return "top:" + offset + "px";
+          var rectAnchor = this.showContextMenuAnchor.getBoundingClientRect();
+          var rectChat = this.$refs.messageOperationsStrut.getBoundingClientRect();
+          top = rectAnchor.top - rectChat.top;
+          left = rectAnchor.left - rectChat.left;
         }
-      return "top:0px";
+      }
+      return "top:" + top + "px;left:" + left + "px";
     }
 
   },
@@ -337,9 +345,40 @@ export default {
         this.typingMembers = [];
         
         if (!room) {
+          // Public room?
+          if (this.roomId && this.roomId.startsWith('#')) {
+            this.onRoomNotJoined();
+          }
           return; // no room
         }
 
+          // Joined?
+          if (room.hasMembershipState(this.currentUser.user_id, "join")) {
+            // Yes, load everything
+            this.onRoomJoined();
+          } else {
+            this.onRoomNotJoined();
+          }
+
+  //   this.$matrix
+  //     .getPublicRoomInfo(this.roomId)
+  //     .then((room) => {
+  //       console.log("Found room:", room);
+  //       this.roomName = room.name;
+  //       this.roomAvatar = room.avatar;
+  //       this.waitingForInfo = false;
+  //     })
+  //     .catch((err) => {
+  //       console.log("Could not find room info", err);
+  //       this.waitingForInfo = false;
+  //     });
+  // },
+      }
+    },
+  },
+
+  methods: {
+    onRoomJoined() {
       this.timelineWindow = new TimelineWindow(
           this.$matrix.matrixClient,
           this.room.getUnfilteredTimelineSet(),
@@ -351,11 +390,12 @@ export default {
             this.paginateBackIfNeeded();
           });
         });
-      }
-    },
     },
 
-  methods: {
+    onRoomNotJoined() {
+      this.$navigation.push({ name: "Join", hash: this.roomId }, 0);
+    },
+
     touchX(event) {
       if (event.type.indexOf("mouse") !== -1) {
         return event.clientX;
@@ -721,13 +761,15 @@ export default {
         });
     },
 
-    showContextMenuForEvent(event) {
+    showContextMenuForEvent(e) {
+      const event = e.event;
       const ref = this.$refs[event.getId()];
       if (ref) {
         console.log("Got the ref", ref);
       }
       this.selectedEvent = event;
       this.showContextMenu = true;
+      this.showContextMenuAnchor = e.anchor;
     },
 
     closeContextMenuIfOpen(e) {

src/components/ChatHeader.vue

@@ -66,7 +66,11 @@ export default {
     },
 
     updateMemberCount() {
+      if (!this.room) {
+        this.memberCount = 0;
+      } else {
         this.memberCount = this.room.getJoinedMemberCount();
+      }
     },
 
     showRoomInfo() {

src/components/Home.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    HOME
+  </div>
+</template>
+
+<script>
+export default {
+};
+</script>
+
+<style lang="scss">
+</style>

src/components/Join.vue

@@ -7,6 +7,7 @@
         small
         @click.stop="handleLogin"
         :loading="loading"
+        v-if="!currentUser"
         >Login</v-btn
       >
 
@@ -37,8 +38,18 @@
         block
         @click.stop="handleJoin"
         :loading="loading"
+        v-if="!currentUser"
         >Join as guest</v-btn
       >
+      <v-btn
+        class="btn-dark"
+        large
+        block
+        @click.stop="handleJoin"
+        :loading="loading"
+        v-else
+        >Join room</v-btn
+      >
 
       <div class="join-privacy">
         Enhance your physical privacy. <a href="#">Learn how</a>
@@ -75,17 +86,15 @@ export default {
       this.$matrix
         .getMatrixClient(this.currentUser)
         .then(() => {
-          const room = self.$matrix.getRoom(self.roomId);
+            self.$matrix.setCurrentRoomId(self.roomId); // Go to this room, now or when joined.
-          if (room) {
-            self.$matrix.setCurrentRoom(room); // Go to this room, now or when joined.
 
             // Already joined?
-            if (room.hasMembershipState(self.currentUser.user_id, "join")) {
+            const room = self.$matrix.getRoom(self.roomId);
+            if (room && room.hasMembershipState(self.currentUser.user_id, "join")) {
               // Yes, go to room
-              self.$navigation.push({ name: "Chat" }, true);
+              self.$navigation.push({ name: "Chat" }, -1);
               return;
           }
-          }
           this.waitingForMembership = false;
         })
         .catch((ignoredErr) => {
@@ -113,7 +122,7 @@ export default {
   },
   methods: {
     handleLogin() {
-      this.$navigation.push({ name: "Login" }, false);
+      this.$navigation.push({ name: "Login" }, 1);
     },
 
     handleOpenApp() {
@@ -135,10 +144,12 @@ export default {
           return this.$matrix.matrixClient.joinRoom(this.roomId);
         })
         .then((room) => {
-          this.$matrix.setCurrentRoom(room);
+          this.$matrix.setCurrentRoomId(room.roomId);
           this.loading = false;
           this.loadingMessage = null;
-          this.$navigation.push({ name: "Chat" }, true);
+          this.$nextTick(() => {
+            this.$navigation.push({ name: "Chat" }, -1);
+          });
         })
         .catch((err) => {
           // TODO - handle error

src/components/Login.vue

@@ -70,12 +70,12 @@ export default {
       return this.$store.state.auth.user;
     },
     showBackArrow() {
-      return this.$navigation.canPop();
+      return this.$navigation && this.$navigation.canPop();
     }
   },
   created() {
     if (this.loggedIn) {
-      this.$navigation.push({name: "Chat"}, true);
+      this.$navigation.push({name: "Chat"}, -1);
     }
   },
   watch: {
@@ -110,12 +110,11 @@ export default {
   },
   methods: {
     handleLogin() {
-      this.$navigation.push({name: "Chat"}, true);
       if (this.user.username && this.user.password) {
         this.loading = true;
         this.$store.dispatch("auth/login", this.user).then(
           () => {
-            this.$navigation.push({name: "Chat"}, true);
+            this.$navigation.push({name: "Chat"}, -1);
           },
           (error) => {
             this.loading = false;

src/main.js

@@ -30,12 +30,12 @@ Vue.use((Vue) => {
   };
 });
 
+Vue.use(navigation, router);
+
 new Vue({
   vuetify,
   router,
   store,
   matrix,
   render: h => h(App)
-}).$mount('#app')
+}).$mount('#app');
-
-Vue.use(navigation, router);

src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+//import Home from '../components/Home.vue'
 import Chat from '../components/Chat.vue'
 import Login from '../components/Login.vue'
 
@@ -8,6 +9,11 @@ Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
+    name: 'Home',
+    component: Chat
+  },
+  {
+    path: '/room/',
     name: 'Chat',
     component: Chat
   },
@@ -25,6 +31,7 @@ const routes = [
   },
   {
     path: '/join/',
+    name: 'Join',
     component: () => import('../components/Join.vue'),
     props: true
   },
@@ -32,13 +39,21 @@ const routes = [
 
 const router = new VueRouter({
   routes
-})
+});
 
 router.beforeEach((to, from, next) => {
   const publicPages = ['/login'];
-  const authRequired = !publicPages.includes(to.path) && !to.path.startsWith('/join/');
+  var authRequired = !publicPages.includes(to.path) && !to.path.startsWith('/join');
   const loggedIn = localStorage.getItem('user');
 
+  if (to.path.startsWith('/room/')) {
+    if (to.hash && to.hash.startsWith('#')) {
+      //Invite to public room
+      router.app.$matrix.setCurrentRoomId(to.hash);
+      authRequired = false;
+    }
+  }
+
   // trying to access a restricted page + not logged in
   // redirect to login page
   if (authRequired && !loggedIn) {

src/services/matrix.service.js

@@ -125,7 +125,6 @@ export default {
                 initClient() {
                     this.reloadRooms();
                     this.matrixClientReady = true;
-                    this.currentRoom = null;
                     this.currentRoom = this.getRoom(this.currentRoomId);
                     this.matrixClient.emit('Matrix.initialized', this.matrixClient);
                 },
@@ -250,15 +249,10 @@ export default {
                     this.rooms.forEach(room => {
                         Vue.set(room, "avatar", room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true));
                     });
-                },
+                    if (this.currentRoom == null && this.currentRoomId) {
-
+                        // Try to set it!
-                setCurrentRoom(room) {
+                        this.currentRoom = this.getRoom(this.currentRoomId);
-                    // If we don't know about this room yet (e.g. we just joined)
-                    // add it to our list.
-                    if (!this.getRoom(room.roomId)) {
-                        this.rooms.push(room);
                     }
-                    this.setCurrentRoomId(room.roomId);
                 },
 
                 setCurrentRoomId(roomId) {
@@ -278,7 +272,7 @@ export default {
                     if (!room && this.matrixClient) {
                         room = this.matrixClient.getRoom(roomId);
                     }
-                    return room;
+                    return room || null;
                 },
 
                 on(event, handler) {

src/services/navigation.service.js

@@ -3,12 +3,6 @@ export default {
         var routes = [];
         var zeroIndex = undefined;
 
-        // window.addEventListener('popstate', () => {
-        //     if (routes.length > 1) {
-        //         routes.splice(routes.length - 1);
-        //     }
-        // });
-
         router.beforeResolve((to, ignoredfrom, next) => {
             if (!zeroIndex) {
                 routes = [to];
@@ -32,21 +26,27 @@ export default {
         })
 
         const navigationService = {
-            push(route, asRoot) {
+            /***
-                asRoot = asRoot || false;
+             * @param mode Mode of operation. -1 = push as root, 0 = replace, 1 = normal push
-                //var resolved = router.resolve(route);
+             */
-                //resolved.route.meta = route.meta || {};
+            push(route, mode) {
-                if (asRoot) {
+                if (mode === undefined) {
-                    const i = routes.length - 1; // window.history.length - zeroIndex;
+                    mode = 1;
+                }
+                if (mode == -1) {
+                    const i = routes.length - 1;
                     routes = [route];
-                    //resolved.route.meta.index = 0;
                     if (i > 0) {
                         router.go(-i);
                     } else {
                         router.replace(route).catch((ignoredErr) => {});
                     }
+                } else if (mode == 0) {
+                    // Replace
+                    routes.pop()
+                    routes.push(route);
+                    router.replace(route).catch((ignoredErr) => {});
                 } else {
-                    //resolved.route.meta.index = routes.length;
                     routes.push(route);
                     router.push(route).catch((ignoredErr) => {});
                 }