Better server down error handling in login

ayanova/src/views/login.vue

@@ -1,10 +1,6 @@
 <template>
   <v-container>
     <v-row align="center" justify="center" class="mx-auto mt-sm-12 mb-8">
-      <v-col cols="12" md="7" offset-md="3" v-if="formState.errorBoxMessage">
-        <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
-      </v-col>
-
       <v-col cols="12" offset-md="4">
         <form>
           <v-row>
@@ -22,6 +18,9 @@
                 height="128"
               ></v-img>
             </v-col>
+            <v-col cols="12" md="7" v-if="formState.errorBoxMessage">
+              <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
+            </v-col>
             <v-col cols="12" md="7">
               <v-text-field
                 name="username"
@@ -112,23 +111,44 @@ export default {
             vm.$router.push(vm.$store.state.homePage);
           })
           .catch(function handleCaughtLoginError(error) {
-            /* xeslint-disable-next-line */
             //bad creds?
             if (
               error.message &&
               error.message.includes("ErrorUserNotAuthenticated")
             ) {
               vm.errorBadCreds = true;
+              return;
             }
-            //server closed?
+            //server closed by server state setting?
             if (error.code == 2000 || error.code == 2001) {
               vm.formState.errorBoxMessage = error.message;
+              return;
             }
+            //probably here because server unresponsive.
+            if (error.message) {
+              let msg = error.message;
+              if (
+                msg.includes("NetworkError") ||
+                msg.includes("Failed to fetch")
+              ) {
+                msg =
+                  "Could not connect to AyaNova server at " +
+                  window.$gz.api.APIUrl("") +
+                  "\r\nError: " +
+                  error.message;
+              }
+              vm.formState.errorBoxMessage = msg;
+              return;
+            }
+            /* xeslint-disable-next-line */
+
+            /* 
+            server down errors:
+            firefox: NetworkError when attempting to fetch resource."
+            brave: Error in login.vue catch: TypeError: Failed to fetch
+            chrome: Error in auth.js catch: TypeError: Failed to fetch
+            */
 
-            // {
-            //   "code": "2000",
-            //   "message": "Testing ops only server state"
-            // }
             //-----
           });
       }
@@ -144,14 +164,3 @@ export default {
   }
 };
 </script>
-
-<style scoped>
-#login {
-  width: 500px;
-  border: 1px solid #cccccc;
-  background-color: #ffffff;
-  margin: auto;
-  margin-top: 200px;
-  padding: 20px;
-}
-</style>