app/resources/views/components/layouts/guest.blade.php

80 lines
3.2 KiB
PHP
Raw Normal View History

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Dish Planner') }}</title>
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body class="font-sans antialiased bg-gray-600 text-gray-100">
<div class="min-h-screen flex flex-col items-center justify-center">
<div class="lg:w-1/3 lg:mx-auto w-full px-4" style="margin-top: 15vh;">
<div class="text-center mb-8">
<h1 class="text-2xl font-syncopate text-primary">DISH PLANNER</h1>
</div>
<div class="border-2 border-secondary rounded-lg px-5 pt-5 pb-3 lg:pt-10 lg:pb-7 bg-gray-600">
@yield('content')
</div>
</div>
</div>
@livewireScripts
{{-- CSRF Token Auto-Refresh for Livewire --}}
<script>
// Handle CSRF token expiration gracefully
Livewire.hook("request", ({ fail }) => {
fail(async ({ status, preventDefault, retry }) => {
if (status === 419) {
// Prevent the default error handling
preventDefault();
try {
// Fetch a new CSRF token
const response = await fetch("/refresh-csrf", {
method: "GET",
headers: {
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest"
},
credentials: "same-origin",
});
if (response.ok) {
const data = await response.json();
const newToken = data.token;
// Update the CSRF token in the meta tag
const csrfMeta = document.querySelector("meta[name='csrf-token']");
if (csrfMeta) {
csrfMeta.setAttribute("content", newToken);
}
// Update Livewire's CSRF token
if (window.Livewire && Livewire.csrfToken) {
Livewire.csrfToken = newToken;
}
// Retry the original request with the new token
retry();
} else {
console.error('Failed to refresh CSRF token');
// For guest layout, just retry once more or show error
window.location.reload();
}
} catch (error) {
console.error('Failed to refresh CSRF token:', error);
window.location.reload();
}
}
});
});
</script>
</body>
</html>