Custom error pages (#810)

* add custom error pages * move icon in front of header text * show exception message if user is root admin * add missing page for very important error: 418 * Update resources/views/errors/layout.blade.php * Update resources/views/errors/layout.blade.php * add dark mode to error pages --------- Co-authored-by: Lance Pioch <lancepioch@gmail.com>
2025-05-20 02:54:45 +02:00 · 2024-12-10 23:42:43 +01:00 · 2024-12-10 23:42:43 +01:00 · 3ffb54503f
commit 3ffb54503f
parent 53460b8d1b
7 changed files with 130 additions and 0 deletions
--- a/resources/views/errors/401.blade.php
+++ b/resources/views/errors/401.blade.php
@ -0,0 +1,8 @@
+@props([
+'code' => '401',
+'title' => 'Unauthorized',
+'subtitle' => 'You are not authorized to access this resource.',
+'icon' => 'tabler-exclamation-circle'
+])
+
+@extends('errors::layout')
--- a/resources/views/errors/403.blade.php
+++ b/resources/views/errors/403.blade.php
@ -0,0 +1,8 @@
+@props([
+'code' => '403',
+'title' => 'Forbidden',
+'subtitle' => $exception->getMessage(),
+'icon' => 'tabler-exclamation-circle'
+])
+
+@extends('errors::layout')
--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@ -0,0 +1,8 @@
+@props([
+'code' => '404',
+'title' => 'Not found',
+'subtitle' => 'The requested resource was not found.',
+'icon' => 'tabler-zoom-question'
+])
+
+@extends('errors::layout')
--- a/resources/views/errors/418.blade.php
+++ b/resources/views/errors/418.blade.php
@ -0,0 +1,8 @@
+@props([
+'code' => '418',
+'title' => 'I am a teapot',
+'subtitle' => 'What happened?',
+'icon' => 'tabler-teapot'
+])
+
+@extends('errors::layout')
--- a/resources/views/errors/500.blade.php
+++ b/resources/views/errors/500.blade.php
@ -0,0 +1,8 @@
+@props([
+'code' => '500',
+'title' => 'Server Error',
+'subtitle' => fn () => auth()->user()?->isRootAdmin() ? $exception->getMessage() : 'Something went wrong.',
+'icon' => 'tabler-bug'
+])
+
+@extends('errors::layout')
--- a/resources/views/errors/503.blade.php
+++ b/resources/views/errors/503.blade.php
@ -0,0 +1,8 @@
+@props([
+'code' => '503',
+'title' => 'Maintenance',
+'subtitle' => 'This site is currently down for maintenance.',
+'icon' => 'tabler-traffic-cone'
+])
+
+@extends('errors::layout')
--- a/resources/views/errors/layout.blade.php
+++ b/resources/views/errors/layout.blade.php
@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html
+    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+    @class([
+        'fi min-h-screen',
+        'dark' => filament()->hasDarkModeForced(),
+    ])>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link rel="icon" href="{{ config('app.favicon') }}" />
+
+    <title>
+        {{ $title }} - {{ config('app.name') }}
+    </title>
+
+    @filamentStyles
+
+    {{ filament()->getTheme()->getHtml() }}
+    {{ filament()->getFontHtml() }}
+
+    <style>
+        :root {
+            --font-family: '{!! filament()->getFontFamily() !!}';
+        }
+    </style>
+
+    @if (! filament()->hasDarkMode())
+        <script>
+            localStorage.setItem('theme', 'light');
+        </script>
+    @elseif (filament()->hasDarkModeForced())
+        <script>
+            localStorage.setItem('theme', 'dark');
+        </script>
+    @else
+        <script>
+            const theme = localStorage.getItem('theme') ??
+            @js(filament()->getDefaultThemeMode()->value)
+
+            if (
+                theme === 'dark' ||
+                (theme === 'system' &&
+                    window.matchMedia('(prefers-color-scheme: dark)')
+                        .matches)
+            ) {
+                document.documentElement.classList.add('dark');
+            }
+        </script>
+    @endif
+</head>
+
+<body class="fi-body min-h-screen bg-gray-50 font-normal text-gray-950 antialiased dark:bg-gray-950 dark:text-white">
+<div class="fi-simple-layout flex min-h-screen flex-col items-center">
+    <div class="fi-simple-main-ctn flex w-full flex-grow items-center justify-center">
+        <main
+            class="fi-simple-main my-16 w-full bg-white px-6 py-12 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 sm:rounded-xl sm:px-12 sm:max-w-lg">
+            <div class="fi-simple-page">
+                <section class="grid auto-cols-fr gap-y-6">
+                    <header class="fi-simple-header flex flex-col items-center">
+                        <h1 class="fi-simple-header-heading flex text-center text-2xl font-bold tracking-tight text-gray-950 dark:text-white">
+                            @if(filled($icon))
+                                <x-filament::icon icon="{{ $icon }}" class="h-8 w-8" />
+                            @endif
+
+                            {{$code}} | {{ $title }}
+                        </h1>
+
+                        <p class="fi-simple-header-subheading mt-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                            {{ $subtitle instanceof \Closure ? $subtitle() : $subtitle }}
+                        </p>
+                    </header>
+                </section>
+            </div>
+        </main>
+    </div>
+</div>
+</body>
+
+</html>