47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<!-- Copyright (C) 2012-2026 Zammad Foundation, https://zammad-foundation.org/ -->
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import type { ErrorOptions } from '#shared/router/error.ts'
|
|
import { ErrorStatusCodes } from '#shared/types/error.ts'
|
|
|
|
export interface Props {
|
|
options?: ErrorOptions | null
|
|
authenticated?: boolean
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const errorImage = computed(() => {
|
|
switch (props.options?.statusCode) {
|
|
case ErrorStatusCodes.Forbidden:
|
|
return '/assets/error/error-403.svg'
|
|
case ErrorStatusCodes.NotFound:
|
|
return '/assets/error/error-404.svg'
|
|
case ErrorStatusCodes.InternalError:
|
|
default:
|
|
return '/assets/error/error-500.svg'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<img class="max-h-96 w-135" :alt="$t('Error')" :src="errorImage" />
|
|
<h1 class="text-center text-xl/snug text-black dark:text-white">
|
|
{{ $t(options?.title) }}
|
|
</h1>
|
|
<CommonLabel class="mx-auto max-w-prose text-center" tag="p">
|
|
{{ $t(options?.message, ...(options?.messagePlaceholder || [])) }}
|
|
</CommonLabel>
|
|
<CommonLabel v-if="options?.route" class="mx-auto max-w-prose text-center" tag="p">
|
|
{{ options.route }}
|
|
</CommonLabel>
|
|
<CommonLink v-if="options?.backLink" :link="options.backLink.link" size="medium">
|
|
{{ $t(options.backLink.label) }}
|
|
</CommonLink>
|
|
<CommonLink v-if="!authenticated" link="/login" size="medium">
|
|
{{ $t('Please proceed to login') }}
|
|
</CommonLink>
|
|
</template>
|