From 16d1407d5f32fd04387a0326946d1c1b2388a542 Mon Sep 17 00:00:00 2001
From: Yannick Schaus <habpanel@schaus.net>
Date: Tue, 10 Apr 2018 21:20:39 +0200
Subject: [PATCH] Show a 'offline' page when the initial load fails

Signed-off-by: Yannick Schaus <habpanel@schaus.net>
---
 web/src/pages/{404.vue => Error.vue} | 5 +++--
 web/src/router/index.js              | 6 +++---
 web/src/router/routes.js             | 7 ++++++-
 3 files changed, 12 insertions(+), 6 deletions(-)
 rename web/src/pages/{404.vue => Error.vue} (52%)

diff --git a/web/src/pages/404.vue b/web/src/pages/Error.vue
similarity index 52%
rename from web/src/pages/404.vue
rename to web/src/pages/Error.vue
index 6484cb2..ae07891 100644
--- a/web/src/pages/404.vue
+++ b/web/src/pages/Error.vue
@@ -6,11 +6,12 @@
         style="width:30vw;max-width:150px;"
       >
     </p>
-    <p class="text-faded">Sorry, nothing here...<strong>(404)</strong></p>
+    <p class="text-faded" v-if="$route.meta.reason === 'offline'">openHAB is offline</p>
+    <p class="text-faded" v-else>Sorry, nothing here...<strong>(404)</strong></p>
     <q-btn
       color="secondary"
       style="width:200px;"
       @click="$router.push('/')"
-    >Go back</q-btn>
+    >{{ $route.meta.reason === 'offline' ? 'Try again' : 'Go back' }}</q-btn>
   </div>
 </template>
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 6f2b0ba..00c4a74 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -32,12 +32,12 @@ Router.beforeEach((to, from, next) => {
     // try to retrieve previously stored credentials
     navigator.credentials.get({ password: true }).then((creds) => {
       console.log('Using stored credentials to sign in')
-      store.dispatch('initialLoad', creds).then(() => next())
+      store.dispatch('initialLoad', creds).then(() => next()).catch(() => next('/offline'))
     }).catch(() => {
-      store.dispatch('initialLoad').then(() => next())
+      store.dispatch('initialLoad').then(() => next()).catch(() => next('/offline'))
     })
   } else {
-    store.dispatch('initialLoad').then(() => next())
+    store.dispatch('initialLoad').then(() => next()).catch(() => next('/offline'))
   }
 })
 
diff --git a/web/src/router/routes.js b/web/src/router/routes.js
index 1bbe2b4..a2192b7 100644
--- a/web/src/router/routes.js
+++ b/web/src/router/routes.js
@@ -6,7 +6,7 @@ import CardDeckPage from 'pages/CardDeck'
 import CardSuggestionsPage from 'pages/CardSuggestions'
 import CardRecentPage from 'pages/CardRecent'
 import CardBookmarksPage from 'pages/CardBookmarks'
-import ErrorPage from 'pages/404'
+import ErrorPage from 'pages/Error'
 
 export default [
   {
@@ -36,6 +36,11 @@ export default [
     props: true
   },
 
+  {
+    path: '/offline',
+    component: ErrorPage,
+    meta: { reason: 'offline' }
+  },
   { // Always leave this as last one
     path: '*',
     component: ErrorPage