GRN2-176: Create a role editor that allows admins to specify what permissions each role has (#709)

* Add roles editor

* Add colour selection ability to roles

* Add ability to assign roles to users in the UI

* Remove rolify and replace it with our own custom roles implemenation

* - Fix all existing roles functionality
- Fix super admins

* Fix bugs with new customers not have default roles

* Add can't create room setting

* Code improvements

* Fix migration

* Add tests for new methods

* Translate reserved role names

* Pull roles from saml/ldap

* Fix rspec

* Fix scrutinizer issues

* Fix email promoted/demoted tests

* Apply comments

* Redirect directly to the main room

* Add comments

app/assets/javascripts/admins.js

@@ -19,47 +19,60 @@ $(document).on('turbolinks:load', function(){
   var action = $("body").data('action');
 
   // Only run on the admins page.
-  if (controller == "admins" && action == "index") {
-    // show the modal with the correct form action url
-    $(".delete-user").click(function(data){
-      var uid = $(data.target).closest("tr").data("user-uid")
-      var url = $("body").data("relative-root")
-      if (!url.endsWith("/")) {
-        url += "/"
-      }
-      url += "u/" + uid
-      $("#delete-confirm").parent().attr("action", url)
-    })
+  if (controller == "admins") {
+    if(action == "index") {
+      // show the modal with the correct form action url
+      $(".delete-user").click(function(data){
+        var uid = $(data.target).closest("tr").data("user-uid")
+        var url = $("body").data("relative-root")
+        if (!url.endsWith("/")) {
+          url += "/"
+        }
+        url += "u/" + uid
+        $("#delete-confirm").parent().attr("action", url)
+      })
 
-    //clear the role filter if user clicks on the x
-    $(".clear-role").click(function() {
-      var search = new URL(location.href).searchParams.get('search')
+      //clear the role filter if user clicks on the x
+      $(".clear-role").click(function() {
+        var search = new URL(location.href).searchParams.get('search')
 
-      var url = window.location.pathname + "?page=1"
-    
-      if (search) {
-        url += "&search=" + search
-      }  
-    
-      window.location.replace(url);
-    })
-  }
+        var url = window.location.pathname + "?page=1"
+      
+        if (search) {
+          url += "&search=" + search
+        }  
+      
+        window.location.replace(url);
+      })
+    }
+    else if(action == "site_settings"){
+      loadColourSelectors()
+    }
+    else if (action == "roles"){
+      // Refreshes the new role modal
+      $("#newRoleButton").click(function(){
+        $("#createRoleName").val("")
+      })
 
-  if (controller == "admins" && action == "site_settings") {
-    loadColourSelectors()
-  }
+      // Updates the colour picker to the correct colour
+      role_colour = $("#role-colorinput-regular").data("colour")
+      $("#role-colorinput-regular").css("background-color", role_colour);
+      $("#role-colorinput-regular").css("border-color", role_colour);
 
-  // Only run on the admins edit user page.
-  if (controller == "admins" && action == "edit_user") {
-    $(".setting-btn").click(function(data){
-      var url = $("body").data("relative-root")
-      if (!url.endsWith("/")) {
-        url += "/"
-      }
-      url += "admins?setting=" + data.target.id
+      loadRoleColourSelector(role_colour, $("#role-colorinput-regular").data("disabled"));
 
-      window.location.href = url
-    })
+      // Loads the jquery sortable so users can manually sort roles
+      $("#rolesSelect").sortable({
+        items: "a:not(.sort-disabled)",
+        update: function() {
+          $.ajax({
+            url: $(this).data("url"),
+            type: 'PATCH',
+            data: $(this).sortable('serialize')
+          });
+        }
+      });
+    }
   }
 });
 
@@ -160,4 +173,35 @@ function loadColourSelectors() {
       location.reload()
     });
   })
+}
+
+function loadRoleColourSelector(role_colour, disabled) { 
+  if (!disabled) {
+    const pickrRoleRegular = new Pickr({
+      el: '#role-colorinput-regular',
+      theme: 'monolith',
+      useAsButton: true,
+      lockOpacity: true,
+      defaultRepresentation: 'HEX',
+      closeWithKey: 'Enter',
+      default: role_colour,
+  
+      components: {
+          palette: true,
+          preview: true,
+          hue: true,
+          interaction: {
+              input: true,
+              save: true,
+          },
+      },
+    });
+  
+    // On save update the colour input's background colour and update the role colour input
+    pickrRoleRegular.on("save", (color, instance) => {
+      $("#role-colorinput-regular").css("background-color", color.toHEXA().toString());
+      $("#role-colorinput-regular").css("border-color", color.toHEXA().toString());
+      $("#role-colour").val(color.toHEXA().toString());
+    });
+  }
 }

app/assets/javascripts/application.js

@@ -31,4 +31,6 @@
 //= require tabler
 //= require tabler.plugins
 //= require jquery_ujs
+//= require jquery-ui/widget
+//= require jquery-ui/widgets/sortable
 //= require_tree .

app/assets/javascripts/room.js.erb

@@ -39,6 +39,11 @@ $(document).on('turbolinks:load', function(){
         }, 2000)
       }
     });
+
+    // Forces the wrapper to take the entire screen height if the user can't create rooms
+    if ($("#cant-create-room-wrapper").length){
+      $(".wrapper").css('height', '100%').css('height', '-=130px');
+    }
   }
 
   // Display and update all fields related to creating a room in the createRoomModal

app/assets/javascripts/user_edit.js

@@ -0,0 +1,88 @@
+// BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
+//
+// Copyright (c) 2018 BigBlueButton Inc. and by respective authors (see below).
+//
+// This program is free software; you can redistribute it and/or modify it under the
+// terms of the GNU Lesser General Public License as published by the Free Software
+// Foundation; either version 3.0 of the License, or (at your option) any later
+// version.
+//
+// BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
+// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+// PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+//
+// You should have received a copy of the GNU Lesser General Public License along
+// with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
+
+$(document).on('turbolinks:load', function(){
+    var controller = $("body").data('controller');
+    var action = $("body").data('action');
+    if ((controller == "admins" && action == "edit_user") || (controller == "users" && action == "edit")) {
+        $(".setting-btn").click(function(data){
+            var url = $("body").data("relative-root")
+            if (!url.endsWith("/")) {
+                url += "/"
+            }
+            url += "admins?setting=" + data.target.id
+
+            window.location.href = url
+        })
+
+        // Clear the role when the user clicks the x
+        $(".clear-role").click(clearRole)
+
+        // When the user selects an item in the dropdown add the role to the user
+        $("#role-select-dropdown").change(function(data){
+            var dropdown = $("#role-select-dropdown");
+            var select_role_id = dropdown.val();
+
+            if(select_role_id){
+                // Disable the role in the dropdown
+                var selected_role = dropdown.find('[value=\"' + select_role_id + '\"]');
+                selected_role.prop("disabled", true)
+
+                // Add the role tag
+                var tag_container = $("#role-tag-container");
+                tag_container.append("<span id=\"user-role-tag_" + select_role_id + "\" style=\"background-color:" + selected_role.data("colour") + ";\" class=\"tag\">" + 
+                    selected_role.text() + "<a data-role-id=\"" + select_role_id + "\" class=\"tag-addon clear-role\"><i data-role-id=\"" + select_role_id + "\" class=\"fas fa-times\"></i></a></span>");
+
+                // Update the role ids input that gets submited on user update
+                var role_ids = $("#user_role_ids").val()
+                role_ids += " " + select_role_id
+                $("#user_role_ids").val(role_ids)
+                
+                // Add the clear role function to the tag
+                $("#user-role-tag_" + select_role_id).click(clearRole);
+
+                // Reset the dropdown
+                dropdown.val(null)
+            }
+        })
+    }
+})
+
+// This function removes the specfied role from a user
+function clearRole(data){
+    // Get the role id
+    var role_id = $(data.target).data("role-id");
+    var role_tag = $("#user-role-tag_" + role_id);
+
+    // Remove the role tag
+    $(role_tag).remove()
+  
+    // Update the role ids input
+    var role_ids = $("#user_role_ids").val()
+    var parsed_ids = role_ids.split(' ')
+  
+    var index = parsed_ids.indexOf(role_id.toString());
+  
+    if (index > -1) {
+        parsed_ids.splice(index, 1);
+    }
+  
+    $("#user_role_ids").val(parsed_ids.join(' '))
+  
+    // Enable the role in the role select dropdown
+    var selected_role = $("#role-select-dropdown").find('[value=\"' + role_id + '\"]');
+    selected_role.prop("disabled", false)
+}