Laravel 11 E-Commerce - Changing the Login and Registration Page Layout
Welcome back to the Laravel E-Commerce Tutorial! In this video, we will learn how to change the login and registration page layout.
Applying HTML Template on Login Page
Let's start by applying an HTML template on the login page. Go to the resources/views/auth directory and open the login.blade.php file.
Now, open the login template page in VS Code and copy the login section with the CSS.
In the login.blade.php file, paste the copied content and make the following changes:
@extends('layouts.app')
@section('content')
<main class="pt-90">
<div class="mb-4 pb-4"></div>
<section class="login-register container">
<ul class="nav nav-tabs mb-5" id="login_register" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link nav-link_underscore active" id="login-tab" data-bs-toggle="tab" href="#tab-item-login" role="tab" aria-controls="tab-item-login" aria-selected="true">Login</a>
</li>
</ul>
<div class="tab-content pt-2" id="login_register_tab_content">
<div class="tab-pane fade show active" id="tab-item-login" role="tabpanel" aria-labelledby="login-tab">
<div class="login-form">
<form method="POST" action="{{ route('login') }}" name="login-form" class="needs-validation" novalidate>
@csrf
<div class="form-floating mb-3">
<input class="form-control form-control_gray @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
<label for="email">Email address *</label>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="pb-3"></div>
<div class="form-floating mb-3">
<input id="password" type="password" class="form-control form-control_gray @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" >
<label for="customerPasswodInput">Password *</label>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<button class="btn btn-primary w-100 text-uppercase" type="submit">Log In</button>
<div class="customer-option mt-4 text-center">
<span class="text-secondary">No account yet?</span>
<a href="{{route('register')}}" class="btn-text js-show-register">Create Account</a>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
@endsection
Here, we added the @csrf directive inside the form, which stands for cross-site request forgery (CSRF) attacks. This is used to prevent unauthorized activities.
To display the validation message for the email and password, add the following line:
@error('email') <span class="text-danger mt-3">{{$message}}</span> @endif
Also, add the registration link.
Now, let's check the changes. Refresh the page, and you can see that the login template has been applied.
Let's login by entering the email and password. You can see that the user is logged in.
Now, logout and let's apply the template on the register page.
Applying HTML Template on Register Page
Go to the auth directory and open the register.blade.php file.
Now, go to the template directory and open the register.html file in a text editor.
Copy the content and paste it inside the register.blade.php file, making the following changes:
@extends('layouts.app')
@section('content')
<main class="pt-90">
<div class="mb-4 pb-4"></div>
<section class="login-register container">
<ul class="nav nav-tabs mb-5" id="login_register" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link nav-link_underscore active" id="register-tab" data-bs-toggle="tab" href="#tab-item-register" role="tab" aria-controls="tab-item-register" aria-selected="true">Register</a>
</li>
</ul>
<div class="tab-content pt-2" id="login_register_tab_content">
<div class="tab-pane fade show active" id="tab-item-register" role="tabpanel" aria-labelledby="register-tab">
<div class="register-form">
<form method="POST" action="{{ route('register') }}" name="register-form" class="needs-validation" novalidate>
@csrf
<div class="form-floating mb-3">
<input class="form-control form-control_gray @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus >
<label for="name">Name</label>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="pb-3"></div>
<div class="form-floating mb-3">
<input id="email" type="email" class="form-control form-control_gray @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
<label for="email">Email address *</label>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="pb-3"></div>
<div class="form-floating mb-3">
<input id="mobile" type="text" class="form-control form-control_gray @error('mobile') is-invalid @enderror" name="mobile" value="{{ old('mobile') }}" required autocomplete="mobile">
<label for="mobile">Mobile *</label>
@error('mobile')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="pb-3"></div>
<div class="form-floating mb-3">
<input id="password" type="password" class="form-control form-control_gray @error('password') is-invalid @enderror" name="password" required autocomplete="new-password" >
<label for="password">Password *</label>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-floating mb-3">
<input id="password-confirm" type="password" class="form-control form-control_gray" name="password_confirmation" required autocomplete="new-password" >
<label for="password">Confirm Password *</label>
</div>
<div class="d-flex align-items-center mb-3 pb-2">
<p class="m-0">Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our privacy policy.</p>
</div>
<button class="btn btn-primary w-100 text-uppercase" type="submit">Register</button>
<div class="customer-option mt-4 text-center">
<span class="text-secondary">Have an account?</span>
<a href="{{route('login')}}" class="btn-text js-show-register">Login to your Account</a>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
@endsection
Now, let's check the changes. Switch to the browser and click on the register link. You can see the register page with the template layout.
That's it! We have successfully applied an HTML template on the login and register pages.
So, that's all about changing the login and registration page layout.
