EVOLUTION-NINJA

Edit File: login.php

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>BLUE LEDGER</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
	 <link href="<?php echo base_url('admin_assets/css/harsha.css');?>" rel="stylesheet"/>
	 <link href="<?php echo base_url('admin_assets/assets/css/bootstrap.min.css');?>" rel="stylesheet"/>
	 
	 <link rel="stylesheet" href="<?php echo base_url('admin_assets/assets/css/font-awesome.min.css');?>" />

$password = '';
		$email = '';
		$remember = '';

if (isset($_COOKIE['password'])) {
			$password = $_COOKIE['password'];
		  }

if (isset($_COOKIE['email'])) {
			$email = $_COOKIE['email'];
		  }
		
		if (isset($_COOKIE['remember'])) {
			$remember = $_COOKIE['remember'];
		  }

?>
	<div class="container">
		<div class="col-md-offset-8 col-md-4 pannel" style="margin-top:19.5%;">		
			<div class="panel-heading">
				<div class="panel-title">Sign In</div>
			</div>
			<div style="padding-top:30px;" class="panel-body" >
				<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>						
				<form id="loginform" class="form-horizontal" role="form" method="post">								
					<div  class="input-group">
						<span class="input-group-addon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
						<input type="email" value="<?php if(empty($email)){echo "";}else{ echo $email;}?>" class="form-control email" placeholder="Email id *" id="email-id" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$" title="Example: abc@example.com" required="required" aria-required="true" >                                        
					</div>							
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-unlock-alt" aria-hidden="true"></i></span>
						<input id="login-password" type="password" value="<?=$password?>" class="form-control" name="password" placeholder="Password"  title="min 6 char with one uppercase lowercase and numeric char" required="required" aria-required="true" >
					</div>	
					
					<span id="SuccessMessage" class="success">Hurray! Your have successfully entered the captcha.</span>
		              <input type="text" id="UserCaptchaCode" class="CaptchaTxtField form-control" placeholder='Enter Captcha - Case Sensitive'>
		              <span id="WrongCaptchaError" class="error"></span>
		              <div class='CaptchaWrap'>
		                <div id="CaptchaImageCode" class="CaptchaTxtField">
		                  <canvas id="CapCode" class="capcode" width="100%" height="80"></canvas>
		                </div>
		                <input type="button" class="ReloadBtn" onclick='CreateCaptcha();'>
		              </div>

<div class="row" style="margin-bottom:10px;">
						<div class="checkbox padding col-sm-6 col-xs-8" style="padding-left: 34px;padding-top:0px !important;">
							<input id="login-remember" type="checkbox" name="remember" class="remember" value="1"> Remember me
						</div>							
						<div class="forgot pad col-sm-6 col-xs-4" style="    text-align: right;">
							<a id="btn-forgot" href="#" class="" data-toggle="modal" data-target="#forgotModal"> Forgot Password ?</a>
						</div>
					</div>												
					<button type="submit" class="btn center-block">Submit</button>
										
				</form> 
			</div> 
		</div>
    </div>
	<div id="forgotModal" class="modal fade" role="dialog">
	  <div class="modal-dialog">

<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h4 class="modal-title">Forgot Password ?</h4>
		  </div>
		  <div class="modal-body">
				<form id="loginform1" class="form-horizontal" role="form">
					<div style="margin-bottom: 25px" class="input-group">
						<span class="input-group-addon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
						<input type="email" class="form-control" placeholder="Email id *" id="email-id" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="Example: abc@example.com" required="required" aria-required="true"> 
					</div>
					<div style="margin-top:10px" class="form-group modal-sub">
						
						<div class="col-sm-12 controls">
						  <button type="submit"  class="btn btn-default pull-right">Verify Email-Id</button>
						</div>
					</div>
				</form>     
		  </div>
			
		</div>
		
	  </div>
	</div>
	<div class="container" style="color:white;margin-top:14%;">
		<div class="col-sm-12">
			<p style="text-align:center;color: #000000;">
				<i class="fa fa-copyright" aria-hidden="true"></i> 2020 All Rights Reserved   |   Developed By <a href="">Jay Blues Technologies</a>
			</p>
		</div>		
	</div>
</body>
</html>

body {
	background: url("<?php echo base_url('admin_assets/img/blue-ledger.svg'); ?>") no-repeat left top;
	background-size: 650px; /* or 'auto' or specific like '100px' */
	background-color:#f0f8ff; /* Light blue */
	height: 660px;
	overflow-y: hidden !important;
background-attachment: fixed;

}

.input-group{
	margin-bottom:25px;
}
.input-group-addon {
	background-color:#F3F3F3;
	border: none !important;
}

#UserCaptchaCode {
    padding: 15px 10px;
    outline: 0;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif
}

#CaptchaImageCode {
    text-align: center;
    margin-top: 15px;
    padding: 0 0;
    width: 300px;
    overflow: hidden
}

.capcode {
    font-size: 30px;
    display: block;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    letter-spacing: 1px;
    color: #ccc;
    font-family: 'Roboto Slab', serif;
    font-weight: 100;
    font-style: italic
}

.ReloadBtn {
    background: url(https://cdn3.iconfinder.com/data/icons/basic-interface/100/update-64.png) left top no-repeat;
    background-size: 100%;
    width: 32px;
    height: 32px;
    border: 0;
    outline: 0;
    position: absolute;
    bottom: 85px;
    right: 30px;
    outline: 0;
    cursor: pointer
}

.error {
    color: red;
    font-size: 12px;
    display: none
}

.success {
    color: green;
    font-size: 18px;
    margin-bottom: 15px;
    display: none
}

.callback-cont {
    box-shadow: 1px 0 4px 0 rgba(0, 0, 0, .15)
}

@media only screen and (min-width:991px) and (max-width:1258px) {
    .ReloadBtn {
        bottom: 15px!important;
        right: 28px!important
    }
}
</style>

$('#loginform').submit(function(e){    
        e.preventDefault();
         formdata = new FormData($(this)[0]);

var result = ValidateCaptcha();
	    if( $("#UserCaptchaCode").val() == "" || $("#UserCaptchaCode").val() == null || $("#UserCaptchaCode").val() == "undefined") {
	      $('#WrongCaptchaError').text('Please enter code given below in a picture.').show();
	      $('#UserCaptchaCode').focus();
	    } else {
	      if(result == false) { 
	        $('#WrongCaptchaError').text('Invalid Captcha! Please try again.').show();
	        CreateCaptcha();
	        $('#UserCaptchaCode').focus().select();
	      }
      else { 
        // $('#UserCaptchaCode').val('').attr('place-holder','Enter Captcha - Case Sensitive');
        // CreateCaptcha();
         $('#WrongCaptchaError').fadeOut(100);
        // $('#SuccessMessage').fadeIn(500).css('display','block').delay(5000).fadeOut(250);

$(".submit").text("Loading...");

$.ajax({

type   : 'post',
                url    : '<?php echo site_url("login")?>',
                data   : formdata,
                contentType: false,
                processData: false,
                                          
                  success:function(response){
                  response=jQuery.parseJSON(response);
                  console.log(response);

if(response.result==1 && response.user_type!='Client')
                    {
                      window.location = '<?php echo site_url("lead-home")?>';
                    }
                    else if(response.result==1 && response.user_type=='Client'){

window.location = '<?php echo site_url("add-tickets")?>';
                    }
                    else 
                    {
                        alert("Enter correct mail-id and password ");                  
                    }
                }
           });
        }
    }
       });  
   });

$('#loginform1').submit(function(e){    
        e.preventDefault();

formdata = new FormData($(this)[0]);

$(".submit").text("Loading...");

$.ajax({

type   : 'post',
                url    : '<?php echo site_url("verify-email")?>',
                data   : formdata,
                contentType: false,
                processData: false,
                                          
                  success:function(response){
                  response=jQuery.parseJSON(response);
                  console.log(response);

var id = response.id;

if(response.result==1)
                    {
                      window.location = '<?php echo site_url("/yaskawa/reset_password")?>/'+id;
                    }
                    else 
                    {
                        alert("Email-Id does not exists");                  
                    }
                }
            });
        });

var rem ='<?php echo $remember;?>';

if(rem=='1')
		{
			$('#login-remember').prop('checked', true);
		}else
		{
			$('#login-remember').prop('checked', false);
		}
</script>

if (localStorage.chkbx && localStorage.chkbx != '') {
            $('#login-remember').attr('checked', 'checked');
            $('#email-id').val(localStorage.email);
            $('#login-password').val(localStorage.password);
           
        } else {
            $('#login-remember').removeAttr('checked');
            $('#email-id').val('');
           	$('#login-password').val('');
        }

$('#login-remember').click(function() {

if ($('#login-remember').is(':checked')) {
                // save username and password
                localStorage.email = $('#email-id').val();
                localStorage.password = $('#login-password').val();
               
                localStorage.chkbx = $('#login-remember').val();
            } else {
                localStorage.usrname = '';
              
                localStorage.chkbx = '';
            }
        });
    });
</script>

// Create Captcha
function CreateCaptcha() {
  //$('#InvalidCapthcaError').hide();
  var alpha = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9');
                    
  var i;
  for (i = 0; i < 6; i++) {
    var a = alpha[Math.floor(Math.random() * alpha.length)];
    var b = alpha[Math.floor(Math.random() * alpha.length)];
    var c = alpha[Math.floor(Math.random() * alpha.length)];
    var d = alpha[Math.floor(Math.random() * alpha.length)];
    var e = alpha[Math.floor(Math.random() * alpha.length)];
    var f = alpha[Math.floor(Math.random() * alpha.length)];
  }
  cd = a + ' ' + b + ' ' + c + ' ' + d + ' ' + e + ' ' + f;
  $('#CaptchaImageCode').empty().append('<canvas id="CapCode" class="capcode" width="250" height="80"></canvas>')
  
  var c = document.getElementById("CapCode"),
      ctx=c.getContext("2d"),
      x = c.width / 2,
      img = new Image();

img.src = "https://pixelsharing.files.wordpress.com/2010/11/salvage-tileable-and-seamless-pattern.jpg";
  img.onload = function () {
      var pattern = ctx.createPattern(img, "repeat");
      ctx.fillStyle = pattern;
      ctx.fillRect(0, 0, c.width, c.height);
      ctx.font="46px Roboto Slab";
      ctx.fillStyle = '#ccc';
      ctx.textAlign = 'center';
      ctx.setTransform (1, -0.12, 0, 1, 0, 15);
      ctx.fillText(cd,x,55);
  };
  
  
}

// Validate Captcha
function ValidateCaptcha() {
  var string1 = removeSpaces(cd);
  var string2 = removeSpaces($('#UserCaptchaCode').val());
  if (string1 == string2) {
    return true;
  }
  else {
    return false;
  }
}

// Remove Spaces
function removeSpaces(string) {
  return string.split(' ').join('');
}

// Check Captcha
function CheckCaptcha() {
  var result = ValidateCaptcha();
  if( $("#UserCaptchaCode").val() == "" || $("#UserCaptchaCode").val() == null || $("#UserCaptchaCode").val() == "undefined") {
    $('#WrongCaptchaError').text('Please enter code given below in a picture.').show();
    $('#UserCaptchaCode').focus();
  } else {
    if(result == false) { 
      $('#WrongCaptchaError').text('Invalid Captcha! Please try again.').show();
      CreateCaptcha();
      $('#UserCaptchaCode').focus().select();
    }
    else { 
      $('#UserCaptchaCode').val('').attr('place-holder','Enter Captcha - Case Sensitive');
      CreateCaptcha();
      $('#WrongCaptchaError').fadeOut(100);
      $('#SuccessMessage').fadeIn(500).css('display','block').delay(5000).fadeOut(250);
    }
  }  
}

</script>