feat: add support for livewire form variables

[d3jmc]

This PR adds support for Livewire Forms or instances where 'gRecaptchaResponse' is defined in another component.

Problem

I have a login Livewire component that extends a Livewire Form class. This class contains all of the form's variables and processing logic. With the current implementation, when I try and submit the form, I get an error saying it can't set 'gRecaptchaResponse' because it doesn't exist on my login component.

Solution

Inside my form class, I can add public ?string $gRecaptchaResponse = null; and use the #[ValidatesRecaptcha] attribute on my submit function as specified in the docs.

In my login component, when specifying the wire:recaptcha directive on the form element, I can assign an expression which essentially acts as the prefix to gRecaptchaResponse. When Livewire handles this, it will be able to retrieve the variable from my form class and perform the recaptcha logic.

Example

resources/views/livewire/pages/auth/login.blade.php

<?php

use App\Livewire\Forms\Auth\LoginForm;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Volt\Component;

new
#[Layout('layouts.auth')]
#[Title('Log in to your account')]
class extends Component
{
    public LoginForm $loginForm;

    public function submit(): void
    {
        $this->loginForm->submit();

        $this->redirectIntended(route('account'), true);
    }
};
?>

<div>
    <form wire:submit="submit" wire:recaptcha="loginForm" class="space-y-8">
        @csrf
        <x-ui.input wire:model="loginForm.email" type="email" name="email" label="Email" required/>
        <x-ui.input wire:model="loginForm.password" type="password" name="password" label="Password" required/>
        <x-ui.link :href="route('password.request')" label="Forgot password?"/>
        <x-ui.button type="Submit" label="Login"/>
        <x-ui.link :href="route('register')" label="Don't have an account?" class="text-center"/>
    </form>
</div>

app/Livewire/Forms/Auth/LoginForm.php

<?php

namespace App\Livewire\Forms\Auth;

use App\Actions\Auth\Login;
use App\Traits\InteractsWithForm;
use DutchCodingCompany\LivewireRecaptcha\ValidatesRecaptcha;
use Livewire\Form;

class LoginForm extends Form
{
    use InteractsWithForm;

    public ?string $gRecaptchaResponse = null;

    public ?string $email = null;

    public ?string $password = null;

    public bool $remember = false;

    public function rules(): array
    {
        return [
            'email' => ['required', 'email'],
            'password' => ['required', 'string'],
            'remember' => ['boolean'],
        ];
    }

    #[ValidatesRecaptcha]
    public function submit(): void
    {
        $validated = $this->validate();

        (new Login)->handle($validated['email'], $validated['password'], $validated['remember']);
    }
}