{{template "layout.html" .}}



{{define "content"}}

<div class="pwd-page-wrap">

<div class="pwd-page">

    <div class="card">

        <div class="card-body">

            <div class="user-page-head">
                <div class="user-page-head-main">
                    <h5 class="pwd-page-title">{{T "user_change_password"}}</h5>
                    <p class="pwd-page-desc">{{T "user_pwd_desc"}}</p>
                </div>
            </div>



            <form id="pwdForm" autocomplete="off">

                <div class="pwd-field">

                    <label for="oldPwd">{{T "user_pwd_current"}}</label>

                    <div class="pwd-input-wrap">

                        <input type="password" class="form-control" id="oldPwd" name="old_password" required autocomplete="current-password">

                        <button type="button" class="pwd-toggle" data-target="oldPwd" title="{{T "user_pwd_show"}}" aria-label="{{T "user_pwd_show"}}">

                            <i class='bx bx-show'></i>

                        </button>

                    </div>

                </div>



                <div class="pwd-field">

                    <label for="newPwd">{{T "user_pwd_new"}}</label>

                    <div class="pwd-input-wrap">

                        <input type="password" class="form-control" id="newPwd" name="new_password" required minlength="6" maxlength="32" autocomplete="new-password">

                        <button type="button" class="pwd-toggle" data-target="newPwd" title="{{T "user_pwd_show"}}" aria-label="{{T "user_pwd_show"}}">

                            <i class='bx bx-show'></i>

                        </button>

                    </div>

                    <p class="pwd-hint">{{T "user_pwd_hint"}}</p>

                </div>



                <div class="pwd-field">

                    <label for="confirmPwd">{{T "user_pwd_confirm"}}</label>

                    <div class="pwd-input-wrap">

                        <input type="password" class="form-control" id="confirmPwd" name="confirm_password" required autocomplete="new-password">

                        <button type="button" class="pwd-toggle" data-target="confirmPwd" title="{{T "user_pwd_show"}}" aria-label="{{T "user_pwd_show"}}">

                            <i class='bx bx-show'></i>

                        </button>

                    </div>

                </div>



                <div class="pwd-actions">

                    <button type="submit" class="btn btn-primary" id="pwdSubmitBtn">{{T "user_pwd_update"}}</button>

                    <a href="/user" class="btn-link-cancel">{{T "user_btn_cancel"}}</a>

                </div>

            </form>

        </div>

    </div>

</div>

{{template "public/oauth_bind_card" .}}

</div>



{{end}}



{{define "scripts"}}

<script>

(function() {

    var msgMismatch = {{json (T "user_pwd_mismatch")}};

    var msgMinLength = {{json (T "user_pwd_min_length")}};

    var msgUpdated = {{json (T "user_pwd_updated")}};

    var msgFailed = {{json (T "user_failed")}};

    var btnUpdate = {{json (T "user_pwd_update")}};

    var btnUpdating = {{json (T "user_pwd_updating")}};



    $('.pwd-toggle').on('click', function() {

        var target = document.getElementById($(this).data('target'));

        var icon = $(this).find('i');

        if (!target) return;

        if (target.type === 'password') {

            target.type = 'text';

            icon.removeClass('bx-show').addClass('bx-hide');

        } else {

            target.type = 'password';

            icon.removeClass('bx-hide').addClass('bx-show');

        }

    });



    $('#pwdForm').on('submit', function(e) {

        e.preventDefault();

        var newPwd = $('#newPwd').val();

        var confirmPwd = $('#confirmPwd').val();

        if (newPwd !== confirmPwd) {

            BootstrapModal.msg(msgMismatch, {icon: 2});

            return;

        }

        if (newPwd.length < 6) {

            BootstrapModal.msg(msgMinLength, {icon: 2});

            return;

        }



        var btn = $('#pwdSubmitBtn');

        btn.prop('disabled', true).text(btnUpdating);



        $.post('/api?mod=user&act=password', {

            old_password: $('#oldPwd').val(),

            new_password: newPwd

        }, function(res) {

            if (res.success) {

                BootstrapModal.msg(msgUpdated, {icon: 1});

                $('#pwdForm')[0].reset();

            } else {

                BootstrapModal.msg(res.message || msgFailed, {icon: 2});

            }

        }, 'json').always(function() {

            btn.prop('disabled', false).text(btnUpdate);

        });

    });

})();

</script>

{{end}}