Admin panel (#496)

* Added the administrator role and functionality that comes with it  (#403)

* GRN-20: Added roles to the user model

* GRN-75: Added a view for admins to see their users

* GRN-77: Added Edit/Delete/Promote ability for admins

* GRN-71: Added admin account by default

* Changed the way locales are shown

* Updated the rest of the locales

* Changed the way available_locales are defined

* Updated locales in Russian

* Updated locaales for German

* Update user.rb

* Update admins.js

* GRN-15: Added the ability to change color and image from admin interface (#425)

* GRN-20: Added roles to the user model

* GRN-75: Added a view for admins to see their users

* GRN-77: Added Edit/Delete/Promote ability for admins

* GRN-71: Added admin account by default

* Changed the way locales are shown

* Updated the rest of the locales

* Changed the way available_locales are defined

* Updated locales in Russian

* Updated locaales for German

* GRN-15: Added the ability for admins to customize color and image

* Update user.rb

* Update user.rb

* Update routes.rb

* Update admins_controller.rb

* GRN-87:Added a super admin role and made changes to how to the design works (#430)

* GRN-20: Added roles to the user model

* GRN-75: Added a view for admins to see their users

* GRN-77: Added Edit/Delete/Promote ability for admins

* GRN-71: Added admin account by default

* Changed the way locales are shown

* Updated the rest of the locales

* Changed the way available_locales are defined

* Updated locales in Russian

* Updated locaales for German

* GRN-15: Added the ability for admins to customize color and image

* Added the super admin and completed the design tab

* Update user.rb

* Update themes_controller_spec.rb

* Update routes.rb

* Update admins_controller.rb

* Removed duplicated code that broke the build after last merge

* GRN-78: Restructured some of the views to make the UI more consistent and responsive (#435)

* GRN-20: Added roles to the user model

* GRN-75: Added a view for admins to see their users

* GRN-77: Added Edit/Delete/Promote ability for admins

* GRN-71: Added admin account by default

* GRN-15: Added the ability for admins to customize color and image

* Added the super admin and completed the design tab

* GRN-78: Cleaned up buttons and moved signin to its own page

* GRN-78: Moved the Rooms and Recordings link to nav bar

* Merge fix

* Views restructure fix (#458)

* Added cache to gitlab-ci.yml

* Restructured seed

* GRN2-99 -> GRN2-106: UI cleanup and refactoring (#478)

* GRN2-98: Change Fullname to Full name

* GRN2-105: Changed View Users to Manage Users

* GRN2-101/103: Updated email to match branding

* GRN2-100: Updated Email Sent flash to be more descriptive

* GRN2-104: Redirect user to sign in page w/ flash after clicking activation link

* GRN2-102: Changed the wording in the verification email

* GRN2-99: Added email form validation

* GRN2-106: Cleaned up Users list front end

* Fixes to rake and admin password validator for passing rubocop

* GRN2-113: Fixed issues with admin panel (#479)

* GRN2-116: Code clean up after restructure of views (#482)

* Removed unused references

* Rubocop

* Added pagination to admin view (#483)

* GRN2-114: Added the ability for admins to ban/unban users (#487)

* Added the ability for admins to ban and unban users

* Update sessions_helper.rb

*  Merge branch 'master' into admin-panel  (#492)

* Updated rubocop gem

* Updated rubocop and fixed issues (#490)

* Rubocop fixes

* GRN2-122: Updated sign in flow for admins and switch design tab to site settings (#489)

* Switched design tab to site settings

* Update _header with spaces instead of tabs

* Added more test cases to increase coverage (#494)

app/assets/javascripts/admins.js

@@ -0,0 +1,97 @@
+// 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');
+
+  // 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")
+      $("#delete-confirm").parent().attr("action", "/u/" + uid)
+    })
+
+    // Change the color of the color inputs when the color is changed
+    $(".colorinput-input").change(function(data) {
+      // Get the color from the input
+      var color = $(data.target).val()
+
+      // Update the color in the database and reload the page
+      $.post($("#coloring-path").val(), {color: color}).done(function(data) {
+        location.reload()
+      });
+    });
+
+    // Submit search if the user hits enter
+    $("#search-input").keypress(function(key) {
+      var keyPressed = key.which
+      if (keyPressed == 13) {
+        searchPage()
+      }
+    })
+
+    // Add listeners for sort
+    $("th[data-order]").click(function(data){
+      var header_elem = $(data.target)
+
+      if(header_elem.data('order') === 'asc'){ // asc
+        header_elem.data('order', 'desc');
+      }
+      else if(header_elem.data('order') === 'desc'){ // desc
+        header_elem.data('order', 'none');
+      }
+      else{ // none
+        header_elem.data('order', 'asc');
+      }
+
+      var search = $("#search-input").val()
+      window.location.replace(window.location.pathname + "?page=1&search=" + search + "&column=" + header_elem.data("header") + "&direction="+ header_elem.data('order'))
+    })
+  }
+
+  // Only run on the admins edit user page.
+  if (controller == "admins" && action == "edit_user") {
+    $("#users").click(function(data){
+      var url = $("body").data("relative-root")
+      if (!url.endsWith("/")) {
+        url += "/"
+      }
+      url += "admins"
+
+      window.location.href = url
+    })
+  }
+});
+
+// Change the branding image to the image provided
+function changeBrandingImage(path) {
+  var url = $("#branding-url").val()
+  $.post(path, {url: url})
+}
+
+// Searches the user table for the given string
+function searchPage() {
+  var search = $("#search-input").val()
+
+  window.location.replace(window.location.pathname + "?page=1&search=" + search)
+}
+
+// Clears the search bar
+function clearSearch() {
+  window.location.replace(window.location.pathname + "?page=1")
+}

app/assets/javascripts/room.js

@@ -57,7 +57,7 @@ $(document).on('turbolinks:load', function(){
   }
 
   // Display and update all fields related to creating a room in the createRoomModal
-  $("#create-room").click(function(){
+  $("#create-room-block").click(function(){
     $("#create-room-name").val("")
     $("#createRoomModal form").attr("action", $("body").data('relative-root'))
     updateDropdown($(".dropdown-item[value='default']"))

app/assets/javascripts/settings.js

@@ -20,7 +20,7 @@ $(document).on('turbolinks:load', function(){
   var action = $("body").data('action');
 
   // Only run on the settings page.
-  if ((controller == "users" && action == "edit") || (controller == "users" && action == "update")){
+  if ((controller == "users" && action == "edit") || (controller == "users" && action == "update") || (controller == "admins" && action == "index")){
     var settingsButtons = $('.setting-btn');
     var settingsViews = $('.setting-view');
 

app/assets/javascripts/sort.js

@@ -15,8 +15,10 @@
 // with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 
 $(document).on('turbolinks:load', function(){
-  // Check if there is a table on this page
-  if ($("table").length) {
+  var controller = $("body").data('controller');
+  var action = $("body").data('action');
+
+  if(controller == "rooms" && action == "show" || controller == "rooms" && action == "update" || controller == "users" && action == "recordings"){
 
     // Choose active header
     // (Name, Length or Users)

app/assets/stylesheets/_tabler-custom.scss

@@ -31,7 +31,7 @@
 
 @import "tabler/nav";
 @import "tabler/button";
-//@import "tabler/alert";
+@import "tabler/alert";
 //@import "tabler/close";
 //@import "tabler/badge";
 @import "tabler/tables";
@@ -68,7 +68,7 @@
 //@import "tabler/forms/custom-selectgroup";
 @import "tabler/forms/custom-switch";
 //@import "tabler/forms/custom-imagecheck";
-//@import "tabler/forms/custom-colorinput";
+@import "tabler/forms/custom-colorinput";
 
 //@import "tabler/timeline";
 

app/assets/stylesheets/admins.scss

@@ -0,0 +1,32 @@
+// 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/>.
+
+#users-table {
+  .user-role:hover {
+    cursor: default;
+  }
+}
+
+#clear-search {
+  z-index: 9;
+  position: absolute;
+  right: 55px;
+  top: 8px;
+
+  &:hover {
+    cursor: pointer;
+  }
+}

app/assets/stylesheets/application.scss

@@ -35,12 +35,17 @@
 @import "tabler-custom";
 
 @import "utilities/variables";
+@import "admins";
 @import "main";
 @import "rooms";
 @import "sessions";
 
 @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext);
 
+* {
+  outline: none !important;
+}
+
 html, body {
   position: relative;
   width: 100%;
@@ -77,10 +82,6 @@ a {
   width: 100%;
 }
 
-.table-responsive {
-  overflow: visible;
-}
-
 .background {
   background-color: $background-color;
 }
@@ -135,3 +136,34 @@ a {
     background-color: green !important;
   }
 }
+
+input:focus {
+    border-color: $primary !important;
+}
+
+.list-group-item-action.active {
+  color: $primary;
+}
+
+.header .header-nav {
+  color: $text-muted !important;
+
+  &:hover {
+    padding-bottom: 21px;
+    border-bottom: 1px solid $primary;
+  }
+
+  &.active {
+    color: $primary !important;
+    padding-bottom: 21px;
+    border-bottom: 1px solid $primary;
+  }
+}
+
+table {
+  thead {
+    th[data-order]:hover {
+      cursor: pointer;
+    }
+  }
+}

app/assets/stylesheets/main.scss

@@ -144,3 +144,7 @@
     padding:10px 10px 10px 10px;
   }
 }
+
+.signin-button {
+  font-size: 16px;
+}

app/assets/stylesheets/rooms.scss

@@ -56,3 +56,12 @@
   vertical-align: middle;
   padding-top: 12px;
 }
+
+#create-room-block {
+  border: 1px dashed lightgray;
+
+  &:hover {
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+}

app/assets/stylesheets/utilities/_primary_themes.scss

@@ -0,0 +1,125 @@
+.btn-primary,
+.btn-primary:visited,
+.btn-primary i {
+  background-color: $primary-color !important;
+  border-color: $primary-color !important;
+  color: white !important;
+}
+
+.btn-primary:active,
+.btn-primary:active:focus,
+.btn-primary:active:hover,
+.btn-primary:focus,
+.btn-primary:hover,
+.btn-primary:hover i {
+  background-color: $primary-color-darken !important;
+  border-color: $primary-color-darken !important;
+  color: white !important;
+}
+
+a {
+  color: $primary-color !important;
+}
+
+.oauth-signin {
+  color: white !important;
+
+  &:hover * {
+    color: white !important;
+  }
+}
+
+.btn-outline-primary {
+  border-color: $primary-color !important;
+  color: $primary-color !important;
+
+  &:hover {
+    background: $primary-color !important;
+    color: white !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px $primary-color-lighten;
+  }
+}
+
+.header {
+  & .avatar {
+    background-color: $primary-color !important;
+    color: white !important;
+  }
+
+  & a:hover:not(.btn) {
+    color: $primary-color !important;
+  }
+
+  & .header-nav {
+    border-color: $primary-color !important;
+  }
+
+  & .header-nav.active {
+    color: $primary-color !important;
+  }
+}
+
+.dropdown-item {
+  color: #6e7687 !important;
+  &:hover {
+    color: $primary-color !important;
+  }
+  &:active {
+    background-color: $primary-color-lighten !important;
+  }
+}
+
+input:focus, select:focus {
+  box-shadow: 0 0 5px $primary-color !important;
+  border-color: $primary-color !important;
+}
+
+.list-group-item.active {
+  background-color: $primary-color-lighten !important;
+
+  &, .list-group-item.active * {
+    color: $primary-color !important;
+  }
+}
+
+.text-primary {
+  color: $primary-color !important;
+}
+
+.bg-primary {
+  background-color: $primary-color !important;
+}
+
+.btn-danger {
+  color: white !important;
+}
+
+#clear-search {
+  &:hover {
+    color: $primary-color-darken !important;
+  }
+}
+
+.pagination {
+  .page-item {
+    &.active a {
+      color:white !important;
+      background-color: $primary-color !important;
+    }
+
+    & a {
+      border-color: $primary-color !important;
+    }
+
+    & a:hover {
+      background-color: $primary-color-lighten !important;
+    }
+
+    & a:focus {
+      box-shadow: 0 0 3px $primary-color !important;
+    }
+  }
+}