style(ui): Improve login UI design

web/app/src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <div v-if="retrievedConfig" class="container container-xs relative mx-auto xl:rounded xl:border xl:shadow-xl xl:my-5 p-5 pb-12 xl:pb-5 text-left dark:bg-gray-800 dark:text-gray-200 dark:border-gray-500" id="global">
+  <Loading v-if="!retrievedConfig" class="h-64 w-64 px-4" />
+  <div v-else :class="[config && config.oidc && !config.authenticated ? 'hidden' : '', 'container container-xs relative mx-auto xl:rounded xl:border xl:shadow-xl xl:my-5 p-5 pb-12 xl:pb-5 text-left dark:bg-gray-800 dark:text-gray-200 dark:border-gray-500']" id="global">
     <div class="mb-2">
       <div class="flex flex-wrap">
         <div class="w-3/4 text-left my-auto">
@@ -7,25 +8,40 @@
         </div>
         <div class="w-1/4 flex justify-end">
           <a :href="link" target="_blank" style="width:100px">
-            <img v-if="logo" :src="logo" alt="Gatus" class="object-scale-down" style="max-width: 100px; min-width: 50px; min-height:50px;"/>
-            <img v-else src="./assets/logo.svg" alt="Gatus" class="object-scale-down" style="max-width: 100px; min-width: 50px; min-height:50px;"/>
+            <img v-if="logo" :src="logo" alt="Gatus" class="object-scale-down" style="max-width: 100px; min-width: 50px; min-height:50px;" />
+            <img v-else src="./assets/logo.svg" alt="Gatus" class="object-scale-down" style="max-width: 100px; min-width: 50px; min-height:50px;" />
           </a>
         </div>
       </div>
     </div>
-    <div v-if="$route && $route.query.error" class="text-red-500 text-center my-2">
-      <div class="text-xl">
-        <span class="text-red-500" v-if="$route.query.error === 'access_denied'">You do not have access to this status page</span>
-        <span class="text-red-500" v-else>{{ $route.query.error }}</span>
+    <router-view @showTooltip="showTooltip" />
+  </div>
+
+  <div v-if="config && config.oidc && !config.authenticated" class="mx-auto max-w-md pt-12">
+    <img src="./assets/logo.svg" alt="Gatus" class="mx-auto" style="max-width:160px; min-width:50px; min-height:50px;"/>
+    <h2 class="mt-4 text-center text-4xl font-extrabold text-gray-800 dark:text-gray-200">
+      Gatus
+    </h2>
+    <div class="mt-8 py-7 px-4 rounded-sm sm:bg-gray-100 sm:border sm:border-gray-300 sm:shadow-2xl sm:px-10">
+      <div class="sm:mx-auto sm:w-full">
+        <h2 class="mb-4 text-center text-xl font-bold text-gray-600 dark:text-gray-200 dark:sm:text-gray-600 ">
+          Sign in
+        </h2>
+      </div>
+      <div v-if="$route && $route.query.error" class="text-red-500 text-center my-2">
+        <div class="text-xl">
+          <span class="text-red-500" v-if="$route.query.error === 'access_denied'">You do not have access to this status page</span>
+          <span class="text-red-500" v-else>{{ $route.query.error }}</span>
+        </div>
+      </div>
+      <div>
+        <a :href="`${SERVER_URL}/oidc/login`" class="max-w-lg mx-auto w-full flex justify-center py-3 px-4 border border-green-800 rounded-md shadow-lg text-sm text-white bg-green-700 hover:bg-green-800">
+          Login with OIDC
+        </a>
       </div>
     </div>
-    <div v-if="config && config.oidc && !config.authenticated">
-      <a :href="`${SERVER_URL}/oidc/login`" class="max-w-lg mx-auto w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-lg text-white bg-green-700 hover:bg-green-800">
-        Login with OIDC
-      </a>
-    </div>
-    <router-view @showTooltip="showTooltip"/>
   </div>
+
   <Tooltip :result="tooltip.result" :event="tooltip.event"/>
   <Social/>
 </template>
@@ -35,10 +51,12 @@
 import Social from './components/Social.vue'
 import Tooltip from './components/Tooltip.vue';
 import {SERVER_URL} from "@/main";
+import Loading from "@/components/Loading";
 
 export default {
   name: 'App',
   components: {
+    Loading,
     Social,
     Tooltip
   },

web/app/src/components/Loading.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="flex justify-center items-center mx-auto">
+    <img :class="`animate-spin opacity-60 rounded-full`" src="../assets/logo.svg" alt="Gatus logo" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

web/app/src/views/Details.vue

@@ -22,34 +22,34 @@
       <div class="flex space-x-4 text-center text-2xl mt-6 relative bottom-2 mb-10">
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last 7 days</h2>
-          <img :src="generateUptimeBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto" />
+          <img :src="generateUptimeBadgeImageURL('7d')" alt="7d uptime badge" class="mx-auto"/>
         </div>
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last 24 hours</h2>
-          <img :src="generateUptimeBadgeImageURL('24h')" alt="24h uptime badge" class="mx-auto" />
+          <img :src="generateUptimeBadgeImageURL('24h')" alt="24h uptime badge" class="mx-auto"/>
         </div>
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last hour</h2>
-          <img :src="generateUptimeBadgeImageURL('1h')" alt="1h uptime badge" class="mx-auto" />
+          <img :src="generateUptimeBadgeImageURL('1h')" alt="1h uptime badge" class="mx-auto"/>
         </div>
       </div>
     </div>
     <div v-if="endpointStatus && endpointStatus.key" class="mt-12">
       <h1 class="text-xl xl:text-3xl font-mono text-gray-400">RESPONSE TIME</h1>
       <hr/>
-      <img :src="generateResponseTimeChartImageURL()" alt="response time chart" class="mt-6" />
+      <img :src="generateResponseTimeChartImageURL()" alt="response time chart" class="mt-6"/>
       <div class="flex space-x-4 text-center text-2xl mt-6 relative bottom-2 mb-10">
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last 7 days</h2>
-          <img :src="generateResponseTimeBadgeImageURL('7d')" alt="7d response time badge" class="mx-auto mt-2" />
+          <img :src="generateResponseTimeBadgeImageURL('7d')" alt="7d response time badge" class="mx-auto mt-2"/>
         </div>
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last 24 hours</h2>
-          <img :src="generateResponseTimeBadgeImageURL('24h')" alt="24h response time badge" class="mx-auto mt-2" />
+          <img :src="generateResponseTimeBadgeImageURL('24h')" alt="24h response time badge" class="mx-auto mt-2"/>
         </div>
         <div class="flex-1">
           <h2 class="text-sm text-gray-400 mb-1">Last hour</h2>
-          <img :src="generateResponseTimeBadgeImageURL('1h')" alt="1h response time badge" class="mx-auto mt-2" />
+          <img :src="generateResponseTimeBadgeImageURL('1h')" alt="1h response time badge" class="mx-auto mt-2"/>
         </div>
       </div>
     </div>
@@ -105,8 +105,9 @@ export default {
     fetchData() {
       //console.log("[Details][fetchData] Fetching data");
       fetch(`${this.serverUrl}/api/v1/endpoints/${this.$route.params.key}/statuses?page=${this.currentPage}`, {credentials: 'include'})
-          .then(response => response.json())
-          .then(data => {
+      .then(response => {
+        if (response.status === 200) {
+          response.json().then(data => {
             if (JSON.stringify(this.endpointStatus) !== JSON.stringify(data)) {
               this.endpointStatus = data;
               this.uptime = data.uptime;
@@ -141,6 +142,12 @@ export default {
               this.events = events;
             }
           });
+        } else {
+          response.text().then(text => {
+            console.log(`[Details][fetchData] Error: ${text}`);
+          });
+        }
+      });
     },
     generateUptimeBadgeImageURL(duration) {
       return `${this.serverUrl}/api/v1/endpoints/${this.endpointStatus.key}/uptimes/${duration}/badge.svg`;

web/app/src/views/Home.vue

@@ -25,14 +25,20 @@ export default {
   emits: ['showTooltip', 'toggleShowAverageResponseTime'],
   methods: {
     fetchData() {
-      //console.log("[Home][fetchData] Fetching data");
       fetch(`${SERVER_URL}/api/v1/endpoints/statuses?page=${this.currentPage}`, {credentials: 'include'})
-          .then(response => response.json())
-          .then(data => {
+      .then(response => {
+        if (response.status === 200) {
+          response.json().then(data => {
             if (JSON.stringify(this.endpointStatuses) !== JSON.stringify(data)) {
               this.endpointStatuses = data;
             }
           });
+        } else {
+          response.text().then(text => {
+            console.log(`[Home][fetchData] Error: ${text}`);
+          });
+        }
+      });
     },
     changePage(page) {
       this.currentPage = page;