File: /var/www/html/company_app/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Login</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/startmin.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.error {
color: red;
}
.errorsuccess {
color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<span id="error-msg"></span>
<form role="form" id="login-form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" name="email" type="email" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<button type="button" id="login" class="btn btn-lg btn-success btn-block">Login</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/startmin.js"></script>
<script>
$(function() {
$("#error-msg").hide();
$('#login').click(function(e) {
let self = $(this);
e.preventDefault(); // prevent default submit behavior
self.prop('disabled', true);
var data = $('#login-form').serialize(); // get form data
// sending ajax request to login.php file, it will process login request and give response.
$("#error-msg").show();
$("#error-msg").html('<div class="errorsuccess">Please wait...</div>');
$.ajax({
url: 'include/functions.php?option=login',
type: "POST",
data: data,
}).done(function(res) {
// $(".errorsuccess").fadeOut(1500, function() {
// // Animation complete
// });
res = JSON.parse(res);
if (res['errorcode'] == '200') // if login successful redirect user to secure.php page.
{
errorMessage = '<div class="errorsuccess">Login Successfully.</div>';
$("#error-msg").html(errorMessage);
$(".error").fadeOut(1500, function() {
// Animation complete
});
location.href = "company/dashboard.php"; // redirect user to secure.php location/page.
} else {
var errorMessage = '';
// if there is any errors convert array of errors into html string,
//here we are wrapping errors into a paragraph tag.
//console.log(res['errormessage']);
var message = res['errormessage'];
errorMessage = '<div class="error">' + message + '</div>';
// place the errors inside the div#error-msg.
$("#error-msg").html(errorMessage);
$("#error-msg").show(); // show it on the browser, default state, hide
// remove disable attribute to the login button,
//to prevent multiple form submissions
//we have added this attribution on login from submit
$(".error").fadeOut(3000, function() {
// Animation complete
});
self.prop('disabled', false);
}
}).fail(function() {
alert("error");
}).always(function() {
self.prop('disabled', false);
});
});
});
</script>
</body>
</html>