{% extends  "::base.html.twig"%}



        {% block dashboard %}

<script>

    var validatePass = 0;
    function checkpassword(elEvento, valor) {

        var passGood = 0;
        var caracteres = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZ";
        var teclas_especiales = [8, 37, 39, 46, 9];
        var format = /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;

        permitidos = caracteres;
        var evento = elEvento || window.event;
        var codigoCaracter = evento.charCode || evento.keyCode;
        var caracter = String.fromCharCode(codigoCaracter);
        var tecla_especial = false;
        for (var i in teclas_especiales) {
            if (codigoCaracter == teclas_especiales[i]) {
                tecla_especial = true;
                break;
            }
        }
        if (/[A-Z]/.test(valor)) {
            passGood++;
            //$("#capitalLetter").addClass('active');
            $("#spanCapital").addClass('btn-success');
            $("#spanCapital").removeClass('btn-danger');
            $("#spanCapital .fa-check").css('display', '');
            $("#spanCapital .fa-times").css('display', 'none');
        } else {
            //$("#capitalLetter").removeClass('active');
            $("#spanCapital").removeClass('btn-success');
            $("#spanCapital").addClass('btn-danger');
            $("#spanCapital .fa-check").css('display', 'none');
            $("#spanCapital .fa-times").css('display', '');
        }
        ;
        if (/[0-9]/.test(valor)) {
            passGood++;
            //$("#numberIni").addClass('active');
            $("#spanNum").addClass('btn-success');
            $("#spanNum").removeClass('btn-danger');
            $("#spanNum .fa-check").css('display', '');
            $("#spanNum .fa-times").css('display', 'none');
        } else {
            //$("#capitalLetter").removeClass('active');
            $("#spanNum").removeClass('btn-success');
            $("#spanNum").addClass('btn-danger');
            $("#spanNum .fa-check").css('display', 'none');
            $("#spanNum .fa-times").css('display', '');
        }
        ;
        if (format.test(valor)) {
            passGood++;
            // $("#caracterEspcial").addClass('active');
            $("#spanSpecial").addClass('btn-success');
            $("#spanSpecial").removeClass('btn-danger');
            $("#spanSpecial .fa-check").css('display', '');
            $("#spanSpecial .fa-times").css('display', 'none');
        } else {
            //$("#capitalLetter").removeClass('active');
            $("#spanSpecial").removeClass('btn-success');
            $("#spanSpecial").addClass('btn-danger');
            $("#spanSpecial .fa-check").css('display', 'none');
            $("#spanSpecial .fa-times").css('display', '');
        }
        ;
        if (valor.length >= 8) {
            passGood++;
            //$("#numCharacters").addClass('active');
            $("#spanNumber").addClass('btn-success');
            $("#spanNumber").removeClass('btn-danger');
            $("#spanNumber .fa-check").css('display', '');
            $("#spanNumber .fa-times").css('display', 'none');
        } else {
            //$("#capitalLetter").removeClass('active');
            $("#spanNumber").removeClass('btn-success');
            $("#spanNumber").addClass('btn-danger');
            $("#spanNumber .fa-check").css('display', 'none');
            $("#spanNumber .fa-times").css('display', '');
        }
        ;
        //alert(passGood);
        validatePass = passGood;
        return passGood;


    }
        $(function(){


            $('button').button();
            $('#changePass').click(function () {
                if (validatePass != 4) {

                    swal("Error!", "The password must follows all requirement", "error");
                    return false;
                }

                passOld = $('#passOld').val();
                passNew = $('#passNew').val();
                rePassNew = $('#rePassNew').val();
                if(passOld==''){
                    tipo='passOld';
                    msnj ='You must enter your current Password';
                    mensaje(tipo, msnj);
                    return false;
                };
                if(passNew==''){
                    tipo='passNew';
                    msnj ='You must enter your new password';
                    mensaje(tipo, msnj);
                    return false;
                };
                if(rePassNew != passNew){
                    tipo='rePassNew';
                    msnj ='Must match your new Password';
                    mensaje(tipo, msnj);
                    return false;
                };
                $('#cargar').css('display','block');
                $.ajax({
                    type: "POST",
                    async: true,
                    url: "{{ path('changePass') }}",
                    data: { $passOld:passOld, $passNew:passNew  }
                }).done(function( msg ) {
                            if (msg!='mal'){ 
                                $('#cargar').css('display','none'); 
                                $('.passwords input').val('');
                                msnj ='Your Password is Successfully Changed';
                                $( "#dialog-alert p" ).text(msnj);
                                $( "#dialog-alert" ).dialog({
                                autoOpen: true,
                                modal: true,
                                resizable:false,
                                buttons: {
                                        Ok: function() {
                                            $(this).dialog("close");

                                            {% if app.user.passexpirate == 1 %}
                                            location.reload()
                                            {% endif %}
                                        }
                                    }
                                });
                            }else if(msg=='mal'){
                                $('#cargar').css('display','none'); 
                                $('.passwords input').val('');
                                msnj ='Error: The current password does not match the password entered';
                                $( "#dialog-alert p" ).text(msnj);
                                $( "#dialog-alert" ).dialog({
                                autoOpen: true,
                                modal: true,
                                resizable:false,
                                buttons: {
                                        Ok: function() {
                                        $( this ).dialog( "close" );                                        
                                        }
                                    }
                                });
                                
                            }
                        });
            });
            
            function mensaje(tipo,msnj){
                $( "#"+tipo).focus();
                $( "#"+tipo).val('');
                $( "#dialog-alert p" ).text(msnj);
                $( "#dialog-alert" ).dialog({
                    autoOpen: true,
                    modal: true,
                    resizable:false,
                    buttons: {
                        Ok: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });
            }
            
});

    </script> 
        <div class="container-fluid">
    <div class="col-md-12 col-lg-12 col-xs-12">
  <div class="col-md-6 col-lg-6 col-xs-12 col-lg-offset-3 col-md-offset-3 col-lg-offset-3 table-bordered">
      <div class="modal-header">
          <h1 class="text-center">{{ 'profile.changepass' | trans }}</h1>
      </div>
      <div class="modal-body">
            <div class="form-group">
                <label>{{ 'profile.currentpass' | trans }}</label>
                    <input autocomplete="off" class="form-control input-medium"  type="password"  id="passOld" name="usuario[passOld]" />
                <!--<input type="text" class="form-control input-lg" placeholder="Usuario" name="_username" required>-->
            </div>
            <div class="form-group">
                         <label>{{ 'profile.newpass' | trans }}</label>
                <input type="password" class="form-control input-medium" id="passNew" name="usuario[passNew]"
                       onkeyup="return checkpassword(event, this.value)"/>

                <!--<input type="password" class="form-control input-lg" placeholder="Password" name="_password" required>-->
            </div>
            <div class="form-group">
                         <label>{{ 'profile.confirmpass' | trans }}</label>
                    <input type="password"  class="form-control input-medium"  id="rePassNew" name="usuario[rePassNew]" />
               <!-- <input type="submit" class="btn btn-primary btn-lg btn-block" value="Iniciar Sesion "/>-->
              
            </div>
          <div class="form-group">
              <label style="font-weight: bold">Password requirement:</label>
              <ul class="list-group">
                  <li class="list-group-item " id="capitalLetter">
                            <span class="btn-danger" id="spanCapital">
                                <i class="fa fa-check" style="display: none"></i>
                                <i class="fa fa-times"></i>
                            </span>
                      Must contain at least one capital letter

                  </li>
                  <li class="list-group-item" id="numberIni">
                            <span class="btn-danger" id="spanNum">
                                <i class="fa fa-check" style="display: none"></i>
                                <i class="fa fa-times"></i>
                            </span>
                      Must contain at least one number
                  </li>
                  <li class="list-group-item " id="caracterEspcial">
                            <span class="btn-danger" id="spanSpecial">
                                <i class="fa fa-check" style="display: none"></i>
                                <i class="fa fa-times"></i>
                            </span>
                      Must contain at least one special character
                  </li>
                  <li class="list-group-item" id="numCharacters">
                            <span class="btn-danger" id="spanNumber">
                                <i class="fa fa-check" style="display: none"></i>
                                <i class="fa fa-times"></i>
                            </span>
                      Must contain at least 8 characters
                  </li>
              </ul>
          </div>
      </div>
      <div class="modal-footer">
                    <input autocomplete="off" id="changePass"  class="btn btn-info" type="submit" name="submit_button" value="{{ 'profile.changepass' | trans }}">
          
      </div>
  </div>
    </div>
   </div>
        {% endblock %}