{% extends "@FOSUser/layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}

{% block title %}
    Réinitialisation M.D.P
{% endblock %}

{% block stylesheets %}

    {{ parent() }}

{% endblock %}

{% block fos_user_width %}login-bloc{% endblock fos_user_width %}

{% block fos_user_title %}
    Réinitialisation du mot de passe
{% endblock fos_user_title %}

{% block fos_user_content %}

    {{ form_start(form, {'method': 'post', 'action': path('fos_user_resetting_reset', {'token': token}), 'attr': {'id': 'fos_user_resetting_reset_form', 'class': 'fos_user_resetting_reset_form' } }) }}

    <div class="row">
        <div class="col-xl-12 col-lg-12 col-sm-12">
            <div class="form-group mb-1">
                {{ form_label(form.plainPassword.first) }}
                {{ form_widget(form.plainPassword.first ,{'attr':{'class':'check-input-strength check-input check-input-required'}}) }}
                <div class="alert-validation-field alert_fos_user_resetting_form_plainPassword_first"></div>
            </div>
            <div class="password-strength-bloc mb-3">
                <div class="password-strength-text d-none" id="password-strength-text">
                    <span>Fiabilité: </span>
                    <span class="password-strength-text-status"
                          id="password-strength-text-status"></span>
                </div>
                <div class="password-strength-bar" id="password-strength-bar">
                    <div class="password-strength-bar-progress"
                         id="password-strength-bar-progress"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-12 col-lg-12 col-sm-12">
            <div class="mb-3">
                {{ form_label(form.plainPassword.second) }}
                {{ form_widget(form.plainPassword.second ,{'attr':{'class':'check-input check-input-required'}}) }}
                <div class="alert-validation-field alert_fos_user_resetting_form_plainPassword_second"></div>
            </div>
        </div>
    </div>

    <div class="mb-3 text-center">
        <button type="button" class="btn btn-primary validate-btn submit-form-reset">{{ 'resetting.reset.submit'|trans }}</button>
    </div>

    <div class="small">
        Allez vers la page login?
        <a href="{{ path('fos_user_security_login') }}"> Authentification</a>
    </div>

    {{ form_end(form) }}

{% endblock fos_user_content %}

{% block javascripts %}

    {{ parent() }}

    <script>
        $(".check-input-strength").on("keyup", function () {
            checkPasswordStrength($(this).val());
        });

        $('.fos_user_resetting_reset_form .submit-form-reset').on('click', function () {
            let bool = verifyRequiredFieldsAlert();
            if ($("#fos_user_resetting_form_plainPassword_first").val() != $("#fos_user_resetting_form_plainPassword_second").val()) {
                bool = false;
                $('.alert_fos_user_resetting_form_plainPassword_first').show().text('Les deux mots de passes ne sont pas identiques!');
            }
            if (bool) {
                $('.fos_user_resetting_reset_form').submit();
            }
        });
    </script>

{% endblock %}