向Laravel Jetstream / Livewire配置文件表单添加卡

php artisan make:livewire RegisterCard

namespace App\Http\Livewire;

use Livewire\Component;

class RegisterCard extends Component
{
    public $name;
    public $email;
    public $password;

    protected $rules = [
        'name' => 'required|string|max:255',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:8|confirmed',
    ];

    public function submit()
    {
        $this->validate();

        // 创建用户逻辑
        // ...

        // 重定向或其他操作
    }

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

<div class="card">
    <div class="card-header">Register</div>
    <div class="card-body">
        <form wire:submit.prevent="submit">
            <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" id="name" wire:model="name" class="form-control">
                @error('name') <span class="text-danger">{{ $message }}</span> @enderror
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" id="email" wire:model="email" class="form-control">
                @error('email') <span class="text-danger">{{ $message }}</span> @enderror
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input type="password" id="password" wire:model="password" class="form-control">
                @error('password') <span class="text-danger">{{ $message }}</span> @enderror
            </div>
            <button type="submit" class="btn btn-primary">Register</button>
        </form>
    </div>
</div>

<x-jet-authentication-card>
    <x-slot name="logo">
        <!-- 你的 Logo -->
    </x-slot>

    <livewire:register-card />

    <div class="mt-4 text-center">
        Already have an account?
        <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
            Login
        </a>
    </div>
</x-jet-authentication-card>