{% extends "themes/" + sysSettings.systemTheme + "/layout.html" %}
{% from "security/_macros.html" import render_field_with_errors, render_field %}
{% from "security/custom_macros.html" import fields_errors %}

{% block head %}
<title>{{sysSettings.siteName}} - Register</title>

<script type="text/javascript" src="/static/vendor/socketio/js/socket.io.js"></script>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
                <div class="card my-5 shadow text-left">
                    <h5 class="card-header text-white bg-dark mb-3">
                        Register
                    </h5>
                    <div class="card-body">
                        <div>
                            {{fields_errors(register_user_form.username,register_user_form.email,register_user_form.password)}}
                            <form action="{{ url_for_security('register') }}" onsubmit="return validateForm();" method="POST" name="register_user_form">
                                {% for provider in SystemOAuthProviders %}
                                <div class="my-2">
                                    <a href="/oauth/login/{{provider.name}}" class="btn btn-lg btn-block shadow" style="background-color:{{provider.displayColor}};border-color:{{provider.displayColor}};color:white;">
                                        {% if provider.preset_auth_type =="Discord" %}<img class="float-left" src="/static/img/Discord-Logo-White.png" style="width:32px;height:32px;">{% endif %}
                                        {% if provider.preset_auth_type =="Reddit" %}<img class="float-left" src="/static/img/Reddit_logo.png" style="width:32px;height:32px;">{% endif %}
                                        {% if provider.preset_auth_type =="Facebook" %}<img class="float-left" src="/static/img/facebook.png" style="width:32px;height:32px;">{% endif %}
                                        Register With {{provider.friendlyName}}
                                    </a>
                                </div>
                                {% endfor %}
                                {% if SystemOAuthProviders != [] %}
                                <hr>
                                {% endif %}
                              {{ register_user_form.hidden_tag() }}
                                <b><i class="fas fa-user-circle"></i> Username</b><br>
                              {{ render_field(register_user_form.username, class_="form-control", autocomplete="off") }}
                                <b><i class="far fa-envelope"></i> Email Address</b><br>
                              {{ render_field(register_user_form.email, class_="form-control", autocomplete="off") }}
                                <b><i class="fas fa-key"></i> Password</b><br>
                              {{ render_field(register_user_form.password, class_="form-control", autocomplete="off") }}
                              {% if register_user_form.password_confirm %}
                                <b><i class="fas fa-key"></i> Confirm Password</b><br>
                                {{ render_field(register_user_form.password_confirm, class_="form-control") }}
                              {% endif %}
                              {% if recaptchaEnabled %}
                                  {% for error in register_user_form.recaptcha.errors %}
                                    {{ error }}
                                  {% endfor %}
                                  {{ register_user_form.recaptcha }}
                              {% endif %}
                              <br>
                              {{ render_field(register_user_form.submit, class_="form-control") }}
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript" charset="utf-8">
    var conn_options = {
        'sync disconnect on unload':true
    };

    var socket = io();
</script>

<script>

    document.getElementById('username').addEventListener('change', function() {
        document.getElementById('username').setCustomValidity('');
    });
    document.getElementById('email').addEventListener('change', function() {
        document.getElementById('email').setCustomValidity('');
    });

    function validateForm() {
        var validForm = true;

        // Check for Spaces in Username
        var usernameDiv = document.getElementById('username');
        usernameRegEx = new RegExp("[\\w]+$");
        if (usernameRegEx.test(usernameDiv.value) === false) {
            usernameDiv.setCustomValidity('Username Cannot Contain Special Characters');
            validForm = false;
        }

        var emailDiv = document.getElementById('email');
        emailRegEx = new RegExp('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$');
        if (emailRegEx.test(emailDiv.value) === false) {
            emailDiv.setCustomValidity('Must be a valid email');
            validForm = false;
        }

        return validForm;
    }
</script>
{% endblock %}