<!DOCTYPE html>
<html>
<head>
    <title>Login - Chaski Invoice System</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="css/egm-login.css">
    
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.jpeg">
</head>
<body>
  <div class="wrapper fadeInDown">
    <div id="formContent">
      
      <div class="fadeIn first">

<br>
        <br>
        <img src="images/foundation.jpeg" id="icon" alt="User Icon" height="80" />
     
      </div>
      
      <form id="form-login">
        <span id="login_error_message"></span>        
        <input type="text" id="email" name="email" class="fadeIn second" maxlength="50" placeholder="Enter email">
        <div id="email_error_message" class="text-danger"></div>
        <input type="password" id="password" name="password" class="fadeIn third" maxlength="50" placeholder="Enter password">
        <div id="password_error_message" class="text-danger"></div>
        <input type="submit" class="fadeIn fourth" value="Login">
      </form>
      <div id="formFooter">
        <a class="underlineHover" target="blank" href="http://chaski.run/">www.chaski.run</a>
      </div>
    </div>
  </div>
</body>
</html>

<script src="vendor/jquery-3.4.1.min.js"></script>
<script>

$('#form-login').on('submit', function (e) {
        event.preventDefault();
        login();
    });

var error_user = false;
    var error_password = false;

$("#email").focusout(function () {
        check_email();
    });

$("#password").focusout(function () {
        check_password();
    });

function check_email() {
        var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
        var email_length = $("#email").val().length;

if ($.trim($('#email').val()) == '') {
            $("#email_error_message").html("Email is a required field.");
            $("#email_error_message").show();
        } else if (!(pattern.test($("#email").val()))) {
            $("#email_error_message").html("Invalid email address");
            $("#email_error_message").show();
            error_email = true;
        } else {
            $("#email_error_message").hide();
        }
    }

function login() {
        error_email = false;
        error_password = false;

check_email();
        check_password();

if (error_email == false && error_password == false) {
            data = $('#form-login').serialize();
            $.ajax({
                type: "POST",
                data: data,
                url: "check_login.php",
                dataType: "json",
                success: function (data) {
                    if (data.status == 'inactive') {
                        $('#login_error_message').html('<div class="alert alert-danger">' + data.error + '</div>');
                    } else if (data.status == 'success') {
                        window.location = "index.php";
                    } else if (data.status == 'error') {
                        $('#login_error_message').html('<div class="alert alert-danger">' + data.error + '</div>');
                    }
                },
                error: function () {
                    alert("Oops! Something went wrong.");
                }
            });
        } else {
            $('#login_error_message').html('<div class="alert alert-danger">Incorrect email or password.</div>');
        }
    }

</script>