sftpgo/templates/webclient/profile.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 "title"}}{{.Title}}{{end}}

{{- define "page_body"}}
<div class="card shadow-sm">
    <div class="card-header bg-light">
        <h3 class="card-title text-primary">My profile - {{.LoggedUser.Username}}</h3>
    </div>
    <div class="card-body">
        {{- template "errmsg" .Error}}
        <form id="page_form" action="{{.CurrentURL}}" method="POST">
            <div class="form-group row">
                <label class="col-md-3 col-form-label">Email</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" id="idEmail" name="email" placeholder="" spellcheck="false"
                        value="{{.Email}}" maxlength="255" autocomplete="nope" {{if not .LoggedUser.CanChangeInfo}}readonly{{end}}>
                </div>
            </div>

            <div class="form-group row mt-10">
                <label class="col-md-3 col-form-label">Description</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" id="idDescription" name="description" placeholder=""
                        value="{{.Description}}" maxlength="255" {{if not .LoggedUser.CanChangeInfo}}readonly{{end}}>
                </div>
            </div>

            <div class="form-group row align-items-center mt-10">
                <label class="col-md-3 col-form-label">API key authentication</label>
                <div class="col-md-9">
                    <div class="form-check form-switch form-check-custom form-check-solid">
                        <input class="form-check-input" type="checkbox" id="idAllowAPIKeyAuth" name="allow_api_key_auth" {{if not .LoggedUser.CanChangeAPIKeyAuth}}disabled="disabled"{{end}} {{if .AllowAPIKeyAuth}}checked="checked"{{end}}/>
                        <label class="form-check-label fw-semibold text-gray-800" for="idAllowAPIKeyAuth">
                            Allow to impersonate yourself, in REST API, using an API key
                        </label>
                    </div>
                </div>
            </div>

            {{- if .LoggedUser.CanManagePublicKeys}}
            <div class="card card-rounded mt-10">
                <div class="card-header bg-light">
                    <h3 class="card-title">Public keys</h3>
                </div>
                <div class="card-body">
                    <div id="public_keys">
                        <div class="form-group">
                            <div data-repeater-list="public_keys">
                                {{- range $idx, $val := .PublicKeys}}
                                <div data-repeater-item>
                                    <div class="form-group row">
                                        <div class="col-md-9">
                                            <textarea class="form-control mt-3 mt-md-8" name="public_key" rows="4"
                                                placeholder="Paste your public key here">{{$val}}</textarea>
                                        </div>
                                        <div class="col-md-3">
                                            <a href="javascript:;" data-repeater-delete
                                                class="btn btn-light-danger mt-3 mt-md-8">
                                                <i class="ki-duotone ki-trash fs-5">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                    <span class="path3"></span>
                                                    <span class="path4"></span>
                                                    <span class="path5"></span>
                                                </i>
                                                Delete
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                {{- else}}
                                <div data-repeater-item>
                                    <div class="form-group row">
                                        <div class="col-md-9">
                                            <textarea class="form-control mt-3 mt-md-8" name="public_key" rows="4"
                                                placeholder="Paste your public key here"></textarea>
                                        </div>
                                        <div class="col-md-3">
                                            <a href="javascript:;" data-repeater-delete
                                                class="btn btn-light-danger mt-3 mt-md-8">
                                                <i class="ki-duotone ki-trash fs-5">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                    <span class="path3"></span>
                                                    <span class="path4"></span>
                                                    <span class="path5"></span>
                                                </i>
                                                Delete
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                {{- end}}
                            </div>
                        </div>

                        <div class="form-group mt-5">
                            <a href="javascript:;" data-repeater-create class="btn btn-light-primary">
                                <i class="ki-duotone ki-plus fs-3"></i>
                                Add
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {{- end}}
            <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 class="indicator-label">
                        Submit
                    </span>
                    <span 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"}}
{{- if .LoggedUser.CanManagePublicKeys}}
<script src="{{.StaticURL}}/assets/plugins/custom/formrepeater/formrepeater.bundle.js"></script>
<script type="text/javascript">
    KTUtil.onDOMContentLoaded(function () {
        $('#public_keys').repeater({
            initEmpty: false,

            show: function () {
                $(this).slideDown();
            },

            hide: function (deleteElement) {
                $(this).slideUp(deleteElement);
            }
        });


        $("#page_form").submit(function (event) {
            let submitButton = document.querySelector('#form_submit');
            submitButton.setAttribute('data-kt-indicator', 'on');
            submitButton.disabled = true;
            return true;
        });
    });
</script>
{{- end}}
{{- end}}