Laravel 8 E-Commerce - Forgot Password
In this video, we will learn how to create a forgot password feature in our e-commerce application.
Let's explore how to implement this feature.
On the login page, you can see a "Forgot Password" link.
If you click on this link, it opens a new page called "Forgot Password".
Now, let's implement the HTML layout for this page.
Switch to your project and open the resources/views/auth/forgot-password.blade.php file.
Add the following code to this file:
<x-base-layout>
<main id="main" class="main-site left-sidebar">
<div class="container">
<div class="wrap-breadcrumb">
<ul>
<li class="item-link"><a href="/" class="link">home</a></li>
<li class="item-link"><span>Forgot Password</span></li>
</ul>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12 col-md-offset-3">
<div class=" main-content-area">
<div class="wrap-login-item ">
<div class="login-form form-item form-stl">
@if (session('status'))
<div class="mb-4 font-medium text-sm text-green-600">
{{ session('status') }}
</div>
@endif
<x-jet-validation-errors class="mb-4" />
<form name="frm-login" method="POST" action="{{route('password.email')}}">
@csrf
<fieldset class="wrap-title">
<h3 class="form-title">Forgot Password</h3>
</fieldset>
<fieldset class="wrap-input">
<label for="frm-login-uname">Email Address:</label>
<input type="email" id="frm-login-uname" name="email" placeholder="Type your email address" :value="old('email')" required autofocus>
</fieldset>
<input type="submit" class="btn btn-submit" value="Email Password Reset Link" name="submit">
</form>
</div>
</div>
</div><!--end main products area-->
</div>
</div><!--end row-->
</div><!--end container-->
</main>
</x-base-layout>
Save this file and let's check the result.
Switch to your browser and refresh the page.
You can see that the template has been applied to the forgot password page.
Now, let's configure the email settings to send the password reset link.
Go to the .env file and add your email details.
Here, I will enter my Gmail credentials:
MAIL_MAILER=smtp.
MAIL_HOST=smtp.googlemail.com
MAIL_PORT=465
MAIL_USERNAME=yourgmailid@gmail.com
MAIL_PASSWORD=paswword
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=yourgmailid@gmail.com
MAIL_FROM_NAME="${APP_NAME}"
Save this file and re-run the application.
Switch to the command prompt and press Ctrl + C to stop the application.
Then, run the following command:
php artisan serve
Switch to your browser and refresh the page.
Enter the email ID for which you want to reset the password.
I will enter the email ID of a user.
Click on the "Email Password Reset Link" button.
You will get a message saying "Email sent".
Let's check the email.
Open your Gmail account and you can see the reset email.
Open this email and click on the link.
You will be redirected to the reset password page.
Let's apply the template to this page.
Switch to your project and open the reset-password.blade.php file.
Add the following code to this file:
<x-base-layout>
<main id="main" class="main-site left-sidebar">
<div class="container">
<div class="wrap-breadcrumb">
<ul>
<li class="item-link"><a href="/" class="link">home</a></li>
<li class="item-link"><span>Reset Password</span></li>
</ul>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12 col-md-offset-3">
<div class=" main-content-area">
<div class="wrap-login-item ">
<div class="login-form form-item form-stl">
<x-jet-validation-errors class="mb-4" />
<form name="frm-login" method="POST" action="{{route('password.update')}}">
@csrf
<input type="hidden" name="token" value="{{ $request->route('token') }}">
<fieldset class="wrap-title">
<h3 class="form-title">Reset Password</h3>
</fieldset>
<fieldset class="wrap-input">
<label for="frm-login-uname">Email Address:</label>
<input type="email" id="frm-login-uname" name="email" placeholder="Type your email address" value="{{$request->email}}" required autofocus>
</fieldset>
<fieldset class="wrap-input item-width-in-half left-item ">
<label for="password">Password *</label>
<input type="password" id="password" name="password" placeholder="Password" required autocomplete="new-password">
</fieldset>
<fieldset class="wrap-input item-width-in-half ">
<label for="password_confirmation">Confirm Password *</label>
<input type="password" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password" required autocomplete="new-password">
</fieldset>
<input type="submit" class="btn btn-submit" value="Reset Password" name="submit">
</form>
</div>
</div>
</div><!--end main products area-->
</div>
</div><!--end row-->
</div><!--end container-->
</main>
</x-base-layout>
Save this file and let's check the result.
Switch to your browser and refresh the page.
You can see that the template has been applied to the reset password page.
Enter your new password and confirm it.
Click on the "Reset Password" button.
You will be redirected to the login page, which means your password has been changed.
Let's login with the new password.
Enter your email ID and password.
Click on the "Login" button and you will be logged in.
So, in this way, you can create a forgot password feature in your e-commerce application.
