{% extends '@AdminLTE/FOSUserBundle/Resetting/request.html.twig' %}

{% block title %}
    INSTALL-BOIS - Connexion
{% endblock %}

{% block head %}
    <script type="text/javascript" src="{{ asset('externalJS/jquery.min.js') }}"></script>
{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('install-bois/css/main.css') }}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.png') }}" />
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}


{% block logo_login %}
    <img src="{{ asset("images/logo-header.png") }}" style="width: 270px;" alt="Logo Install Bois -premiere
    application pour revendeurs et installateurs de poêles et d'inserts qui les aide à concevoir et mettre en oeuvre
    leurs installations, et qui valorise leur travail auprès de leurs clients." title="Logo Install Bois"/>
{% endblock %}

{% block login_box_msg %}
    {% if error|default(false) %}
        {% if error.messageKey == 'Invalid credentials.' %}
            {% set errorMessage = "Vos identifiants sont incorrects" %}
        {% else %}
            {% set errorMessage = error.messageKey|trans(error.messageData, 'security') %}
        {% endif %}
        <div style="margin-bottom: 4%;" class="alert alert-danger">{{ errorMessage }}</div>
    {% endif %}


    {% for flashError in app.flashes('reset_password_error') %}
        <div style="margin-bottom: 4%;"  class="alert alert-danger" role="alert">{{ flashError }}</div>
    {% endfor %}
    {{ 'RESETTING_PASSWORD.TITLE'|trans({}) }}
    <h5>Pour réinitialiser votre mot de passe, indiquez dans le champ ci-dessous l'adresse email rattachée à votre
        compte INSTALL-BOIS.<br> Vous recevrez un email pour choisir un nouveau mot de passe
    </h5>
{% endblock %}

{% block login_form %}
<form action="{{ path('reset_password_forgot_request') }}" method="POST" class="fos_user_resetting_request" id="request_password_form" novalidate="novalidate">
    <div class="form-group has-feedback" style="margin-top: 15px;">
        <input type="text" id="username" name="username" required="required" class="form-control" placeholder="{{ 'RESETTING_PASSWORD.REQUEST.USERNAME'|trans }}">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        <span id="emailNotValid" style="display: none;float: right;background-color: #BD582C;color: #FFFFFF;font-size: 10px;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;padding: 0 10px;margin-bottom: 5%;">
                L'email renseigné n'est pas valide
        </span>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <button id="btnRequestEmail" type="submit" class="btn btn-primary btn-block btn-flat">{{ 'RESETTING_PASSWORD.REQUEST.SUBMIT'|trans }}</button>
        </div>
    </div>
</form>
<script type="application/javascript">

    const validateEmail = (email) => {
        return email.match(
            /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        );
    };

    const validate = () => {
        const email = $('#username').val()
        if (validateEmail(email)) {
            document.getElementById("btnRequestEmail").disabled = false;
            $("#emailNotValid").hide();
        } else {
            document.getElementById("btnRequestEmail").disabled = true;
            $("#emailNotValid").show();
        }
        return false;
    }
    $('#username').on('keyup', validate);
</script>
{% endblock %}