Show a 'offline' page when the initial load fails

Signed-off-by: Yannick Schaus <habpanel@schaus.net>

web/src/pages/404.vue → 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>

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'))
  }
 })
 

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