custom login page: render hooks or override class?

[worldly finch]

i would like to achieve a login page as attached. whats the easiest/ most efficient way to do this? i have never customized a login page before, but already looked through some of the available tutorials out there.

[spare prawn]

Override class IMO

[worldly finch]

i tried something like

public function render(): View
    {
        return view('filament.custom-login');
    }

but got this error

Attempt to read property "childNodes" on null

[spare prawn]

Can you explain more? basically you have to do like this:

1. create filament-page or livewire components
2. override ->login() in panel configuration. eg: $panel->login(MyNewLogin::class)

[worldly finch]

yeah im doing that. currently i have

protected static string $view = 'filament.custom-login';

@vite(['resources/css/login.css'])

<div class="container">
    <header>hello world</header>
</div>

im not sure where is this from, i think its the simplepage layout

[spare prawn]

I though you ask about opinion on hook vs custom class
Can you tell which problem you're facing exactly?

[spare prawn]

If your blade has this <x-filament-panels::page.simple> that's means it's simple page layout

[worldly finch]

yeah at first i need opinion and then need to know how to do it since its my first time haha

<?php

namespace App\Filament\Pages\Auth;

use Filament\Pages\Auth\Login as BaseAuth;

class CustomLogin extends BaseAuth
{
    protected static string $view = 'filament.custom-login';

    protected static string $layout = 'filament.components.custom-layout';
}

in my custom layout i have this

@vite(['resources/css/login.css'])

<div class="container">
    @yield('content')
</div>

then i coded my custom-login and got this result

seems like its working now. btw, later on after finished designing, for the login form i should reuse/override the existing methods right

[spare prawn]

https://filamentphp.com/docs/3.x/panels/users#customizing-the-authentication-features

[worldly finch]

anyway, i dunno if what i did is is the best practice. feel free to gimme your opinion

[spare prawn]

Suggest to watch this as well for changing the form https://www.youtube.com/watch?v=nQmAqTiepYs

[worldly finch]

yeah i have watched this before, he reused the methods hence maintaining the design. my case here requires a whole redesign of the page

[spare prawn]

I don't see "whole redesign" based on image, cause for your Social login you'll need to hit different route.. and email/password is still the same.. all you have to do is make sure they checked terms first..

If you meant "UI" then yes, whole redesign.. but the logic is still the same

I can be wrong tho.. since you extends BaseLogin try checking what that "BaseLogin" provide and you'll understand what to override etc easily IMO (https://github.com/filamentphp/filament/blob/3.x/packages/panels/src/Pages/Auth/Login.php)