Laravel 8 E-Commerce - User Change Password

In this video, we will learn about how to allow users to change their passwords.

Let's explore how to create a change password feature for users or customers.

First, we need to create a new Livewire component.

Switch to the command prompt and run the following command to create a new Livewire component:

php artisan make:livewire user/UserChangePasswordComponent

Now, run the application:

php artisan serve

Next, switch to the project and create a route for this new component.

Go to the routes directory and open the web.php file.

Inside the user middleware route group, create a new route:

Route::get('/user/change-password',UserChangePasswordComponent::class)->name('user.changepassword');

Now, go to the UserChangePasswordComponent.php class file and write the following code:

<?php
namespace AppHttpLivewireUser;
use AppModelsUser;
use IlluminateSupportFacadesAuth;
use IlluminateSupportFacadesHash;
use LivewireComponent;
class UserChangePasswordComponent extends Component
{
    public $current_password;
    public $password;
    public $password_confirmation;
    public function updated($fields)
    {
        $this->validateOnly($fields,[
            'current_password'=>'required',
            'password' => 'required|min:8|confirmed|different:current_password'
        ]);
    }
    public function changePassword()
    {
        $this->validate([
            'current_password'=>'required',
            'password' => 'required|min:8|confirmed|different:current_password'
        ]);
        
        if(Hash::check($this->current_password,Auth::user()->password))
        {
            $user = User::findOrFail(Auth::user()->id);
            $user->password = Hash::make($this->password);
            $user->save();
            session()->flash('password_success','Password has been changed successfully!');
        }
        else
        {
            session()->flash('password_error','Password does not match!');
        }
    }
    public function render()
    {
        return view('livewire.user.user-change-password-component')->layout('layouts.base');
    }
}

Open the user-change-password-component.blade.php view file and write the following code:

<div>
    <div class=`container` style=`padding: 30px 0;`>
        <div class=`row`>
            <div class=`col-md-12`>
                <div class=`panel panel-default`>
                    <div class=`panel-heading`>
                        Change Password
                    </div>
                    <div class=`panel-body`>
                        @if(Session::has('password_success'))
                            <div class=`alert alert-success` role=`alert`>{{Session::get('password_success')}}</div>
                        @endif
                        @if(Session::has('password_error'))
                            <div class=`alert alert-danger` role=`alert`>{{Session::get('password_error')}}</div>
                        @endif
                        <form class=`form-horizontal` wire:submit.prevent=`changePassword`>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`>Current Password</label> 
                                <div class=`col-md-4`>
                                    <input type=`password` placeholder=`Current Password` class=`form-control input-md` name=`current_password` wire:model=`current_password` />
                                    @error('current_password') <p class=`text-danger`>{{$message}}</p> @enderror
                                </div>
                            </div>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`>New Password</label> 
                                <div class=`col-md-4`>
                                    <input type=`password` placeholder=`New Password` class=`form-control input-md` name=`password` wire:model=`password` />
                                    @error('password') <p class=`text-danger`>{{$message}}</p> @enderror
                                </div>
                            </div>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`>Confirm Password</label> 
                                <div class=`col-md-4`>
                                    <input type=`password` placeholder=`Confirm Password` class=`form-control input-md` name=`password_confirmation` wire:model=`password_confirmation` />
                                    @error('password_confirmation') <p class=`text-danger`>{{$message}}</p> @enderror
                                </div>
                            </div>
                            <div class=`form-group`>
                                <label class=`col-md-4 control-label`></label> 
                                <div class=`col-md-4`>
                                    <button type=`submit` class=`btn btn-primary`>Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Let's test the password change feature.

Enter your current password:

Enter your new password:

Retype your new password:

Click on submit.

You should see a message indicating that your password has been changed successfully!

And that's how you can create a change password feature for users.