Custom View Form Validation

I have a route that triggers a view that looks like this:

@php
$livewire = new \App\Http\Livewire\ResetPassword();
@endphp
<div class="fi-simple-layout flex min-h-screen flex-col items-center">
    <div class="fi-simple-main-ctn flex w-full flex-grow items-center justify-center">

        <main
            class="fi-simple-main my-16 w-full bg-white px-6 py-12 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 sm:rounded-xl sm:px-12 sm:max-w-lg">

            <x-filament-panels::layout.base :livewire="$livewire">

                <x-filament-panels::header.simple :heading="$heading ??= $livewire->getHeading()"
                    :subheading="$subheading ??= $livewire->getSubHeading()" />


                {{-- Content --}}
                <x-filament-panels::form action="{{ route('password.reset.process') }}" method="POST"
                    style="margin-top: 5%;">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                    <input type="hidden" name="token" value="{{ request()->token }}" />
                    <input type="hidden" name="email" value="{{ request()->query('email') }}" />



                    <x-filament-forms::field-wrapper.label prefix="Password" />
                    <x-filament::input.wrapper>
                        <x-filament::input type="password" name="password" placeholder="Enter Password" id="password" />
                    </x-filament::input.wrapper>

                    <x-filament-forms::field-wrapper.label prefix="Confirm Password" />
                    <x-filament::input.wrapper>
                        <x-filament::input type="password" name="password_confirmation" placeholder="Confirm Password"
                            id="password_confirmation" />
                    </x-filament::input.wrapper>


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

                </x-filament-panels::form>

            </x-filament-panels::layout.base>
        </main>
    </div>
</div>

@php
$livewire = new \App\Http\Livewire\ResetPassword();
@endphp
<div class="fi-simple-layout flex min-h-screen flex-col items-center">
    <div class="fi-simple-main-ctn flex w-full flex-grow items-center justify-center">

        <main
            class="fi-simple-main my-16 w-full bg-white px-6 py-12 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10 sm:rounded-xl sm:px-12 sm:max-w-lg">

            <x-filament-panels::layout.base :livewire="$livewire">

                <x-filament-panels::header.simple :heading="$heading ??= $livewire->getHeading()"
                    :subheading="$subheading ??= $livewire->getSubHeading()" />


                {{-- Content --}}
                <x-filament-panels::form action="{{ route('password.reset.process') }}" method="POST"
                    style="margin-top: 5%;">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                    <input type="hidden" name="token" value="{{ request()->token }}" />
                    <input type="hidden" name="email" value="{{ request()->query('email') }}" />



                    <x-filament-forms::field-wrapper.label prefix="Password" />
                    <x-filament::input.wrapper>
                        <x-filament::input type="password" name="password" placeholder="Enter Password" id="password" />
                    </x-filament::input.wrapper>

                    <x-filament-forms::field-wrapper.label prefix="Confirm Password" />
                    <x-filament::input.wrapper>
                        <x-filament::input type="password" name="password_confirmation" placeholder="Confirm Password"
                            id="password_confirmation" />
                    </x-filament::input.wrapper>


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

                </x-filament-panels::form>

            </x-filament-panels::layout.base>
        </main>
    </div>
</div>

Solution

Thank you for your help @toeknee Appreciate it

Jump to solution

Jamie CeeOP•5/21/24, 2:55 PM

It has a component that looks like this:

<?php

namespace App\Http\Livewire;

use Illuminate\View\View;
use Livewire\Component;

class ResetPassword extends Component
{
    protected $title = 'Reset Password';
    protected ?string $heading = null;

    /**
     * Page title
     *
     * @return string
     */
    public function getTitle(): string
    {
        return $this->title;
    }

    /**
     * Page heading
     *
     * @return string
     */
    public function getHeading(): string
    {
        return 'Reset Password';
    }

    /**
     * Page subheading
     *
     * @return boolean
     */
    public function getSubHeading(): bool
    {
        return "";
    }

    /**
     * Render two fa blade
     *
     * @return View
     */
    public function render(): View
    {
        return view('livewire.password-reset');
    }
}

<?php

namespace App\Http\Livewire;

use Illuminate\View\View;
use Livewire\Component;

class ResetPassword extends Component
{
    protected $title = 'Reset Password';
    protected ?string $heading = null;

    /**
     * Page title
     *
     * @return string
     */
    public function getTitle(): string
    {
        return $this->title;
    }

    /**
     * Page heading
     *
     * @return string
     */
    public function getHeading(): string
    {
        return 'Reset Password';
    }

    /**
     * Page subheading
     *
     * @return boolean
     */
    public function getSubHeading(): bool
    {
        return "";
    }

    /**
     * Render two fa blade
     *
     * @return View
     */
    public function render(): View
    {
        return view('livewire.password-reset');
    }
}

Jamie CeeOP•5/21/24, 2:56 PM

But when I submit my form to a controller, I want to display the validation errors, how can I do this?

toeknee•5/21/24, 2:56 PM

Why not just have the component implement forms? and not custom it?

Ttoeknee Why not just have the component implement forms? and not custom it?

Jamie CeeOP•5/21/24, 2:58 PM

Not sure if that would work in my use case.

So the reset password comes from an API call, the way we used to handle reset passwords is now jank, so we have gone the route of just having a custom blade view for it

Jamie CeeOP•5/21/24, 2:59 PM

But instead of a dead styling, im trying to keep filament styling

toeknee•5/21/24, 2:59 PM

Why wouldn't it? On save, you can handle all the function calling your api?

Jamie CeeOP•5/21/24, 3:00 PM

I may be getting confused then, could you guide me where to look for info at setting this up?

toeknee•5/21/24, 3:14 PM

https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component

Adding a form to a Livewire component - Form Builder - Filament

toeknee•5/21/24, 3:17 PM

  <form wire:submit="reset">
        {{ $this->form }}
        
        <button type="submit">
            Submit
        </button>
    </form>

<x-filament-actions::modals />

  <form wire:submit="reset">
        {{ $this->form }}
        
        <button type="submit">
            Submit
        </button>
    </form>

<x-filament-actions::modals />

public function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('password')
            ->password()
            ->revealable()
        ])
        ->statePath('data');
}


public function reset() {
  $data = $this->form->getState();
  
  // Call API and validate 
  
}

public function form(Form $form): Form
{
    return $form
        ->schema([
            TextInput::make('password')
            ->password()
            ->revealable()
        ])
        ->statePath('data');
}


public function reset() {
  $data = $this->form->getState();
  
  // Call API and validate 
  
}

Ttoeknee ```php <form wire:submit="reset"> {{ $this->form }} <...

Jamie CeeOP•5/21/24, 3:20 PM

Invalid route action: [App\Http\Livewire\ResetPassword].

Invalid route action: [App\Http\Livewire\ResetPassword].

Jamie CeeOP•5/21/24, 3:20 PM

Route::get('password-reset/{token}', ResetPassword::class)->name('password.reset')->middleware('web');

Route::get('password-reset/{token}', ResetPassword::class)->name('password.reset')->middleware('web');

This is my route

toeknee•5/21/24, 3:20 PM

Why are you routing

toeknee•5/21/24, 3:20 PM

I thought you had the page rendering already?

Jamie CeeOP•5/21/24, 3:21 PM

It was rendering with the route I had defined

toeknee•5/21/24, 3:21 PM

So why have you changed the route?

you would likel yneed to clear your route cache for the new one to work if you created a new one

Jamie CeeOP•5/21/24, 3:22 PM

The docs say to create it that way?

use App\Livewire\CreatePost;
use Illuminate\Support\Facades\Route;

Route::get('posts/create', CreatePost::class);

use App\Livewire\CreatePost;
use Illuminate\Support\Facades\Route;

Route::get('posts/create', CreatePost::class);

toeknee•5/21/24, 3:24 PM

So you absolutely can, but you already had the route? So you just needed to implment the extend

Jamie CeeOP•5/21/24, 3:25 PM

So if I undo back to what I had, it pointed to my controller, that looked like this:

    public function resetPassword(string $token)
    {
        return view('livewire.reset-password', ['token' => $token]);
    }

    public function resetPassword(string $token)
    {
        return view('livewire.reset-password', ['token' => $token]);
    }

Jamie CeeOP•5/21/24, 3:25 PM

But that cant find the component?

Unable to find component: [reset-password]

Jamie CeeOP•5/21/24, 3:29 PM

Think this is the blade part im getting stuck with though:

@livewire('reset-password', ['token' => request()->token, 'email' => request()->query('email')])

Jamie CeeOP•5/21/24, 3:29 PM

Tried that ^ still not working

toeknee•5/21/24, 3:35 PM

Ok I am so confused with what you are doing here.

Just make a normal livewire component:

https://livewire.laravel.com/docs/quickstart

Then implement:

https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component

And problem solved.

Laravel

Quickstart | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Adding a form to a Livewire component - Form Builder - Filament

Jamie CeeOP•5/22/24, 7:06 AM

Now the page just hangs, no idea why its trying to claim so much memory:

[2024-05-22 07:05:33] local.ERROR: Allowed memory size of 268435456 bytes exhausted (tried to allocate 528384 bytes) {"exception":"[object] (Symfony\\Component\\ErrorHandler\\Error\\FatalError(code: 0): Allowed memory size of 268435456 bytes exhausted (tried to allocate 528384 bytes) at /var/www/html/vendor/livewire/livewire/src/Component.php:105)
[stacktrace]

[2024-05-22 07:05:33] local.ERROR: Allowed memory size of 268435456 bytes exhausted (tried to allocate 528384 bytes) {"exception":"[object] (Symfony\\Component\\ErrorHandler\\Error\\FatalError(code: 0): Allowed memory size of 268435456 bytes exhausted (tried to allocate 528384 bytes) at /var/www/html/vendor/livewire/livewire/src/Component.php:105)
[stacktrace]

Ttoeknee Ok I am so confused with what you are doing here. Just make a normal livewire c...

Jamie CeeOP•5/22/24, 7:09 AM

I re-done following this guide

Jamie CeeOP•5/22/24, 7:46 AM

That issue has been fixed, but now I have no styling:

toeknee•5/22/24, 7:57 AM

Follow:

https://filamentphp.com/docs/3.x/forms/installation

Installation - Form Builder - Filament

Ttoeknee Follow: https://filamentphp.com/docs/3.x/forms/installation

Jamie CeeOP•5/22/24, 8:24 AM

Followed, still no styling.

Trying to run npm run dev just hangs

Jamie CeeOP•5/22/24, 8:25 AM

And attempted npm run build returns:

Error: [postcss] Cannot find module './vendor/filament/support/tailwind.config.preset'

Error: [postcss] Cannot find module './vendor/filament/support/tailwind.config.preset'

But I've ran the npm install etc that the documentation said to

toeknee•5/22/24, 8:25 AM

IF it was followed the assets shoud be loaded for filament forms really...

toeknee•5/22/24, 8:25 AM

so it can't find th efilament present... you must have it linked wrong

Jamie CeeOP•5/22/24, 8:26 AM

Literally gone through step by step on every document linked

Jamie CeeOP•5/22/24, 8:27 AM

It generated these js and css files etc, I've uploaded the app.blade.php file as instructed.

toeknee•5/22/24, 8:38 AM

Ok... so in the blade are you rendering any css/js?

toeknee•5/22/24, 8:39 AM

I have a feeling you don't have any app styling if it's all been setup correctly

Jamie CeeOP•5/22/24, 9:02 AM

I think its being a bitch around my docker containers

Ttoeknee I have a feeling you don't have any app styling if it's all been setup correctly

Jamie CeeOP•5/22/24, 9:04 AM

So I have the components/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">

    <meta name="application-name" content="{{ config('app.name') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="antialiased">
    {{ $slot }}

    @filamentScripts
    @vite('resources/js/app.js')
</body>

</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">

    <meta name="application-name" content="{{ config('app.name') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>

    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="antialiased">
    {{ $slot }}

    @filamentScripts
    @vite('resources/js/app.js')
</body>

</html>

Jamie CeeOP•5/22/24, 9:04 AM

By rendered blade view

@php
$show = $this->show;
@endphp

<div>
    @if ($show)
    <form wire:submit="resetProcess">
        {{ $this->form }}

        <button type="submit">
            Submit
        </button>
    </form>

    <x-filament-actions::modals />
    @else
    <h1>Password Reset</h1>
    @endif
</div>

@php
$show = $this->show;
@endphp

<div>
    @if ($show)
    <form wire:submit="resetProcess">
        {{ $this->form }}

        <button type="submit">
            Submit
        </button>
    </form>

    <x-filament-actions::modals />
    @else
    <h1>Password Reset</h1>
    @endif
</div>

toeknee•5/22/24, 9:04 AM

That looks good, and you are sure the filament systels are loading if you check the network tab

Ttoeknee That looks good, and you are sure the filament systels are loading if you check ...

Jamie CeeOP•5/22/24, 9:07 AM

Jamie CeeOP•5/22/24, 9:07 AM

Okay, so npm run build has randomly just worked after failing about 20 times.

Jamie CeeOP•5/22/24, 9:07 AM

But now its blocked by csp, which I think is docker related

Jamie CeeOP•5/22/24, 9:09 AM

http://[::1]:5173/resources/css/app.css

http://[::1]:5173/resources/css/app.css

For some reason, isn't setting as localhost either

Jamie CeeOP•5/22/24, 9:13 AM

If its doing all this locally, its gonna be a right ball ache for prod

toeknee•5/22/24, 9:17 AM

It is telling you... CSP. You need to ensure the app .env runs the same URL as the url you are accessing it from.

Jamie CeeOP•5/22/24, 9:18 AM

http://127.0.0.1:5173/css/filament/forms/forms.css?v=3.2.71.0

http://127.0.0.1:5173/css/filament/forms/forms.css?v=3.2.71.0

Its running from localhost like the rest of my application?

Jamie CeeOP•5/22/24, 9:18 AM

I've added that port to my docker-compose

    ports:
      - 5173:5173

    ports:
      - 5173:5173

Jamie CeeOP•5/22/24, 9:24 AM

This is more effort than it should be like

toeknee•5/22/24, 9:26 AM

What is your .env app url?

toeknee•5/22/24, 9:27 AM

If you were using Herd it'd be work

But these are basic setup issues of your laravel dev instance