keksAccount/resources/views/account/login.php

<?php include(__DIR__."/../layout/top.php"); ?>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script><br>
    <div class="row">
        <div class="col-md-12">
            <h3>Login</h3>
            <form method="post" id="login">
                <b>Username:</b> <span id="msg_username"></span>
                <input name="username" placeholder="Username" class="form-control">
                <b>Password:</b> <span id="msg_password"></span>
                <input name="password" type="password" placeholder="Password" class="form-control">
                <div id="captcha" style="padding-top:  10px;">

                </div>
                <input type="submit" id="loginButton" disabled class="btn btn-success" value="Login" style="margin-top: 10px;">
            </form>
            <hr>
            <a href="/gui/passwordReset">Forgot Password</a>
        </div>
    </div>
<script language="JavaScript">
    var captchaConfig = {};
    function getCaptchaConfig() {
        $.ajax({
           type: "GET",
           url: "/api/v1/user/captcha",
           success: function (res) {
                captchaConfig = res.data;
                if(captchaConfig["login"]) {
                    grecaptcha.render('captcha', {
                        'sitekey' : captchaConfig["key"]
                    });
                }
               $("#loginButton").removeAttr('disabled');
           }
        });
    }
    $(window).on( "load", function() {
        getCaptchaConfig();
    });
    $(document).ready(function () {
        getCaptchaConfig();
        console.log("READY");
        $("#login").submit(function (e) {
            e.preventDefault();
            var form = $(this);
            $.ajax({
                type: "POST",
                url: "/api/v1/user/login",
                data: form.serialize(), // serializes the form's elements.
                success: function (data) {
                    window.location.href = "/";
                },
                error: function (data) {
                    if(data.status == 422) {
                        $.each(data.responseJSON.data, function( key, value ) {
                            $("#msg_"+key).html(value[0]);
                        });
                    } else {
                        swal(data.responseJSON.msg, '', "error")
                    }
                    grecaptcha.reset();
                }
            });
        });
    });
</script>
<?php include(__DIR__."/../layout/bottom.php"); ?>