freeu-project/resources/views/Frontend/Pages/forget_password.blade.php

<?php $currentPage = 'forgot-password'; ?>

@extends('Frontend.layouts.master')




@section('content')
    <div class="login">

        <div class="container row m-auto d-flex align-items-center justify-content-center">

            <!--<div class="col-md-6 left" data-aos="fade-right">-->

            <!--     <img src="{{ asset('public/assets/media/FrontendImages/reset_password_image.png') }}" width="100%">-->

            <!--</div>-->

            <div class="col-md-6 right" data-aos="fade-left">

                <form id="change_password" autocomplete="off">

                    <div class="lg-password login-form">

                        <h1>Reset Your Password</h1>

                        <input type="hidden" id="user_id" name="user_id" value="{{ Request::get('user_id') }}">

                        <div class="form-group">

                            <label>Enter the OTP sent to registered mobile number or email</label>

                            <input name="otp" id="otp" class="form-control" maxlength="4" type="tel" />

                        </div>

                        <div class="form-group">

                            <label>New Password</label>

                            <input name="password" id="password" class="form-control" type="password" />

                        </div>

                        <div class="form-group">

                            <label>Confirm Password</label>

                            <input name="password_confirmation" class="form-control" type="password" />

                        </div>

                        <p class="text-white">OTP valid for <span id="countdown-timers"></span> sec</p>

                        <p class="regist">Didn't receive any otp? <a href="#"
                                id="resend_forget_otp" class="d-none">Resend OTP</a></p>

                        <button type="submit" class="yellow-btn signin">Update</button>


                    </div>

                </form>



            </div>

        </div>

    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            // var data = $('#user_id').val()
            // console.log(data);
            $('#resend_forget_otp').on('click', function(event) {
                event.preventDefault();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: 'api/resend/forget/password/otp',
                    type: 'POST',
                    // data: {
                    //     'user_id': data,
                    // },

                    success: function(response) {
                        if (response.status == 200) {
                            $('#resend_forget_otp').addClass("d-none");
                            startTimer();
                            setTimeout(() => {
                                toastr.success(response.message);
                            }, 2000);
                            // swal("Thankyou!", "OTP has been sent to your mail and phone",
                            //     "success");
                            location.reload();
                        }
                    },


                });


            });

            var timerDuration = 120;

            var duration = 120;

            function startTimer() {
                // var duration = 120; // Duration of the timer in seconds

                var timer = duration;

                $("#countdown-timers").text(formatTime(timer));

                var intervalId = setInterval(function() {
                    timer--;

                    $("#countdown-timers").text(formatTime(timer));

                    if (timer === 0) {
                        clearInterval(intervalId);
                        $('#resend_forget_otp').removeClass("d-none");
                        $("#resend-otp-link").prop("disabled", false);
                    }
                }, 1000);
            }

            function formatTime(seconds) {
                var minutes = Math.floor(seconds / 60);

                var remainingSeconds = seconds % 60;

                return (
                    minutes + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds
                );
            }

            startTimer();
        });
    </script>
@endsection