add server unreachable page and redirection

next-ui/src/pages/claim.vue

@@ -179,10 +179,12 @@ async function submitForm() {
   }
 }
 
-const { refresh: claimStatus } = useClaimStatus()
+void useClaimStatus()
-void claimStatus().then(({ data }) => {
+  .refresh()
-  if (data?.isClaimed) void router.push('/')
+  .then(({ data, error }) => {
-})
+    if (error) void router.push('/error')
+    else if (data?.isClaimed) void router.push('/')
+  })
 </script>
 
 <route lang="yaml">

next-ui/src/pages/error.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-empty-state
+    icon="i-mdi:connection"
+    :title="
+      $formatMessage({
+        description: 'Server unreachable error view: error message title',
+        defaultMessage: 'Server unreachable',
+        id: 'n0TnQ2',
+      })
+    "
+    :text="
+      $formatMessage({
+        description: 'Server unreachable error view: error message subtitle',
+        defaultMessage: 'Check that your Komga server is running',
+        id: 'PTr5Wc',
+      })
+    "
+  />
+</template>
+
+<script lang="ts" setup></script>
+
+<route lang="yaml">
+meta:
+  layout: single
+  noAuth: true
+</route>

next-ui/src/pages/login.vue

@@ -175,10 +175,12 @@ async function submitForm() {
       })
 }
 
-const { refresh: claimStatus } = useClaimStatus()
+void useClaimStatus()
-void claimStatus().then(({ data }) => {
+  .refresh()
-  if (data?.isClaimed == false) void router.push('/')
+  .then(({ data, error }) => {
-})
+    if (error) void router.push('/error')
+    else if (data?.isClaimed == false) void router.push('/')
+  })
 </script>
 
 <route lang="yaml">

next-ui/src/pages/startup.vue

@@ -16,15 +16,17 @@ async function checkAuthenticated() {
   const router = useRouter()
   const route = useRoute()
   const { data, error, refresh } = useCurrentUser()
-  const { data: claimData, refresh: claimRefresh } = useClaimStatus()
+  const { data: claimData, error: claimError, refresh: claimRefresh } = useClaimStatus()
 
   await refresh()
   await claimRefresh()
-  if (data.value) {
+  // if we can't get the claim status, most likely the server is unreachable
+  if (claimError.value) {
+    await router.push({ name: '/error' })
+  } else if (data.value) {
     if (route.query.redirect) await router.push({ path: route.query.redirect.toString() })
     else await router.push('/')
-  }
+  } else if (error.value) {
-  if (error.value) {
     if (claimData.value?.isClaimed)
       await router.push({ name: '/login', query: { redirect: route.query.redirect } })
     else await router.push({ name: '/claim', query: { redirect: route.query.redirect } })

next-ui/src/typed-router.d.ts

@@ -25,6 +25,7 @@ declare module 'vue-router/auto-routes' {
     '/account/details': RouteRecordInfo<'/account/details', '/account/details', Record<never, never>, Record<never, never>>,
     '/account/ui': RouteRecordInfo<'/account/ui', '/account/ui', Record<never, never>, Record<never, never>>,
     '/claim': RouteRecordInfo<'/claim', '/claim', Record<never, never>, Record<never, never>>,
+    '/error': RouteRecordInfo<'/error', '/error', Record<never, never>, Record<never, never>>,
     '/history': RouteRecordInfo<'/history', '/history', Record<never, never>, Record<never, never>>,
     '/import/books': RouteRecordInfo<'/import/books', '/import/books', Record<never, never>, Record<never, never>>,
     '/import/readlist': RouteRecordInfo<'/import/readlist', '/import/readlist', Record<never, never>, Record<never, never>>,
@@ -83,6 +84,10 @@ declare module 'vue-router/auto-routes' {
       routes: '/claim'
       views: never
     }
+    'src/pages/error.vue': {
+      routes: '/error'
+      views: never
+    }
     'src/pages/history.vue': {
       routes: '/history'
       views: never