#93 - custom error pages (#94)

* #93 - wip

* #93 - wip

* #93 - fix if statement

* #93 - wip

* #93 - added default error page

* #93 - fix to error page

* #93 - fix linter

* #93 - delete unnecessary file

* #93 - added EOL

* #93 - fix

* #93 - cr fix

Co-authored-by: Adrian Hopek <adrian.hopek@blumilk.pl>

app/Architecture/ExceptionHandler.php

@@ -5,6 +5,9 @@ declare(strict_types=1);
 namespace Toby\Architecture;
 
 use Illuminate\Foundation\Exceptions\Handler;
+use Inertia\Inertia;
+use Symfony\Component\HttpFoundation\Response;
+use Throwable;
 
 class ExceptionHandler extends Handler
 {
@@ -13,4 +16,19 @@ class ExceptionHandler extends Handler
         "password",
         "password_confirmation",
     ];
+
+    public function render($request, Throwable $e): Response
+    {
+        $response = parent::render($request, $e);
+
+        if (app()->environment("production") && in_array($response->status(), [500, 503, 429, 419, 404, 403, 401], true)) {
+            return Inertia::render("Error", [
+                "status" => $response->status(),
+            ])
+                ->toResponse($request)
+                ->setStatusCode($response->status());
+        }
+
+        return $response;
+    }
 }

resources/js/Pages/Error.vue

@@ -0,0 +1,84 @@
+<template>
+  <InertiaHead :title="error.title" />
+  <div class="min-h-full px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
+    <div class="max-w-max mx-auto">
+      <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:border-l sm:border-gray-200 sm:pl-6">
+            <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
+              {{ error.title }}
+            </h1>
+            <p class="mt-1 text-base text-gray-500">
+              {{ error.message }}
+            </p>
+          </div>
+          <div class="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6">
+            <InertiaLink
+              href="/"
+              class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+            >
+              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>

resources/js/Shared/Pagination.vue

@@ -21,11 +21,11 @@
     </div>
     <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
       <div class="text-sm text-gray-700">
-        Wyświetlanie
+        Wyświetlanie od
         <span class="font-medium">{{ pagination.from }}</span>
-        od
-        <span class="font-medium">{{ pagination.to }}</span>
         do
+        <span class="font-medium">{{ pagination.to }}</span>
+        z
         <span class="font-medium">{{ pagination.total }}</span>
         wyników
       </div>