EVOLUTION-NINJA
Edit File: login_page.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smart Finance</title> <!-- bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> <!-- bootstrap end --> <link rel="stylesheet" href="public/assets/css/font-awesome.min.css"> <!-- all css of login page in loginpage.css --> <link rel="stylesheet" href="public/assets/css/loginpage.css"> <!-- poppins fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <!-- captcha --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script> <!-- captcha end--> </head> <style> </style> <body> <section class="financelogin"> <div class="loginform"> <img src="public/assets/images/final smart.svg" alt="Finance Logo" class="loginlogo" style="margin-left:-30px;"> <form id="form1" class="formdetails"> <div class="lo"> <label for="username" class="filednames">User Name</label> <div class="inpfields"> <!--<input type="text" placeholder="Enter username" name="username" id="username" required pattern="([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})|([a-zA-Z0-9_-]{3,20})">--> <input type="email" placeholder="Enter username" name="username" id="username" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="Example: abc@example.com" required="required" aria-required="true" oninput="this.value = this.value.replace(/[A-Z]/g, '')"> <i class="fa fa-user" aria-hidden="true" ></i> </div> </div> <div class="lo"> <label for="password" class="filednames">Password</label> <div class="inpfields"> <input type="password" placeholder="Enter Password" name="password" id="password" class="passwordinput" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&*!])[A-Za-z\d@#$%^&*!]{8,16}$" required data-toggle="tooltip" data-placement="bottom" title="Password must be 8-16 characters long, contain at least one uppercase letter, one lowercase letter, one digit, and one special character (@, #, $, %, ^, &, *, etc.)."> <i class="fa fa-eye-slash" aria-hidden="true" id="togglepass" ></i> </div> </div> <div class="lo"> <div class="mb-3 d-flex align-items-center"> <canvas id="captcha" width="200" height="60" style="border:0.4px solid #ccc"></canvas> <!-- <button type="button" class="btn btn-secondary ms-2" id="refresh-captcha">Refresh</button> --> <i class="fa fa-refresh" aria-hidden="true" id="refresh-captcha" style="margin-left: 15px;"></i> </div> </div> <div class="lo"> <label for="captcha-input" class="filednames" class="form-label">Captcha</label> <div class="inpfields"> <input type="text" placeholder="Enter Captcha" name="captcha-input" id="captcha-input" class="passwordinput" required> <!-- <img src="public/assets/images/Frame.png" alt="password icon" class="inplogos"> --> <i class="fa fa-pencil" aria-hidden="true"></i> </div> </div> <button type="submit" class="loginbutton" id="log-btn">Log In</button> </form> <div style="width:75%;margin:auto;border:0.5px solid #B7B4B4"></div> <div><a href="<?php echo base_url('/') ?>" class="changeFields">Sign Up</a> |<a href="<?= base_url('/forgot-password') ?>" class="changeFields">Forgot Password ?</a> </div> </section> </body> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet"> <script> document.addEventListener('DOMContentLoaded',function () { const eyechange = document.getElementById("togglepass"); const togglepassword = document.querySelector(".passwordinput"); eyechange.addEventListener("click", function () { if (togglepassword.type === "password") { togglepassword.type = "text"; eyechange.classList.remove("fa-eye-slash"); eyechange.classList.add("fa-eye") } else { togglepassword.type = "password"; eyechange.classList.remove("fa-eye"); eyechange.classList.add("fa-eye-slash") } }) }) </script> <script> $(document).ready(function () { generateCaptcha(); // Refresh Captcha on button click $("#refresh-captcha").click(function () { generateCaptcha(); $("#captcha-input").val("").removeClass("is-invalid"); }); // Handle form submission $("#form1").submit(function (event) { event.preventDefault(); // Prevent default form submission const captchaInput = $("#captcha-input").val(); const captchaCode = sessionStorage.getItem("captchaCode"); if (captchaInput !== captchaCode) { Swal.fire({ icon: "error", title: "Invalid CAPTCHA", text: "Please try again.", timer: 2000, toast: true, position: 'center', showConfirmButton: false }); generateCaptcha(); $("#captcha-input").val("").addClass("is-invalid"); return; // Stop further execution } // Prepare form data for AJAX request const formData = $(this).serialize(); const loginUrl = "login"; $("#log-btn").attr("disabled", true).text("Logging in..."); // AJAX request for login $.ajax({ url: loginUrl, type: "POST", data: formData, success: function (response) { $("#log-btn").removeAttr("disabled").text("Login"); if (response.result === 1) { Swal.fire({ icon: "success", title: response.message, timer: 3000, toast: true, position: 'center', showConfirmButton: false, timerProgressBar: true }); $("#form1")[0].reset(); generateCaptcha(); const role = response.role; if (role == 0) { window.location.href = "<?php echo base_url('admin-homepage');?>"; } else if (role == 1) { window.location.href = "<?php echo base_url('home');?>"; } else { window.location.href = "<?php echo base_url('user-homepage');?>"; } } else { Swal.fire({ icon: "error", title: response.message }); } }, error: function (xhr, status, error) { $("#log-btn").removeAttr("disabled").text("Login"); Swal.fire({ icon: "error", title: "Login failed", text: xhr.responseText || error }); generateCaptcha(); } }); }); // Generate CAPTCHA function generateCaptcha() { const canvas = $("#captcha")[0]; const context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; let captchaString = ""; for (let i = 0; i < 3; i++) { const randomChar = characters.charAt(Math.floor(Math.random() * characters.length)); captchaString += randomChar; context.font = `${20 + Math.random() * 10}px Arial`; context.fillStyle = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`; const x = 20 + i * 30; const y = canvas.height / 2 + Math.random() * 10 - 5; context.fillText(randomChar, x, y); } sessionStorage.setItem("captchaCode", captchaString); } }); </script> </html>