jumpserver/apps/users/templates/users/user_password_update.html

{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% load bootstrap3 %}

{% block custom_head_css_js %}
    <link href="{% static "css/plugins/cropper/cropper.min.css" %}" rel="stylesheet">
    <link href="{% static "css/plugins/sweetalert/sweetalert.css" %}" rel="stylesheet">
    <script src="{% static "js/plugins/sweetalert/sweetalert.min.js" %}"></script>
    <script type="text/javascript" src="{% static 'js/pwstrength-bootstrap.js' %}"></script>
    <script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
    <script src="{% static "js/jumpserver.js" %}"></script>

    <style>
        .crop {
            width: 200px;
            height: 150px;
            overflow: hidden;
        }

        .img-preview-sm img {
            width: 64px;
            height: 64px;
            margin: -75px 0 0 -100px;
        }

        img {
            max-width: 100%; /* This rule is very important, please do not ignore this! */
        }
    </style>
{% endblock %}
{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="panel-options">
                        <ul class="nav nav-tabs">
                            <li>
                                <a href="{% url 'users:user-profile-update' %}" class="text-center">{% trans 'Profile' %} </a>
                            </li>
                            {% if request.user.can_update_password %}
                            <li class="active">
                                <a href="{% url 'users:user-password-update' %}" class="text-center">{% trans 'Password' %} </a>
                            </li>
                            {% endif %}
                            {% if request.user.can_update_ssh_key %}
                            <li>
                                <a href="{% url 'users:user-pubkey-update' %}" class="text-center">{% trans 'Public key' %} </a>
                            </li>
                            {% endif %}
                        </ul>
                    </div>
                    <div class="tab-content" style="background-color: #ffffff">
                        <div class="wrapper wrapper-content animated fadeInRight">
                                <form method="post" class="form-horizontal" action="" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    {% bootstrap_field form.old_password layout="horizontal" %}
                                    {% bootstrap_field form.new_password layout="horizontal" %}
                                    {#  密码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>
                                    {% bootstrap_field form.confirm_password layout="horizontal" %}

                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <div class="col-sm-4 col-sm-offset-2">
                                            <button class="btn btn-white" type="reset">{% trans 'Reset' %}</button>
                                            <button id="submit_button" class="btn btn-primary" type="submit">{% trans 'Submit' %}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

{% block custom_foot_js %}
    <script src="{% static 'js/plugins/cropper/cropper.min.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 = idPassword.offset().top - $('.navbar').outerHeight(true) - $('.page-heading').outerHeight(true) - 10 + 34,
                left = 377,
                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 %}