{% extends "accounts.html" %}
{% load i18n %}
{% block title %}{% trans "Password Modification" %}{% endblock %}

{% block main_panel %}
<div class="new-narrow-panel">
  <h2 class="hd">{% trans "Password Modification" %}</h2>
  <form action="" method="post" class="con">{% csrf_token %}
    <label for="id_old_password">{% trans "Current Password: " %}</label>
    {{ form.old_password }}     {{ form.old_password.errors }}
    <label for="id_new_password1">{% trans "New Password: " %}</label>
        {% if strong_pwd_required %}
            <span class="icon-question-sign" title="{% blocktrans %}{{min_len}} characters or more, include {{level}} types or more of these: letters(case sensitive), numbers, and symbols"{% endblocktrans%}></span>
        {% endif %}
    {{ form.new_password1 }}    {{ form.new_password1.errors }}
    <div id="pwd_strength"></div>
    <label for="id_new_password2">{% trans "Confirm Password: " %}</label>
    {{ form.new_password2 }}    {{ form.new_password2.errors }}

    <p class="error hide"></p>

    <input type="submit" value="{% trans "Submit" %}" class="submit" />
  </form>
</div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$('[type="password"]').addClass('input');

{% include "snippets/password_strength_js.html" %}

$("#id_new_password1").keyup(function() {
    var pwd = $(this).val();
    if ($.trim(pwd)) {
        var level = getStrengthLevel(pwd);
        showStrength(level);
    } else {
        $("#pwd_strength").html("");
    }
});

$('form').submit(function(){
    var old_pwd = $.trim($('input[name="old_password"]').val()),
        pwd1 = $.trim($('input[name="new_password1"]').val()),
        pwd2 = $.trim($('input[name="new_password2"]').val()),
        level = getStrengthLevel(pwd1);

        if (!old_pwd) {
            $('.error').removeClass('hide').html("{% trans "Current password cannot be blank" %}");
            return false;
        }
        if (!pwd1) {
            $('.error').removeClass('hide').html("{% trans "Password cannot be blank" %}");
            return false;
        }
        if (!pwd2) {
            $('.error').removeClass('hide').html("{% trans "Please enter the password again" %}");
            return false;
        }
        if (pwd1 != pwd2) {
            $('.error').removeClass('hide').html("{% trans "Passwords don't match" %}");
            return false;
        }
        {% if strong_pwd_required %}
            if (level < {{level}}) {
                $('.error').removeClass('hide').html("{% blocktrans %}{{min_len}} characters or more, include {{level}} types or more of these: letters(case sensitive), numbers, and symbols{% endblocktrans %}");
                return false;
            }
        {% endif %}
   });
</script>
{% endblock %}
