Set Close/Back buttons to always browse back - Closes #217

resources/js/mixins.js

@@ -26,13 +26,6 @@ Vue.mixin({
         },
 
         clearStorage() {
-        },
-
-        exitSettings: function (event) {
-            if (event) {
-                this.$notify({ clean: true })
-                this.$router.push({ name: 'accounts' })
-            }
             this.$storage.remove('accounts')
             this.$storage.remove('groups')
             this.$storage.remove('lastRoute')

resources/js/views/About.vue

@@ -85,7 +85,13 @@
         <vue-footer :showButtons="true">
             <!-- close button -->
             <p class="control">
-                <router-link :to="{ name: 'accounts', params: { toRefresh: true } }" role="button" :aria-label="$t('commons.close_the_x_page', {pagetitle: pagetitle})" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}">{{ $t('commons.close') }}</router-link>
+                <router-link
+                    :to="{ path: $route.params.goBackTo, params: { returnTo: $route.params.returnTo, toRefresh: true } }"
+                    :aria-label="$t('commons.close_the_x_page', {pagetitle: pagetitle})"
+                    class="button is-rounded"
+                    :class="{'is-dark' : $root.showDarkMode}">
+                    {{ $t('commons.back') }}
+                </router-link>
             </p>
         </vue-footer>
     </responsive-width-wrapper>
@@ -129,6 +135,19 @@
             clipboardErrorHandler ({ value, event }) {
                 console.log('error', value)
             },
-        }
+        },
+
+        beforeRouteEnter(to, from, next) {
+            next(vm => {
+                if (from.params.returnTo) {
+                    to.params.returnTo = from.params.returnTo
+                }
+
+                to.params.goBackTo = from.name
+                    ? from.path
+                    : '/accounts'
+            })
+        },
+
     }
 </script>

resources/js/views/Error.vue

@@ -84,7 +84,7 @@
         mounted(){
             // stop OTP generation on modal close
             this.$on('modalClose', function() {
-                this.$router.push({name: 'accounts' });
+                window.history.length > 1 ? this.$router.go(-1) : this.$router.push({ name: 'accounts '})
             });
 
         },

resources/js/views/settings/Account.vue

@@ -38,11 +38,17 @@
             </form-wrapper>
         </div>
         <vue-footer :showButtons="true">
-            <!-- Cancel button -->
+            <!-- close button -->
             <p class="control">
-                <button class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click.stop="exitSettings">
+                <router-link
+                    :to="{ path: $route.params.returnTo, params: { toRefresh: false } }"
+                    class="button is-rounded"
+                    :class="{'is-dark' : $root.showDarkMode}"
+                    tabindex="0"
+                    role="button"
+                    :aria-label="$t('commons.close_the_x_page', {pagetitle: $router.currentRoute.meta.title})">
                     {{ $t('commons.close') }}
-                </button>
+                </router-link>
             </p>
         </vue-footer>
     </div>
@@ -144,5 +150,25 @@
                 }
             },
         },
+
+        beforeRouteEnter(to, from, next) {
+            next(vm => {
+                if (from.params.returnTo) {
+                    to.params.returnTo = from.params.returnTo
+                }
+                else {
+                    to.params.returnTo = from.name
+                        ? from.path
+                        : '/accounts'
+                }
+            })
+        },
+
+        beforeRouteLeave(to, from, next) {
+            if (to.name == 'accounts') {
+                this.$notify({ clean: true })
+            }
+            next()
+        }
     }
 </script>

resources/js/views/settings/OAuth.vue

@@ -47,7 +47,15 @@
                 <vue-footer :showButtons="true">
                     <!-- close button -->
                     <p class="control">
-                        <router-link :to="{ name: 'accounts', params: { toRefresh: false } }" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" tabindex="0">{{ $t('commons.close') }}</router-link>
+                        <router-link
+                            :to="{ path: $route.params.returnTo, params: { toRefresh: false } }"
+                            class="button is-rounded"
+                            :class="{'is-dark' : $root.showDarkMode}"
+                            tabindex="0"
+                            role="button"
+                            :aria-label="$t('commons.close_the_x_page', {pagetitle: $router.currentRoute.meta.title})">
+                            {{ $t('commons.close') }}
+                        </router-link>
                     </p>
                 </vue-footer>
             </form-wrapper>
@@ -147,5 +155,25 @@
                 else this.$router.push({ name: 'settings.oauth.generatePAT' })
             },
         },
+
+        beforeRouteEnter(to, from, next) {
+            next(vm => {
+                if (from.params.returnTo) {
+                    to.params.returnTo = from.params.returnTo
+                }
+                else {
+                    to.params.returnTo = from.name
+                        ? from.path
+                        : '/accounts'
+                }
+            })
+        },
+
+        beforeRouteLeave(to, from, next) {
+            if (to.name == 'accounts') {
+                this.$notify({ clean: true })
+            }
+            next()
+        }
     }
 </script>

resources/js/views/settings/Options.vue

@@ -70,11 +70,17 @@
             </form-wrapper>
         </div>
         <vue-footer :showButtons="true">
-            <!-- Cancel button -->
+            <!-- Close button -->
             <p class="control">
-                <button class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click.stop="exitSettings">
+                <router-link
+                    :to="{ path: $route.params.returnTo, params: { toRefresh: false } }"
+                    class="button is-rounded"
+                    :class="{'is-dark' : $root.showDarkMode}"
+                    tabindex="0"
+                    role="button"
+                    :aria-label="$t('commons.close_the_x_page', {pagetitle: $router.currentRoute.meta.title})">
                     {{ $t('commons.close') }}
-                </button>
+                </router-link>
             </p>
         </vue-footer>
     </div>
@@ -253,5 +259,25 @@
             },
 
         },
+
+        beforeRouteEnter(to, from, next) {
+            next(vm => {
+                if (from.params.returnTo) {
+                    to.params.returnTo = from.params.returnTo
+                }
+                else {
+                    to.params.returnTo = from.name
+                        ? from.path
+                        : '/accounts'
+                }
+            })
+        },
+
+        beforeRouteLeave(to, from, next) {
+            if (to.name == 'accounts') {
+                this.$notify({ clean: true })
+            }
+            next()
+        }
     }
 </script>

resources/js/views/settings/WebAuthn.vue

@@ -47,7 +47,15 @@
                 <vue-footer :showButtons="true">
                     <!-- close button -->
                     <p class="control">
-                        <router-link :to="{ name: 'accounts', params: { toRefresh: false } }" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}">{{ $t('commons.close') }}</router-link>
+                        <router-link
+                            :to="{ path: $route.params.returnTo, params: { toRefresh: false } }"
+                            class="button is-rounded"
+                            :class="{'is-dark' : $root.showDarkMode}"
+                            tabindex="0"
+                            role="button"
+                            :aria-label="$t('commons.close_the_x_page', {pagetitle: $router.currentRoute.meta.title})">
+                            {{ $t('commons.close') }}
+                        </router-link>
                     </p>
                 </vue-footer>
             </form-wrapper>
@@ -215,5 +223,25 @@
             },
 
         },
+
+        beforeRouteEnter(to, from, next) {
+            next(vm => {
+                if (from.params.returnTo) {
+                    to.params.returnTo = from.params.returnTo
+                }
+                else {
+                    to.params.returnTo = from.name
+                        ? from.path
+                        : '/accounts'
+                }
+            })
+        },
+
+        beforeRouteLeave(to, from, next) {
+            if (to.name == 'accounts') {
+                this.$notify({ clean: true })
+            }
+            next()
+        }
     }
 </script>