Filament•7mo ago

Open a Modal when user logs in

Hello. I have a custom livewire component modal that i want to show every time a user logs in on the dashboard page but I cant figure out how to dispatch the event to trigger the opening of thew modal. Any help will be appreciated. This is how I am rendering the modal view in my provider:


        return $panel
            ->default()
            ->id('admin')
            .......
            ->plugins([
                FilamentShieldPlugin::make()
            ])
            ->renderHook(
                'panels::auth.login.form.after',
                fn () => view('auth.socialite.google')
            )
            ->renderHook(
                PanelsRenderHook::CONTENT_END,
                function (): View {
                    return view('livewire.set-username');
                }
            );

Solution:

```php public function init(): void { $this->dispatch('open-modal', id: 'setUsernameModal'); }...

Jump to solution

15 Replies

awcodes•7mo ago

And what is in your set-username view? That is the modal right?

SrccodeOP•7mo ago

Yes. just a modal in the view file.

<x-filament::modal id="set-username">
    <x-slot name="heading">
        Modal heading
    </x-slot>
</x-filament::modal>

This is my current livewire component

<?php

namespace App\Livewire;

use Livewire\Component;

class SetUsername extends Component
{
    public function render()
    {
        $this->openModal();
        return view('livewire.set-username');
    }

    public function openModal(): void
    {
        $this->dispatch('open-modal', 'set-username');
    }

}

<?php

namespace App\Livewire;

use Livewire\Component;

class SetUsername extends Component
{
    public function render()
    {
        $this->openModal();
        return view('livewire.set-username');
    }

    public function openModal(): void
    {
        $this->dispatch('open-modal', 'set-username');
    }

}

awcodes•7mo ago

Should it show before they interact with the login form?

SrccodeOP•7mo ago

No right after the user logs in and the dashboard is shown

awcodes•7mo ago

Ok, this could get complicated too, because including in the renderHook means it’s going to fire on every page in the panel. I’m thinking it needs to be an alpine component so you can dispatch the open modal in alpines init() method. But you’ll also want to check that the user is only on the dashboard for the first time, with either cookies or localStorage. Either way, you’re going to want to handle most of this on the js side. Could potentially use Session to handle it on the php side but I think you’ll still want to use alpine to launch it since the server has no idea about when the page has finished loading and rendering.

SrccodeOP•7mo ago

Thank you for your answer. I'll see what I can do here.

LeandroFerreira•7mo ago

what do you think about a custom widget in the dashboard page? something like this:

Solution

LeandroFerreira•7mo ago

public function init(): void
{
    $this->dispatch('open-modal', id: 'setUsernameModal');
}

public function init(): void
{
    $this->dispatch('open-modal', id: 'setUsernameModal');
}

<x-filament-widgets::widget>
    <x-filament::modal wire:init="init" id="setUsernameModal">
        <div>...</div>
    </x-filament::modal>
</x-filament-widgets::widget>

<x-filament-widgets::widget>
    <x-filament::modal wire:init="init" id="setUsernameModal">
        <div>...</div>
    </x-filament::modal>
</x-filament-widgets::widget>