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">
                <span class="font-weight-bolder">NOTE:</span> The settings here override the environment variables. Once saved, it's recommended to stop setting them to avoid confusion.<br>
                This does not apply to the read-only section, which can only be set via environment variables.<br>
                Settings which are overridden are shown with <span class="is-overridden-true">double underscores</span>.
            </div>

            <form class="form needs-validation" id="config-form" onsubmit="saveConfig(); return false;" novalidate>
                {{#each config}}
                {{#if groupdoc}}
                <div class="card bg-light mb-3">
                    <button id="b_{{group}}" type="button" class="card-header text-start btn btn-link text-decoration-none" aria-expanded="false" aria-controls="g_{{group}}" data-bs-toggle="collapse" data-bs-target="#g_{{group}}">{{groupdoc}}</button>
                    <div id="g_{{group}}" class="card-body collapse">
                        {{#each elements}}
                        {{#if editable}}
                        <div class="row my-2 align-items-center is-overridden-{{overridden}}" 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">
                                <div class="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"}}
                                    <button class="btn btn-outline-secondary input-group-text" type="button" onclick="toggleVis('input_{{name}}');">Show/hide</button>
                                {{/case}}
                                </div>
                            </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="row my-2 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" required>
                                    <button type="button" class="btn btn-outline-primary input-group-text" onclick="smtpTest(); return false;">Send test email</button>
                                    <div class="invalid-tooltip">Please provide a valid email address</div>
                                </div>
                            </div>
                        {{/case}}
                    </div>
                </div>
                {{/if}}
                {{/each}}

                <div class="card bg-light mb-3">
                    <button id="b_readonly" type="button" class="card-header text-start btn btn-link text-decoration-none" aria-expanded="false" aria-controls="g_readonly"
                            data-bs-toggle="collapse" data-bs-target="#g_readonly">Read-Only Config</button>
                    <div id="g_readonly" class="card-body collapse">
                        <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="row my-2 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">
                                <div class="input-group">
                                <input readonly class="form-control" id="input_{{name}}" type="{{type}}"
                                    value="{{value}}" {{#if default}} placeholder="Default: {{default}}" {{/if}}>
                                {{#case type "password"}}
                                    <button class="btn btn-outline-secondary" type="button" onclick="toggleVis('input_{{name}}');">Show/hide</button>
                                {{/case}}
                                </div>
                            </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">
                    <button id="b_database" type="button" class="card-header text-start btn btn-link text-decoration-none" aria-expanded="false" aria-controls="g_database"
                            data-bs-toggle="collapse" data-bs-target="#g_database">Backup Database</button>
                    <div id="g_database" class="card-body collapse">
                        <div class="small mb-3">
                            WARNING: This function only creates a backup copy of the SQLite database.
                            This does not include any configuration or file attachment data that may
                            also be needed to fully restore a vaultwarden instance. For details on
                            how to perform complete backups, refer to the wiki page on
                            <a href="https://github.com/dani-garcia/vaultwarden/wiki/Backing-up-your-vault">backups</a>.
                        </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-end" onclick="deleteConf();">Reset defaults</button>
            </form>
        </div>
    </div>
</main>

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

    .is-overridden-true {
        text-decoration: underline double;
    }
</style>

<script>
    'use strict';

    function smtpTest() {
        if (formHasChanges(config_form)) {
            event.preventDefault();
            event.stopPropagation();
            alert("Config has been changed but not yet saved.\nPlease save the changes first before sending a test email.");
            return false;
        }

        let test_email = document.getElementById("smtp-test-email");

        // Do a very very basic email address check.
        if (test_email.value.match(/\S+@\S+/i) === null) {
            test_email.parentElement.classList.add('was-validated');
            event.preventDefault();
            event.stopPropagation();
            return false;
        }

        const 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) {
            data[e.name] = e.checked;
        });

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

        document.querySelectorAll(".conf-text, .conf-password").forEach(function (e) {
            data[e.name] = e.value || null;
        });
        return data;
    }
    function saveConfig() {
        const 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) { 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);
    }

    {{#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'
            }
        });
    }
    colorRiskSettings(risk_items);

</script>