{% macro password_check(field, level) %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>

<script>
  $('#submit').attr('disabled', true);
  $('#{{ field }}').after('<progress value="0" max="4" id="password-strength-meter"></progress><p id="password-strength-text"></p>');
  if(!$('#{{ field }}').length) {
    $('#submit').attr('disabled', false);
  }
  var strength = {
    0: "Bad",
    1: "Okay",
    2: "Good",
    3: "Very Good",
    4: "Strong"
  }
  flag = true
  var meter = document.getElementById('password-strength-meter');
  meter.hidden=true
  var text = $('#password-strength-text');

  $('#{{ field }}').keyup(check_pwd);
  $('#{{ field }}').change(check_pwd);

  function check_pwd(){
    if (flag){
      meter.hidden = false
      flag = false
    }
    var result = zxcvbn($(this).val());
    // Update the password strength meter
    meter.value = result.score;
    if(result.score >= 2) {
      $('#submit').attr('disabled', false);
    } else {
      $('#submit').attr('disabled', true);
    }
    // Update the text indicator
    if ($(this).val() !== "") {
      $(text).html("Strength: " + strength[result.score]); 
    } else {
      $(text).html("");
    }
  }
</script>

<style>
  progress {
    /* Reset the default appearance */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    margin: 10 auto 1em;
    width: 100%;
    height: 0.5em;
    background-color: rgba(0, 0, 0, 0.1);
  }

  /* Chrome */
  progress::-webkit-progress-value {
    background: rgba(0, 0, 0, 0.1); 
  }

   /* Webkit based browsers */
  progress[value^="1"]::-webkit-progress-value { background-color: red; }
  progress[value^="2"]::-webkit-progress-value { background-color: yellow; }
  progress[value^="3"]::-webkit-progress-value { background-color: orange; }
  progress[value^="4"]::-webkit-progress-value { background-color: green; }


  /* Gecko based browsers */
  progress[value^="1"]::-moz-progress-bar { background-color: red; }
  progress[value^="2"]::-moz-progress-bar { background-color: yellow; }
  progress[value^="3"]::-moz-progress-bar { background-color: orange; }
  progress[value^="4"]::-moz-progress-bar { background-color: green; }
</style>

{% endmacro %}