sftpgo/templates/webadmin/folder.html

<!--
Copyright (C) 2024 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}}" class="card-title section-title"></h3>
    </div>
    <div class="card-body">
        {{- if eq .Mode 3}}
        <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 fw-semibold">
                    <h4 class="text-gray-900 fw-bold">
                        <span data-i18n="virtual_folders.template_title">Create one or more new folders from this template</span>
                    </h4>
                    <div class="fs-6 text-gray-800 pe-7">
                        <p data-i18n="general.template_placeholders" class="mt-5">The following placeholders are supported</p>
                        <ul>
                            <li><span class="text-info">%name%</span>, <span data-i18n="virtual_folders.template_name_placeholder">replaced with the specified folder name</span></li>
                        </ul>
                        <p data-i18n="virtual_folders.template_help">The generated folders can be saved or exported. Exported folders can be imported from the "Maintenance" section of this SFTPGo instance or another.</p>
                    </div>
                </div>
            </div>
        </div>
        {{- end}}
        {{- template "errmsg" .Error}}
        <form id="folder_form" enctype="multipart/form-data" action="{{.CurrentURL}}" method="POST" autocomplete="off" {{if eq .Mode 3}}target="_blank"{{end}}>
            {{- if eq .Mode 3}}
            <div class="card mt-10">
                <div class="card-header bg-light">
                    <h3 data-i18n="title.folders" class="card-title section-title-inner">Folders</h3>
                </div>
                <div class="card-body">
                    <div id="template_folders">
                        <div class="form-group">
                            <div data-repeater-list="template_folders">
                                <div data-repeater-item>
                                    <div class="form-group row">
                                        <div class="col-md-9 mt-3 mt-md-8">
                                            <input data-i18n="[placeholder]virtual_folders.name" type="text" class="form-control" name="tpl_foldername" autocomplete="off" spellcheck="false" value="" />
                                        </div>
                                        <div class="col-md-3 mt-3 mt-md-8">
                                            <a href="#" data-repeater-delete
                                                class="btn btn-light-danger">
                                                <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>
                                                <span data-i18n="general.delete">Delete</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mt-5">
                            <a href="#" data-repeater-create class="btn btn-light-primary">
                                <i class="ki-duotone ki-plus fs-3"></i>
                                <span data-i18n="general.add">Add</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" name="name" id="idFolderName" value="{{.Folder.Name}}">
            {{- else}}
            <div class="form-group row">
                <label for="idFolderName" data-i18n="general.name" class="col-md-3 col-form-label">Name</label>
                <div class="col-md-9">
                    <input id="idFolderName" type="text" placeholder="" name="name" value="{{.Folder.Name}}" maxlength="255" autocomplete="off"
                        spellcheck="false" required {{if ge .Mode 2}}class="form-control-plaintext readonly-input" readonly{{else}}class="form-control"{{end}} />
                </div>
            </div>
            {{- end}}

            <div class="form-group row mt-10">
                <label for="idDescription" data-i18n="general.description" class="col-md-3 col-form-label">Description</label>
                <div class="col-md-9">
                    <input id="idDescription" type="text" class="form-control" name="description" value="{{.Folder.Description}}" maxlength="255">
                </div>
            </div>

            {{- template "fshtml" .FsWrapper}}

            <div class="d-flex justify-content-end mt-12">
                <input type="hidden" name="_form_token" value="{{.CSRFToken}}">
                {{- if eq .Mode 3}}
                <button type="submit" id="form_generate_submit" class="btn btn-secondary px-10 me-10" name="form_action" value="export_from_template">
                    <span data-i18n="virtual_folders.submit_export" class="indicator-label">
                        Generate and export folders
                    </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>
                {{- end}}
                <button type="submit" id="form_submit" class="btn btn-primary px-10" name="form_action" value="submit">
                    <span {{if eq .Mode 3}}data-i18n="virtual_folders.submit_generate"{{else}}data-i18n="general.submit"{{end}} 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 {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}} src="{{.StaticURL}}/assets/plugins/custom/formrepeater/formrepeater.bundle.js"></script>
<script type="text/javascript" {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
    function onFilesystemChanged(val){
        $('.form-group.fsconfig').hide();
        $('.form-group.fsconfig-'+val).show();
    }

    $(document).on("i18nload", function(){
        onFilesystemChanged('{{.Folder.FsConfig.Provider.Name}}');

        $('#idFilesystem').on("change", function(){
            onFilesystemChanged(this.value);
        });
    });

    $(document).on("i18nshow", function(){
        //{{- if eq .Mode 3}}
        initRepeater('#template_folders');
        initRepeaterItems();
        //{{- end}}

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