Handle expired sessions gracefuly

src/App.vue

@@ -162,6 +162,7 @@ export default {
                     })
                     .catch(() => {
                         this.$bus.$emit('TOAST', { message: 'There was an error saving your settings', type: 'error' });
+                        this.$router.push({ name: 'sessionExpired' });
                     });
             }, 500),
 
@@ -172,10 +173,8 @@ export default {
                         this.$bus.$emit('TOAST', { message: 'Tags updated' });
                     })
                     .catch(() => {
-                        this.$bus.$emit('TOAST', {
-                            message: 'There was an error saving your tag',
-                            type: 'error',
-                        });
+                        this.$bus.$emit('TOAST', { message: 'There was an error saving your tag', type: 'error' });
+                        this.$router.push({ name: 'sessionExpired' });
                     });
             }
         },
@@ -187,10 +186,8 @@ export default {
                         this.$bus.$emit('TOAST', { message: 'Notes updated' });
                     })
                     .catch(() => {
-                        this.$bus.$emit('TOAST', {
-                            message: 'There was an error saving your note',
-                            type: 'error',
-                        });
+                        this.$bus.$emit('TOAST', { message: 'There was an error saving your note', type: 'error' });
+                        this.$router.push({ name: 'sessionExpired' });
                     });
             }
         },
@@ -252,6 +249,7 @@ export default {
                 }
             }).catch(() => {
                 this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                this.$router.push({ name: 'sessionExpired' });
             });
         },
 
@@ -267,6 +265,7 @@ export default {
                 })
                 .catch(() => {
                     this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
 
@@ -280,6 +279,7 @@ export default {
                 })
                 .catch(() => {
                     this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
 
@@ -287,6 +287,10 @@ export default {
             db.collection('lists').doc(this.user.uid).set({}, { merge: true })
                 .then(() => {
                     this.loadLists();
+                })
+                .catch(() => {
+                    this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
 
@@ -294,6 +298,10 @@ export default {
             db.collection('settings').doc(this.user.uid).set({}, { merge: true })
                 .then(() => {
                     this.loadSettings();
+                })
+                .catch(() => {
+                    this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
     },

src/components/GameCards/GameCard.js

@@ -110,6 +110,7 @@ export default {
                 })
                 .catch(() => {
                     this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
 
@@ -135,6 +136,7 @@ export default {
                 })
                 .catch(() => {
                     this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
     },

src/components/Lists/List.vue

@@ -232,6 +232,7 @@ export default {
                 })
                 .catch(() => {
                     this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
 

src/components/Lists/ListSettings.vue

@@ -203,6 +203,7 @@ export default {
                 })
                 .catch(() => {
                     this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
 

src/components/Settings/AccountSettings.vue

@@ -91,10 +91,12 @@ export default {
                         })
                         .catch(() => {
                             this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                            this.$router.push({ name: 'sessionExpired' });
                         });
                 })
                 .catch(() => {
                     this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
 

src/components/Settings/GameBoardSettings.vue

@@ -125,6 +125,7 @@ export default {
                 })
                 .catch(() => {
                     this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
     },

src/pages/GameBoard.vue

@@ -209,6 +209,7 @@ export default {
             db.collection('lists').doc(this.user.uid).set(this.gameLists, { merge: !force })
                 .catch(() => {
                     this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
 

src/pages/GameDetail.vue

@@ -183,6 +183,7 @@ export default {
                 })
                 .catch(() => {
                     this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
+                    this.$router.push({ name: 'sessionExpired' });
                 });
         },
     },

src/pages/SessionExpired.vue

@@ -0,0 +1,57 @@
+<template lang="html">
+    <div class="session-expired">
+        <h2>Session expired</h2>
+
+        <div class="actions">
+            <button class="success" @click="login">Login</button>
+            <a class="link primary" :href="exitUrl">Exit</a>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    computed: {
+        exitUrl() {
+            return process.env.NODE_ENV === 'development'
+                ? 'http://localhost:3000'
+                : 'https://gamebrary.com';
+        },
+
+        homeUrl() {
+            return process.env.NODE_ENV === 'development'
+                ? 'http://localhost:4000'
+                : 'https://app.gamebrary.com';
+        },
+    },
+
+    methods: {
+        login() {
+            this.$store.commit('CLEAR_SESSION');
+            window.location.href = this.homeUrl;
+        },
+    },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+    @import "~styles/styles.scss";
+
+    .session-expired {
+        color: $color-dark-gray;
+        min-height: calc(100vh - #{$navHeight});
+        padding: 0 $gp;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .actions {
+        display: grid;
+        margin-top: $gp;
+        grid-template-columns: auto auto;
+        grid-gap: $gp;
+        text-align: center;
+        align-items: center;
+    }
+</style>

src/router.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import ShareList from '@/pages/ShareList';
 import GameBoard from '@/pages/GameBoard';
+import SessionExpired from '@/pages/SessionExpired';
 import Platforms from '@/pages/Platforms';
 import NotFound from '@/pages/NotFound';
 
@@ -23,6 +24,14 @@ export default new Router({
                 title: 'Platforms',
             },
         },
+        {
+            name: 'sessionExpired',
+            path: '/session-expired',
+            component: SessionExpired,
+            meta: {
+                title: 'Session expired',
+            },
+        },
         {
             path: '/',
             name: 'game-board',