feat(*): Not Available page added when API is down. Closes #61

antoinezanardi · Nov 10, 2020 · 0e4d5dc · 0e4d5dc
1 parent 3175bdd
commit 0e4d5dc
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### 🚀 New features
 
+* [#61](https://github.com/antoinezanardi/werewolves-assistant-web/issues/61) - `Not Available` page added when API is down.
 * [#62](https://github.com/antoinezanardi/werewolves-assistant-web/issues/62) - Google analytics plugin implemented.
 
 ### 🌟 Enhancements

diff --git a/src/App.vue b/src/App.vue
@@ -2,6 +2,7 @@
     <div id="app">
         <transition mode="out-in" name="fade">
             <SpinningLoader v-if="loading" key="loading"/>
+            <NotAvailable v-else-if="unavailableAPI"/>
             <div v-else id="werewolves-assistant" key="werewolves-assistant" class="d-flex flex-column">
                 <transition name="fade-in">
                     <NavBar v-if="$route.name !== 'Home'"/>
@@ -16,17 +17,23 @@
 import { mapActions } from "vuex";
 import SpinningLoader from "./components/SpinningLoader/SpinningLoader";
 import NavBar from "./components/NavBar/NavBar";
+import NotAvailable from "@/components/NotAvailable/NotAvailable";
 
 export default {
     name: "App",
-    components: { NavBar, SpinningLoader },
+    components: { NotAvailable, NavBar, SpinningLoader },
     data() {
-        return { loading: true };
+        return { loading: true, unavailableAPI: false };
     },
     async mounted() {
-        await this.checkTokenAndLogin();
-        await this.getAndSetRoles();
-        this.loading = false;
+        try {
+            await this.checkTokenAndLogin();
+            await this.getAndSetRoles();
+        } catch (e) {
+            this.unavailableAPI = true;
+        } finally {
+            this.loading = false;
+        }
     },
     methods: {
         ...mapActions("user", {

diff --git a/src/components/NotAvailable/NotAvailable.vue b/src/components/NotAvailable/NotAvailable.vue
@@ -0,0 +1,33 @@
+<template>
+    <div id="not-available" class="h-100 d-flex flex-column justify-content-center align-items-center container-fluid">
+        <div class="row">
+            <div class="col-12">
+                <h1 class="text-center" v-html="$t('NotAvailable.theAssistantIsUnavailable')"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <h3 class="text-center" v-html="$t('NotAvailable.willBeAvailableSoon')"/>
+            </div>
+        </div>
+        <button class="btn btn-primary btn-lg mt-4" @click="reloadPage">
+            <i class="fa fa-redo mr-2"/>
+            <span v-html="$t('NotAvailable.refresh')"/>
+        </button>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "NotAvailable",
+    methods: {
+        reloadPage() {
+            window.location.reload();
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/plugins/vue-i18n/fr.json b/src/plugins/vue-i18n/fr.json
@@ -541,6 +541,11 @@
         "getOutBeforeWerewolvesCome": "Déguerpissez avant que les loups-garous arrivent !",
         "flee": "Prendre la fuite"
     },
+    "NotAvailable": {
+        "theAssistantIsUnavailable": "L'Assistant est indisponible pour le moment...",
+        "willBeAvailableSoon": "Encore un coup de ces fichus Loups-Garous ... Le maire a été averti, l'Assistant sera bientôt de nouveau opérationel.",
+        "refresh": "Rafraichir la page"
+    },
     "Error": {
         "unauthorized": "Vous ne pouvez pas accéder à cette page",
         "BAD_REQUEST": "Mauvaise requête serveur",