{% extends base %}

{% block body_left %}

<style>
    .input-group label {
        width: 150px;
    }
</style>

    <div class="card">
        {% include common/title/base_title.html %}
    </div>


    <div class="card">
        <div class="error error-msg hide">
            {{error}}
        </div>

        <form id="changePasswordForm" action="" method="POST">
            <div class="input-group row">
                <label>账号名:</label>
                <span>{{_user_name}}</span>
            </div>
            
            <div class="input-group row">
                <label>旧的密码:</label>
                <input type="password" name="old_password" value="{{old_password}}">
            </div>

            <div class="input-group row">
                <label>新的密码:</label>
                <input type="password" name="new_password" value="{{new_password}}">
            </div>

            <div class="input-group row">
                <label>再次确认新密码:</label>
                <input type="password" name="confirmed_password" value="">
            </div>

            <div class="input-group row">
                <label>&nbsp;</label>
                <input class="btn" type="button" value="确认修改" onclick="xnote.requestChangePassword()"/>
            </div>
        </form>
    </div>

<script type="text/javascript">
xnote.displayErrorMessage = function(message) {
    if (message=="") {
        $(".error-msg").hide();
    } else {
        $(".error-msg").show().text(message);
    }
}
xnote.requestChangePassword = function() {
    var formData = $("#changePasswordForm").formData();
    xnote.http.post("/user/change_password", formData, function(resp) {
        if (resp.success) {
            xnote.toast("修改密码成功，正在跳转登录");
            setTimeout(function () {
                window.location.href = "/login";
            }, 1000);
        } else {
            xnote.displayErrorMessage(resp.message);
        }
    });
}
</script>

{% end %}

{% block body_right %}
    {% include settings/page/settings_sidebar.html %}
{% end %}