<script src="https://www.google.com/recaptcha/api.js?render=<?php echo Config::get('RECAPTCHA_SITE_KEY'); ?>"></script>

<div class="container">
    <?php $this->renderFeedbackMessages(); ?>

    <div class="login-box" style="width: 50%; display: block;">
        <h2>Register a new account</h2>

        <form method="post" action="<?php echo Config::get('URL'); ?>register/register_action" id="register-form">
            <input type="text" pattern="[a-zA-Z0-9]{2,64}" name="user_name" placeholder="Username (letters/numbers, 2-64 chars)" required />
            <input type="text" name="user_email" placeholder="email address (a real address)" required />
            <input type="password" name="user_password_new" pattern=".{6,}" placeholder="Password (6+ characters)" required autocomplete="off" />
            <input type="hidden" name="g-recaptcha-response" id="recaptcha-response" />
            <input type="submit" value="Register" />
        </form>
    </div>
</div>

<script>
document.getElementById('register-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var form = this;
    grecaptcha.ready(function() {
        grecaptcha.execute('<?php echo Config::get('RECAPTCHA_SITE_KEY'); ?>', {action: 'register'}).then(function(token) {
            document.getElementById('recaptcha-response').value = token;
            form.submit();
        });
    });
});
</script>
