keksAccount/resources/views/account/register.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>Register</h3>
            <?php if(!empty($msg)) { ?>
            <div class="alert alert-warning" role="alert">
                <?php echo $msg; ?>
            </div>
            <?php } ?>
            <form method="post" id="register">
                <input name="invite" placeholder="Username" class="form-control" value="<?php echo $invite; ?>" style="display: none;">
                <b>Username:</b> <span id="msg_username" class="msg"></span>
                <?php
                if(!empty($username)) {
                    ?>
                    <input name="username" placeholder="Username" class="form-control" value="<?php echo $username; ?>" style="display: none;">
                    <input  class="form-control" value="<?php echo $username; ?>" disabled>
                    <?php
                } else {
                    ?>
                    <input name="username" placeholder="Username" class="form-control" value="<?php echo $username; ?>">
                <?php
                }
                ?>

                <b>Password:</b> <span id="msg_password" class="msg"></span>
                <input name="password" type="password" placeholder="Password" class="form-control">
                <b>E-Mail</b> <span id="msg_mail" class="mail"></span>
                <input type="email" placeholder="E-Mail" name="mail" class="form-control">
                <div id="captcha" style="padding-top:  10px;"></div>
                <input type="submit" class="btn btn-success" value="Register" style="margin-top: 10px;">
            </form>
        </div>
    </div>
<script language="JavaScript">

    function getCaptchaConfig() {
        $.ajax({
            type: "GET",
            url: "/api/v1/user/captcha",
            success: function (res) {
                captchaConfig = res.data;
                if(captchaConfig["register"]) {
                    grecaptcha.render('captcha', {
                        'sitekey' : captchaConfig["key"]
                    });
                }
                $("#loginButton").removeAttr('disabled');
            }
        });
    }
    $(window).on( "load", function() {
        getCaptchaConfig();
    });
    $(document).ready(function () {
        console.log("READY");

        $("#register").submit(function (e) {
            e.preventDefault();
            var form = $(this);
            $.ajax({
                type: "POST",
                url: "/api/v1/user/register",
                data: form.serialize(), // serializes the form's elements.
                success: function (data) {
                    window.location.href = "/gui/login";
                },
                error: function (data) {
                    $(".msg").each(function (key, e) {
                        console.log(e);
                        $(e).html("");
                    })
                    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"); ?>