vaultwarden-test/src/static/templates/admin/settings.hbs

<main class="container-xl">
    <div id="config-block" class="align-items-center p-3 mb-3 bg-secondary rounded shadow">
        <div>
            <h6 class="text-white mb-3">Configuration</h6>
            <div class="small text-white mb-3">
                NOTE: The settings here override the environment variables. Once saved, it's recommended to stop setting
                them to avoid confusion. This does not apply to the read-only section, which can only be set through the
                environment.
            </div>

            <form class="form accordion" id="config-form" onsubmit="saveConfig(); return false;">
                {{#each config}}
                {{#if groupdoc}}
                <div class="card bg-light mb-3">
                    <div class="card-header"><button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                            data-target="#g_{{group}}">{{groupdoc}}</button></div>
                    <div id="g_{{group}}" class="card-body collapse" data-parent="#config-form">
                        {{#each elements}}
                        {{#if editable}}
                        <div class="form-group row align-items-center" title="[{{name}}] {{doc.description}}">
                            {{#case type "text" "number" "password"}}
                            <label for="input_{{name}}" class="col-sm-3 col-form-label">{{doc.name}}</label>
                            <div class="col-sm-8 input-group">
                                <input class="form-control conf-{{type}}" id="input_{{name}}" type="{{type}}"
                                    name="{{name}}" value="{{value}}" {{#if default}} placeholder="Default: {{default}}"
                                    {{/if}}>

                                {{#case type "password"}}
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button"
                                        onclick="toggleVis('input_{{name}}');">Show/hide</button>
                                </div>
                                {{/case}}
                            </div>
                            {{/case}}
                            {{#case type "checkbox"}}
                            <div class="col-sm-3 col-form-label">{{doc.name}}</div>
                            <div class="col-sm-8">
                                <div class="form-check">
                                    <input class="form-check-input conf-{{type}}" type="checkbox" id="input_{{name}}"
                                        name="{{name}}" {{#if value}} checked {{/if}}>

                                    <label class="form-check-label" for="input_{{name}}"> Default: {{default}} </label>
                                </div>
                            </div>
                            {{/case}}
                        </div>
                        {{/if}}
                        {{/each}}
                        {{#case group "smtp"}}
                            <div class="form-group row align-items-center pt-3 border-top" title="Send a test email to given email address">
                                <label for="smtp-test-email" class="col-sm-3 col-form-label">Test SMTP</label>
                                <div class="col-sm-8 input-group">
                                    <input class="form-control" id="smtp-test-email" type="email" placeholder="Enter test email">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-primary" onclick="smtpTest(); return false;">Send test email</button>
                                    </div>
                                </div>
                            </div>
                        {{/case}}
                    </div>
                </div>
                {{/if}}
                {{/each}}

                <div class="card bg-light mb-3">
                    <div class="card-header"><button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                            data-target="#g_readonly">Read-Only Config</button></div>
                    <div id="g_readonly" class="card-body collapse" data-parent="#config-form">
                        <div class="small mb-3">
                            NOTE: These options can't be modified in the editor because they would require the server
                            to be restarted. To modify them, you need to set the correct environment variables when
                            launching the server. You can check the variable names in the tooltips of each option.
                        </div>

                        {{#each config}}
                        {{#each elements}}
                        {{#unless editable}}
                        <div class="form-group row align-items-center" title="[{{name}}] {{doc.description}}">
                            {{#case type "text" "number" "password"}}
                            <label for="input_{{name}}" class="col-sm-3 col-form-label">{{doc.name}}</label>
                            <div class="col-sm-8 input-group">
                                <input readonly class="form-control" id="input_{{name}}" type="{{type}}"
                                    value="{{value}}" {{#if default}} placeholder="Default: {{default}}" {{/if}}>

                                {{#case type "password"}}
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button"
                                        onclick="toggleVis('input_{{name}}');">Show/hide</button>
                                </div>
                                {{/case}}
                            </div>
                            {{/case}}
                            {{#case type "checkbox"}}
                            <div class="col-sm-3 col-form-label">{{doc.name}}</div>
                            <div class="col-sm-8">
                                <div class="form-check align-middle">
                                    <input disabled class="form-check-input" type="checkbox" id="input_{{name}}"
                                        {{#if value}} checked {{/if}}>

                                    <label class="form-check-label" for="input_{{name}}"> Default: {{default}} </label>
                                </div>
                            </div>
                            {{/case}}
                        </div>
                        {{/unless}}
                        {{/each}}
                        {{/each}}

                    </div>
                </div>

                {{#if can_backup}}
                <div class="card bg-light mb-3">
                    <div class="card-header"><button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                            data-target="#g_database">Backup Database</button></div>
                    <div id="g_database" class="card-body collapse" data-parent="#config-form">
                        <div class="small mb-3">
                            NOTE: A local installation of sqlite3 is required for this section to work.
                        </div>
                        <button type="button" class="btn btn-primary" onclick="backupDatabase();">Backup Database</button>
                    </div>
                </div>
                {{/if}}

                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-danger float-right" onclick="deleteConf();">Reset defaults</button>
            </form>
        </div>
    </div>
</main>

<style>
    #config-block ::placeholder {
        /* Most modern browsers support this now. */
        color: orangered;
    }
</style>

<script>
    function smtpTest() {
        if (formHasChanges(config_form)) {
            alert("Config has been changed but not yet saved.\nPlease save the changes first before sending a test email.");
            return false;
        }
        test_email = document.getElementById("smtp-test-email");
        data = JSON.stringify({ "email": test_email.value });
        _post("{{urlpath}}/admin/test/smtp/",
            "SMTP Test email sent correctly",
            "Error sending SMTP test email", data, false);
        return false;
    }
    function getFormData() {
        let data = {};

        document.querySelectorAll(".conf-checkbox").forEach(function (e, i) {
            data[e.name] = e.checked;
        });

        document.querySelectorAll(".conf-number").forEach(function (e, i) {
            data[e.name] = e.value ? +e.value : null;
        });

        document.querySelectorAll(".conf-text, .conf-password").forEach(function (e, i) {
            data[e.name] = e.value || null;
        });
        return data;
    }
    function saveConfig() {
        data = JSON.stringify(getFormData());
        _post("{{urlpath}}/admin/config/", "Config saved correctly",
            "Error saving config", data);
        return false;
    }
    function deleteConf() {
        var input = prompt("This will remove all user configurations, and restore the defaults and the " +
            "values set by the environment. This operation could be dangerous. Type 'DELETE' to proceed:");
        if (input === "DELETE") {
            _post("{{urlpath}}/admin/config/delete",
                "Config deleted correctly",
                "Error deleting config");
        } else {
            alert("Wrong input, please try again")
        }

        return false;
    }
    function backupDatabase() {
        _post("{{urlpath}}/admin/config/backup_db",
            "Backup created successfully",
            "Error creating backup", null, false);
        return false;
    }
    function masterCheck(check_id, inputs_query) {
        function onChanged(checkbox, inputs_query) {
            return function _fn() {
                document.querySelectorAll(inputs_query).forEach(function (e, i) { e.disabled = !checkbox.checked; });
                checkbox.disabled = false;
            };
        };

        const checkbox = document.getElementById(check_id);
        const onChange = onChanged(checkbox, inputs_query);
        onChange(); // Trigger the event initially
        checkbox.addEventListener("change", onChange);
    }
    // These are formatted because otherwise the
    // VSCode formatter breaks But they still work
    // {{#each config}} {{#if grouptoggle}}
    masterCheck("input_{{grouptoggle}}", "#g_{{group}} input");
    // {{/if}} {{/each}}

    // Two functions to help check if there were changes to the form fields
    // Useful for example during the smtp test to prevent people from clicking save before testing there new settings
    function initChangeDetection(form) {
        const ignore_fields = ["smtp-test-email"];
        Array.from(form).forEach((el) => {
            if (! ignore_fields.includes(el.id)) {
                el.dataset.origValue = el.value
            }
        });
    }
    function formHasChanges(form) {
        return Array.from(form).some(el => 'origValue' in el.dataset && ( el.dataset.origValue !== el.value));
    }

    // Trigger Form Change Detection
    const config_form = document.getElementById('config-form');
    initChangeDetection(config_form);

    // Colorize some settings which are high risk
    const risk_items = document.getElementsByClassName('col-form-label');
    function colorRiskSettings(risk_el) {
        Array.from(risk_el).forEach((el) => {
            if (el.innerText.toLowerCase().includes('risks') ) {
                el.parentElement.className += ' alert-danger'
                console.log(el)
            }
        });
    }
    colorRiskSettings(risk_items);

</script>