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

<main class="container">
    <div id="users-block" class="my-3 p-3 bg-white rounded shadow">
        <h6 class="border-bottom pb-2 mb-0">Registered Users</h6>

        <div id="users-list">
            {{#each users}}
            <div class="media pt-3">
                <img class="mr-2 rounded identicon" data-src="{{Email}}">
                <div class="media-body pb-3 mb-0 small border-bottom">
                    <div class="row justify-content-between">
                        <div class="col">
                            <strong>{{Name}}</strong>
                            {{#if TwoFactorEnabled}}
                            <span class="badge badge-success ml-2">2FA</span>
                            {{/if}}
                            {{#case _Status 1}}
                            <span class="badge badge-warning ml-2">Invited</span>
                            {{/case}}
                            <span class="d-block">{{Email}}</span>
                        </div>
                        <div class="col">
                            <strong> Organizations:</strong>
                            <span class="d-block">
                                {{#each Organizations}}
                                <span class="badge badge-primary" data-orgtype="{{Type}}">{{Name}}</span>
                                {{/each}}
                            </span>
                        </div>
                        <div style="flex: 0 0 300px; font-size: 90%; text-align: right; padding-right: 15px">
                            {{#if TwoFactorEnabled}}
                            <a class="mr-2" href="#" onclick='remove2fa({{jsesc Id}})'>Remove all 2FA</a>
                            {{/if}}

                            <a class="mr-2" href="#" onclick='deauthUser({{jsesc Id}})'>Deauthorize sessions</a>
                            <a class="mr-2" href="#" onclick='deleteUser({{jsesc Id}}, {{jsesc Email}})'>Delete User</a>
                        </div>
                    </div>
                </div>
            </div>
            {{/each}}

        </div>

        <div class="mt-3">
            <button type="button" class="btn btn-sm btn-link" onclick="updateRevisions();"
                title="Force all clients to fetch new data next time they connect. Useful after restoring a backup to remove any stale data.">
                Force clients to resync
            </button>

            <button type="button" class="btn btn-sm btn-primary float-right" onclick="reload();">Reload users</button>
        </div>
    </div>

    <div id="invite-form-block" class="align-items-center p-3 mb-3 text-white-50 bg-secondary rounded shadow">
        <div>
            <h6 class="mb-0 text-white">Invite User</h6>
            <small>Email:</small>

            <form class="form-inline" id="invite-form" onsubmit="inviteUser(); return false;">
                <input type="email" class="form-control w-50 mr-2" id="email-invite" placeholder="Enter email">
                <button type="submit" class="btn btn-primary">Invite</button>
            </form>
        </div>
    </div>

    <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" 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">{{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}}
                    </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" 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">{{doc.name}}</div>
                            <div class="col-sm-8">
                                <div class="form-check">
                                    <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 reload() { window.location.reload(); }
    function msg(text) { text && alert(text); reload(); }
    function identicon(email) {
        const data = new Identicon(md5(email), { size: 48, format: 'svg' });
        return "data:image/svg+xml;base64," + data.toString();
    }
    function toggleVis(input_id) {
        const elem = document.getElementById(input_id);
        const type = elem.getAttribute("type");
        if (type === "text") {
            elem.setAttribute("type", "password");
        } else {
            elem.setAttribute("type", "text");
        }
        return false;
    }
    function _post(url, successMsg, errMsg, body) {
        fetch(url, {
            method: 'POST',
            body: body,
            mode: "same-origin",
            credentials: "same-origin",
            headers: { "Content-Type": "application/json" }
        }).then(e => {
            if (e.ok) { return msg(successMsg); }
            e.json().then(json => {
                const msg = json ? json.ErrorModel.Message : "Unknown error";
                msg(errMsg + ": " + msg);
            });
        }).catch(e => { msg(errMsg + ": Unknown error") });
    }
    function deleteUser(id, mail) {
        var input_mail = prompt("To delete user '" + mail + "', please type the email below")
        if (input_mail != null) {
            if (input_mail == mail) {
                _post("/admin/users/" + id + "/delete",
                    "User deleted correctly",
                    "Error deleting user");
            } else {
                alert("Wrong email, please try again")
            }
        }
        return false;
    }
    function remove2fa(id) {
        _post("/admin/users/" + id + "/remove-2fa",
            "2FA removed correctly",
            "Error removing 2FA");
        return false;
    }
    function deauthUser(id) {
        _post("/admin/users/" + id + "/deauth",
            "Sessions deauthorized correctly",
            "Error deauthorizing sessions");
        return false;
    }
    function updateRevisions() {
        _post("/admin/users/update_revision",
            "Success, clients will sync next time they connect",
            "Error forcing clients to sync");
        return false;
    }
    function inviteUser() {
        inv = document.getElementById("email-invite");
        data = JSON.stringify({ "email": inv.value });
        inv.value = "";
        _post("/admin/invite/", "User invited correctly",
            "Error inviting user", data);
        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("/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("/admin/config/delete",
                "Config deleted correctly",
                "Error deleting config");
        } else {
            alert("Wrong input, please try again")
        }

        return false;
    }
    function backupDatabase() {
        _post("/admin/config/backup_db",
            "Backup created successfully",
            "Error creating backup");
        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);
    }
    let OrgTypes = {
        "0": { "name": "Owner", "color": "orange" },
        "1": { "name": "Admin", "color": "blueviolet" },
        "2": { "name": "User", "color": "blue" },
        "3": { "name": "Manager", "color": "green" },
    };

    document.querySelectorAll("img.identicon").forEach(function (e, i) {
        e.src = identicon(e.dataset.src);
    });

    document.querySelectorAll("[data-orgtype]").forEach(function (e, i) {
        let orgtype = OrgTypes[e.dataset.orgtype];
        e.style.backgroundColor = orgtype.color;
        e.title = orgtype.name;
    });

    // 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}}
</script>