Laravel 12 E-Commerce: Changing the Login and Registration Page Layout

Hi everyone, welcome back to the Laravel E-Commerce Tutorial. This video focuses on applying the HTML template to customize the default Login and Register page layouts.


1. Customizing the Login Page (login.blade.php)

We will replace the default layout of the login page with the HTML template'slogin section.

Steps for login.blade.php:

  1. Open the default login view file: resources/views/auth/login.blade.php.
  2. Open the corresponding template file: template/login.html.
  3. Copy the login section along with its associated CSS styles from the template and paste it into login.blade.php.
  4. Update the form action to use the Laravel route helper for login:
    {{ route(‘login’) }}
  5. Remove any hidden fields and add the CSRF (Cross-Site Request Forgery) directive to prevent unauthorized activities:
    @csrf
  6. Add code to display validation messages for the email and password fields. For example:
    @error("email") <span class="text-danger mt-3">{{$message}}</span> @enderror
  7. Update the register link route:
    {{ route("register") }}

After refreshing the browser, the custom template layout should now be applied to the login page. You can test this by logging in.


2. Customizing the Registration Page (register.blade.php)

We will apply the HTML template to the user registration page.

Steps for register.blade.php:

  1. Open the registration view file: resources/views/auth/register.blade.php.
  2. Change the layout name (if applicable based on your template'sstructure, for example):
    @extends("layouts.base")
  3. Open the template file: template/register.html.
  4. Copy the registration section, including its style tags, and paste it inside the main layout component tag in register.blade.php (e.g., inside <x-app-layout>).
  5. Update the form action and add the CSRF token:
    {{ route("register") }}
    @csrf
  6. Add validation message display for the password (and other fields, as needed):
    @error("password") <span class="text-danger mt-3">{{$message}}</span> @enderror
  7. Update the login link route:
    {{ route(‘login‘) }}

After checking the register link in the browser, the page should now display the custom template layout.


This concludes the process for changing the Login and Registration page layout.