Filament•4mo ago

custom login page: render hooks or override class?

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.

14 Replies

Vp•4mo ago

Override class IMO

black ka1serOP•4mo ago

i tried something like

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

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

but got this error Attempt to read property "childNodes" on null

Vp•4mo ago

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)

black ka1serOP•4mo ago

yeah im doing that. currently i have

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

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

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

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

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

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

black ka1serOP•4mo ago

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

Vp•4mo ago

I though you ask about opinion on hook vs custom class Can you tell which problem you're facing exactly? If your blade has this <x-filament-panels::page.simple> that's means it's simple page layout

black ka1serOP•4mo ago

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';
}

<?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>

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

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

black ka1serOP•4mo ago

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

Vp•4mo ago

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

Users - Panel Builder - Filament

black ka1serOP•4mo ago

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

Vp•4mo ago

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

Filament Daily

YouTube

Filament: Login with Username or Email

If you want to override the default email/password form of Filament to accept username, I will show you how to do it, in this video. More Filament examples on our website: https://filamentexamples.com

black ka1serOP•4mo ago

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

Vp•4mo ago

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)

black ka1serOP•4mo ago

thanks for your inputs. ill try first

Gaming

Programming

custom login page: render hooks or override class?