feat(error): merge components

Author: dargmuesli

src/app/components/_/Error.vue src/app/components/_/AppError.vue

@@ -4,15 +4,23 @@
       <span class="flex items-center gap-1 text-xl font-black">
         {{ t('maevNo') }}
       </span>
-      <span>
-        {{ statusCode ? `${statusCode} - ` : '' }}{{ statusReason }}
-      </span>
+      <h1>{{ `${statusCode} - ${statusReason}` }}</h1>
     </CardStateAlert>
-    <p v-if="statusCode === 403" class="text-center">
-      {{ t('error403Description') }}
-      <br />
-      {{ t('error403Hint') }}
-    </p>
+    <div>
+      <p v-if="statusCode === 403" class="text-center">
+        {{ t('error403Description') }}
+        <br />
+        {{ t('error403Hint') }}
+      </p>
+    </div>
+    <div>
+      <span v-if="description">
+        {{ description }}
+      </span>
+      <!-- eslint-disable vue/no-v-html -->
+      <div v-if="isInDevelopment && stack" v-html="stack" />
+      <!-- eslint-enable vue/no-v-html -->
+    </div>
     <ButtonList class="justify-center">
       <ButtonSignIn v-if="statusCode === 403" />
       <ButtonHome />
@@ -21,38 +29,33 @@
 </template>
 
 <script setup lang="ts">
-import { status } from '@http-util/status-i18n'
-
 export interface Props {
-  statusCode?: number
+  statusCode: number
+  statusMessage?: string
+  description?: string
+  stack?: string
 }
 const props = withDefaults(defineProps<Props>(), {
-  statusCode: undefined,
+  description: undefined,
+  statusMessage: undefined,
+  stack: undefined,
 })
 
 const { locale, t } = useI18n()
-const { ssrContext } = useNuxtApp()
 
-// computations
-const statusReason = computed(() => {
-  return status(props.statusCode, locale.value) || (t('error') as string)
-})
+const isInDevelopment = import.meta.dev
 
-// methods
-const init = () => {
-  if (ssrContext && props.statusCode) {
-    ssrContext.event.node.res.statusCode = props.statusCode
-  }
+// page
+const { ssrContext } = useNuxtApp()
+if (ssrContext && props.statusCode) {
+  ssrContext.event.node.res.statusCode = props.statusCode
 }
 
-// initialization
-init()
-</script>
-
-<script lang="ts">
-export default {
-  name: 'AppError',
-}
+// status code
+const { status } = await import('@http-util/status-i18n')
+const statusReason = computed(() => {
+  return status(props.statusCode, locale.value) || t('error')
+})
 </script>
 
 <i18n lang="yaml">

src/app/components/_/VioError.vue

@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout>
-    <VioError
+    <AppError
       :status-code="error.statusCode"
       :status-message="error.statusMessage"
       :description="error.message"

src/app/error.vue

@@ -2,7 +2,7 @@
   <div>
     <h1>{{ title }}</h1>
     <FormAccountPasswordReset v-if="isCodeValid" />
-    <Error v-else :status-code="422" />
+    <AppError v-else :status-code="422" />
   </div>
 </template>
 

src/app/pages/account/password/reset/index.vue

@@ -9,7 +9,7 @@
         postgresP0002: t('postgresP0002'),
       }"
     />
-    <Error v-else :status-code="422" />
+    <AppError v-else :status-code="422" />
   </div>
 </template>
 

src/app/pages/account/verify.vue

@@ -28,7 +28,7 @@
         />
       </section>
     </div>
-    <Error v-else :status-code="403" />
+    <AppError v-else :status-code="403" />
   </Loader>
 </template>
 

src/app/pages/event/edit/[username]/[event_name].vue

@@ -55,7 +55,7 @@
         </template>
       </Modal>
     </div>
-    <Error v-else :status-code="403" />
+    <AppError v-else :status-code="403" />
   </Loader>
 </template>
 

src/app/pages/event/view/[username]/[event_name]/attendance.vue

@@ -7,7 +7,7 @@
       <LayoutPageTitle :title="t('title')" />
       <GuestList :event="event" />
     </div>
-    <Error v-else :status-code="403" />
+    <AppError v-else :status-code="403" />
   </Loader>
 </template>
 

src/app/pages/event/view/[username]/[event_name]/guest.vue

@@ -351,7 +351,7 @@
         </template>
       </Modal>
     </div>
-    <Error v-else :status-code="403" />
+    <AppError v-else :status-code="403" />
   </Loader>
 </template>
 

src/app/pages/event/view/[username]/[event_name]/index.vue

@@ -1,26 +1,14 @@
 <template>
   <div>
-    <Error :status-code="418" />
+    <AppError :status-code="418" />
   </div>
 </template>
 
 <script setup lang="ts">
 const { t } = useI18n()
-const { ssrContext } = useNuxtApp() // cannot use `useRequestEvent` instead
 
-// data
-const title = t('title')
-
-// methods
-const init = () => {
-  if (ssrContext) {
-    ssrContext.event.node.res.statusCode = 418
-  }
-}
-
-// initialization
-useHeadDefault({ title })
-init()
+// page
+useHeadDefault({ title: t('title') })
 </script>
 
 <i18n lang="yaml">