sftpgo/templates/webclient/changepassword.html

<!--
Copyright (C) 2023 Nicola Murino

This WebUI uses the KeenThemes Mega Bundle, a proprietary theme:

https://keenthemes.com/products/templates-mega-bundle

KeenThemes HTML/CSS/JS components are allowed for use only within the
SFTPGo product and restricted to be used in a resealable HTML template
that can compete with KeenThemes products anyhow.

This WebUI is allowed for use only within the SFTPGo product and
therefore cannot be used in derivative works/products without an
explicit grant from the SFTPGo Team (support@sftpgo.com).
-->
{{template "base" .}}

{{- define "page_body"}}
<div class="card shadow-sm">
    <div class="card-header bg-light">
        <h3 data-i18n="title.change_password" class="card-title text-primary">Change password</h3>
    </div>
    <div class="card-body">
        <div class="notice d-flex bg-light-primary rounded border-primary border border-dashed p-6 mb-5">
            <i class="ki-duotone ki-shield-tick fs-2tx text-primary me-4">
                <span class="path1"></span>
                <span class="path2"></span>
            </i>
            <div class="d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap">
                <div class="mb-3 mb-md-0">
                    <div class="fs-6 text-gray-800 fw-semibold pe-7">
                        <span data-i18n="change_pwd.info">
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{- template "errmsg" .Error}}
        <form id="change_pwd_form" action="{{.CurrentURL}}" method="POST" autocomplete="off">
            <div class="form-group row">
                <label data-i18n="change_pwd.current" class="col-md-3 col-form-label required">Current password</label>
                <div class="col-md-9">
                    <input type="password" class="form-control" placeholder="" name="current_password"
                        spellcheck="false" required />
                </div>
            </div>
            <div class="form-group row mt-10">
                <label data-i18n="change_pwd.new" class="col-md-3 col-form-label required">New password</label>
                <div class="col-md-9">
                    <input type="password" class="form-control" placeholder="" name="new_password1"
                        autocomplete="new-password" spellcheck="false" required />
                </div>
            </div>
            <div class="form-group row mt-10">
                <label data-i18n="change_pwd.confirm" class="col-md-3 col-form-label required">Confirm password</label>
                <div class="col-md-9">
                    <input type="password" class="form-control" placeholder="" name="new_password2"
                        autocomplete="new-password" spellcheck="false" required />
                </div>
            </div>
            <div class="d-flex justify-content-end mt-12">
                <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
                <button type="submit" id="form_submit" class="btn btn-primary px-10">
                    <span data-i18n="change_pwd.save" class="indicator-label">
                        Submit
                    </span>
                    <span data-i18n="general.wait" class="indicator-progress">
                        Please wait...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
            </div>
        </form>
    </div>
</div>
{{end}}

{{- define "extra_js"}}
<script type="text/javascript" {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
    KTUtil.onDOMContentLoaded(function () {
        $('#change_pwd_form').submit(function (event) {
            let submitButton = document.querySelector('#form_submit');
            submitButton.setAttribute('data-kt-indicator', 'on');
            submitButton.disabled = true;
        });
    });
</script>
{{- end}}