<div  class="clear bodysize page">
<?php if (!empty($data['oAuth_data'])) { ?>
    <div class="register_oauth_box">
        <?= ($data['oAuth_data']) ?>
    </div>
<?php } ?>
<div class="login_box">
    <form  id="login_form" action="#"  method="post">
        <h1><?= $LNG['L_LOGIN'] ?></h1>
        <p>
            <label for="email"><?= $LNG['L_EMAIL'] ?></label>
            <input id="email" name="email" required="required" type="text" maxlength="<?= $cfg['smbasic_max_email'] ?>" minlength="<?= $cfg['smbasic_min_email'] ?>" placeholder="<?= $LNG['L_EMAIL_EXAMPLE'] ?>"/>
        </p>
        <p>
            <label id="label_password" for="password"><?= $LNG['L_PASSWORD'] ?></label>
            <input id="password" name="password" required="required" type="password"  maxlength="<?= $cfg['smbasic_max_password'] ?>" minlength="<?= $cfg['smbasic_min_password'] ?>" placeholder="<?= $LNG['L_PASSWORD_EXAMPLE'] ?>" />
        </p>
        <p class="rememberme">
            <?php if ($cfg['smbasic_persistence']) { ?>
                <input  type="checkbox" name="rememberme" id="rememberme" value="1" />
                <label id="label_rememberme" for="rememberme"><?= $LNG['L_REMEMBERME'] ?></label>
            <?php } ?>
            <input type="checkbox" name="reset_password_chk" id="reset_password_chk" value="3" />
            <label  for="reset_password_chk"><?= $LNG['L_RESET_PASSWORD'] ?></label>
        </p>
        <p class="login button">
            <input type="submit" id="login" name="login" class="btnLogin" value="<?= $LNG['L_LOGIN'] ?>" />
        </p>
        <p class="login button">
            <input hidden type="submit" id="reset_password_btn" name="reset_password" class="btnReset" value="<?= $LNG['L_RESET_PASSWORD_BTN'] ?>" />
        </p>
        <p class="change_link">
            <?= $LNG['L_REGISTER_MSG'] ?>
            <a href="<?= $data['register_url'] ?>" class="to_register"><?= $LNG['L_REGISTER'] ?></a>
        </p>
    </form>
</div>

window.addEventListener("load", function () {
$('#reset_password_chk').click(function () {
    if (this.checked) {
        $('#login_form').trigger("reset");
        $('#reset_password_chk').prop('checked', true);
    } else {
        $('#login_form').trigger("reset");
        $('#reset_password_chk').prop('checked', false);
    }
    $('#password').toggle();
    $('#label_password').toggle();
    $('#rememberme').toggle();
    $('#label_rememberme').toggle();
    $('#login').toggle();
    $('#reset_password_btn').toggle();
});

$("#reset_password_btn").click(function () {
    $.post("", $("#login_form").serialize(),
            function (data) {
                console.log(data); //DEBUG
                var json = $.parseJSON(data);
                if (json[0].status == 1) {
                    $('#email').css("border", "2px solid red");
                    $('#email').css("box-shadow", "0 0 3px red");
                    alert(json[0].msg);
                } else if (json['0'].status == 2) {
                    $('#login_form').trigger("reset");
                    $('#password').toggle();
                    $('#label_password').toggle();
                    $('#rememberme').toggle();
                    $('#label_rememberme').toggle();
                    $('#login').toggle();
                    $('#reset_password_btn').toggle();
                    alert(json[0].msg);
                    return true;
                } else {
                    alert(json[0].msg);
                }
            });
    return false;
});

$("#login").click(function () {
    $('#login').attr('disabled', 'disabled');
    //Email Validation
    var reg = /^((([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+(.([a-z]|d|[!#$%&'*+-/=?^_`{|}~]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(([x01-x08x0bx0cx0e-x1fx7f]|x21|[x23-x5b]|[x5d-x7e]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(\([x01-x09x0bx0cx0d-x7f]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|d|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).)+(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])|(([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])([a-z]|d|-|.|_|~|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF])*([a-z]|[u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))).?$/i;

    var email = $("#email").val();
    var password = $("#password").val();
    //reset red borders
    $('#email').css("border", "1px solid black");
    $('#email').css("box-shadow", "0 0 0px black");
    $('#password').css("border", "1px solid black");
    $('#password').css("box-shadow", "0 0 0px black");
    // Checking for blank fields.
    if (email == '') {
        $('#email').css("border", "2px solid red");
        $('#email').css("box-shadow", "0 0 3px red");
        alert("Email is required");
    } else if (reg.test(email) == false) {
        $('#email').css("border", "2px solid red");
        $('#email').css("box-shadow", "0 0 3px red");
        alert("Email incorrect");
    } else if (password == '') {
        $('#password').css("border", "2px solid red");
        $('#password').css("box-shadow", "0 0 3px red");
        alert("Password incorrect");
    } else if (password.length < 5) {
        $('#password').css("border", "2px solid red");
        $('#password').css("box-shadow", "0 0 3px red");
        alert("Password too small");
    } else {
        $.post("", $("#login_form").serialize(),
                function (data) {
                    console.log(data); //DEBUG
                    var json = $.parseJSON(data);
                    if (json[0].status == 'ok') {
                        $("#login_form")[0].reset();
                        $(location).attr('href', json[0].msg);
                    } else if (json[0].status == 1) {
                        $('#email').css("border", "2px solid red");
                        $('#email').css("box-shadow", "0 0 3px red");
                        alert(json[0].msg);
                    } else if (json[0].status == 2) {
                        $('#password').css("border", "2px solid red");
                        $('#password').css("box-shadow", "0 0 3px red");
                        alert(json[0].msg);
                    } else {
                        alert(json[0].msg);
                    }
                });
    }
    $('#login').removeAttr("disabled");
    return false;
});