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

.gitignore

@@ -32,6 +32,9 @@ vendor/bundle
 .env
 env
 
+# Ignore yarn configs
+/node_modules
+
 # IDEs
 .idea
 .idea/**

Gemfile

@@ -27,6 +27,7 @@ gem 'mini_racer', platforms: :ruby
 
 # Use jquery as the JavaScript library
 gem 'jquery-rails', '~> 4.3.3'
+gem 'jquery-ui-rails'
 
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
 gem 'turbolinks', '~> 5'
@@ -72,8 +73,6 @@ gem 'redcarpet'
 # For health check endpoint
 gem "health_check"
 
-# For providing user roles
-gem "rolify"
 # For limiting access based on user roles
 gem 'cancancan', '~> 2.0'
 

Gemfile.lock

@@ -149,6 +149,8 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (6.0.1)
+      railties (>= 3.2.16)
     json (2.2.0)
     jwt (2.2.1)
     libv8 (7.3.492.27.1)
@@ -257,7 +259,6 @@ GEM
       syslog_protocol
     request_store (1.4.1)
       rack (>= 1.4)
-    rolify (5.2.0)
     rspec-core (3.8.2)
       rspec-support (~> 3.8.0)
     rspec-expectations (3.8.4)
@@ -363,6 +364,7 @@ DEPENDENCIES
   i18n-language-mapping (~> 0.1.0)
   jbuilder (~> 2.5)
   jquery-rails (~> 4.3.3)
+  jquery-ui-rails
   listen (~> 3.0.5)
   lograge
   mini_racer
@@ -381,7 +383,6 @@ DEPENDENCIES
   recaptcha
   redcarpet
   remote_syslog_logger
-  rolify
   rspec-rails (~> 3.7)
   rubocop
   sassc-rails

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)
-    })
-
-    //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);
-    })
-  }
-
-  if (controller == "admins" && action == "site_settings") {
-    loadColourSelectors()
-  }
-
-  // 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
-
-      window.location.href = 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')
+
+        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("")
+      })
+
+      // 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);
+
+      loadRoleColourSelector(role_colour, $("#role-colorinput-regular").data("disabled"));
+
+      // 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)
+}

app/assets/stylesheets/admins.scss

@@ -54,4 +54,29 @@
     height: 2rem;
     width: 2rem;
   }
+}
+
+.sort-disabled{
+  background: #e6e6e6 !important;
+  color: rgb(110, 118, 135) !important;
+  opacity: 0.75;
+  &:hover{
+    opacity: 0.9;
+  }
+}
+
+.form-disable{
+  background-color: #e6e6e6;
+}
+
+.role-colour-picker{
+  color: white !important;
+}
+
+.custom-role-tag{
+  color: white !important;
+}
+
+.user-role-tag{
+  color: white !important;
 }

app/assets/stylesheets/application.scss

@@ -32,6 +32,7 @@
 
 @import "tabler/variables";
 @import "bootstrap";
+@import "jquery-ui/sortable";
 @import "tabler-custom";
 
 @import "utilities/variables";

app/assets/stylesheets/users.scss

@@ -18,3 +18,7 @@
 // Place all the styles related to the Users controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+.user-role-tag{
+    color: white !important;
+}

app/assets/stylesheets/utilities/_primary_themes.scss

@@ -85,6 +85,11 @@ a {
   &:hover {
     color: $primary-color !important;
     background-color: $primary-color-lighten !important;
+    &.sort-disabled {
+      background: #e6e6e6 !important;
+      color: rgb(110, 118, 135) !important;
+      opacity: 0.9;
+    }
   }
   &:active {
     background-color: $primary-color-lighten !important;
@@ -102,6 +107,12 @@ input:focus, select:focus {
   &, .list-group-item.active * {
     color: $primary-color !important;
   }
+
+  &.sort-disabled {
+    background: #e6e6e6 !important;
+    color: rgb(110, 118, 135) !important;
+    opacity: 0.9 !important;
+  }
 }
 
 .text-primary {