Customize the layout of login page

[lsatolli]

It is possibile to customize the layout (only layout not fields) of login page? in which way?

thx

[leandrocfe]

Via css?
https://filamentphp.com/docs/3.x/panels/themes/#creating-a-custom-theme

[leandrocfe]

You can create a custom login class
$panel->login(MyLogin::class)

There is an example using the profile class

[lsatolli]

@leandrocfe with the class I will change the behaviour of the login. What I need is to change only the blade template. Do I have to create a new page, extend the login class, copy all the code for the login class to the new one and than work on the blade file created during the process of make:filament-page?

thx

[leandrocfe]

You can copy the original login.blade.php
and create a custom view in resources/views/vendor/filament-panels/pages/auth/login.blade.php

Not sure this path because I'm on mobile but you can check in the filament repo.

[lsatolli]

The best way is to extend login page, do not change the class methods and change the property $view to a new blade view.

Please refer to Customize the authentication features in https://filamentphp.com/docs/3.x/panels/users#customizing-the-authentication-features

[leandrocfe]

@lsatolli yes I said it to you here
So, I thought you want to change the blade file.

[internetbug256]

Hi there. Just for clarification, this is the full process you need to perform in order to replace the login template with your own:

1. Create a new class that extends the original one:

<?php
Namespace App\Filament\Pages\Auth;

use Filament\Pages\Auth\Login as BaseLogin;
use Illuminate\Support\Facades\Log;

class Login extends BaseLogin
{

    /**
     * @var view-string
     */
    protected static string $view = 'filament.pages.customlogin';
}

Beware to overwrite the $view static variable (calling a view() function won't work).
2) Just declare in App\Providers\Filament\AdminPanelProvider class, panel() function, your login(App\Filament\Pages\Auth\Login::class)

That's it!

[tjgeni]

Hi guys 🙂
I wanna know, how looks like the view? is livewire component? I just try to call method authenticate() in LoginClass from my livewire component.. but still not work

[josephajibodu]

I get this error Method App\Filament\Pages\Auth\Login::getCachedSubNavigation does not exist.

Here is the class I created

<?php

namespace App\Filament\Pages\Auth;

use Filament\Forms\Form;
use Filament\Pages\Auth\Login as BaseLogin;
use Filament\Pages\Concerns\HasSubNavigation;

class Login extends BaseLogin
{
    protected static string $view = 'filament.pages.auth.login';
}

[p3iyaji]

Just remove this line (protected static string $view = 'filament.pages.auth.login';) and try it again

[sud0su]

just put x-filament-panels::page.simple in 'filament.pages.auth.login' blade file

[siubie]

Hi guys i can confim that this is one of the option to do if you want to customize the login page views :

• Create custom filament page, you will get a filament page class and a view

• Use the class in the Login() method in your panel

• Copy the content of the default login page view in vendor/filament/filament/resources/views/pages/auth

• You can customize the view

Again depend on how much is the customization that you need, for me this is enough.
In my case i want to use only google oAuth login for my panel so i remove the login forms content in the view

Or if you want to change the look and feel using css you can refer to this tutorials :
https://ajaxray.com/blog/lets-beautify-filament-3-login-page/

[organizedslop]

I'm starting to feel nuts because this simply is not working in my project.