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

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

{% block head %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.3/jquery.validate.min.js"></script>
    {# <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script> #}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"></script>
    {{ parent() }}
{% 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 %}
    {{ 'RESETTING_PASSWORD.TITLE'|trans({}) }}
{% endblock %}

{% block login_form %}
    <div>
        <input id="minLenght" type="checkbox" disabled style="margin-left: 5px;vertical-align: top;">
        <label id="minLenghtLabel">8 caractères minimum</label>
    </div>
    <div>
        <input id="oneUpper" type="checkbox" disabled style="margin-left: 5px;vertical-align: top;">
        <label id="oneUpperLabel">1 majuscule</label>
    </div>
    <div>
        <input id="oneNumber" type="checkbox" disabled style="margin-left: 5px;vertical-align: top;">
        <label id="oneNumberLabel">1 chiffre</label>
    </div>
    <div>
        <input id="oneSpecial" type="checkbox" disabled style="margin-left: 5px;vertical-align: top;">
        <label id="oneSpecialLabel">1 caractère spécial</label>
    </div>
    <form name="fos_user_resetting_form" method="post" action="{{ path('reset_password_reset') }}"
          id="reset_form_id" class="fos_user_resetting_reset">
        <input type="hidden" id="submitResetPass" name="submitResetPass">
        <div id="fos_user_resetting_form">
            <div class="form-group"><label class="control-label required"
                                           for="fos_user_resetting_form_plainPassword_first">Nouveau mot de
                    passe</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fas fa-key"></i>
                    </div>
                    <input type="password" id="fos_user_resetting_form_plainPassword_first"
                           name="password" required="required"
                           autocomplete="new-password" class="form-control"></div>
            </div>
            <div class="form-group"><label class="control-label required"
                                           for="fos_user_resetting_form_plainPassword_second">Répéter le nouveau mot de
                    passe</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fas fa-key"></i>
                    </div>
                    <input type="password" id="fos_user_resetting_form_plainPassword_second"
                           name="passwordConfirmed" required="required"
                           autocomplete="new-password" class="form-control" readonly=""></div>
            </div>
            <input type="hidden" id="fos_user_resetting_form__token" name="fos_user_resetting_form[_token]"
                   class=" form-control" value="97TOq9gGI2RYbu888ucNYD1XLzltxM-rZYn4qbQ7iiE"></div>
        <span class="errorSecondPassword"></span><br>
        <div>
            <input type="submit" id="createSubmitBtn" value="Enregistrer mon nouveau mot de passe"
                   class="btn btn-primary btn-block">
        </div>
    </form>
{#    {{ form_start(form, {'action': path('app_reset_password', {'token': token}), 'attr': { 'id': "reset_form_id", 'class': 'fos_user_resetting_reset' }, 'invalid_message' :  'fos_user.password.mismatch2' }) }}#}
{#    {{ form_widget(form) }}#}
{#    <span class="errorSecondPassword"></span><br>#}
{#    <div>#}
{#        <input type="submit" id="createSubmitBtn" value="{{ 'RESETTING_PASSWORD.RESET.SUBMIT'|trans }}"#}
{#               class="btn btn-primary btn-block"/>#}
{#    </div>#}
{#    {{ form_end(form) }}#}
{#    </div>#}

    <script type="application/javascript">

        $("#fos_user_resetting_form_plainPassword_second").prop('readonly', true);
        // $("#createSubmitBtn").prop('disabled', true);
        $(document).ready(function () {
            function checkPassword(inputPassword) {
                // let inputPassword = document.getElementById("fos_user_resetting_form_plainPassword_first");
                let password = inputPassword.value;
                const patternMinLenght = /^.{8,}$/gi;
                const patternOneUpper = /[A-Z]/;
                const patternOneNumber = /[0-9]/;
                const patternOneSpecial = /[^\w\s]|_/;

                let isMinLenght = isPatternOneUpper = isPatternOneNumber = isPatternOneSpecial = false;
                if (password.match(patternMinLenght)) {
                    document.getElementById("minLenght").checked = true;
                    document.getElementById("minLenghtLabel").style.color = "green";
                    isMinLenght = true;

                } else {
                    document.getElementById("minLenght").checked = false;
                    document.getElementById("minLenghtLabel").style.color = "red";
                }

                if (password.match(patternOneUpper)) {
                    document.getElementById("oneUpper").checked = true;
                    document.getElementById("oneUpperLabel").style.color = "green";
                    isPatternOneUpper = true;
                } else {
                    document.getElementById("oneUpper").checked = false;
                    document.getElementById("oneUpperLabel").style.color = "red";
                }

                if (password.match(patternOneNumber)) {
                    document.getElementById("oneNumber").checked = true;
                    document.getElementById("oneNumberLabel").style.color = "green";
                    isPatternOneNumber = true;
                } else {
                    document.getElementById("oneNumber").checked = false;
                    document.getElementById("oneNumberLabel").style.color = "red";

                }

                if (password.match(patternOneSpecial)) {
                    document.getElementById("oneSpecial").checked = true;
                    document.getElementById("oneSpecialLabel").style.color = "green";
                    isPatternOneSpecial = true;
                } else {
                    document.getElementById("oneSpecial").checked = false;
                    document.getElementById("oneSpecialLabel").style.color = "red";
                }
                if (isMinLenght && isPatternOneNumber && isPatternOneUpper && isPatternOneSpecial) {
                    inputPassword.style.border = "1px solid green";
                    $("#fos_user_resetting_form_plainPassword_second").prop('readonly', false);
                    $("#fos_user_resetting_form_plainPassword_second")[0].value = ""
                } else {
                    inputPassword.style.border = "1px solid red";
                }
            }

            $("#fos_user_resetting_form_plainPassword_first")[0].addEventListener('keyup', (event) => {
                checkPassword(document.getElementById("fos_user_resetting_form_plainPassword_first"));
            });
            $("#fos_user_resetting_form_plainPassword_first")[0].addEventListener('click', (event) => {
                $("#fos_user_resetting_form_plainPassword_second").val(null);
                document.getElementById("fos_user_resetting_form_plainPassword_second").style.borderColor = "#d2d6de";
            });

            $("#reset_form_id").submit(function (event) {
                if ($("#fos_user_resetting_form_plainPassword_second")[0].value === $("#fos_user_resetting_form_plainPassword_first")[0].value) {
                    $("#fos_user_resetting_form_plainPassword_second")[0].style.border = "1px solid green";
                    $(".errorSecondPassword").css({'display': 'none'});
                    return true;
                } else {
                    $("#fos_user_resetting_form_plainPassword_second")[0].style.border = "1px solid red";
                    $(".errorSecondPassword").css({'display': 'block'});
                    $(".errorSecondPassword").text('Le champ "répéter le nouveau mot de passe" est différent, merci de saisir un mot de passe identique');
                    event.preventDefault();
                }
            });
        });

    </script>


{% endblock %}