Forgot Password Using Laravel with Ajax Full

Click to Download Project

Click to Download Admin Template

1. Routes

2. Controllers

3. Blade views (already provided)

4. Mail Notification for password reset

1. Routes (web.php)

Define the routes for password reset and update in your routes/web.php:

// Password Reset Routes
Route::get('reset/password/{token}', 'Auth\PasswordResetController@showResetForm')->name('password.reset');
Route::post('reset/password', 'Auth\PasswordResetController@reset')->name('password.update');

2. Controller (PasswordResetController.php)

Create a controller for handling the password reset logic. Run the following Artisan command:

php artisan make:controller Auth/PasswordResetController

Then, add the following methods inside the controller:

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Password;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use Illuminate\Auth\Events\PasswordReset;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Hash;
use App\Models\User;

class PasswordResetController extends Controller
{
    // Show reset password form
    public function showResetForm($token)
    {
        return view('auth.passwords.reset')->with('token', $token);
    }

    // Handle password reset
    public function reset(Request $request)
    {
        // Validate the input data
        $validatedData = $request->validate([
            'email' => 'required|email',
            'password' => 'required|string|min:8|confirmed',
            'token' => 'required',
        ]);

        // Reset the password
        $response = Password::reset(
            $validatedData,
            function ($user) use ($validatedData) {
                $user->password = Hash::make($validatedData['password']);
                $user->save();

                // Fire the password reset event
                event(new PasswordReset($user));
            }
        );

        // Check if the reset was successful
        if ($response == Password::PASSWORD_RESET) {
            return redirect()->route('login')->with('status', 'Password has been reset!');
        }

        return back()->withErrors(['email' => 'The provided credentials do not match our records.']);
    }
}

3. Mail Notification (ResetPasswordNotification.php)

Create a mail notification class to send the reset password email. Run the following Artisan command:

php artisan make:notification ResetPasswordNotification

Then, add the following code to ResetPasswordNotification.php:

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Notifications\Messages\MailMessage;

class ResetPasswordNotification extends Notification
{
    use Queueable;

    public $token;

    public function __construct($token)
    {
        $this->token = $token;
    }

    public function via($notifiable)
    {
        return ['mail'];
    }

    public function toMail($notifiable)
    {
        return (new MailMessage)
                    ->subject('Reset Your Password')
                    ->line('You are receiving this email because we received a password reset request for your account.')
                    ->action('Reset Password', url('reset/password/'.$this->token))
                    ->line('This password reset link will expire in 60 minutes.')
                    ->line('If you did not request a password reset, no further action is required.');
    }
}

You will also need to call this notification when a user requests a password reset, typically within the ForgotPasswordController.

4. ForgotPasswordController (Optional)

If you don’t have the ForgotPasswordController, you can create it with:

php artisan make:controller Auth/ForgotPasswordController

Then add the following to handle the password reset link request:

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Password;
use Illuminate\Http\Request;
use App\Models\User;
use App\Notifications\ResetPasswordNotification;

class ForgotPasswordController extends Controller
{
    // Show the form for resetting the password
    public function showLinkRequestForm()
    {
        return view('auth.passwords.email');
    }

    // Send the reset link
    public function sendResetLinkEmail(Request $request)
    {
        // Validate the email
        $validatedData = $request->validate(['email' => 'required|email']);

        // Send the password reset link
        $response = Password::sendResetLink($validatedData);

        if ($response == Password::RESET_LINK_SENT) {
            return back()->with('status', 'We have emailed your password reset link!');
        }

        return back()->withErrors(['email' => 'We cannot find a user with that email address.']);
    }
}

In this case, the the sendResetLinkEmail method will trigger the ResetPasswordNotification to send the reset email.

5. Email View (resources/views/auth/passwords/email.blade.php)

Here’s an email view for the password reset link:

@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-root">
    <div class="d-flex flex-column flex-lg-row flex-column-fluid">
        <div class="d-flex flex-column flex-lg-row-auto bg-primary w-xl-600px position-xl-relative">
            <div class="d-flex flex-column position-xl-fixed top-0 bottom-0 w-xl-600px scroll-y">
                <div class="text-center p-10 pt-20">
                    <a href="{{ route('home') }}">
                        <img src="{{ asset('assets/media/logos/logo.png') }}" alt="Logo" class="h-70px h-lg-80px mb-5">
                    </a>
                    <h1 class="text-white fw-bold fs-2qx pb-5">Welcome to Subscribers</h1>
                    <p class="text-white fs-2">Learn, create, and explore free source code</p>
                </div>
            </div>
        </div>

        <div class="d-flex flex-column flex-lg-row-fluid py-10">
            <div class="d-flex flex-center flex-column flex-column-fluid">
                <div class="w-lg-500px p-10 p-lg-15 mx-auto">
                    <form method="POST" action="{{ route('password.update') }}" class="form w-100" id="kt_new_password_form">
                        @csrf
                        <input type="hidden" name="token" value="{{ $token }}">
                        
                        <div class="text-center mb-10">
                            <h1 class="text-dark mb-3">Setup New Password</h1>
                            <div class="text-gray-400 fw-semibold fs-4">
                                Already reset? <a href="{{ route('login') }}" class="link-primary fw-bold">Login here</a>
                            </div>
                        </div>

                        <div class="fv-row mb-7">
                            <label class="form-label fw-bold text-dark fs-6">Email</label>
                            <input type="email" name="email" class="form-control form-control-lg form-control-solid" value="{{ old('email') }}" required autofocus>
                        </div>

                        <div class="mb-10 fv-row">
                            <label class="form-label fw-bold text-dark fs-6">Password</label>
                            <input type="password" name="password" class="form-control form-control-lg form-control-solid" required>
                        </div>

                        <div class="fv-row mb-10">
                            <label class="form-label fw-bold text-dark fs-6">Confirm Password</label>
                            <input type="password" name="password_confirmation" class="form-control form-control-lg form-control-solid" required>
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-lg btn-primary fw-bold">
                                <span class="indicator-label">Submit</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

6. Views (Blade Views)

The reset.blade.php and verify.blade.php views are already provided, and you can use the previously defined versions.

7. Conclusion

1. The routes define the necessary URIs for resetting passwords.

2. The controller handles the business logic for resetting the password.

3. The mail notification sends the reset password email.

4. Blade views display the forms for resetting the password and confirming via email.