FilamentF
Filament11mo ago
Arjen

Add card next to login card on login page

Is there a way to easily add a card to the right of the login card ? I want to move the two register buttons in the screenshot to there.
I currently have the following code:

// app/Filament/Pages/Auth/Login.php
<?php

namespace App\Filament\Pages\Auth;

use Filament\Actions\Action;
use Filament\Pages\Auth\Login as BaseLogin;

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

    public function registerResidentAction(): Action
    {
        return Action::make('register_resident')
            ->label('Aanmelden als inwoner')
            ->url(filament()->getRegistrationUrl(['type' => 'inwoner']))
            ->link()
            ->button()
            ->color('success');
    }

    public function registerOrganizationAction(): Action
    {
        return Action::make('register_organization')
            ->label('Aanmelden als organisatie')
            ->url(filament()->getRegistrationUrl(['type' => 'organisatie']))
            ->link()
            ->button('warning');
    }
}


// resources/views/filament/pages/auth/login.blade.php
<x-filament-panels::page.simple>
    @if (filament()->hasRegistration())
        <x-slot name="subheading">
            {{ $this->registerResidentAction }}
            {{ $this->registerOrganizationAction }}
        </x-slot>
    @endif

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

    <x-filament-panels::form id="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>
image.png
Was this page helpful?