Add maintenance mode

app.vue

@@ -9,6 +9,7 @@ import {h} from 'vue';
 import Toaster from '@/components/ui/toast/Toaster.vue'
 import RegistrationDialog from "@/components/custom-ui/RegistrationDialog.vue";
 import {useToast} from '@/components/ui/toast/use-toast'
+
 const {toast} = useToast()
 
 useHead({
@@ -29,6 +30,10 @@ provide('userRef', readonly(user))
 
 // Try to fetch user
 async function updateUser() {
+  // Only fetch user if not in maintenance mode
+  if (useRuntimeConfig().public.maintenanceMode)
+    return
+
   await $fetch<v2User | ArunaError>('/api/user')
       .then(response => {
         if (typeof response === 'undefined') {
@@ -57,7 +62,7 @@ async function updateUser() {
               variant: 'destructive',
               duration: 10000,
             })
-          }  else if ((response as ArunaError).code === 16) {
+          } else if ((response as ArunaError).code === 16) {
             // gRPC code 16 = Unauthorized
             notRegistered.value = false
           } else {
@@ -80,8 +85,7 @@ async function updateUser() {
               duration: 10000
             })
         }
-      })
-      .catch(error => {
+      }).catch(() => {
         user.value = undefined
         notRegistered.value = false
         toast({
@@ -122,19 +126,21 @@ async function refreshTokens() {
 }
 
 onBeforeMount(() => setInterval(refreshTokens, 30000))
-onMounted(() => updateUser())
+onBeforeMount(() => updateUser())
 </script>
 
 <template>
   <RegistrationDialog @closeRegisterDialog="notRegistered=false" :withButton="false" :initialOpen="notRegistered"/>
 
   <!-- Header + Navigation -->
   <!-- Main body -->
-  <div
-      class="flex flex-col flex-grow md:min-h-screen px-6 py-2 bg-gradient-to-b from-aruna-800/[.30] via-transparent to-aruna-800/[.10]">
-    <ToastInfo v-if="useRuntimeConfig().public.infoBanner.active" modalId="info-toast" infoMsg="Hello"/>
+  <div v-if="useRuntimeConfig().public.maintenanceMode"
+       class="h-[100vh] w-[100vw] bg-[url('_nuxt/assets/imgs/maintenance_sm.webp')] md:bg-[url('_nuxt/assets/imgs/maintenance_md.webp')] lg:bg-[url('_nuxt/assets/imgs/maintenance_lg.webp')] bg-no-repeat bg-center bg-cover to-transparent">
+  </div>
 
-    <!-- Body -->
+  <div v-else
+       class="flex flex-col flex-grow md:min-h-screen px-6 py-2 bg-gradient-to-b from-aruna-800/[.30] via-transparent to-aruna-800/[.10]">
+    <ToastInfo v-if="useRuntimeConfig().public.infoBanner.active" modalId="info-toast" infoMsg="Hello"/>
     <NuxtLoadingIndicator/>
     <NuxtPage/>
   </div>

middleware/maintenance.global.ts

@@ -0,0 +1,6 @@
+export default defineNuxtRouteMiddleware((to) => {
+  // Always redirect to homepage if in maintenance mode
+  if (useRuntimeConfig().public.maintenanceMode && to.path !== '/') {
+    return navigateTo('/')
+  }
+})

nuxt.config.ts

@@ -69,6 +69,7 @@ export default defineNuxtConfig({
       dd: ['mt-1', 'ps-4', 'leading-6', 'text-gray-700', 'sm:col-span-2', 'sm:mt-0']
     },
     public: {
+      maintenanceMode: false,
       websiteHost: 'http://localhost:3000',
       infoBanner: {
         active: false,