Update Password in Laravel 11 using Bootstrap Modal and Ajax

In this article, you will learn how to update password in laravel 11 using bootstrap modal and ajax.we will also perform validation and show proper error messages.So if you are a beginner you don't need to worry we will start from scratch and cover everything in detail.

In this tutorial, we will teach you through the example which contains a view where we show our frontend or modal and then we need a route for this and after that we will create an Ajax request to update the password without page-reload with proper validation with comes from the controller and then we update the password.You can also use this tutorial in laravel 7, laravel 8, laravel 9, laravel 10.

Blade View

We're creating a Bootstrap modal in a Blade view to display the password update form. This modal contains a form with an input fields for the new password.

<div class="col-sm-6 col-md-4">
        <p class="px-2">
            Password
            <i class="ri-pencil-line px-1" role="button" data-bs-toggle="modal" data-bs-target="#updatePasswordModal"></i>
        </p>
        <p class="device__glass">*******</p>
    </div>

    <!-- Update Password Modal -->
    <div class="modal fade" id="updatePasswordModal" tabindex="-1" aria-labelledby="updatePasswordModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updatePasswordModalLabel">Update Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Password update form goes here -->
                    <div id="passwordUpdateError" class="alert alert-danger d-none" role="alert"></div>
                    <div id="passwordUpdateSuccess" class="alert alert-success d-none" role="alert"></div>
                    <form id="passwordUpdateForm">
                        @csrf
                        <div class="mb-3">
                            <label for="oldPassword" class="form-label">Old Password</label>
                            <input type="password" class="form-control" id="oldPassword" name="oldPassword" required>
                        </div>
                        <div class="mb-3">
                            <label for="newPassword" class="form-label">New Password</label>
                            <input type="password" class="form-control" id="newPassword" name="newPassword" required>
                        </div>
                        <div class="mb-3">
                            <label for="confirmPassword" class="form-label">Confirm Password</label>
                            <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="updatePasswordBtn">Update Password</button>
                </div>
            </div>
        </div>
    </div>

Blade View

$(document).ready(function() {
        $('#updatePasswordBtn').click(function() {
            var oldPassword = $('#oldPassword').val();
            var newPassword = $('#newPassword').val();
            var confirmPassword = $('#confirmPassword').val();

            $.ajax({
                type: 'POST',
                url: '{{ route('website.password.update') }}',
                data: {
                    old_password: oldPassword,
                    password: newPassword,
                    password_confirmation: confirmPassword,
                    _token: '{{ csrf_token() }}'
                },

                success: function(response) {
                    if (response.success) {
                        $('#passwordUpdateSuccess').removeClass('d-none').html(response.success);
                        $('#passwordUpdateError').addClass('d-none').html('');
                        $('#passwordUpdateForm')[0].reset();

                    } else {
                        var errorMessage = response.error || '';
                        $('#passwordUpdateError').html(errorMessage).removeClass('d-none');
                        $('#passwordUpdateSuccess').addClass('d-none').html('');
                    }

                    setTimeout(function() {
                        $('#updatePasswordModal').modal('hide');
                    }, 3000);
                },

                error: function(xhr) {
                    $('#passwordUpdateSuccess').addClass('d-none').html('');
                    var errors = xhr.responseJSON.errors;
                    var errorMessage = '';
                    for (var key in errors) {
                        errorMessage += errors[key][0] +'';
                    }
                    $('#passwordUpdateError').html(errorMessage).removeClass('d-none');
                }
            });
        });
    });

Route

Route::post('password/update', [ProfileController::class, 'updatePassword'])->name('password.update');

Controller Method

Controllers contain the application logic. Here, we have a method in the updatePassword to handle the password update. It retrieves the authenticated user, updates their password with the hashed value of the new password provided in the request, and saves the changes

public function updatePassword(Request $request)
{

    $request->validate([
        'old_password' => 'required',
        'password' => 'required|confirmed|min:6|max:255',
    ]);

    $user = Auth::user();
    if (!Hash::check($request->old_password, $user->password)) {
        return response()->json(['error' => 'The old password is incorrect.']);
    }
    
    if (strcmp($request->get('old_password'), $request->password) == 0) {
        return response()->json(['error' => 'New Password cannot be same as your current password.']);
    }

    #Update the new Password

    User::whereId($user->id)->update([
        'password' => Hash::make($request->password)
    ]);
    return response()->json(['success' => 'Password updated successfully'], 200);
}