EVOLUTION-NINJA

Edit File: login.php

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Skill Matrix</title>

<link rel="stylesheet" href="<?php echo base_url('public/assets/css/login.css');?>" />
 
    
    
    <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=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">
    
    
    <script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script>
    <script src="<?php echo base_url('public/assets/toastr/toastr.min.js');?>"></script>
    <link rel="stylesheet" href="<?php echo base_url('public/assets/toastr/toastr.min.css');?>">
  </head>
  <body>
  <div class="login-page">
        <div class="login-details">
            <img src="public/assets/images/converted-image.png" alt="GTRAC LOGO" class="logo-img">
            <div class="login-form">
                <img src="public/assets/images/User_cicrle_duotone.jpg" alt="">
                <h6>Login</h6>
                <form id='loginform'>
                    <label for="email" class="labels"  >E-Mail</label></br>
                    <input type="email" id="email" class="inp" name="email" required>
                    <div class='password-container'>
                    <label for="password" class="labels" >Password</label></br>
                    <input type="Password" id="password" class="inp password-input"  name="password" required>
                    <i class="fa fa-eye-slash" aria-hidden="true"  id="togglePassword"></i>
                    </div>
    
                    <div class="remember-forget">

</div>
                    </div>
                    <div class="butt">
                        <button class="btn" id="log-btn">
                            Login
                        </button>
                    </div>

</form>

</div>
            <div class="guidelines-detail">
                <div class="infos">
                    <img src="public/assets/images/privacy policy 1.jpg" alt="">
                    <a href="">
                        <p>Privacy policy</p>
                    </a>
                </div>

<div class="infos">
                    <img src="public/assets/images/T&C Contact us 1.jpg" alt="">
                    <a href="">
                        <p>T&C Contact us</p>
                    </a>
                </div>

<div class="infos">
                    <img src="public/assets/images/Info & Help 1.jpg" alt="">
                    <a href="">
                        <p>Info & Help</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <style>
    .password-container{position: relative}

#togglePassword {
    position: absolute;
    top: 69%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}
</style>

eyebtn.classList.add("fa-eye")
      }
      else{
        pass_input.type="password";
        eyebtn.classList.remove("fa-eye");
        eyebtn.classList.add("fa-eye-slash")
      }
  })
</script>
    <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).ready(function () {
            $('#loginform').submit(function (e) {
                e.preventDefault();

formdata = new FormData($(this)[0]);
                const captcha = document.getElementById("image").innerHTML;
                const usercaptcha = document.getElementById('usercaptcha').value;
                if (captcha == usercaptcha) {
                    $('#log-btn').text('loding');
                    $('#log-btn').attr('disabled', 'disabled');
                    $.ajax({
                        type: 'post',
                        url: '<?php echo base_url("user-login");?>',
                        data: formdata,
                        contentType: false,
                        processData: false,
                        success: function (response) {
                            console.log(response);
                            if (response.result == 1) {
                                $("#log-btn").removeAttr('disabled');
                                $("#log-btn").text("Login");
                                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('student-list');?>";
                                        }else{
                                            window.location.href = "<?php echo base_url('mark-attendance');?>";
                                        }
                                    })
                            } else if (response.result == 0) {
                                $("#log-btn").removeAttr('disabled');
                                $("#log-btn").text("Login");
                                Swal.fire({
                                    icon: "error",
                                    title: response.message
                                });
                            } else {
                                $("#log-btn").removeAttr('disabled');
                                $("#log-btn").text("Login");
                                Swal.fire({
                                    icon: "error",
                                    title: response.message
                                });
                            }

},
                        error: function (xhr, textStatus, errorThrown) {
                            console.error(xhr.responseText);
                        }
                    })
                } else if (usercaptcha == '') {
                    toastr.error('Please enter captcha');
                } else {
                    toastr.error('Invalid captcha');
                }
            })
        })
    </script>
    <script>
        let captcha;
        function generate() {
            document.getElementById("usercaptcha").value = "";

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

const randomchar =
                "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

for (let i = 1; i < 5; i++) {
                uniquechar += randomchar.charAt(
                    Math.random() * randomchar.length)
            }

captcha.innerHTML = uniquechar;
        }

generate()
    </script>
  </body>
</html>