Pull master

app/Http/Controllers/Settings/ProfileController.php

@@ -8,7 +8,6 @@
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Redirect;
 use Inertia\Inertia;
 use Inertia\Response;
 
@@ -40,7 +39,7 @@ public function update(ProfileUpdateRequest $request): RedirectResponse
 
         $user?->save();
 
-        return Redirect::route('profile.edit');
+        return redirect()->route('profile.edit');
     }
 
     /**

app/Http/Middleware/HandleInertiaRequests.php

@@ -47,6 +47,13 @@ public function share(Request $request): array
                 'user' => $request->user(),
                 'isAdmin' => $request->user()?->hasRole('Admin'),
             ],
+            'flash' => [
+                'success' => fn () => $request->session()->get('flash_success'),
+                'info' => fn () => $request->session()->get('flash_info'),
+                'warn' => fn () => $request->session()->get('flash_warn'),
+                'error' => fn () => $request->session()->get('flash_error'),
+                'message' => fn () => $request->session()->get('flash_message'),
+            ],
         ];
     }
 }

app/Models/User.php

@@ -4,15 +4,14 @@
 
 //use Illuminate\Contracts\Auth\MustVerifyEmail;
 use App\Models\Traits\Filterable;
-use Database\Factories\UserFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 use Spatie\Permission\Traits\HasRoles;
 
 class User extends Authenticatable //implements MustVerifyEmail
 {
-    /** @use HasFactory<UserFactory> */
+    /** @use HasFactory<\Database\Factories\UserFactory> */
     use HasFactory;
     use Notifiable;
     use HasRoles;

bootstrap/app.php

@@ -47,7 +47,7 @@
                     ->setStatusCode($response->getStatusCode());
             } elseif ($response->getStatusCode() === 419) {
                 return back()->with([
-                    'message' => 'The page expired, please try again.',
+                    'flash_message' => 'The page expired, please try again.',
                 ]);
             }
 

resources/js/components/DeleteUserModal.vue

@@ -79,7 +79,7 @@ const deleteUser = () => {
             />
             <Button
                 :loading="form.processing"
-                label="Delete Account"
+                label="Delete account"
                 severity="danger"
                 @click="deleteUser"
             />

resources/js/components/FlashMessages.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { Check, Info, TriangleAlert, CircleAlert, Megaphone } from 'lucide-vue-next';
+</script>
+
+<template>
+    <div class="m-0">
+        <Message
+            v-if="$page.props.flash.success"
+            class="mb-6"
+            severity="success"
+            closable
+        >
+            <template #icon>
+                <Check />
+            </template>
+            {{ $page.props.flash.success }}
+        </Message>
+        <Message
+            v-if="$page.props.flash.info"
+            class="mb-6"
+            severity="info"
+            closable
+        >
+            <template #icon>
+                <Info />
+            </template>
+            {{ $page.props.flash.info }}
+        </Message>
+        <Message
+            v-if="$page.props.flash.warn"
+            class="mb-6"
+            severity="warn"
+            closable
+        >
+            <template #icon>
+                <TriangleAlert />
+            </template>
+            {{ $page.props.flash.warn }}
+        </Message>
+        <Message
+            v-if="$page.props.flash.error"
+            class="mb-6"
+            severity="error"
+            closable
+        >
+            <template #icon>
+                <CircleAlert />
+            </template>
+            {{ $page.props.flash.error }}
+        </Message>
+        <Message
+            v-if="$page.props.flash.message"
+            class="mb-6"
+            severity="secondary"
+            closable
+        >
+            <template #icon>
+                <Megaphone />
+            </template>
+            {{ $page.props.flash.message }}
+        </Message>
+    </div>
+</template>

resources/js/composables/useAppLayout.ts

@@ -92,7 +92,7 @@ export function useAppLayout() {
             separator: true
         },
         {
-            label: 'Log Out',
+            label: 'Log out',
             lucideIcon: LogOut,
             command: () => logout(),
         },

resources/js/layouts/GuestAuthLayout.vue

@@ -4,23 +4,50 @@ import ApplicationLogo from '@/components/ApplicationLogo.vue';
 
 <template>
     <Container>
-        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
+        <div class="min-h-screen flex flex-col justify-center items-center pt-6 sm:pt-0">
             <div>
                 <InertiaLink href="/">
-                    <ApplicationLogo class="w-15 h-15 fill-current text-surface-900 dark:text-surface-0" />
+                    <ApplicationLogo class="w-12 h-12 fill-current text-surface-900 dark:text-surface-0" />
                 </InertiaLink>
             </div>
             <div
                 v-if="$slots.message"
-                class="w-full sm:max-w-md mt-6 px-4 sm:px-0"
+                class="w-full sm:max-w-lg mt-6 px-4 sm:px-0"
             >
                 <slot name="message" />
             </div>
-            <div class="w-full sm:max-w-md mt-6">
-                <Card>
+            <div class="w-full sm:max-w-lg mt-6">
+                <Card
+                    pt:caption:class="space-y-2"
+                    pt:body:class="p-6 sm:p-8 space-y-6"
+                >
+                    <template
+                        v-if="$slots.header"
+                        #header
+                    >
+                        <slot name="header" />
+                    </template>
+                    <template
+                        v-if="$slots.title"
+                        #title
+                    >
+                        <slot name="title" />
+                    </template>
+                    <template
+                        v-if="$slots.subtitle"
+                        #subtitle
+                    >
+                        <slot name="subtitle" />
+                    </template>
                     <template #content>
                         <slot />
                     </template>
+                    <template
+                        v-if="$slots.footer"
+                        #footer
+                    >
+                        <slot name="footer" />
+                    </template>
                 </Card>
             </div>
         </div>

resources/js/layouts/app/HeaderLayout.vue

@@ -5,6 +5,7 @@ import { useAppLayout } from '@/composables/useAppLayout';
 import { ChevronsUpDown, ChevronDown, Menu as MenuIcon } from 'lucide-vue-next';
 import ApplicationLogo from '@/components/ApplicationLogo.vue';
 import ClientOnly from '@/components/ClientOnly.vue';
+import FlashMessages from '@/components/FlashMessages.vue';
 import Menu from '@/components/primevue/menu/Menu.vue';
 import Menubar from '@/components/primevue/menu/Menubar.vue';
 import PanelMenu from '@/components/primevue/menu/PanelMenu.vue';
@@ -153,6 +154,9 @@ const toggleMobileUserMenu = (event) => {
 
             <main>
                 <Container vertical>
+                    <!-- Session-based Flash Messages -->
+                    <FlashMessages />
+
                     <!-- Breadcrumbs -->
                     <Breadcrumb
                         v-if="props.breadcrumbs.length"

resources/js/layouts/app/SidebarLayout.vue

@@ -5,6 +5,7 @@ import { ChevronsUpDown, Menu as MenuIcon } from 'lucide-vue-next';
 import { useAppLayout } from '@/composables/useAppLayout';
 import ApplicationLogo from '@/components/ApplicationLogo.vue';
 import ClientOnly from '@/components/ClientOnly.vue';
+import FlashMessages from '@/components/FlashMessages.vue';
 import Menu from '@/components/primevue/menu/Menu.vue';
 import PanelMenu from '@/components/primevue/menu/PanelMenu.vue';
 import Breadcrumb from '@/components/primevue/menu/Breadcrumb.vue';
@@ -163,6 +164,9 @@ const toggleMobileUserMenu = (event) => {
                     vertical
                     fluid
                 >
+                    <!-- Session-based Flash Messages -->
+                    <FlashMessages />
+
                     <!-- Breadcrumbs -->
                     <Breadcrumb
                         v-if="props.breadcrumbs.length"