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>

<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>

<link rel="stylesheet" href="public/assets/css/font-awesome.min.css">

<link rel="stylesheet" href="public/assets/css/loginpage.css">

<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">

<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>
    
</head>
<style>

</style>

<body>

<div class="lo">
                    <label for="username" class="filednames">User Name</label>
                    <div class="inpfields">
                        
                        <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">

<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>
                        
                        <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>
                        
                        <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> &nbsp;&nbsp;|<a href="<?= base_url('/forgot-password') ?>" class="changeFields">Forgot Password ?</a>

</div>
    </section>

</body>

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>