Блог

Я не знаком с Vue.js вообще, так что нашел хорошую замену, используя Livewire.

Задача, которую я должен решить, — это пройти удобную регистрацию на моем веб-сайте с помощью Fortify Livewire. Процесс регистрации является многоступенчатым и зависит от выбора, который делает пользователь, он загружает относительные поля.

До сих пор я настраивал представления Fortify, добавляя в FortifyServiceProvider.php файл следующий код:

 Fortify::loginView(function () {
    return view('auth.login');
});

Fortify::registerView(function () {
    return view('auth.register');
});
  

auth/login.blade.php Представление, загружающее компонент livewire, который в основном представляет собой форму:

 <form action="{{ route('register') }}" method="POST" wire:submit.prevent="submit">
    /**
    * Here would go the inputs that must be shown depends on what users choice 
    * (is it an ordinar user or a company)
    */
    <button type="submit">Save<button/>
</form>
  

Проблема множественности была бы решена путем добавления $step свойства в Register.php класс:

 class RegisterForm extends Component
{
    public $step;

    public function mount()
    {
        $this->step = 0;
    }

    public function submit()
    {
        if ($this->step < 3) {
            $this->step  ;           
        } else {
            // pass all the data to the fortify register method
            // <-- Here is my trouble!
        }
    }
}
  

которые будут увеличиваться при прохождении каждого из этапов регистрации ($this->step ) .

Самое главное, что для меня довольно сложно, — это как предотвратить отправку формы, чтобы изменения в форме проверки формы и, в конце концов, весь набор данных проходил через процесс регистрации Fortify?

Посмотрите на контроллер fortify для регистрации

 public function store(Request $request, CreatesNewUsers $creator): RegisterResponse
    {
        event(new Registered($user = $creator->create($request->all())));
        $this->guard->login($user);
        return app(RegisterResponse::class);
    }
  

T

 use IlluminateAuthEventsRegistered;
use IlluminateSupportFacadesAuth;
use LaravelFortifyContractsCreatesNewUsers;
use LivewireComponent;

class Register extends Component
{
    public $name;
    public $email;
    public $password;
    public $password_confirmation;

    public function submit(CreatesNewUsers $creator)
    {
        event(new Registered($user = $creator->create([
            'name' => $this->name,
            'email' => $this->email,
            'password' => $this->password,
            'password_confirmation' => $this->password_confirmation,
        ])));

        Auth::guard()->login($user);

        $this->redirect('home');
    }

    public function render()
    {
        return view('livewire.register');
    }
}
  

Что-то подобное будет работать для вашего варианта использования.

Вы все еще используете действие fortify и все еще запускаете событие

Ответ заключается в использовании контейнера приложения

 <?php

use IlluminateAuthEventsRegistered;
use IlluminateSupportFacadesAuth;
use AppActionsFortifyCreateNewUser;
use LivewireComponent;

class Register extends Component
{
    public $name;
    public $email;
    public $password;
    public $password_confirmation;
    


    public function submit()
    {
        event(new Registered($user = app(CreateNewUser::class)->create([
            'name' => $this->name,
            'email' => $this->email,
            'password' => $this->password,
            'password_confirmation' => $this->password_confirmation,
        ])));

        Auth::guard()->login($user);

        $this->redirect('home');
    }

    public function render()
    {
        return view('livewire.register');
    }
}
  

Ответ заключается в использовании внедрения зависимостей путем введения действия Fortify CreateNewUser в метод монтирования компонента Livewire.

 use IlluminateAuthEventsRegistered;
use IlluminateSupportFacadesAuth;
use AppActionsFortifyCreateNewUser;
use LivewireComponent;

class Register extends Component
{
    public $name;
    public $email;
    public $password;
    public $password_confirmation;
    
    protected $creator;

    public function mount(CreateNewUser $creator)
    {
        $this->creator = $creator;
    }

    public function submit()
    {
        event(new Registered($user = $this->creator->create([
            'name' => $this->name,
            'email' => $this->email,
            'password' => $this->password,
            'password_confirmation' => $this->password_confirmation,
        ])));

        Auth::guard()->login($user);

        $this->redirect('home');
    }

    public function render()
    {
        return view('livewire.register');
    }
}
  

вы можете использовать пример блейда

 @if($step > 3)
     <input name="name" type="text">
@endif