{% extends "layout.html" %}

{% block title %}
    Register
{% endblock %}

{% block main %}
    <form action="/register" method="post" id="form" class="needs-validation">
        <div class="form-group">
            <input autocomplete="off" id="username" autofocus class="form-control is-invalid"
             name="username" placeholder="Username" type="text" required/>
            <div class="invalid-feedback">Invalid username</div>
        </div>
        <div class="form-group">
            <input class="form-control" id="password" name="password" placeholder="Password"
            type="password" aria-describedby="passwordHelpInline" required/>
            <small id="passwordHelpInline" class="form-text text-muted">
            Have to contain at least one letter, number and symbol: [@_!#$%^&*()<>?/\|}{~:]</small>
        </div>
        <div class="form-group">
            <input class="form-control" id="confirmation" name="confirmation"
            placeholder="Confirmation" type="password" required/>
        </div>
        <button class="btn btn-primary" type="submit">Register</button>
    </form>
    <script>
              $(document).ready(function() {

                $("#form").submit(function() {

                    if (!$("#username").val()) {
                        alert('You should provide a username')
                        return false
                    }

                    else if (!$("#password").val()) {
                        alert('You should provide a password')
                        return false
                    }

                    else if  (!$("#confirmation").val()) {
                        alert('You should provide a confirmation')
                        return false
                    }

                    else if ($("#password").val() != $("#confirmation").val()) {
                        alert("confirmation invalid")
                        return false;
                    }

                    $.getJSON("/check", {username: $("#username").val()}, function(data) {
                        if (data.valid){
                            alert(Valid username)
                        }
                        else {
                            alert(Invalid username)
                        }
                    });
                    return false;

                });
    </script>