From 0e4d5dc225e2e3509d9d723e0f1e256c4cf53c6e Mon Sep 17 00:00:00 2001
From: antoinezanardi <antoine.zanardi@epitech.eu>
Date: Tue, 10 Nov 2020 18:40:20 +0100
Subject: [PATCH] feat(*): `Not Available` page added when API is down. Closes
 #61

---
 CHANGELOG.md                                 |  1 +
 src/App.vue                                  | 17 +++++++---
 src/components/NotAvailable/NotAvailable.vue | 33 ++++++++++++++++++++
 src/plugins/vue-i18n/fr.json                 |  5 +++
 4 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 src/components/NotAvailable/NotAvailable.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 792d30c..08a282a 100644
--- 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
index f65817c..b2e227e 100644
--- 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
new file mode 100644
index 0000000..1af3491
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/plugins/vue-i18n/fr.json b/src/plugins/vue-i18n/fr.json
index 547253a..f5dc735 100644
--- 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",