[PR 1] Add experimental Custom Roles foundation (#7847)

src/static/scripts/admin_users.js

@@ -173,10 +173,14 @@ const ORG_TYPES = {
         "name": "User",
         "bg": "blue"
     },
-    "4": {
+    "3": {
         "name": "Manager",
         "bg": "green"
     },
+    "4": {
+        "name": "Custom",
+        "bg": "teal"
+    },
 };
 
 const userOrgTypeDialog = document.getElementById("userOrgTypeDialog");
@@ -187,15 +191,19 @@ userOrgTypeDialog.addEventListener("show.bs.modal", function (event) {
     const userUuid = event.relatedTarget.parentNode.dataset.vwUserUuid;
     // Get org specific values
     const userOrgType = event.relatedTarget.dataset.vwOrgType;
-    const userOrgTypeName = ORG_TYPES[userOrgType]["name"];
     const orgName = event.relatedTarget.dataset.vwOrgName;
     const orgUuid = event.relatedTarget.dataset.vwOrgUuid;
 
+    document.getElementById("userOrgTypeForm").reset();
     document.getElementById("userOrgTypeDialogOrgName").textContent = orgName;
     document.getElementById("userOrgTypeDialogUserEmail").textContent = userEmail;
     document.getElementById("userOrgTypeUserUuid").value = userUuid;
     document.getElementById("userOrgTypeOrgUuid").value = orgUuid;
-    document.getElementById(`userOrgType${userOrgTypeName}`).checked = true;
+    // The Custom role can only be selected while it is enabled
+    const userOrgTypeRadio = document.getElementById(`userOrgType${ORG_TYPES[userOrgType]?.name}`);
+    if (userOrgTypeRadio) {
+        userOrgTypeRadio.checked = true;
+    }
 }, false);
 
 // Prevent accidental submission of the form with valid elements after the modal has been hidden.
@@ -222,7 +230,7 @@ function updateUserOrgType(event) {
 function initUserTable() {
     // Color all the org buttons per type
     document.querySelectorAll("button[data-vw-org-type]").forEach(function (e) {
-        const orgType = ORG_TYPES[e.dataset.vwOrgType];
+        const orgType = ORG_TYPES[e.dataset.vwOrgType] ?? { "name": "Unknown", "bg": "gray" };
         e.style.backgroundColor = orgType.bg;
         if (orgType.font !== undefined) {
             e.style.color = orgType.font;

src/static/templates/admin/users.hbs

@@ -135,6 +135,11 @@
                         <div class="radio">
                             <label><input type="radio" value="3" class="form-radio-input" name="user_type" id="userOrgTypeManager">&nbsp;Manager</label>
                         </div>
+                        {{#if custom_roles_enabled}}
+                        <div class="radio">
+                            <label><input type="radio" value="4" class="form-radio-input" name="user_type" id="userOrgTypeCustom">&nbsp;Custom</label>
+                        </div>
+                        {{/if}}
                         <div class="radio">
                             <label><input type="radio" value="1" class="form-radio-input" name="user_type" id="userOrgTypeAdmin">&nbsp;Admin</label>
                         </div>

src/static/templates/scss/vaultwarden.scss.hbs

@@ -98,10 +98,17 @@ app-security > app-two-factor-setup > form {
 }
 
 /* Hide unsupported Custom Role options */
+{{#if custom_roles_enabled}}
 :is(bit-dialog, [bit-dialog]) div.tw-ml-4:has(bit-form-control input),
 :is(bit-dialog, [bit-dialog]) div.tw-col-span-4:has(input[formcontrolname*="access"], input[formcontrolname*="manage"]) {
   @extend %vw-hide;
 }
+{{else}}
+:is(bit-dialog, [bit-dialog]) div.tw-ml-4:has(bit-form-control input),
+:is(bit-dialog, [bit-dialog]) div.tw-col-span-4:has(input[formcontrolname*="access"], input[formcontrolname*="manage"]) {
+  @extend %vw-hide;
+}
+{{/if}}
 
 /* Change collapsed menu icon to Vaultwarden */
 bit-nav-logo bit-nav-item a:before {