Forgot Password Using Laravel with Ajax Full

     

Sample App Forgot Password Using Laravel with Ajax Full

Hello dear,

This tutorial will give you an example of how to clone a Laravel project from Gitlab. let’s discuss the steps to clone the Laravel project from GitHub. I explained simply about the clone Laravel project from GitHub. This article goes into detail on the clone Laravel project from Github on the server.

In this tutorial, I will show you step-by-step how to clone Laravel projects from Github, GitLab, or Bitbucket and set up an Ubuntu server from scratch. you can easily clone Laravel 6, Laravel 7, Laravel 8, Laravel 9, and Laravel 10 projects from this post.

So, let's follow the below step-by-step and get done with the clone Laravel app.




Route

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

/** for side bar menu active */
function set_active( $route ) {
    if( is_array( $route ) ){
        return in_array(Request::path(), $route) ? 'active' : '';
    }
    return Request::path() == $route ? 'active' : '';
}

Route::get('/', function () {
    return view('auth.login');
});

Route::group(['middleware'=>'auth'],function()
{
    Route::get('home',function()
    {
        return view('home');
    });
    Route::get('home',function()
    {
        return view('home');
    });
});

Auth::routes();
Route::group(['namespace' => 'App\Http\Controllers\Auth'],function()
{
    // ----------------------------login ------------------------------//
    Route::controller(LoginController::class)->group(function () {
        Route::get('login', 'login')->name('login');
        Route::post('login/push', 'authenticate')->name('login/push');
        Route::get('/logout', 'logout')->name('logout');
        Route::post('change/password', 'changePassword')->name('change/password');
    });
    
    // ------------------------ register sccount ----------------------//
     Route::controller(RegisterController::class)->group(function () {
        Route::get('register/form', 'index')->name('register/form');
        Route::post('register/save','saveRecord')->name('register/save');    
    });

    // -------------------------- forgot password ---------------------//
    Route::controller(ForgotPasswordController::class)->group(function () {
        Route::get('/forgot/password','sendEmail')->name('forgot/password');
        Route::post('post/email', 'postEmail')->name('post/email');   
    });

    // ------------------------- reset password -----------------------//
    Route::controller(ResetPasswordController::class)->group(function () {
        Route::get('reset/password/{token}', 'getPassword');
        Route::post('reset/password', 'updatePassword')->name('reset/password');      
    });

    // ------------------------ confirm password -----------------------//
    Route::controller(ConfirmPasswordController::class)->group(function () {   
        Route::get('confirm/password', 'confirmPassword')->name('confirm/password');    
    });
});

Route::group(['namespace' => 'App\Http\Controllers'],function()
{
    // -------------------------- main dashboard ----------------------//
    Route::controller(HomeController::class)->group(function () {
        Route::get('/home', 'index')->middleware('auth')->name('home');
    });
});

ForgotPasswordController

app/Http/Controllers/Auth/ForgotPasswordController.php

<?php

namespace App\Http\Controllers\Auth;

use DB;
use Mail;
use Carbon\Carbon;
use Illuminate\Support\Str;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\SendsPasswordResetEmails;

class ForgotPasswordController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Password Reset Controller
    |--------------------------------------------------------------------------
    |
    | This controller is responsible for handling password reset emails and
    | includes a trait which assists in sending these notifications from
    | your application to your users. Feel free to explore this trait.
    |
    */

    use SendsPasswordResetEmails;

    /** send email forgot password */
    public function sendEmail()
    {
        return view('auth.passwords.email');
    }

    /** post email */
    public function postEmail(Request $request)
    {
        try {

            $token = Str::random(60);
            $email = $request->email;
            $passwordReset = [
                'email'      => $email,
                'token'      => $token,
                'created_at' => Carbon::now(),
            ];
            DB::table('password_resets')->insert($passwordReset);

            Mail::send('auth.verify',['token' => $token], function($message) use ($request,$email) {
                $message->from($request->email);
                $message->to($email); /** input your email to send */
                $message->subject('Reset Password Notification');
            });

            $data = [];
            $data['response_code']  = '200';
            $data['status']         = 'success';
            $data['message']        = 'success Post Email';
            return response()->json($data);
        } catch(\Exception $e) {
            \Log::info($e);
            DB::rollback();
            $data = [];
            $data['response_code']  = '400';
            $data['status']         = 'error';
            $data['message']        = 'fail Send Email';
            return response()->json($data);
        }
    }
}

ResetPasswordController

app/Http/Controllers/Auth/ResetPasswordController.php

<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use DB;
use Hash;
use App\Models\User;
use Illuminate\Http\Request;

class ResetPasswordController extends Controller
{
    /** page reset password */
    public function getPassword($token)
    {
       return view('auth.passwords.reset', ['token' => $token]);
    }

    /** update new password */
    public function updatePassword(Request $request)
    {
        try {

            $updatePassword = DB::table('password_resets')->where(['email' => $request->email, 'token' => $request->token])->first();
            
            if (!$updatePassword) {
                $data = [];
                $data['response_code']  = '401';
                $data['status']         = 'error';
                $data['message']        = 'Invalid token! :)';
                return response()->json($request->token);
            } else { 
                $update = [
                    'password' => Hash::make($request->password),
                ];
                User::where('email', $request->email)->update($update);
                DB::table('password_resets')->where(['email'=> $request->email])->delete();

                $data = [];
                $data['response_code']  = '200';
                $data['status']         = 'success';
                $data['message']        = 'Your password has been changed! :)';
                return response()->json($data);
            }
        } catch(\Exception $e) {
            \Log::info($e);
            DB::rollback();
            $data = [];
            $data['response_code']  = '400';
            $data['status']         = 'error';
            $data['message']        = 'fail Update! :)';
            return response()->json($data);
        }
    }
}

ConfirmPasswordController

app/Http/Controllers/Auth/ConfirmPasswordController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\ConfirmsPasswords;

class ConfirmPasswordController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Confirm Password Controller
    |--------------------------------------------------------------------------
    |
    | This controller is responsible for handling password confirmations and
    | uses a simple trait to include the behavior. You're free to explore
    | this trait and override any functions that require customization.
    |
    */

    use ConfirmsPasswords;

    /**
    * Where to redirect users when the intended url fails.
    *
    * @var string
    */
    protected $redirectTo = RouteServiceProvider::HOME;

    /**
    * Create a new controller instance.
    *
    * @return void
    */

    // public function __construct()
    // {
    //     $this->middleware('auth');
    // }

    /** confirm password */
    public function confirmPassword()
    {
        return view('auth.passwords.confirm');
    }
}

email

resources/views/auth/passwords/email.blade.php

@extends('layouts.app')
@section('content')

    <div class="d-flex flex-column flex-root" id="kt_app_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 positon-xl-relative">
            <div class="d-flex flex-column position-xl-fixed top-0 bottom-0 w-xl-600px scroll-y">
                <div class="d-flex flex-row-fluid flex-column text-center p-5 p-lg-10 pt-lg-20">
                    <a href="{{ route('home') }}" style="padding-top: 5rem !important;padding-bottom: 2rem">
                        <img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}" class="theme-light-show h-70px h-lg-80px">
                    </a>
                    <h1 class="d-none d-lg-block fw-bold text-white fs-2qx pb-5 pb-md-10">
                        Welcome to Subscribers </h1>
                    <p class="d-none d-lg-block fw-semibold fs-2 text-white">
                        Plan your learn can choosing a sample creating <br>
                        an online and free soure code
                    </p>
                </div>
                <div class="d-none d-lg-block d-flex flex-row-auto bgi-no-repeat bgi-position-x-center bgi-size-contain bgi-position-y-bottom min-h-100px min-h-lg-350px" style="background-image: url({{ URL::to('assets/media/illustrations/dozzy-1/17.png') }})"></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 class="form w-100" novalidate="novalidate" data-kt-redirect-url="/login" id="kt_password_reset_form">
                        <div class="text-center mb-10">
                            <h1 class="text-dark mb-3">
                                Forgot Password ?
                            </h1>
                            <div class="text-gray-400 fw-semibold fs-4">
                                Enter your email to reset your password.
                            </div>
                        </div>
                        <div class="fv-row mb-10">
                            <label class="form-label fw-bold text-gray-900 fs-6">Email</label>
                            <input class="form-control form-control-solid" type="email" placeholder="Enter email" name="email" placeholder="Enter email" autocomplete="off">
                        </div>
                        <div class="d-flex flex-wrap justify-content-center pb-lg-0">
                            <button type="button" id="kt_password_reset_submit" class="btn btn-lg btn-primary fw-bold me-4">
                                <span class="indicator-label">
                                    Submit
                                </span>
                                <span class="indicator-progress">
                                    Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                            <a href="{{ route('login') }}" class="btn btn-lg btn-light-primary fw-bold">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
            <div class="d-flex flex-center flex-wrap fs-6 p-5 pb-0">
                <div class="d-flex flex-center fw-semibold fs-6">
                    <a href="https://www.linkedin.com/in/soengsouy/" class="text-muted text-hover-primary px-2" target="_blank">About</a>
                    <a href="https://www.facebook.com/starcodekh" class="text-muted text-hover-primary px-2" target="_blank">Support</a>
                    <a href="https://souysoeng.com" class="text-muted text-hover-primary px-2" target="_blank">Website</a>
                </div>
            </div>
        </div>
    </div>

@section('script')

<script>
    // Class Definition
    var KHAuthResetPassword = function() {
        // Elements
        var form;
        var submitButton;
        var validator;

        var handleForm = function(e) {
            // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
            validator = FormValidation.formValidation(
                form,
                {
                    fields: {					
                        'email': {
                            validators: {
                                regexp: {
                                    regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                                    message: 'The value is not a valid email address',
                                },
                                notEmpty: {
                                    message: 'Email address is required'
                                }
                            }
                        } 
                    },
                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        bootstrap: new FormValidation.plugins.Bootstrap5({
                            rowSelector: '.fv-row',
                            eleInvalidClass: '',  // comment to enable invalid state icons
                            eleValidClass: '' // comment to enable valid state icons
                        })
                    }
                }
            );		

            submitButton.addEventListener('click', function (e) {
                e.preventDefault();
                validator.validate().then(function (status) { // Validate form
                    if (status == 'Valid') { // Show loading indication
                        submitButton.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click 
                        submitButton.disabled = true; // Simulate ajax request
                        var url   = "{{ route('post/email') }}"; // route name url
                        var forms = $('#kt_password_reset_form'); // Prepare form data
                        var data  = $(forms).serialize();
                        $.ajax({
                            type: 'POST',
                            dataType: 'JSON',
                            url: url,
                            data: data,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response){
                            if(response.response_code == 200) {
                                setTimeout(function(time) {
                                    submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
                                    submitButton.disabled = false; // Enable button
                                    Swal.fire({
                                        text: "We have send a password reset link to your email.",
                                        icon: "success",
                                        buttonsStyling: false,
                                        confirmButtonText: "Ok, got it!",
                                        customClass: {
                                            confirmButton: "btn btn-primary"
                                        },
                                    }).then(function(success) {
                                        var redirectUrl = form.getAttribute('data-kt-redirect-url');
                                        if (redirectUrl) {
                                            location.href = redirectUrl;
                                        }
                                    });
                                },);
                                } else {
                                    submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
                                    submitButton.disabled = false; // Enable button
                                    Swal.fire({
                                        text: "Sorry, the email is incorrect, please try again.",
                                        icon: "error",
                                        buttonsStyling: false,
                                        confirmButtonText: "Ok, got it!",
                                        customClass: {
                                            confirmButton: "btn btn-primary"
                                        }
                                    });
                                }
                            },
                            error: function(response) {
                                submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
                                submitButton.disabled = false; // Enable button
                                Swal.fire({
                                    text: "Sorry, the email is incorrect, please try again.",
                                    icon: "error",
                                    buttonsStyling: false,
                                    confirmButtonText: "Ok, got it!",
                                    customClass: {
                                        confirmButton: "btn btn-primary"
                                    }
                                });
                            }
                        });
                     
                    } else {
                        submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
                        submitButton.disabled = false; // Enable button
                        // Show error popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                        Swal.fire({
                            text: "Sorry, looks like there are some errors detected, please try again.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });
                    }
                });  
            });
        }
        // Public Functions
        return {
            // public functions
            init: function() {
                form = document.querySelector('#kt_password_reset_form');
                submitButton = document.querySelector('#kt_password_reset_submit');
                handleForm();
            }
        };
    }();

    // On document ready
    KTUtil.onDOMContentLoaded(function() {
        KHAuthResetPassword.init();
    });
</script>

@endsection
@endsection

verify

resources/views/auth/verify.blade.php

@extends('layouts.app')
@section('content')
<style>
    html,
    body {
        padding: 0;
        margin: 0;
    }
</style>

<div
    style="font-family:Arial,Helvetica,sans-serif; line-height: 1.5; font-weight: normal; font-size: 15px; color: #2F3044; min-height: 100%; margin:0; padding:0; width:100%; background-color:#edf2f7">
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
        style="border-collapse:collapse;margin:0 auto; padding:0; max-width:600px">
        <tbody>
            <tr>
                <td align="center" valign="center" style="text-align:center; padding: 10px">
                    <a href="https://souysoeng.com" rel="noopener" target="_blank">
                        <img alt="Logo" src="https://blogger.googleusercontent.com/img/a/AVvXsEi22QSrQgGkTlZ_KdmZx9jRwqTe40SpFx41DukLyxBKKK36XsOCHlPj9NA_ecEZ_ju3Olrt_HcLVrnLXn5Kjgx8pFgPeWslLIJhVu0-Yb5ehLElSJGdsNVamMWksTq8M6-M2_JTtx-2ge_CYS9i_sPgX7noLlbjLbQjFfVXUVS4vxyyp6ULiBR1FxXmYzDO=s256" style="min-height:30px;width: 15%;">
                    </a>
                </td>
            </tr>
            <tr>
                <td align="left" valign="center">
                    <div
                        style="text-align:left; margin: 0 20px; padding: 40px; background-color:#ffffff; border-radius: 6px">
                        <!--begin:Email content-->
                        <div style="padding-bottom: 30px; font-size: 17px;">
                            <strong>Welcome to Subscribers!</strong>
                        </div>
                        <div style="padding-bottom: 30px">
                            To activate your account, please click on the button below to verify your email address.
                        </div>
                        <div style="padding-bottom: 40px; text-align:center;">
                            <a href="{{ url('reset/password/'.$token) }}" rel="noopener" target="_blank" style="text-decoration:none;display:inline-block;text-align:center;padding:0.75575rem 1.3rem;font-size:0.925rem;line-height:1.5;border-radius:0.35rem;color:#ffffff;background-color:#3E97FF;border:0px;margin-right:0.75rem!important;font-weight:600!important;outline:none!important;vertical-align:middle" target="_blank">
                                Click Change Password Account
                            </a>
                        </div>
                        <div style="padding-bottom: 30px">
                            This password reset link will expire in 60 minutes.
                            If you did not request a password reset, no further action is required.
                        </div>
                        <div style="border-bottom: 1px solid #eeeeee; margin: 15px 0"></div>
                        <div style="padding-bottom: 50px; word-wrap: break-all;">
                            <p style="margin-bottom: 10px;">
                                Button not working? Try pasting this URL into your browser:
                            </p>
                            <a href="{{ url('reset/password/'.$token) }}" rel="noopener" target="_blank" style="text-decoration:none;color: #3E97FF">
                                {{ url('reset/password/'.$token) }}
                            </a>
                        </div>
                        <!--end:Email content-->
                        <div style="padding-bottom: 10px">
                            Kind regards,<br>
                            The StarCode Kh.
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="center" valign="center"
                    style="font-size: 13px; text-align:center;padding: 20px; color: #6d6e7c;">
                    <p> #248, Preah Monivong Blvd. (Street 110),Phnom Phenh</p>
                    <p> Copyright &copy; <a href="https://www.readfreekh.com/" rel="noopener" target="_blank">StarCode Kh</a>.
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
</div>
@endsection

reset

resources/views/auth/passwords/reset.blade.php

@extends('layouts.app')
@section('content')
    <div class="d-flex flex-column flex-root" id="kt_app_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 positon-xl-relative">
            <div class="d-flex flex-column position-xl-fixed top-0 bottom-0 w-xl-600px scroll-y">
                <div class="d-flex flex-row-fluid flex-column text-center p-5 p-lg-10 pt-lg-20">
                    <a href="{{ route('home') }}" style="padding-top: 5rem !important;padding-bottom: 2rem">
                        <img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}" class="theme-light-show h-70px h-lg-80px">
                    </a>
                    <h1 class="d-none d-lg-block fw-bold text-white fs-2qx pb-5 pb-md-10">
                        Welcome to Subscribers </h1>
                    <p class="d-none d-lg-block fw-semibold fs-2 text-white">
                        Plan your learn can choosing a sample creating <br>
                        an online and free soure code
                    </p>
                </div>
                <div class="d-none d-lg-block d-flex flex-row-auto bgi-no-repeat bgi-position-x-center bgi-size-contain bgi-position-y-bottom min-h-100px min-h-lg-350px" style="background-image: url({{ URL::to('assets/media/illustrations/dozzy-1/17.png') }})"></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 class="form w-100" novalidate="novalidate" data-kt-redirect-url="/login" id="kt_new_password_form">
                        <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 have reset your password ?
                                <a href="{{ route('register/form') }}" class="link-primary fw-bold">
                                    Sign in here
                                </a>
                            </div>
                        </div>
                        <div class="fv-row mb-7">
                            <label class="form-label fw-bold text-dark fs-6">Email</label>
                            <input class="form-control form-control-lg form-control-solid" type="email" placeholder="Enter email" name="email" autocomplete="off">
                        </div>
                        <div class="mb-10 fv-row" data-kt-password-meter="true">
                            <div class="mb-1">
                                <label class="form-label fw-bold text-dark fs-6">Password</label>
                                <div class="position-relative mb-3">
                                    <input class="form-control form-control-lg form-control-solid" type="password" name="password" placeholder="Enter Password" autocomplete="off">
                                    <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
                                        <i class="ki-duotone ki-eye-slash fs-2"></i>
                                        <i class="ki-duotone ki-eye fs-2 d-none"></i>
                                    </span>
                                </div>
                                <div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
                                </div>
                            </div>
                            <div class="text-muted">
                                Use 8 or more characters with a mix of letters, numbers & symbols.
                            </div>
                        </div>
                        <div class="fv-row mb-10">
                            <label class="form-label fw-bold text-dark fs-6">Confirm Password</label>
                            <input class="form-control form-control-lg form-control-solid" type="password" name="confirm-password" placeholder="Enter Confirm Password" autocomplete="off">
                        </div>
                        <div class="fv-row mb-10">
                            <div class="form-check form-check-custom form-check-solid form-check-inline">
                                <input class="form-check-input" type="checkbox" name="toc" value="1">
                                <label class="form-check-label fw-semibold text-gray-700 fs-6">
                                    I Agree &
                                    <a href="#" class="ms-1 link-primary">Terms and conditions</a>.
                                </label>
                            </div>
                        </div>
                        <div class="text-center">
                            <button type="button" id="kt_new_password_submit" class="btn btn-lg btn-primary fw-bold">
                                <span class="indicator-label">Submit</span>
                                <span class="indicator-progress">
                                    Please wait...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="d-flex flex-center flex-wrap fs-6 p-5 pb-0">
                <div class="d-flex flex-center fw-semibold fs-6">
                    <a href="https://www.linkedin.com/in/soengsouy/" class="text-muted text-hover-primary px-2" target="_blank">About</a>
                    <a href="https://www.facebook.com/starcodekh" class="text-muted text-hover-primary px-2" target="_blank">Support</a>
                    <a href="https://souysoeng.com" class="text-muted text-hover-primary px-2" target="_blank">Website</a>
                </div>
            </div>
        </div>
    </div>

@section('script')
<script>
    // Class Definition
    var KHAuthNewPassword = function() {
        // Elements
        var form;
        var submitButton;
        var validator;
        var passwordMeter;

        var handleForm = function(e) {
            // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
            validator = FormValidation.formValidation(
                form,
                {
                    fields: {	
                        'email': {
                            validators: {
                                regexp: {
                                    regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                                    message: 'The value is not a valid email address',
                                },
                                notEmpty: {
                                    message: 'Email address is required'
                                }
                            }
                        },				 
                        'password': {
                            validators: {
                                notEmpty: {
                                    message: 'The password is required'
                                },
                                callback: {
                                    message: 'Please enter valid password',
                                    callback: function(input) {
                                        if (input.value.length > 0) {        
                                            return validatePassword();
                                        }
                                    }
                                }
                            }
                        },
                        'confirm-password': {
                            validators: {
                                notEmpty: {
                                    message: 'The password confirmation is required'
                                },
                                identical: {
                                    compare: function() {
                                        return form.querySelector('[name="password"]').value;
                                    },
                                    message: 'The password and its confirm are not the same'
                                }
                            }
                        },
                        'toc': {
                            validators: {
                                notEmpty: {
                                    message: 'You must accept the terms and conditions'
                                }
                            }
                        }
                    },
                    plugins: {
                        trigger: new FormValidation.plugins.Trigger({
                            event: {
                                password: false
                            }  
                        }),
                        bootstrap: new FormValidation.plugins.Bootstrap5({
                            rowSelector: '.fv-row',
                            eleInvalidClass: '',  // comment to enable invalid state icons
                            eleValidClass: '' // comment to enable valid state icons
                        })
                    }
                }
            );

            submitButton.addEventListener('click', function (e) {
                e.preventDefault();
                validator.revalidateField('password');

                validator.validate().then(function(status) {
                    if (status == 'Valid') {
                        // Show loading indication
                        submitButton.setAttribute('data-kt-indicator', 'on');
                        // Disable button to avoid multiple click 
                        submitButton.disabled = true;
                        // route name url
                        var url = "{{ route('reset/password') }}"; // route name url
                        var forms = $('#kt_new_password_form'); // Prepare form data
                        var data = $(forms).serialize();
                        $.ajax({
                            type: 'POST',
                            dataType: 'JSON',
                            url: url,
                            data: data,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                        }).then(function(response) {
                            if(response.response_code == 200) {
                                setTimeout(function(time) {
                                submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
                                submitButton.disabled = false; // Enable button
                                Swal.fire({
                                    text: "You have successfully reset your password!",
                                    icon: "success",
                                    buttonsStyling: false,
                                    confirmButtonText: "Ok, got it!",
                                    customClass: {
                                        confirmButton: "btn btn-primary"
                                    },
                                    }).then(function(success) {
                                        var redirectUrl = form.getAttribute('data-kt-redirect-url');
                                        if (redirectUrl) {
                                            location.href = redirectUrl;
                                        }
                                    });
                                },);
                            } else {
                                console.log(response);
                                if(response.response_code == 401) {
                                    submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
                                    submitButton.disabled = false; // Enable button
                                    Swal.fire({
                                        text: "Sorry, invalid token, please try again.",
                                        icon: "error",
                                        buttonsStyling: false,
                                        confirmButtonText: "Ok, got it!",
                                        customClass: {
                                            confirmButton: "btn btn-primary"
                                        }
                                    });
                                } else {
                                    submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
                                    submitButton.disabled = false; // Enable button
                                    Swal.fire({
                                        text: "Sorry, the email or password is incorrect, please try again.",
                                        icon: "error",
                                        buttonsStyling: false,
                                        confirmButtonText: "Ok, got it!",
                                        customClass: {
                                            confirmButton: "btn btn-primary"
                                        }
                                    });
                                }
                            }
                        });			
                    } else {
                        submitButton.removeAttribute('data-kt-indicator'); // Hide loading indication
                        submitButton.disabled = false; // Enable button
                        // Show error popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
                        Swal.fire({
                            text: "Sorry, looks like there are some errors detected, please try again.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, got it!",
                            customClass: {
                                confirmButton: "btn btn-primary"
                            }
                        });
                    }
                });
            });

            form.querySelector('input[name="password"]').addEventListener('input', function() {
                if (this.value.length > 0) {
                    validator.updateFieldStatus('password', 'NotValidated');
                }
            });
        }

        var validatePassword = function() {
            return  (passwordMeter.getScore() === 100);
        }

        // Public Functions
        return {
            // public functions
            init: function() {
                form = document.querySelector('#kt_new_password_form');
                submitButton = document.querySelector('#kt_new_password_submit');
                passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));
                handleForm();
            }
        };
    }();

    // On document ready
    KTUtil.onDOMContentLoaded(function() {
        KHAuthNewPassword.init();
    });
</script>
@endsection
@endsection

Confirm Password

@extends('layouts.app')
@section('content')
    <div class="d-flex flex-column flex-root" id="kt_app_root">
        <div class="d-flex flex-column flex-column-fluid">
            <div class="d-flex flex-row-fluid flex-column flex-column-fluid text-center p-10 py-lg-20">
                <a href="{{ route('home') }}" class="pt-lg-20 mb-12">
                    <img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}"class="theme-light-show h-40px h-lg-50px">
                    <img alt="Logo" src="{{ URL::to('assets/media/logos/logo.png') }}" class="theme-dark-show h-40px h-lg-50px">
                </a>
                <h1 class="fw-bold fs-2qx text-gray-800 mb-7">Password is changed</h1>
                <div class="fw-semibold fs-3 text-muted mb-15">
                    Your password is successfully changed. Please Sign <br>
                    in to your account and start a new project.
                </div>
                <div class="text-center">
                    <a href="{{ route('login') }}" class="btn btn-primary btn-lg fw-bold">Sign In</a>
                </div>
                <div class="text-gray-700 fw-semibold fs-4 pt-7">Did't receive an email?
                    <a href="{{ route('forgot/password') }}" class="text-primary fw-bold">Try Again</a>
                </div>
            </div>
            <div class="d-flex flex-row-auto bgi-no-repeat bgi-position-x-center bgi-size-contain bgi-position-y-bottom min-h-150px min-h-lg-350px"
                style="background-image: url(../../assets/media/illustrations/dozzy-1/7.png)">
            </div>
        </div>
    </div>
@endsection

Git Clone Full Project

1.Run `git clone 'link projer github'
2.Run composer update
3.Run cp .env.example .env or copy .env.example .env
4.Run php artisan key:generate
5.Run php artisan migrate
6.Run php artisan serve
7.Go to link localhost:8000

Step 1: Git Clone Laravel 10

First, clone a new Laravel app just by running the below command in your terminal.

https://gitlab.com/SoengSouy/app-sample-laravel-10.git

Step 2: Composer Update

Type the command in your terminal.

composer update

Step 3: Update Your Database Credentials

After that update your database credentials in your .env file which is located in your project root.

1. connection databases

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=#your database password
2. for send mail when fogot password

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your email
MAIL_PASSWORD='your password email'
MAIL_ENCRYPTION=tls

Step 4: Make Migration

After adding the migration file run the migrate command.

php artisan migrate

Step 5:Run

After adding the run file now run the migrate command.

php artisan serve

Souy Soeng

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

Previous Post Next Post