Transforme Seu Sistema Laravel com Filament: Um Guia para Estilizar a Tela de Login com CSS Personalizado

#laravel #filament #css #tutorial

O Laravel é um popular framework para desenvolvimento web em PHP, oferecendo uma gama de recursos nativos que simplificam o processo de desenvolvimento. A descoberta recente do Filament PHP, uma coleção de componentes para desenvolvimento full-stack, trouxe para mim uma nova perspectiva ao processo de desenvolvimento web, fornecendo uma variedade de componentes prontos para uso. Diferentemente de outras soluções, o Filament permite uma flexibilidade única, permitindo que os desenvolvedores escolham quais componentes utilizar em seus projetos Laravel. Neste tutorial, exploraremos como personalizar a aparência da tela de login usando CSS personalizado com o Filament.

Assumindo que o projeto Laravel com o Filament já está configurado, avançaremos diretamente para a personalização do CSS da página de login. Para aqueles que necessitam de orientações sobre a instalação do Laravel e do Filament, sugiro consultar a documentação oficial de ambas as ferramentas, onde o processo de instalação é detalhado. Além disso, disponibilizarei um link para um vídeo tutorial do Filament Brasil no YouTube, que demonstra passo a passo como instalar o Filament no Laravel.

Recursos de autenticação

Você pode ativar facilmente recursos de autenticação para um painel no arquivo de configuração:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->login();
}

Personalizando os recursos de autenticação

Para personalizar a página de login, vamos criar uma nova classe PHP em app/Filament/Pages/Auth/Login.php:

<?php

namespace App\Filament\Pages\Auth;

use Filament\Pages\Auth\Login as BaseLogin;

class Login extends BaseLogin
{

}

Após criar nossa classe customizada de Login, devemos passá-la como parâmetro para o método login() no painel localizado em app/Providers/Filament/MyPanelProvider.php:

<?php

namespace App\Providers\Filament;

// ...
use App\Filament\Pages\Auth\Login;
use Filament\Panel;
use Filament\PanelProvider;

class MyPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->login(Login::class);
    }
}

Se tudo ocorreu corretamente, ao acessar o sistema pelo navegador, você verá uma página de login semelhante a esta:

Nossa classe de Login herda da classe Login do Filament. Se você examinar essa classe, verá que ela possui um atributo chamado "view", que recebe uma view do Blade como valor. O que faremos é criar nossa própria view e substituir o valor desse atributo em nossa classe, fornecendo o caminho para a view que criaremos. Nossa classe de login ficará assim:

<?php

namespace App\Filament\Pages\Auth;

use Filament\Pages\Auth\Login as BaseLogin;

class Login extends BaseLogin
{
    /**
     * @var view-string
     */
    protected static string $view = 'filament.auth.login';
}

A próxima etapa será criar nossa view. Vamos criá-la em resources/views/filament/auth/login.blade.php:

<x-filament-panels::page.simple>
    @if (filament()->hasRegistration())
        <x-slot name="subheading">
            {{ __('filament-panels::pages/auth/login.actions.register.before') }}

            {{ $this->registerAction }}
        </x-slot>
    @endif

    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::AUTH_LOGIN_FORM_BEFORE, scopes: $this->getRenderHookScopes()) }}

    <x-filament-panels::form wire:submit="authenticate">
        {{ $this->form }}

        <x-filament-panels::form.actions :actions="$this->getCachedFormActions()" :full-width="$this->hasFullWidthFormActions()" />
    </x-filament-panels::form>

    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::AUTH_LOGIN_FORM_AFTER, scopes: $this->getRenderHookScopes()) }}
</x-filament-panels::page.simple>

O que fiz acima foi copiar o conteúdo da view de login original e colá-lo em nossa view.

Agora vamos criar nosso arquivo CSS para podermos estilizar nossa tela de login. Vamos criar nosso arquivo em resource/css/custom.css:

body {
    background-color: #12173e !important;
}

Apenas vamos precisar do CSS para modificar o plano de fundo da página de login. Fique à vontade para explorar sua criatividade e ajustar o CSS conforme suas preferências.

Registrando arquivos CSS

Depois de criar o arquivo CSS, é necessário registrá-lo para que fique acessível em nosso sistema. Isso pode ser feito por meio de um Provider, utilizando o método boot. Recomendo a criação de um Provider dedicado para o registro desses ativos. No entanto, para o nosso exemplo, utilizarei o AppServiceProvider, que está presente por padrão no Laravel. Nosso arquivo ficará assim:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Filament\Support\Facades\FilamentAsset;
use Filament\Support\Assets\Css;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        FilamentAsset::register([
            Css::make('custom-stylesheet', __DIR__ . '/../../resources/css/custom.css')->loadedOnRequest(),
        ]);
    }
}

O método loadedOnRequest foi empregado para garantir que nosso arquivo seja carregado apenas quando solicitado. Caso contrário, ele seria importado automaticamente no cabeçalho de todas as nossas páginas. No entanto, desejo aplicar essa personalização exclusivamente à nossa página de login.

Estamos nos aproximando do final do tutorial. Se você acessar sua página de login nesta etapa, notará que ela permanece inalterada. Isso ocorre porque ainda não estamos referenciando nosso CSS personalizado na página. Vamos fazer isso agora! Vamos modificar nossa página de login para que fique assim:

<x-filament-panels::page.simple>
    <div x-data="{}" x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('custom-stylesheet'))]">
    </div>
    @if (filament()->hasRegistration())
        <x-slot name="subheading">
            {{ __('filament-panels::pages/auth/login.actions.register.before') }}

            {{ $this->registerAction }}
        </x-slot>
    @endif

    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::AUTH_LOGIN_FORM_BEFORE, scopes: $this->getRenderHookScopes()) }}

    <x-filament-panels::form wire:submit="authenticate">
        {{ $this->form }}

        <x-filament-panels::form.actions :actions="$this->getCachedFormActions()" :full-width="$this->hasFullWidthFormActions()" />
    </x-filament-panels::form>

    {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::AUTH_LOGIN_FORM_AFTER, scopes: $this->getRenderHookScopes()) }}
</x-filament-panels::page.simple>

Observe que adicionamos as seguintes linhas ao nosso arquivo:

<div x-data="{}" x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('custom-stylesheet'))]"></div>

Essas linhas são responsáveis por fazer a requisição do nosso arquivo CSS.

Para concluir, devemos fazer uma última etapa que é executar o comando:

php artisan filament:assets

Quando este comando é executado, o arquivo CSS é copiado para o diretório /public. Caso não tivéssemos utilizado o método loadedOnRequest, ele seria carregado automaticamente em todas as visualizações do Blade que utilizam Filament.

Agora, abra novamente sua página de login no navegador e vamos observar as mudanças em ação. Sua página agora deve se assemelhar à imagem abaixo:

Extra

Aprendemos a modificar a cor de fundo da tela de login. Agora, vamos fazer algumas pequenas alterações adicionais.

Pessoalmente, não sou fã da frase "Faça login", então vou removê-la. Para isso, vamos ajustar nossa classe Login da seguinte maneira:

<?php

namespace App\Filament\Pages\Auth;

use Filament\Pages\Auth\Login as BaseLogin;
use Illuminate\Contracts\Support\Htmlable;

class Login extends BaseLogin
{
/**
     * @var view-string
     */
    protected static string $view = 'filament.auth.login';

    public function getHeading(): string | Htmlable
    {
        return '';
    }
}

Com isso, a frase já foi removida. No arquivo de configuração do painel, faremos algumas adições. Vamos modificar para que fique assim:

<?php

namespace App\Providers\Filament;

// ...
use Filament\FontProviders\GoogleFontProvider;
use Filament\Panel;
use Filament\PanelProvider;

class MyPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            // ...
            ->colors([
                'primary' => '#12173e',
            ])
            ->font('Montserrat', provider: GoogleFontProvider::class)
            ->brandLogo('https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png')
            ->brandLogoHeight('3rem');
    }
}