Filament•7mo ago

Custom Blade Views

Going to re ask this question because im still not entirely sure the best approach. Basically, I have a custom 2fa package that is standalone. There is a trait that I plug into the Login class that I have overridden. This will do its checks then return a $form, however, I want to be able to have that $form inside the filament theme/styling, typically following the login page. Is there a way to do this without having to create a new page, as just using the x-filament-panels::page etc is requiring objects and references to $this, that don't exist because im only trying to obtain the views

13 Replies

Jamie Cee•7mo ago

For reference, just putting $form in a view, looks like this: I just need to put it into the filament styling/theme

<body>
  <form method="POST" action="http://localhost:8080/choose-method-process" accept-charset="UTF-8" class="">
    <input name="_token" type="hidden" value="#">
      <fieldset data-section="main" class="form__section">
        <div class="form-group">
          <input name="method" type="hidden" value="0">
          <label for="method" class="form-label">Choose Authentication Method</label>
          <select class="form-control" id="method" name="method">
            <option selected="selected" value="">Choose a verification method</option>
            <option value="email">email</option>
          </select>
        </div>
      </fieldset>
      <div data-section="actions" class="form-group">
        <input class="btn btn-primary" type="submit">
      </div>
    </form>
</body>

<body>
  <form method="POST" action="http://localhost:8080/choose-method-process" accept-charset="UTF-8" class="">
    <input name="_token" type="hidden" value="#">
      <fieldset data-section="main" class="form__section">
        <div class="form-group">
          <input name="method" type="hidden" value="0">
          <label for="method" class="form-label">Choose Authentication Method</label>
          <select class="form-control" id="method" name="method">
            <option selected="selected" value="">Choose a verification method</option>
            <option value="email">email</option>
          </select>
        </div>
      </fieldset>
      <div data-section="actions" class="form-group">
        <input class="btn btn-primary" type="submit">
      </div>
    </form>
</body>

And the html structure And if I try to break it down into this:

{{-- {{ dd($form->getAction()) }} --}}
<x-filament-panels::page>
    <x-filament-panels::form>
        <x-filament::input.wrapper>
            <x-filament::input.select wire:model="status">
                @foreach ($form->getList() as $item)
                <option value="{{ $item }}">{{ $item }}</option>
                @endforeach
            </x-filament::input.select>
        </x-filament::input.wrapper>

        <x-filament::button>
            Submit
        </x-filament::button>

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

{{-- {{ dd($form->getAction()) }} --}}
<x-filament-panels::page>
    <x-filament-panels::form>
        <x-filament::input.wrapper>
            <x-filament::input.select wire:model="status">
                @foreach ($form->getList() as $item)
                <option value="{{ $item }}">{{ $item }}</option>
                @endforeach
            </x-filament::input.select>
        </x-filament::input.wrapper>

        <x-filament::button>
            Submit
        </x-filament::button>

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

This is where it complains as Im not using a class extending page:

Using $this when not in object context

Okay, update. Managed to find a way to get it working. Though color of an x-filament::button is set to primary by default. But its the yellow default, not the colour I've set in my provider?

Jamie Cee•7mo ago

Example: Login

Jamie Cee•7mo ago

My custom view:

Lara Zeus•7mo ago

try to register it in the app provider

FilamentColor::register([
    'danger' => Color::Red,
    'gray' => Color::Zinc,
    'info' => Color::Blue,
    'primary' => Color::Amber,
    'success' => Color::Green,
    'warning' => Color::Amber,
]);

FilamentColor::register([
    'danger' => Color::Red,
    'gray' => Color::Zinc,
    'info' => Color::Blue,
    'primary' => Color::Amber,
    'success' => Color::Green,
    'warning' => Color::Amber,
]);

Jamie Cee•7mo ago

Should it not be detecting from this by default though?

        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login(\App\Filament\Pages\Login::class)
            ->colors([
                'primary' => Color::hex('#B200ED'),
            ])

        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login(\App\Filament\Pages\Login::class)
            ->colors([
                'primary' => Color::hex('#B200ED'),
            ])

Lara Zeus•7mo ago

it should tbh

Jamie Cee•7mo ago

Not sure if theres a property Im missing then. I think the way I've built this is quite jenk. But this is the button:

                        <x-filament::button type="submit" color="primary">
                            Submit
                        </x-filament::button>

                        <x-filament::button type="submit" color="primary">
                            Submit
                        </x-filament::button>

binaryfire•7mo ago

@Jamie Cee How are you adding the second form to the login page? Are you using a custom view for the page?

Jamie Cee•7mo ago

Yeah, so my login class calls a trait from my other package. That returns a view, so im just overriding that view. resources/views/vendor/package/view.blade.php

binaryfire•7mo ago

It's hard to know what's going on without seeing your code. Is your login class extending Filament\Pages\Auth\Login? And if so, do you mean your trait is overriding protected static string $view and returning your own view instead of filament-panels::pages.auth.login? Or are you trying to render your package's view inside the default login page view?

Jamie Cee•7mo ago

Nah so basically. I have my overridden Login class. That works as normal except a cpl changes. One of which is that I return a function from my trait (trait is in a 2fa package). That will return a view with some form content. I am overriding that view (unrelated to filament at that point) just to try add the styling that filament has so it looks consistent The only things left that im trying to figure out, is adding a label so that its consistent with the login form, but im just editing the blade directly, so x-filament::input-wrapper and input. As well as trying to find out why its not detecting primary colour

                        <x-filament::button type="submit" color="primary">
                            Submit
                        </x-filament::button>

                        <x-filament::button type="submit" color="primary">
                            Submit
                        </x-filament::button>

Still can't find a fix to why the primary color isn't detecting as my providers primary colour Nevermind,Lara, your previous suggestion worked I thought I tried it, but I didn't

Lara Zeus•7mo ago

there is three palces to set the colors in panel provider ->colors() in appServiceProvider Filament::colors in tailwindcss config file one of them must do the trick or do all ofthem 🙂 prefect 🙂

Jamie Cee•7mo ago

Yeah, the FilamentColor::register inside the boot providerr in my appserviceprovider worked

Gaming

Programming

Custom Blade Views