@{
    Layout = null;
    var complexPwd = ViewData["复杂密码"] != null;
}
<style>
    .error { font-size: 80%; font-weight: 400; margin: 0; }
</style>
<div class="modal" id="changePasswordModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改密码</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <div class="col-3 text-right">用户名</div>
                        <div class="col">@(User.GetUserName())</div>
                    </div>
                    <div class="form-group row">
                        <div class="col-3 text-right">旧密码</div>
                        <div class="col">
                            <input type="password" class="form-control" name="oldPassword" id="oldPassword" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-3 text-right">新密码</div>
                        <div class="col">
                            <input type="password" class="form-control" name="newPassword" id="newPassword" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-3 text-right">确认新密码</div>
                        <div class="col">
                            <input type="password" class="form-control" name="newPassword2" id="newPassword2" />
                        </div>
                    </div>
                </form>
                @if (complexPwd)
                {
                    <p class="text-danger small">* 为满足监管要求,密码必须至少12位长度并且同时包含大写字母、小写字母、数字和特殊字符。</p>
                }
                <div class="row mt-4">
                    <div class="col-3"></div>
                    <div class="col small" style="color:red;" id="changePasswordError"></div>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-primary" onclick="changePasswordCtrl.submit()">保存修改</button>
            </div>
        </div>
    </div>
</div>

<script>
    const changePasswordCtrl = (new function () {
        var validator,iscomplex='@(complexPwd?"1":"")'==='1';

        function setValidator() {

            var self = this;
            jQuery.validator.addMethod("checkPassword", function (value, element) {
                return self.checkPassword(value);
            }, "新密码必须包含大小写字母，数字，特殊字符，长度不小于12位");

            validator = $('#changePasswordModal').find('form').validate({
                rules: {
                    oldPassword: {
                        required: true
                    },
                    newPassword: {
                        required: true,
                        minlength: iscomplex ? 12 : 1,
                        checkPassword: iscomplex
                    },
                    newPassword2: {
                        required: true,
                        equalTo: "#newPassword"
                    }
                },
                messages: {
                    oldPassword: {
                        required: '必须填写'
                    },
                    newPassword: {
                        required: '必须填写',
                        minlength: '密码长度最少12位'
                    },
                    newPassword2: {
                        required: '必须填写',
                        equalTo: "确认新密码 和 新密码 必须一致"
                    }
                },
                highlight: function (element, errorClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass) {
                    $(element).removeClass('is-invalid');
                },
            });
        }

        this.showModal = function () {
            !validator && setValidator.call(this);
            $('#changePasswordModal').modal('show');
        };
        this.checkPassword = function (pwd) {
            var flags = 0;
            for (var ch of pwd) {

                if (ch >= 'A' && ch <= 'Z') {
                    flags |= 1;  //大写字母
                }
                else if (ch >= 'a' && ch <= 'z') {
                    flags |= 2;  //小写字母
                }
                else if (ch >= '0' && ch <= '9') {
                    flags |= 4;  //数字
                }
                else {
                    flags |= 8;  //特殊字符
                }
            }
            return flags === (1 | 2 | 4 | 8);
        };
        this.submit = function () {
            if (!validator.form()) return;
            var data = $('#changePasswordModal').find('form').serialize();
            main.post("/home/AjaxChangePassword", data).done(function () {
                location.reload();
                //$('#changePasswordModal').modal('hide');
            });
        };
    }());
</script>