fix: show 404 page when recource wrong

Author: kulikp1

adminforth/spa/src/components/BreadcrumbsWithButtons.vue

@@ -6,15 +6,8 @@
         <slot></slot>
       </div>
     </div>
-    <div class="flex items-center justify-between mb-3 flex-wrap gap-y-2 gap-2" v-if="coreStore.resourceColumnsError">
-      <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
-        <span class="font-medium">{{ $t('Error!') }}</span>
-        {{ coreStore.resourceColumnsError }}
-      </div>
-    </div>
-
-    <div class="absolute inset-0 z-50 bg-white " v-if="!coreStore.resource && !coreStore.isResourceFetching">
-      <PageNotFound />
+    <div v-if="!coreStore.resource && !coreStore.isResourceFetching" >
+      <PageNotFound :errorMessage="coreStore.resourceColumnsError" />
     </div>
   </div>
 

adminforth/spa/src/views/PageNotFound.vue

@@ -4,7 +4,7 @@
         <div class="mx-auto max-w-screen-sm text-center">
             <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-lightPrimary dark:text-darkPrimary">404</h1>
             <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">{{ $t("Something's missing.") }}</p>
-            <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">{{ $t("Sorry, we can't find that page. You'll find lots to explore on the home page.") }} </p>
+            <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">{{ props.errorMessage ? $t(props.errorMessage) : $t("Sorry, we can't find that page. You'll find lots to explore on the home page.") }} </p>
             <div class="flex justify-center">
              <LinkButton to="/">{{ $t('Go back home') }}</LinkButton>
             </div>
@@ -17,4 +17,8 @@
 
 import { LinkButton } from '@/afcl';
 
+const props = defineProps<{
+  errorMessage?: string
+}>();
+
 </script>