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

{% block extra_style %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}bootstrap/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}bootstrap/bootstrap.popover.min.css" />
{% endblock %}

{% block main_content %}
<div class="new-narrow-panel vh">
    <h2 class="hd">{% trans "Password Modification" %}</h2>
    <form action="" method="post" class="con">{% csrf_token %}
        {% if force_passwd_change %}
        <p class="tip"><span class="icon-lightbulb" aria-hidden="true"></span> {% trans "Please update your password before continue." %}</p>
        {% endif %}
    <label for="id_old_password">{% trans "Current Password" %}</label><br />
    {{ form.old_password }}<br />     {{ form.old_password.errors }}
    <label for="id_new_password1">{% trans "New Password" %}</label><br />
    {{ form.new_password1 }}<br />    {{ form.new_password1.errors }}
    <div id="pwd_strength"></div>
    <label for="id_new_password2">{% trans "Confirm Password" %}</label><br />
    {{ form.new_password2 }}<br />    {{ 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" src="{{MEDIA_URL}}bootstrap/bootstrap.popover.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}bootstrap/bootstrap.min.js"></script>
<script type="text/javascript">
$('[type="password"]').addClass('input');
$('.new-narrow-panel').removeClass('vh');

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

$(function () {
    setupPasswordField("id_new_password1", passwd_tip, template);
});

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

    if (!old_pwd) {
        $('.error').html("{% trans "Current password cannot be blank" %}").removeClass('hide');
        return false;
    }
    if (!pwd1) {
        $('.error').html("{% trans "Password cannot be blank" %}").removeClass('hide');
        return false;
    }
    if (!pwd2) {
        $('.error').html("{% trans "Please enter the password again" %}").removeClass('hide');
        return false;
    }
    if (pwd1 != pwd2) {
        $('.error').html("{% trans "Passwords don't match" %}").removeClass('hide');
        return false;
    }
    if (!checkPasswordStrength(pwd1, {{strong_pwd_required}})) {
        $('.error').html(passwd_tip).removeClass('hide');
        return false;
    }
});
</script>
{% endblock %}
