Filament Auth Designer Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require caresome/filament-auth-designer
   

   Publish the config file:

   php artisan vendor:publish --provider="Caresome\FilamentAuthDesigner\FilamentAuthDesignerServiceProvider" --tag="filament-auth-designer-config"
   

2. First Use Case Add the package to your app/Providers/AppServiceProvider.php:

   use Caresome\FilamentAuthDesigner\FilamentAuthDesigner;
   
   public function boot(): void
   {
       FilamentAuthDesigner::make()
           ->media('public/images/auth-bg.jpg')
           ->position('right');
   }
   

3. Where to Look First

   • Config File: config/filament-auth-designer.php (global defaults)
   • Service Provider: app/Providers/AppServiceProvider.php (initial setup)
   • Blade Hooks: Check resources/views/vendor/filament-auth-designer/ for customization points

Implementation Patterns

Core Workflows

1. Per-Page Customization Override defaults for specific auth pages (e.g., login, register) in AppServiceProvider:

   FilamentAuthDesigner::make()
       ->forPage('login')
       ->media('public/images/login-bg.mp4')
       ->position('left')
       ->size('40%');
   

2. Dynamic Media Loading Use a closure to load media dynamically (e.g., based on user locale):

   FilamentAuthDesigner::make()
       ->media(fn () => "public/images/{App::getLocale()}/auth-bg.jpg");
   

3. Theme Switching Enable dark/light mode toggle in config/filament-auth-designer.php:

   'theme' => [
       'toggle' => true,
       'dark' => [
           'media' => 'public/images/dark-bg.jpg',
       ],
   ],
   

Integration Tips

• Filament Panels: Register the package in your panel provider:

  use Caresome\FilamentAuthDesigner\FilamentAuthDesignerPanel;
  
  FilamentAuthDesignerPanel::make();
  

• Livewire Components: Extend existing auth components by publishing views:

  php artisan vendor:publish --tag="filament-auth-designer-views"
  

• Tailwind Integration: Customize CSS in resources/css/filament-auth-designer.css:

  .filament-auth-designer-cover {
      @apply bg-gradient-to-r from-blue-500 to-purple-600;
  }
  

Gotchas and Tips

Common Pitfalls

1. Media Paths

   • Issue: Media not loading? Verify paths are relative to public/ or use absolute URLs.
   • Fix: Use storage_path('app/public/images/auth-bg.jpg') for local files, then symlink:

     php artisan storage:link
     

2. Caching

   • Issue: Changes to media/config not reflecting.
   • Fix: Clear Filament cache:

     php artisan filament:cache:clear
     

   • Tip: Disable caching in config/filament-auth-designer.php during development:

     'cache' => false,
     

3. Video Auto-Play

   • Issue: Videos not playing on mobile due to autoplay policies.
   • Fix: Add muted attribute in config/filament-auth-designer.php:

     'media' => [
         'video' => [
             'autoplay' => true,
             'muted' => true,
         ],
     ],
     

Debugging Tips

• Inspect Rendered HTML: Use browser dev tools to check if hooks (e.g., filament-auth-designer::media) are firing.
• Log Configuration: Dump config in AppServiceProvider:

  \Log::info('Auth Designer Config:', config('filament-auth-designer'));
  

• Check for Conflicts: Disable other auth packages (e.g., Laravel Fortify) temporarily to isolate issues.

Extension Points

1. Custom Hooks Extend the package by adding new hooks in app/Providers/AppServiceProvider.php:

   FilamentAuthDesigner::hook('after-media', function ($view) {
       $view->with('customData', 'value');
   });
   

2. Media Providers Register custom media sources (e.g., remote URLs, cloud storage):

   FilamentAuthDesigner::extendMedia(function ($media) {
       if (str_starts_with($media, 'https://')) {
           return "custom-remote-media:{$media}";
       }
       return $media;
   });
   

3. Theme Overrides Override default themes by publishing assets:

   php artisan vendor:publish --tag="filament-auth-designer-themes"
   

   Then modify resources/views/vendor/filament-auth-designer/themes/dark.blade.php.

Pro Tips

• Responsive Media: Use viewport units for fluid layouts:

  FilamentAuthDesigner::make()
      ->media('public/images/auth-bg.jpg')
      ->size('50vh');
  

• Lazy Loading: Optimize performance with lazy-loaded media:

  FilamentAuthDesigner::make()
      ->media('public/images/auth-bg.jpg')
      ->lazyLoad(true);
  

• A/B Testing: Use Filament’s get() method to toggle configurations dynamically:

  FilamentAuthDesigner::make()
      ->media(request()->get('ab_test') === 'new' ? 'new-bg.jpg' : 'old-bg.jpg');