{% extends '_base_only_content.html' %}
{% load static %}
{% load i18n %}
{% load bootstrap3 %}
{% block html_title %}{% trans 'Reset password' %}{% endblock %}
{% block title %}{% trans 'Reset password' %}{% endblock %}

{% block content %}
    <form class="m-t" role="form" method="post" action="">
        {% csrf_token %}
        {% if errors %}
            <p class="red-fonts">{{ errors }}</p>
        {% endif %}
        {% if not token_invalid %}
        <div class="form-group">
            {% bootstrap_field form.new_password %}
            {% bootstrap_field form.confirm_password %}
            {#  密码popover  #}
            <div id="container">
                <div class="popover fade bottom in" role="tooltip" id="popover777" style=" display: none; width:260px;">
                    <div class="arrow" style="left: 50%;"></div>
                    <h3 class="popover-title" style="display: none;"></h3>
                    <h4>{% trans 'Your password must satisfy' %}</h4><div id="id_password_rules" style="color: #908a8a; margin-left:20px; font-size:15px;"></div>
                    <h4 style="margin-top: 10px;">{% trans 'Password strength' %}</h4><div id="id_progress"></div>
                    <div class="popover-content"></div>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary block full-width m-b">{% trans "Setting"  %}</button>
        {% endif %}
    </form>
{% endblock %}

{% block custom_foot_js %}
<script type="text/javascript" src="{% static 'js/pwstrength-bootstrap.js' %}"></script>
<script>
$(document).ready(function () {
    // 密码强度校验
    var el = $('#id_password_rules'),
        idPassword = $('#id_new_password'),
        idPopover = $('#popover777'),
        container = $('#container'),
        progress = $('#id_progress'),
        password_check_rules = {{ password_check_rules|safe }},
        minLength = 6,
        top = 146, left = 170,
        i18n_fallback = {
            "veryWeak": "{% trans 'Very weak' %}",
            "weak": "{% trans 'Weak' %}",
            "normal": "{% trans 'Normal' %}",
            "medium": "{% trans 'Medium' %}",
            "strong": "{% trans 'Strong' %}",
            "veryStrong": "{% trans 'Very strong' %}"
        };

    jQuery.each(password_check_rules, function (idx, rules) {
        if(rules.key === 'id_security_password_min_length'){
            minLength = rules.value
        }
    });

    // 初始化popover
    initPopover(container, progress, idPassword, el, password_check_rules, i18n_fallback);

    // 监听事件
    idPassword.on('focus', function () {
        idPopover.css('top', top);
        idPopover.css('left', left);
        idPopover.css('display', 'block');
    });
    idPassword.on('blur', function () {
        idPopover.css('display', 'none');
    });
    idPassword.on('keyup', function(){
        var password = idPassword.val();
        checkPasswordRules(password, minLength);
    })
})
 </script>
{% endblock %}
