Login Form in Bootstrap Modal using Livewire
Tech Stack: bootstrap-5, livewire
Demo
Code
Please login to View/Download the Code
Usage
Include the livewire component in your layout file so that the modal can be invoked anywhere in your application.
@livewire('login-modal')
Bootstrap modal can be invoked using HTML tags or using javascript.
To invoke the modal when the user clicks on any HTML input. Such as the button showed the demo:
<button class="btn bg-purple fw-bold text-white btn-lg" data-bs-toggle="modal" data-bs-target="#loginModal">Login</button>
You can include the data-bs-toggle
and data-bs-target
attributes in your HTML tag.
Documentation
We have utilized the Bootstrap's Modal to design the login modal.
At the backend, when the user clicks on the Login button. We call the login
method of the livewire component.
We utilize the Auth::attempt() method provided by Laravel to check if the credentials are correct. If yes we log in the user and refresh the existing page. If authentication fails, we show the error message to the user inside the modal itself.