{% extends theme("layout.html") %}
{% block head %}
    {{ super() }}

    <style type="text/css">

        label>span {
            color: deepskyblue;
        }

        .btn,
        .form-group>div>div,
        .form-control {
            border-radius: 0;
        }
    </style>
{% endblock head %}
{% block content %}
    <script>
        $(document).ready(function() {
            $("#change_password_form").delegate('#submit_button', 'click', function() {
                $.ajax({
                    url : '/api/user/_change_password',
                    type : 'POST',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data : JSON.stringify({old_password: $('#old_password').val(), password: $('#password').val()}),
                    error : function(data, textStatus, xhr) {
                        if (data.status === 401) {
                            alter_warning('当前密码有误！');
                        } else {
                            alter_danger(data.responseText);
                        }
                    },
                    success : function(data, textStatus, xhr) {
                        alter_success('密码修改成功！');
                        setTimeout(function() {
                            window.location.href="/";
                        }, 1000);
                    }
                });
            });

            $('#change_password_form').formValidation({
                framework: 'bootstrap4',
                icon: {
                    valid: 'fa fa-check',
                    invalid: 'fa fa-times',
                    validating: 'fa fa-refresh'
                },
                // Since the Bootstrap Button hides the radio and checkbox
                // We exclude the disabled elements only
                excluded: ':disabled',
                locale: 'zh_CN',
                fields: {
                    password: {
                        validators: {
                            notEmpty: {
                            },
                            stringLength: {
                                min: 6,
                                max: 128
                            }
                        }
                    }
                }
            })
                .on('success.field.fv', function(e, data) {
                    if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                        data.fv.disableSubmitButtons(true);
                    }
                });
        });
    </script>
    <div class="panel">
        <div class="panel-body">
            <h3 class="title-hero" style="text-transform: unset;">
                修改密码
            </h3>
            <div class="example-box-wrapper">
                <form id="change_password_form" class="form-horizontal bordered-row" action="javascript:;">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">当前密码</label>
                        <div class="col-sm-3">
                            <input title="当前密码" class="form-control" id="old_password" name="old_password" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">新密码</label>
                        <div class="col-sm-3">
                            <input title="新密码" class="form-control" id="password" name="password" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-3 pull-right">
                            <button id="submit_button" type="submit" class="btn btn-blue-alt" style="width: 180px; height: 40px; font-size: 16px;" disabled>确定</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock content %}