Navigation service

src/App.vue

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

src/components/Join.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="join-root">
-    <div v-if="!waiting" class="text-center">
+    <div v-if="!waitingForInfo && !waitingForMembership" class="text-center">
       <v-btn
         class="btn-login"
         text
@@ -62,34 +62,34 @@ export default {
       guestUser: new User("https://neo.keanu.im", "", "", true),
       loading: false,
       loadingMessage: null,
-      waiting: true,
+      waitingForInfo: true,
+      waitingForMembership: false,
     };
   },
   mounted() {
     this.roomId = this.$route.hash;
     this.roomName = this.roomId;
     if (this.currentUser) {
-      this.waiting = true;
+      this.waitingForMembership = true;
       const self = this;
       this.$matrix
         .getMatrixClient(this.currentUser)
         .then(() => {
-          // Already joined?
           const room = self.$matrix.getRoom(self.roomId);
-          if (
-            room &&
-            room.hasMembershipState(self.currentUser.user_id, "join")
-          ) {
-            // Yes, go to room
-            self.$matrix.setCurrentRoom(room);
-            self.$router.replace({ name: "Chat" });
-            return;
-          }
+          if (room) {
+            self.$matrix.setCurrentRoom(room); // Go to this room, now or when joined.
 
-          this.waiting = false;
+            // Already joined?
+            if (room.hasMembershipState(self.currentUser.user_id, "join")) {
+              // Yes, go to room
+              self.$navigation.push({ name: "Chat" }, true);
+              return;
+            }
+          }
+          this.waitingForMembership = false;
         })
         .catch((ignoredErr) => {
-          this.waiting = false;
+          this.waitingForMembership = false;
         });
     }
 
@@ -99,11 +99,11 @@ export default {
         console.log("Found room:", room);
         this.roomName = room.name;
         this.roomAvatar = room.avatar;
-        this.waiting = false;
+        this.waitingForInfo = false;
       })
       .catch((err) => {
         console.log("Could not find room info", err);
-        this.waiting = false;
+        this.waitingForInfo = false;
       });
   },
   computed: {
@@ -113,7 +113,7 @@ export default {
   },
   methods: {
     handleLogin() {
-      this.$router.push("/login"); // TODO - replace?
+      this.$navigation.push({ name: "Login" }, false);
     },
 
     handleOpenApp() {
@@ -138,7 +138,7 @@ export default {
           this.$matrix.setCurrentRoom(room);
           this.loading = false;
           this.loadingMessage = null;
-          this.$router.replace({ name: "Chat" });
+          this.$navigation.push({ name: "Chat" }, true);
         })
         .catch((err) => {
           // TODO - handle error

src/components/Login.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="d-flex justify-center login-root">
-    <div color="rgba(255,255,255,0.1)">
+  <div class="login-root">
+    <v-btn v-if="showBackArrow" icon @click.stop="$navigation.pop">
+      <v-icon>arrow_back</v-icon>
+    </v-btn>
+
+    <div color="rgba(255,255,255,0.1)" class="text-center">
       <h4>Login</h4>
       <v-form v-model="isValid">
         <v-text-field
@@ -65,10 +69,13 @@ export default {
     currentUser() {
       return this.$store.state.auth.user;
     },
+    showBackArrow() {
+      return this.$navigation.canPop();
+    }
   },
   created() {
     if (this.loggedIn) {
-      this.$router.replace({name: "Chat"});
+      this.$navigation.push({name: "Chat"}, true);
     }
   },
   watch: {
@@ -103,12 +110,12 @@ export default {
   },
   methods: {
     handleLogin() {
+      this.$navigation.push({name: "Chat"}, true);
       if (this.user.username && this.user.password) {
         this.loading = true;
-        const self = this;
         this.$store.dispatch("auth/login", this.user).then(
           () => {
-            self.$router.replace({ name: "Chat" });
+            this.$navigation.push({name: "Chat"}, true);
           },
           (error) => {
             this.loading = false;

src/main.js

@@ -4,6 +4,7 @@ import vuetify from './plugins/vuetify';
 import router from './router'
 import store from './store'
 import matrix from './services/matrix.service'
+import navigation from './services/navigation.service'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import 'material-design-icons-iconfont/dist/material-design-icons.css'
 import VEmojiPicker from 'v-emoji-picker';
@@ -36,3 +37,5 @@ new Vue({
   matrix,
   render: h => h(App)
 }).$mount('#app')
+
+Vue.use(navigation, router);

src/router/index.js

@@ -19,7 +19,9 @@ const routes = [
   },
   {
     path: '/login',
-    component: Login
+    name: 'Login',
+    component: Login,
+    props: true
   },
   {
     path: '/join/',

src/services/navigation.service.js

@@ -0,0 +1,65 @@
+export default {
+    install(Vue, router) {
+        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];
+                zeroIndex = window.history.length;
+            }
+            next();
+        })
+
+        router.beforeEach((to, from, next) => {
+            const index = routes.findIndex((item) => {
+                return item.path == to.path || item.name == to.name;
+            });
+            if (index < 0 && routes.length > 0) {
+                next(routes[0]);
+                return;
+            }
+            if (index >= 0) {
+                routes.splice(index + 1);
+            }
+            next();
+        })
+
+        const navigationService = {
+            push(route, asRoot) {
+                asRoot = asRoot || false;
+                //var resolved = router.resolve(route);
+                //resolved.route.meta = route.meta || {};
+                if (asRoot) {
+                    const i = routes.length - 1; // window.history.length - zeroIndex;
+                    routes = [route];
+                    //resolved.route.meta.index = 0;
+                    if (i > 0) {
+                        router.go(-i);
+                    } else {
+                        router.replace(route).catch((ignoredErr) => {});
+                    }
+                } else {
+                    //resolved.route.meta.index = routes.length;
+                    routes.push(route);
+                    router.push(route).catch((ignoredErr) => {});
+                }
+            },
+
+            canPop() {
+                return routes.length > 1;
+            },
+
+            pop() {
+                router.go(-1);
+            }
+        }
+        Vue.prototype.$navigation = navigationService;
+    }
+}