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

{% block menuLeft %}

<a href="{{path('editDataUser')}}">Editar Perfil</a><br>
<a href="{{path('changePass')}}">Cambiar Contraseña</a><br>
{%endblock %}
        {% block body %}

<script>
        $(function(){
            $('button').button();
             $('#changePass').click(function(){            
                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" );                                        
                                        }
                                    }
                                });
                            }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="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">{{ 'Settle Password' | trans }}</h1>
      </div>
      <div class="modal-body">
          <div class="row">
              <div class="col-lg-12">
                  <h2>The new password must comply with the password policy:</h2>
                  <div style="margin-left: 20px">
                      <p>- It must not contain the name of the user's account in whole or in part</p>
                      <p>- It must contain characters from the following four categories:</p>
                      <p>- Characters of the English alphabet in capital letters (A to Z)</p>
                      <p>- Characters of the English alphabet in lowercase letters (a to z)</p>
                      <p>- Numbers (0 to 9)</p>
                      <p>- Non-alphabetic characters (for example!, $, #,%)</p>
                      <p>- The password must meet the password length requirements of the system. Minimum length of the password: 10.</p>
                      <p>- The password must meet the password requirements of the system. Number of passwords saved: 15.</p>
                      <p>- The password must meet the maximum password age requirements of the system. Maximum age of password: 90.</p>
                      <p>- The password must meet the minimum password requirements of the system. Minimum password age: 1.</p>

                  </div>

              </div>
          </div>
            <div class="form-group">
                         <label>{{ 'profile.newpass' | trans }}</label>
                    <input type="password"  class="form-control input-medium"  id="passNew" name="usuario[passNew]" />
                <!--<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>
      <div class="modal-footer">
                    <input autocomplete="off" id="changePass"  class="btn btn-info" type="submit" name="submit_button" value="{{ 'profile.savePassword' | trans }}">
          
      </div>
  </div>
    </div>
        {% endblock %}