toby/resources/js/Pages/Error.vue
Adrian Hopek b49fcadbba
#99 - ui changes (#100)
* #99 - ui changes

* #99 - logo fix

* #99 - tailwind plugin for eslint

* #99 - fix

* #99 - fix

* #99 - fix pagination

* #99 - fix logo

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
2022-03-31 10:12:33 +02:00

85 lines
2.6 KiB
Vue

<template>
<InertiaHead :title="error.title" />
<div class="py-16 px-4 min-h-full sm:py-24 sm:px-6 md:grid md:place-items-center lg:px-8">
<div class="mx-auto max-w-max">
<main class="sm:flex">
<p class="text-4xl font-extrabold text-blumilk-600 sm:text-5xl">
{{ error.code }}
</p>
<div class="sm:ml-6">
<div class="sm:pl-6 sm:border-l sm:border-gray-200">
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
{{ error.title }}
</h1>
<p class="mt-1 text-base text-gray-500">
{{ error.message }}
</p>
</div>
<div class="flex mt-10 space-x-3 sm:pl-6 sm:border-l sm:border-transparent">
<InertiaLink
href="/"
class="inline-flex items-center py-3 px-4 text-sm font-medium leading-4 text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
>
Wróć do strony głównej
</InertiaLink>
</div>
</div>
</main>
</div>
</div>
</template>
<script>
import GuestLayout from '@/Shared/Layout/GuestLayout'
export default {
name: 'ErrorPage',
layout: GuestLayout,
props: {
status: Number,
},
computed: {
error() {
return {
401: {
code: '401',
title: 'Nieuprawniony dostęp',
message: 'Aby mieć dostęp do tej strony, musisz się zalogować.',
},
403: {
code: '403',
title: 'Zabroniony',
message: 'Dostęp do żądanej strony jest zabroniony.',
},
404: {
code: '404',
title: 'Nie znaleziono strony',
message: 'Przykro nam, ale strona, której szukasz, nie istnieje.',
},
419: {
code: '419',
title: 'Strona wygasła',
message: 'Ta strona wygasła. Zaloguj się ponownie.',
},
429: {
code: '429',
title: 'Przekroczono limit zapytań',
message: 'Wysłano ostatnio zbyt wiele zapytań. Poczekaj i spróbuj ponownie później.',
},
500: {
code: '500',
title: 'Błąd serwera',
message: 'Wystąpił wewnętrzny błąd serwera.',
},
503: {
code: '503',
title: 'Serwis niedostępny',
message: 'Serwer jest tymczasowo niedostępny. Spróbuj ponownie później.',
},
}[this.status]
},
},
}
</script>