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 alert-row px-1">a yellow colored background</span>.
            </div>

            <form class="form needs-validation" id="config-form" novalidate>
                {{#each page_data.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}} alert-row" 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" data-vw-pw-toggle="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" id="smtpTest">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 page_data.config}}
                        {{#each elements}}
                        {{#unless editable}}
                        <div class="row my-2 align-items-center alert-row" 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">
                                {{!--
                                      Also set the database_url input as password here.
                                      If we would set it to password in config.rs it will not be character masked for the support string.
                                      And sometimes this is more useful for providing support than just 3 asterisk.
                                --}}
                                {{#if (eq name "database_url")}}
                                    <input readonly class="form-control" id="input_{{name}}" type="password" value="{{value}}" {{#if default}} placeholder="Default: {{default}}" {{/if}}>
                                    <button class="btn btn-outline-secondary" type="button" data-vw-pw-toggle="input_{{name}}">Show/hide</button>
                                {{else}}
                                    <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" data-vw-pw-toggle="input_{{name}}">Show/hide</button>
                                    {{/case}}
                                {{/if}}
                                </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 page_data.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" target="_blank" rel="noopener noreferrer">backups</a>.
                        </div>
                        <button type="button" class="btn btn-primary" id="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" id="deleteConf">Reset defaults</button>
            </form>
        </div>
    </div>
</main>
<style>
    #config-block ::placeholder {
        /* Most modern browsers support this now. */
        color: orangered;
    }

    .is-overridden-true {
        --bs-alert-color: #664d03;
        --bs-alert-bg: #fff3cd;
        --bs-alert-border-color: #ffecb5;
    }
</style>
<script src="{{urlpath}}/vw_static/admin_settings.js"></script>