@extends('auth.base')

@section('content')
<div class="row page-heading">
  <div class="col-md-12 h3">Cambio de Cl&aacute;ve</div>
</div>
<br />
<form class="form-horizontal" method="post" action="{{url('', ['p' => 'auth', 'a' => 'do_change_pass'])}}">
  <div class="form-group">
    <div class="col-md-2">Cl&aacute;ve anterior</div>
    <div class="col-md-3"><input type="password" name="old" class="form-control" /></div>
    <div class="col-md-3" id="msg1"></div>
  </div>
  <div class="form-group">
    <div class="col-md-2">Cl&aacute;ve nueva</div>
    <div class="col-md-3"><input type="password" name="new" class="form-control" /></div>
    <div class="col-md-3" id="msg2"></div>
  </div>
  <div class="form-group">
    <div class="col-md-2">Repetir cl&aacute;ve</div>
    <div class="col-md-3"><input type="password" name="new2" class="form-control" /></div>
    <div class="col-md-3" id="msg3"></div>
  </div>
  <div class="form-group">
    <div class="col-md-offset-2 col-md-2"><button type="submit" class="form-control">Cambiar</button></div>
  </div>
</form>
@endsection

@push('scripts')
<script type="text/javascript">
$(document).ready(function() {
  var status = [0, 0, 0, 0];
  $("input[name='old']").blur(function(e) {
    $.post('{!!nUrl('auth', 'check_pass', ['ajax' => 'true'])!!}', {"password": $(this).val()}, function(data) {
      if (data == 'KO') {
        $('#msg1').html('<span class="label label-danger"><span class="glyphicon glyphicon-warning-sign"></span> Cl&aacute;ve anterior inv&aacute;lida.</span>');
        status[1] = 0;
      } else {
        $('#msg1').html('<span class="label label-success"><span class="glyphicon glyphicon-ok "></span></span>');
        status[1] = 1;
      }
    });
  })
	$("input[name='new']").blur(function(e) {
		var result = zxcvbn($(this).val(), user_inputs=[$("input[name='old']").val(), '{{\App\Contract\Auth::User()->name}}']);
    if (result.score < 3) {
      $('#msg2').html('<span class="label label-danger"><span class="glyphicon glyphicon-warning-sign"></span> Nivel ' + result.score + '</span>');
      status[2] = 0;
    } else {
      if (result.score == 3) {
        $('#msg2').html('<span class="label label-warning"><span class="glyphicon glyphicon-ok"></span> Nivel ' + result.score + '</span>');
      } else {
        $('#msg2').html('<span class="label label-success"><span class="glyphicon glyphicon-ok"></span> Nivel ' + result.score + '</span>');
      }
      status[2] = 1;
    }
	});
  $("input[name='new2']").blur(function(e) {
    var n = $("input[name='new']").val();
    if ($(this).val() != n) {
      $('#msg3').html('<span class="label label-danger"><span class="glyphicon glyphicon-warning-sign"></span> Las cl&aacute;ves no coinciden.</span>');
      status[3] = 0;
    } else {
      $('#msg3').html('<span class="label label-success"><span class="glyphicon glyphicon-ok"></span></span>');
      status[3] = 1;
    }
  });
  $("form").submit(function(e) {
    status[0] = status[1] & status[2] & status[3];
    if (!status[0]) {
      e.preventDefault();
    }
    return status[0];
  });
});
</script>
@endpush