add data connection error

src/CMCApp.vue

@@ -2,6 +2,11 @@
     <v-app>
         <MyNav :user="user" :site_info="site_info" />
         <v-main class="ma-4">
+            <v-banner v-if="!site_info.backend_connected" 
+                      icon="mdi-exclamation" 
+                      color="error"
+                      text="Cannot connect to the data service. Please contact support." >
+            </v-banner>
                 <router-view :site_info="site_info" :user_info="user_info"></router-view>
         </v-main>
     </v-app>
@@ -19,8 +24,9 @@ export default {
     data() {
         return {
             site_info: {
-                name: "Loading...",
-                features: {}
+                name: "",
+                features: {},
+                backend_connected: false
             },
             user: {
                 first_name: "",
@@ -67,10 +73,21 @@ export default {
 
         },
         async getSiteInfo() {
+            console.log("Trying to get site Info...")
             axios
                 .get(this.$api_url + "/info")
-                .then(response => {this.site_info = response.data})
-                .catch(error => (console.log(error)))
+                .then(response => {
+                    this.site_info = response.data
+                    this.site_info.backend_connected = true
+                })
+                .catch(error => {
+                    this.site_info.name = "Error getting data connection"
+                    this.site_info.backend_connected = false
+                    console.log(error)
+                    setTimeout(() => {
+                        this.getSiteInfo()
+                    },5000)
+                })
 
         },
         async getUserInfo() {

src/components/MyNav.vue

@@ -70,7 +70,7 @@ export default{
             } else {
                 this.items = []
             }
-        }
+        },
     },
     computed: {
         user_items() {

src/views/LoginPage.vue

@@ -4,7 +4,7 @@
                         id="login-box"
                         title="Welcome!"
                         subtitle="Please Log In">
-        <v-form>
+        <v-form :disabled="!my_site_info.backend_connected">
             <v-responsive class="mx-auto" max-width="475">
                 <v-text-field label="Username" 
                               @keyup.enter="submitLogin" 
@@ -14,7 +14,7 @@
                               @keyup.enter="submitLogin" 
                               v-model="user.password" clearable
                               type="password"></v-text-field>
-                <v-btn color="blue" :loading="logging_in" @click="submitLogin">Login</v-btn>
+                <v-btn :disabled="!my_site_info.backend_connected" color="blue" :loading="logging_in" @click="submitLogin">Login</v-btn>
                 <v-banner v-if="show_error" color="error" icon="mdi-exclamation-thick" theme="dark">
                     <v-banner-text>{{ error_message }}</v-banner-text>
                 </v-banner>
@@ -27,9 +27,13 @@
 import axios from 'axios'
 
 export default {
+    props: {
+        site_info: {}
+    },
     name: 'LoginPage',
     data() {
         return {
+            my_site_info: this.site_info,
             user: {
                 email: "",
                 password: ""
@@ -40,6 +44,12 @@ export default {
             logging_in: false
         }
     },
+    watch: {
+        'site_info.backend_connected'(new_val) {
+            console.log(new_val)
+            this.my_site_info.backend_connected = new_val
+        }
+    },
     methods: {
         submitLogin() {
             this.error_message = ""