JezK
Edit File: forgotpassword.php
<!doctype html> <html lang="en"> <head> <title>Detailing Edition - Login</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="icon" type="image/png" href="./images/fav.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;800&family=Mulish:wght@300;400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="./userstyles/userstyles.css"> <script src="js/validations.js"></script> </head> <body class="login-section"> <section> <div class="container-fluid"> <div class="row no-gutters"> <div class="col-md-6 d-none side-image p-0"> <img src="./images/logo.png" class="img-fluid" /> </div> <div class="col-md-6 form-container"> <div class="login-contents"> <h3 class="login-heading">Forgot Password</h3> <div class="form-style"> <form id="forgotForm"> <div class="form-group pb-2"> <p class="align-center" style="color:white; font-size:16px;">Please enter the phone number to receive otp code </p> <label for="phone" class="form-label">Phone number</label> <input type="phone" class="form-control" id="phone" name="phone" placeholder="Phone number"> <p class="error phone_error"></p> <div class="error phoneerror"></div> </div> <div class="error loginerror"></div> <div class="my-2 d-flex justify-content-center"> <button type="submit" class="de-btn-fill" onclick="return validateUserForgotPassword();" name="login">Submit</button> </div> </form> </div> </div> </div> <div class="login"> <br> <h5><a href="index.php">Login</a></h5> </div> </div> </div> </section> <?php include "./scripts.php"; include "./App/userObject.php"; ?> <script> let baseUrl = "<?php echo $baseUrl; ?>" $(document).ready(function() { $('.toggle-icon').click(function() { var input = $('#password'); if (input.attr('type') === 'password') { input.attr('type', 'text'); $(this).find('i').removeClass('fa-eye').addClass('fa-eye-slash'); } else { input.attr('type', 'password'); $(this).find('i').removeClass('fa-eye-slash').addClass('fa-eye'); } }); $('#forgotForm').submit(function(event) { event.preventDefault(); let phone = $('#phone').val(); $.ajax({ url: 'App/forgotpassword.php', method: 'POST', data: { forgot: 'forgot', phone: phone }, success: function(response) { data = JSON.parse(response); let token = data.token; if (data.status == 1) { location.replace('otpverification.php?token=' + token+'&verifyStatus='+2); } else if (data.status == 0) { toastr.warning("Phone Number Doesn't Exits"); } else { toastr.warning("Unable to send otp"); } } }); }); }); </script> </body> </html>