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>Civix Works</title>
    <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="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">

.loginpage{
        overflow-x: hidden;
}

.captha-generater {
    background-color: green;
    padding: 8px 27px;
    margin: 0px 28px;
    border-radius: 7px;
    color: white;
    font-size: 23px;
}
</style>

<body>

<div class="col-sm-7 login">
                <div class="loginform">
                    <img src="public/assets/images/CIVIX JPG.svg" alt="Nirmithi Kendra Logo" class="nirmithilogo" height="128px"" width="550px" style="border-radius:10px;">
                    
                    <form id="form">
                        <div class="inpfields">
                            <input type="text" placeholder="username" name="username" id="username"  minlength="2" maxlength="50" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$|^[a-zA-Z0-9_-]{2,50}$" required>
                            <img src="public/assets/images/Frame-1.png" alt="usericon" class="inplogos">
                        </div>

<div class="inpfields" style="display:flex;">

</div>
                    </div>
                        <button type="submit" class="loginbutton" id="log-btn">Log In</button>
                    </form>
                </div>
            </div>

<div class="col-sm-5 loginimages">
                 
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" style="width: 100%;height:100%">
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <img class="d-block w-100" src="public/assets/images/nir1.png" alt="First slide">
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="public/assets/images/nir2.png" alt="Second slide">
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="public/assets/images/nir3.png" alt="Third slide">
                      </div>
                      <div class="carousel-item">
                        <img class="d-block w-100" src="public/assets/images/nir4.png" alt="4th slide">
                      </div>
                      
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </a>
                  </div>
            </div>
        </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>
    $('.carousel').carousel({
  interval:4000
})
</script>

const formdata = new FormData($(this)[0]);
            const captcha = document.getElementById("image").textContent.trim(); // Use textContent instead of innerHTML
            const usercaptcha = document.getElementById('usercaptcha').value.trim();

if (captcha === usercaptcha) {
                $('#log-btn').text('Loading...').attr('disabled', 'disabled'); // Improved loading state

$.ajax({
                    type: 'POST',
                    url: '<?php echo base_url("login");?>',
                    data: formdata,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                           if (response.result == 1) {
                            Swal.fire({
                                icon: "success",
                                title: response.message,
                                showConfirmButton: false,
                                timer: 1000,
                            }).then(function () {
                                if(response.role==0){
                                            window.location.href = "<?php echo base_url('Dashboard');?>";
                                        }else if(response.role==1){
                                            window.location.href = "<?php echo base_url('Dashboard');?>";
                                        }else{
                                            window.location.href = "<?php echo base_url('Dashboard');?>";
                                        }
                            });
                        } else {
                            Swal.fire({
                                icon: "error",
                                title: response.message || "An error occurred.",
                            });
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        console.error("AJAX Error:", textStatus, errorThrown);
                        $('#log-btn').removeAttr('disabled').text('Login'); // Reset button state
                        Swal.fire({
                            icon: "error",
                            title: "Something went wrong. Please try again later."
                        });
                    }
                });
            } else if (usercaptcha === '') {
                toastr.error('Please enter captcha');
            } else {
                toastr.error('Invalid captcha');
            }
        });
    });
</script>

function generate() {
        document.getElementById("usercaptcha").value = "";

captcha = document.getElementById("image");
        let uniquechar = "";

const randomchar = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for (let i = 0; i < 5; i++) { // Generate a 5-character captcha
            uniquechar += randomchar.charAt(Math.floor(Math.random() * randomchar.length));
        }

captcha.textContent = uniquechar; // Use textContent instead of innerHTML for better security
    }

generate(); // Generate captcha on page load
</script>

</html>