Hide / Remove "+ New Organization" button for non Admin users

[compumatter]

We would like to create one organization - our own ie; MyCompany. That’s it. Everyone within the company / business is added to that organization. There are no other organizations and we don’t want anyone creating them.

We are trying to figure out how to prevent the + New Organization button from appearing for any other user except perhaps for the Super Administrator.

We have found no way to do this. There is a prescribed way on the /admin section but it has no effect on anything.
There is also a Bitwarden way in Organization > Single Organization but although they cannot add another organization the button still shows up.

I have created a short video to demonstrate the problem and was wondering if anyone has a fix for this?

• https://www.youtube.com/watch?v=kk2Fy3-paeI

What sayeth the group?

[BlackDex]

That button doesn't disappear. The UI isn't changed by setting any of those options. It is only checked server side.

If you try to add a new organization you would receive an error message.

[compumatter]

Thank you. Yes that is of course my experience. Yet is seems logic would dictate that button be gone instead of the existing red "after the fact" notice that you cannot add an organization. Is there a place "server side" that I am missing where that button visibility could be controlled ?

[BlackDex]

We can't control the interface from the server side.
For stuff like that we would need to adjust the CSS at runtime, for which we do not have anything in place. It also could cause strange behavior if that file is kept in the cache longer then we would want for example.

Bitwarden doesn't have anything in place to show/hide that button at runtime.

[compumatter]

Thank you for the certainty of it. Even if it's not what I want to hear it is nice to get absolute clarity on what's doable. I have found I can control this through my nginx reverse proxy and JS so for now I guess that'll be the approach. Thank you.

[BlackDex]

I think it's better to use already built-in features to allow some or none users to create organization via this option:

vaultwarden/.env.template

Lines 255 to 261 in 66cf179

	## Controls which users can create new orgs.
	## Blank or 'all' means all users can create orgs (this is the default):
	# ORG_CREATION_USERS=
	## 'none' means no users can create orgs:
	# ORG_CREATION_USERS=none
	## A comma-separated list means only those users can create orgs:
	# [email protected],[email protected]

Using anything else might break in the future.

[owirtifo]

@BlackDex thank you, I know about this setup. I was interested in configuring Nginx to Hide/Remove the "+ New Organization" button for non Admin users

[BlackDex]

I understand that, but it just isn't possible unless you modify the web-vault code it self.

And it's not something we will be adding i think.

[owirtifo]

It's a pity, in a corporate environment it would be useful to avoid numerous questions from ordinary users about why this button is here if it doesn't work for me. Why would an ordinary user show functionality that doesn't work for them?

[compumatter]

@compumatter Hi! Could you share the configuration?

It is really unfortunate this could not be solved an easier way. This is obviously a bad practice to stop them "after the fact" instead of just not giving them the link.

That said.... The nginx code for using a custom js / css solution

NGINX. The important parts are the sub_filters. /anyfoldername would be any directory you want of the base directory of the vaultwarden install

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_set_header Accept-Encoding "";
        sub_filter '</head>'
        '<link rel="stylesheet" type="text/css" href="/anyfoldername /passmatter.css"></head>';

        sub_filter '</body>'
        '</body><script defer="defer" src="/anyfoldername /passmatter.js"></script>';

        sub_filter_once on;
    }

Custom js code example though all is not required for this purpose you'll find it in there

// there is only one onload. All other content loaded via ajax
window.onload = function() {
    blackAdminIcon();
    };

    function blackAdminIcon(){
    // Select all img elements with the class 'tw-rounded-full' and the title 'Admin'
    var images = document.querySelectorAll('img.tw-rounded-full[title="Admin"]');
    // Iterate over the NodeList of selected images
    images.forEach(function(img) {
        // Set the src attribute to the new value
        img.setAttribute('src', "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHBvaW50ZXItZXZlbnRzPSJub25lIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMCwgMCwgMCk7IHdpZHRoOiA0OHB4OyBoZWlnaHQ6IDQ4cHg7Ij48dGV4dCB0ZXh0LWFuY2hvcj0ibWlkZGxlIiB5PSI1MCUiIHg9IjUwJSIgZHk9IjAuMzVlbSIgcG9pbnRlci1ldmVudHM9ImF1dG8iIGZpbGw9IndoaXRlIiBmb250LWZhbWlseT0iJnF1b3Q7T3BlbiBTYW5zJnF1b3Q7LCZxdW90O0hlbHZldGljYSBOZXVlJnF1b3Q7LEhlbHZldGljYSxBcmlhbCxzYW5zLXNlcmlmLCZxdW90O0FwcGxlIENvbG9yIEVtb2ppJnF1b3Q7LCZxdW90O1NlZ29lIFVJIEVtb2ppJnF1b3Q7LCZxdW90O1NlZ29lIFVJIFN5bWJvbCZxdW90OyIgc3R5bGU9ImZvbnQtd2VpZ2h0OiAzMDA7IGZvbnQtc2l6ZTogMjBweDsiPkFEPC90ZXh0Pjwvc3ZnPg==");
    });

    }
    function ownerRoleOnly(){
    // Select the legend element by its ID
    var legend = document.getElementById('roleGroupLabel');

    // Check if the legend exists
    if (legend) {
        // Initialize a counter
        var count = 0;
        // Start with the first element sibling after the legend
        var nextDiv = legend.nextElementSibling;

        // Loop through the next three siblings
        while (nextDiv && count < 3) {
            // Check if the sibling is a DIV
            if (nextDiv.tagName === 'DIV') {
                // Add the 'hide-element' class
                nextDiv.classList.add('hide-element');
                // Increment the counter
                count++;
            }
            // Move to the next sibling
            nextDiv = nextDiv.nextElementSibling;
        }
    }

      blackAdminIcon();
    }


    // This function will apply the styles you want after each AJAX load
    function applyCustomStyles() {
            var buttonBgGreen="#2D392A";
            var goldTextColor="#DDAE71"
            var bodyBg="#DEE1D6";
            // Apply styles to h3 elements
            const h3Elements = document.querySelectorAll('button.filter-button h3');
            h3Elements.forEach(function(h3) {
                h3.style.setProperty('color', '#DDAE71', 'important');
            });

            // insures the admin icon is always easily identifiable as a black AD so support will know
            blackAdminIcon();

            /* BO ADDING ORGANIZATIONS */
            // Our servers only ever have one Organization.  It will have all passwords so we do not want to delete that organization under any circumstances.
            // adding the hide-element class insures it is not visibile without possibly breaking any code that requires it is there
            var h1Elements = document.querySelectorAll('h1');
            h1Elements.forEach(function(h1) {
                if (h1.textContent.toLowerCase().trim().includes('danger zone')) {
                    h1.classList.add('hide-element');
                    var nextDiv = h1.nextElementSibling;
                    if (nextDiv && nextDiv.tagName === 'DIV') {
                        nextDiv.classList.add('hide-element');
                    }
                 }
            });

            seesOrganizations = 'false';
            secs = 500;
            // this one determines if the Admin login button is present. Is dependent on the first login being named Admin
            var adminImages = Array.from(document.querySelectorAll('img[title="Admin"]'));
            var isAdminImageFound = adminImages.length > 0;
            if (isAdminImageFound) {
                // Image with title='Admin' does exist
                //  console.log('Admin image is found.');
                seesOrganizations = 'true';
                // in addition, disable the ability to change the 'Admin' textinput on the Account Settings > My account area
                // this will insure a predictable experience for all users
                // however the user will be able to change the email address associated with the admin account
                var nameInput = document.querySelector('app-settings #name');
                if (nameInput) {
                     nameInput.setAttribute('readonly', true);
                }

                // prevent Admin user from deleting the Admin account
                var buttons = document.querySelectorAll('app-settings button');
                buttons.forEach(function(button) {
                   if (button.textContent.trim() === 'Delete account') {
                       button.classList.add('hide-element');
                   }
                });
            }

            // delay to give the north menu enough time to load
            setTimeout(function() {
                 var organizationLinks = Array.from(document.querySelectorAll('a'));
                 var found = organizationLinks.some(link => link.textContent.includes('Organizations'));
                 if (found) { // North Menu Organizations does exist, is an Admin
                     //console.error('IT DOES NOT EXIST');
                     seesOrganizations = 'true';
                 }
                 var adminInputs = Array.from(document.querySelectorAll('input[value="Admin"]'));
                 var isAdminInput = adminInputs.length > 0;
                 if (isAdminInput) {
                     // Image with title='Admin' does exist
                     // console.log('Admin input has been found');
                     seesOrganizations = 'true';
                 }
            }, secs);


            /* if seesOrganizations is false (non-administrator so no ability to add anyway)
               if bwiBusinessElements.length > 0 it means they are an admin but they have already added their first organization
               In both cases, we want to hide the + New Organizations menu link
            */
            var bwiBusinessElements = document.querySelectorAll('.bwi-business');
            if (seesOrganizations == 'false' ||  bwiBusinessElements.length > 0) {
                // Find the link with the specified href
                var createOrgLink = document.querySelector("a[href='#/create-organization']");
                // If the link exists, add the 'hide-element' class
                if (createOrgLink) {
                    createOrgLink.classList.add('hide-element');
                }
            }

            // HIDING DROPDOWNS THAT ALLOW ADMING TO - LEAVE ORGANIZATION or ADD ORGANIZATION
            // Select all elements that have both 'bwi' and 'bwi-ellipsis-v' classes
            var ellipsisElements = document.querySelectorAll('.bwi.bwi-ellipsis-v');

            // Add the 'hide-element' class to each found element
            ellipsisElements.forEach(function(el) {
              el.classList.add('hide-element');
            });

            // Select all elements that have both 'bwi' and 'bwi-angle-down' classes
            var angleDownElements = document.querySelectorAll('.bwi.bwi-angle-down');

            // Add the 'hide-element' class to each found element
            angleDownElements.forEach(function(el) {
              el.classList.add('hide-element');
            });


            // EO ADDING ORGANIZATIONS

            // BO CUSTOM STYLES
            var style = document.createElement('style');
            style.type = 'text/css';
            style.innerHTML = '.bwi-shield::before { background-image: url(/anyfoldername /icon-white.svg) !important; width: 32px !important; height: 40px !important;}' +
                      'body { background-color: ' + bodyBg + ' !important; }' +
                      'html.theme_light .filter-option.active > .filter-buttons .filter-button { color: ' + goldTextColor + ' !important; }' +
                      'html.theme_light .btn-primary:hover:not(:disabled), html.theme_light .btn-primary:active:not(:disabled) { background-color: ' + buttonBgGreen + ' !important; }' +
                      '.tw-bg-background-alt2{background: '+buttonBgGreen+' !important;}'

            document.head.appendChild(style);

            // Set the flag to indicate styles have been applied
            const inputElement = document.getElementById('sm_styles_run');
            if (inputElement) {
                inputElement.value = 'true';
            }
            // EO CUSTOM STYLES

            // BO REMOVE ELEMENTS

            var themeElement = document.getElementById('theme');
            if(themeElement) {
               var formGroupElement = themeElement.closest('.form-group');
               if (formGroupElement) {
                  formGroupElement.classList.add('hide-element');
               }
            }

            // EO REMOVE ELEMENTS

            // BO ROLES / COLLECTIONS DIALOG WINDOW - NO ALTERATIONS TO ADMIN USER
            var dialogTitles = document.querySelectorAll("[id^='bit-dialog-title-']");
            dialogTitles.forEach(function(dialogTitle) {
                // Check if the text content of the dialog title includes 'Admin'
                if (dialogTitle.textContent.toLowerCase().includes('admin')) {
                    // remove ability to change role
                    ownerRoleOnly();
                    // Select all div elements with the class 'tw-ml-auto'
                    var divsToCheck = document.querySelectorAll('.tw-ml-auto');
                    divsToCheck.forEach(function(div) {
                        // Check if any child node of the div contains the text 'Revoke access'
                        var hasRevokeAccess = Array.from(div.querySelectorAll('*')).some(function(child) {
                            return child.textContent.includes('Revoke access');
                        });
                        if (hasRevokeAccess) {
                            if (div.offsetWidth > 0 && div.offsetHeight > 0) {
                                div.classList.add('hide-element');
                            }
                        }
                    });
                }
            });


            // BO ROLES / COLLECTIONS DIALOG WINDOW - NO ALTERATIONS TO ADMIN USER

    }


    /* ========= Do not alter code below this line ==========
     * Because the inner page is loaded via Ajax, we setup a mutation observer to watch for the loading of the footer
     * once that has been loaded, we can apply our JS dependent styles / colors
     * */


    function isFooterPresent() {
        return document.querySelector('app-footer') !== null;
    }

    const onMutationsObserved = (mutationsList, observer) => {
        if (isFooterPresent()) {
            console.log('Footer detected, applying custom styles and stopping observer');
            applyCustomStyles();
    //        observer.disconnect(); // Stop observing as the footer is now present
        }
    };

    const observer = new MutationObserver(onMutationsObserved);

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

Custom CSS:

/* Theming file for vaultwarden - depends on insert of stylesheet via vhosts file */
environment-selector ~ .small {
  /* remove bitwarden official rewrite text */
  display:none !important;
}

html.theme_light body.layout_frontend{
background-color: #DEE1D6 !important;
}

html.theme_light img.logo-themed {
 content: url(/anyfoldername /[email protected]) !important;
}

html.theme_light .navbar{
 background-color: #2D392A; /* Green background */

}

button[type='submit'],button[buttontype='primary']  {
 background-color: #348737 !important; /* Green background */
 color: white !important; /* White text */
}


button[type='submit']:hover,button[buttontype='primary']:hover {
 background-color: #489f4d !important; /* Darker green background on hover */
}

/* applied via js where needed */
.hide-element {
   display: none !important;
}