Double check the admin status when toggling the superadmin

config/permissions.php

@@ -23,7 +23,7 @@ return [
         ],
     ],
 
-    'CSV Import' => [
+    'Import' => [
         [
             'permission' => 'import',
             'display'    => true,

public/css/build/app.css

@@ -1537,6 +1537,59 @@ This just hides the padding on the right side of the mark tag for a less weird v
 mark {
   padding-right: 0px;
 }
+/**
+Radio toggle styles for permission settings and check/uncheck all
+ */
+.radio-toggle-wrapper {
+  display: flex;
+  padding: 2px;
+  background-color: #e9e9e9;
+  margin-bottom: 3px;
+  border-radius: 4px;
+  border: 1px #d6d6d6 solid;
+}
+.radio-slider-inputs {
+  flex-grow: 1;
+}
+.radio-slider-inputs input[type=radio] {
+  display: none;
+}
+.radio-slider-inputs label {
+  display: block;
+  margin-bottom: 0px;
+  padding: 6px 8px;
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+  transition: all 0.4s 0s ease;
+  cursor: pointer;
+}
+.radio-slider-inputs label {
+  color: #9a9999;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.radio-slider-inputs .allow:checked + label {
+  background-color: green;
+  color: white;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.radio-slider-inputs .inherit:checked + label {
+  background-color: rgba(255, 204, 51, 0.11);
+  color: #9a9999;
+  border-radius: 4px;
+  border: 1px white solid;
+}
+.radio-slider-inputs .deny:checked + label {
+  background-color: #a94442;
+  color: white;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.remember-toggle {
+  cursor: pointer;
+}
 
 
 /*# sourceMappingURL=app.css.map*/

public/css/build/overrides.css

@@ -1161,6 +1161,59 @@ This just hides the padding on the right side of the mark tag for a less weird v
 mark {
   padding-right: 0px;
 }
+/**
+Radio toggle styles for permission settings and check/uncheck all
+ */
+.radio-toggle-wrapper {
+  display: flex;
+  padding: 2px;
+  background-color: #e9e9e9;
+  margin-bottom: 3px;
+  border-radius: 4px;
+  border: 1px #d6d6d6 solid;
+}
+.radio-slider-inputs {
+  flex-grow: 1;
+}
+.radio-slider-inputs input[type=radio] {
+  display: none;
+}
+.radio-slider-inputs label {
+  display: block;
+  margin-bottom: 0px;
+  padding: 6px 8px;
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+  transition: all 0.4s 0s ease;
+  cursor: pointer;
+}
+.radio-slider-inputs label {
+  color: #9a9999;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.radio-slider-inputs .allow:checked + label {
+  background-color: green;
+  color: white;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.radio-slider-inputs .inherit:checked + label {
+  background-color: rgba(255, 204, 51, 0.11);
+  color: #9a9999;
+  border-radius: 4px;
+  border: 1px white solid;
+}
+.radio-slider-inputs .deny:checked + label {
+  background-color: #a94442;
+  color: white;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.remember-toggle {
+  cursor: pointer;
+}
 
 
 /*# sourceMappingURL=overrides.css.map*/

public/css/dist/all.css

@@ -22873,6 +22873,59 @@ This just hides the padding on the right side of the mark tag for a less weird v
 mark {
   padding-right: 0px;
 }
+/**
+Radio toggle styles for permission settings and check/uncheck all
+ */
+.radio-toggle-wrapper {
+  display: flex;
+  padding: 2px;
+  background-color: #e9e9e9;
+  margin-bottom: 3px;
+  border-radius: 4px;
+  border: 1px #d6d6d6 solid;
+}
+.radio-slider-inputs {
+  flex-grow: 1;
+}
+.radio-slider-inputs input[type=radio] {
+  display: none;
+}
+.radio-slider-inputs label {
+  display: block;
+  margin-bottom: 0px;
+  padding: 6px 8px;
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+  transition: all 0.4s 0s ease;
+  cursor: pointer;
+}
+.radio-slider-inputs label {
+  color: #9a9999;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.radio-slider-inputs .allow:checked + label {
+  background-color: green;
+  color: white;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.radio-slider-inputs .inherit:checked + label {
+  background-color: rgba(255, 204, 51, 0.11);
+  color: #9a9999;
+  border-radius: 4px;
+  border: 1px white solid;
+}
+.radio-slider-inputs .deny:checked + label {
+  background-color: #a94442;
+  color: white;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.remember-toggle {
+  cursor: pointer;
+}
 
 
 /*# sourceMappingURL=app.css.map*/
@@ -24521,6 +24574,59 @@ This just hides the padding on the right side of the mark tag for a less weird v
 mark {
   padding-right: 0px;
 }
+/**
+Radio toggle styles for permission settings and check/uncheck all
+ */
+.radio-toggle-wrapper {
+  display: flex;
+  padding: 2px;
+  background-color: #e9e9e9;
+  margin-bottom: 3px;
+  border-radius: 4px;
+  border: 1px #d6d6d6 solid;
+}
+.radio-slider-inputs {
+  flex-grow: 1;
+}
+.radio-slider-inputs input[type=radio] {
+  display: none;
+}
+.radio-slider-inputs label {
+  display: block;
+  margin-bottom: 0px;
+  padding: 6px 8px;
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+  transition: all 0.4s 0s ease;
+  cursor: pointer;
+}
+.radio-slider-inputs label {
+  color: #9a9999;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.radio-slider-inputs .allow:checked + label {
+  background-color: green;
+  color: white;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.radio-slider-inputs .inherit:checked + label {
+  background-color: rgba(255, 204, 51, 0.11);
+  color: #9a9999;
+  border-radius: 4px;
+  border: 1px white solid;
+}
+.radio-slider-inputs .deny:checked + label {
+  background-color: #a94442;
+  color: white;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+.remember-toggle {
+  cursor: pointer;
+}
 
 
 /*# sourceMappingURL=overrides.css.map*/

public/js/dist/all.js

@@ -52820,6 +52820,88 @@ document.addEventListener('livewire:init', function () {
   });
 });
 
+// Check/Uncheck all radio buttons in the permissions group
+$('.header-row input:radio').change(function () {
+  value = $(this).attr('value');
+  area = $(this).data('checker-group');
+  $('.radiochecker-' + area + '[value=' + value + ']').prop('checked', true);
+});
+
+// Generic toggleable callouts with remember state
+$(".remember-toggle").on("click", function () {
+  var toggleable_callout_id = $(this).attr('id');
+  var toggle_content_class = 'toggle-content-' + $(this).attr('id');
+  var toggle_arrow = '#toggle-arrow-' + toggleable_callout_id;
+  var toggle_cookie_name = 'toggle_state_' + toggleable_callout_id;
+  console.log('Callout ID: ' + toggleable_callout_id);
+  console.log('Content ID: ' + toggle_content_class);
+  console.log('Arrow ID: ' + toggle_arrow);
+  console.log('Cookie Name: ' + toggle_cookie_name);
+  $('.' + toggle_content_class).fadeToggle(100);
+  $(toggle_arrow).toggleClass('fa-caret-right fa-caret-down');
+  var toggle_open = $(toggle_arrow).hasClass('fa-caret-down');
+  console.log('Cookie will set open state to: ' + toggle_open);
+  document.cookie = toggle_cookie_name + "=" + toggle_open + ';path=/';
+});
+var all_cookies = document.cookie.split(';');
+for (var i in all_cookies) {
+  var trimmed_cookie = all_cookies[i].trim(' ');
+  elems = all_cookies[i].split('=', 2);
+
+  // We have to do more here since we don't know the name of the selector
+  if (trimmed_cookie.startsWith('toggle_state_')) {
+    console.log(trimmed_cookie + ' matches toggle_state_');
+    var toggle_selector_name = elems[0].replace(' toggle_state_', '');
+    if (elems[1] == 'true') {
+      console.log('Selector name for cookie click trigger: ' + toggle_selector_name);
+      $('#' + toggle_selector_name + '.remember-toggle').trigger('click');
+    }
+  }
+}
+
+/**
+ * This handles the show/hide of superuser and admin specific permissions
+ * on the group edit and user edit pages
+ */
+if ($("#superuser_allow").is(':checked')) {
+  // Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
+  $(".nonsuperuser").hide();
+  $(".nonsuperuser").attr('display', 'none');
+}
+$(".superuser").change(function () {
+  if ($(this).val() == '1') {
+    $(".nonsuperuser").fadeOut();
+    $(".nonsuperuser").attr('display', 'none');
+    $(".nonadmin").fadeOut();
+    $(".nonadmin").attr('display', 'none');
+  } else if ($(this).val() != '1') {
+    $(".nonsuperuser").fadeIn();
+    $(".nonsuperuser").attr('display', 'block');
+
+    // If the superuser button has been set to deny, we need to
+    // check that the admin button isn't set to allow, before we show non-admin stuff
+    if ($("#admin_allow").is(':checked')) {
+      // Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
+      $(".nonadmin").hide();
+      $(".nonadmin").attr('display', 'none');
+    }
+  }
+});
+if ($("#admin_allow").is(':checked')) {
+  // Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
+  $(".nonadmin").hide();
+  $(".nonadmin").attr('display', 'none');
+}
+$(".admin").change(function () {
+  if ($(this).val() == '1') {
+    $(".nonadmin").fadeOut();
+    $(".nonadmin").attr('display', 'none');
+  } else if ($(this).val() != '1') {
+    $(".nonadmin").fadeIn();
+    $(".nonadmin").attr('display', 'block');
+  }
+});
+
 /***/ }),
 
 /***/ "./resources/assets/js/snipeit_modals.js":

public/mix-manifest.json

@@ -1,9 +1,9 @@
 {
-    "/js/dist/all.js": "/js/dist/all.js?id=76d88f0f91b852f7eecbce357ab5858b",
+    "/js/dist/all.js": "/js/dist/all.js?id=e78128438f0b07a393dc7947ef453b5f",
     "/css/dist/skins/skin-black-dark.css": "/css/dist/skins/skin-black-dark.css?id=42f97cd5b9ee7521b04a448e7fc16ac9",
     "/css/dist/skins/_all-skins.css": "/css/dist/skins/_all-skins.css?id=3e8b8221c159b829a0edd562eb717563",
-    "/css/build/overrides.css": "/css/build/overrides.css?id=465a8ea1975b39e936cb715033786882",
-    "/css/build/app.css": "/css/build/app.css?id=507ff83b5b8e3a9f8ac636f8e6237111",
+    "/css/build/overrides.css": "/css/build/overrides.css?id=b5f8aade4b14002a8e57d5999bf9cb44",
+    "/css/build/app.css": "/css/build/app.css?id=8dbcedb7e8f5d10cdfb0d85c246b4c74",
     "/css/build/AdminLTE.css": "/css/build/AdminLTE.css?id=ee0ed88465dd878588ed044eefb67723",
     "/css/dist/skins/skin-yellow.css": "/css/dist/skins/skin-yellow.css?id=3d8a3d2035ea28aaad4a703c2646f515",
     "/css/dist/skins/skin-yellow-dark.css": "/css/dist/skins/skin-yellow-dark.css?id=3979929a3423ff35b96b1fc84299fdf3",
@@ -19,7 +19,7 @@
     "/css/dist/skins/skin-blue.css": "/css/dist/skins/skin-blue.css?id=b2cd9f59d7e8587939ce27b2d3363d82",
     "/css/dist/skins/skin-blue-dark.css": "/css/dist/skins/skin-blue-dark.css?id=7277edd636cf46aa7786a4449ce0ead7",
     "/css/dist/skins/skin-black.css": "/css/dist/skins/skin-black.css?id=cbd06cc1d58197ccc81d4376bbaf0d28",
-    "/css/dist/all.css": "/css/dist/all.css?id=bd048a75bb06ef72d1cac7c19f0ef8a6",
+    "/css/dist/all.css": "/css/dist/all.css?id=0a82b3a7cb1b65fd08be77ba5c29b22f",
     "/css/dist/signature-pad.css": "/css/dist/signature-pad.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/css/dist/signature-pad.min.css": "/css/dist/signature-pad.min.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/js/select2/i18n/af.js": "/js/select2/i18n/af.js?id=4f6fcd73488ce79fae1b7a90aceaecde",

resources/assets/js/snipeit.js

@@ -579,6 +579,8 @@ function htmlEntities(str) {
     
 })(jQuery);
 
+
+
 /**
  * Universal Livewire Select2 integration
  *
@@ -610,3 +612,105 @@ document.addEventListener('livewire:init', () => {
         });
     });
 });
+
+
+
+
+// Check/Uncheck all radio buttons in the permissions group
+$('.header-row input:radio').change(function() {
+    value = $(this).attr('value');
+    area = $(this).data('checker-group');
+    $('.radiochecker-'+area+'[value='+value+']').prop('checked', true);
+});
+
+// Generic toggleable callouts with remember state
+$(".remember-toggle").on("click",function(){
+    var toggleable_callout_id = $(this).attr('id');
+    var toggle_content_class = 'toggle-content-'+$(this).attr('id');
+    var toggle_arrow = '#toggle-arrow-' + toggleable_callout_id;
+    var toggle_cookie_name='toggle_state_'+toggleable_callout_id;
+
+    console.log('Callout ID: ' + toggleable_callout_id);
+    console.log('Content ID: '+toggle_content_class);
+    console.log('Arrow ID: '+toggle_arrow);
+    console.log('Cookie Name: '+toggle_cookie_name);
+
+    $('.'+toggle_content_class).fadeToggle(100);
+    $(toggle_arrow).toggleClass('fa-caret-right fa-caret-down');
+    var toggle_open = $(toggle_arrow).hasClass('fa-caret-down');
+    console.log('Cookie will set open state to: '+toggle_open);
+    document.cookie=toggle_cookie_name+"="+toggle_open+';path=/';
+});
+
+var all_cookies = document.cookie.split(';')
+for (var i in all_cookies) {
+    var trimmed_cookie = all_cookies[i].trim(' ')
+    elems = all_cookies[i].split('=', 2);
+
+
+    // We have to do more here since we don't know the name of the selector
+    if (trimmed_cookie.startsWith('toggle_state_')) {
+        console.log(trimmed_cookie + ' matches toggle_state_');
+        var toggle_selector_name = elems[0].replace(' toggle_state_','');
+        if (elems[1] == 'true') {
+            console.log('Selector name for cookie click trigger: '+toggle_selector_name);
+            $('#'+toggle_selector_name+'.remember-toggle').trigger('click')
+        }
+    }
+
+}
+
+
+/**
+ * This handles the show/hide of superuser and admin specific permissions
+ * on the group edit and user edit pages
+ */
+if ($("#superuser_allow").is(':checked')) {
+
+    // Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
+    $(".nonsuperuser").hide();
+    $(".nonsuperuser").attr('display','none');
+}
+
+
+$(".superuser").change(function() {
+    if ($(this).val() == '1') {
+        $(".nonsuperuser").fadeOut();
+        $(".nonsuperuser").attr('display','none');
+        $(".nonadmin").fadeOut();
+        $(".nonadmin").attr('display','none');
+    } else if ($(this).val() != '1') {
+        $(".nonsuperuser").fadeIn();
+        $(".nonsuperuser").attr('display','block');
+
+        // If the superuser button has been set to deny, we need to
+        // check that the admin button isn't set to allow, before we show non-admin stuff
+        if ($("#admin_allow").is(':checked')) {
+
+            // Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
+            $(".nonadmin").hide();
+            $(".nonadmin").attr('display','none');
+        }
+
+    }
+});
+
+
+
+if ($("#admin_allow").is(':checked')) {
+
+    // Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
+    $(".nonadmin").hide();
+    $(".nonadmin").attr('display','none');
+}
+
+$(".admin").change(function() {
+    if ($(this).val() == '1') {
+        $(".nonadmin").fadeOut();
+        $(".nonadmin").attr('display','none');
+    } else if ($(this).val() != '1') {
+        $(".nonadmin").fadeIn();
+        $(".nonadmin").attr('display','block');
+    }
+});
+

resources/assets/less/overrides.less

@@ -1301,4 +1301,66 @@ This just hides the padding on the right side of the mark tag for a less weird v
  */
 mark {
     padding-right: 0px;
+}
+
+/**
+Radio toggle styles for permission settings and check/uncheck all
+ */
+.radio-toggle-wrapper {
+  display: flex;
+  padding: 2px;
+  background-color: #e9e9e9;
+  margin-bottom: 3px;
+  border-radius: 4px;
+  border: 1px #d6d6d6 solid;
+}
+
+.radio-slider-inputs {
+  flex-grow: 1;
+}
+
+.radio-slider-inputs input[type=radio] {
+  display: none;
+}
+
+.radio-slider-inputs label {
+  display: block;
+  margin-bottom: 0px;
+  padding: 6px 8px;
+  color: #fff;
+  font-weight: bold;
+  text-align: center;
+  transition : all .4s 0s ease;
+  cursor: pointer;
+}
+
+.radio-slider-inputs label {
+  color: #9a9999;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+
+.radio-slider-inputs .allow:checked + label {
+  background-color: green;
+  color: white;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+
+.radio-slider-inputs .inherit:checked + label {
+  background-color: rgba(255, 204, 51, 0.11);
+  color: #9a9999;
+  border-radius: 4px;
+  border: 1px white solid;
+}
+
+.radio-slider-inputs .deny:checked + label {
+  background-color: #a94442;
+  color: white;
+  border-radius: 4px;
+  border: 1px transparent solid;
+}
+
+.remember-toggle {
+  cursor: pointer;
 }

resources/lang/en-US/permissions.php

@@ -24,7 +24,7 @@ return array(
         'note'       => 'Determines whether the user has access to most aspects of the system EXCEPT the System Admin Settings. These users will be able to manage users, locations, categories, etc, but ARE constrained by Full Multiple Company Support if it is enabled.',
     ],
 
-    'csv-import' => [
+    'import' => [
         'name' => 'CSV Import',
         'note'       => 'This will allow users to import even if access to users, assets, etc is denied elsewhere.',
     ],

resources/views/groups/edit.blade.php

@@ -78,64 +78,3 @@
 </div>
 
 @stop
-@section('moar_scripts')
-
-    <script nonce="{{ csrf_token() }}">
-
-        $(document).ready(function(){
-
-            if ($("#superuser_allow").is(':checked')) {
-                // alert('superuser is checked on page load');
-
-                // Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
-                $(".nonsuperuser").hide();
-                $(".nonsuperuser").attr('display','none');
-            }
-
-
-            $(".superuser").change(function() {
-                if ($(this).val() == '1') {
-                    $(".nonsuperuser").fadeOut();
-                    $(".nonsuperuser").attr('display','none');
-                    $(".nonadmin").fadeOut();
-                    $(".nonadmin").attr('display','none');
-                } else if ($(this).val() == '0') {
-                    $(".nonsuperuser").fadeIn();
-                    $(".nonsuperuser").attr('display','block');
-                }
-            });
-
-
-
-            if ($("#admin_allow").is(':checked')) {
-                // alert('admin is checked on page load');
-
-                // Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
-                $(".nonadmin").hide();
-                $(".nonadmin").attr('display','none');
-            }
-
-            $(".admin").change(function() {
-                if ($(this).val() == '1') {
-                    $(".nonadmin").fadeOut();
-                    $(".nonadmin").attr('display','none');
-                } else if ($(this).val() == '0') {
-                    $(".nonadmin").fadeIn();
-                    $(".nonadmin").attr('display','block');
-                }
-            });
-
-
-            // Check/Uncheck all radio buttons in the group
-            $('.header-row input:radio').change(function() {
-                value = $(this).attr('value');
-                area = $(this).data('checker-group');
-                $('.radiochecker-'+area+'[value='+value+']').prop('checked', true);
-            });
-
-
-        });
-
-
-    </script>
-@stop

resources/views/partials/forms/edit/permissions-base.blade.php

@@ -1,229 +1,192 @@
-<style>
-  .radio-toggle-wrapper {
-    display: flex;
-    padding: 2px;
-    background-color: #e9e9e9;
-    margin-bottom: 3px;
-    border-radius: 4px;
-    border: 1px #d6d6d6 solid;
-  }
 
-  .radio-slider-inputs {
-    flex-grow: 1;
-  }
-
-  .radio-slider-inputs input[type=radio] {
-    display: none;
-  }
-
-  .radio-slider-inputs label {
-    display: block;
-    margin-bottom: 0px;
-    padding: 6px 8px;
-    color: #fff;
-    font-weight: bold;
-    text-align: center;
-    transition : all .4s 0s ease;
-    cursor: pointer;
-  }
-
-  .radio-slider-inputs label {
-    color: #9a9999;
-    border-radius: 4px;
-    border: 1px transparent solid;
-  }
-
-  .radio-slider-inputs .allow:checked + label {
-    background-color: green;
-    color: white;
-    border-radius: 4px;
-    border: 1px transparent solid;
-  }
-
-  .radio-slider-inputs .inherit:checked + label {
-    background-color: #f6f5f5;
-    color: #9a9999;
-    border-radius: 4px;
-    border: 1px #d6d6d6 solid;
-  }
-
-  .radio-slider-inputs .deny:checked + label {
-    background-color: #a94442;
-    color: white;
-    border-radius: 4px;
-    border: 1px transparent solid;
-  }
-
-</style>
-
-
-@foreach ($permissions as $area => $area_permission)
+@foreach ($permissions as $main_section => $main_section_permission)
 
   <!-- handle superadmin and reports, and anything else with only one option -->
   @php
-    $localPermission = $area_permission[0];
+    $sectionPermission = $main_section_permission[0];
   @endphp
-  <div class="form-group{{ ($localPermission['permission']!='superuser') ? ' nonsuperuser' : '' }}{{ ( ($localPermission['permission']!='superuser') && ($localPermission['permission']!='admin')) ? ' nonadmin' : '' }}">
-    <div class="callout callout-legend col-md-12">
-      <div class="col-md-10">
-        <h4>
-          {{ trans('permissions.'.str_slug($area).'.name') }}
-        </h4>
+  <div class="form-group {{ ($sectionPermission['permission']!='superuser') ? ' nonsuperuser' : '' }}{{ ( ($sectionPermission['permission']!='superuser') && ($sectionPermission['permission']!='admin')) ? ' nonadmin' : '' }}">
 
-        @if (\Lang::has('permissions.'.str_slug($area).'.note'))
-          <p>{{ trans('permissions.'.str_slug($area).'.note') }}</p>
-        @endif
+      <!-- start callout legend for major sections -->
+      <div class="callout callout-legend col-md-12">
+          
+         <!-- start left column with area name and note -->
+          <div class="col-md-10">
 
+              <h4 id="{{ str_slug($sectionPermission['permission'])}}" class="{{ (count($main_section_permission) > 1) ? 'remember-toggle': '' }}">
+                @if (count($main_section_permission) > 1)
+                  <x-icon type="caret-down" class="fa-fw" id="toggle-arrow-{{ str_slug($sectionPermission['permission'])}}" />
+                @endif
+                {{ trans('permissions.'.str_slug($main_section).'.name') }}
+              </h4>
 
-      </div>
-
-      <!-- Handle the checkall ALLOW and DENY radios -->
-      <div class="col-md-2 text-right header-row">
-        <div class="radio-toggle-wrapper">
-          <div class="radio-slider-inputs" data-tooltip="true" title="{{ (count($area_permission) > 1) ? trans('permissions.grant_all', ['area' => $area])  : trans('permissions.grant', ['area' => $area]) }}">
-            <input
-                    class="form-control {{ str_slug($area) }} allow"
-                    data-checker-group="{{ str_slug($area) }}"
-                    aria-label="{{ str_slug($area) }}"
-                    name="permission[{{ str_slug($area) }}]"
-                    @checked(array_key_exists(str_slug($area), $groupPermissions) && $groupPermissions[str_slug($area)] == '1')
-                    type="radio"
-                    value="1"
-                    {{-- Disable the superuser and admin allow if the user is not a superuser --}}
-                    @if (((str_slug($area) == 'admin') && (!auth()->user()->hasAccess('admin'))) || ((str_slug($area) == 'superuser') && (!auth()->user()->isSuperUser())))
-                      disabled
-                    @endif
-                    id="{{ str_slug($area) }}_allow"
-            >
-
-            <label class="allow" for="{{ str_slug($area) }}_allow">
-              <i class="fa-solid fa-square-check"></i>
-            </label>
+                @if (\Lang::has('permissions.'.str_slug($main_section).'.note'))
+                  <p>{{ trans('permissions.'.str_slug($main_section).'.note') }}</p>
+                @endif
           </div>
+          <!-- end left column with area name and note -->
 
+          <!-- Handle the checkall ALLOW and DENY radios in the right column -->
+          <div class="col-md-2 text-right header-row">
+            <div class="radio-toggle-wrapper">
 
-          @if ($use_inherit)
-            <div class="radio-slider-inputs"data-tooltip="true" title="{{ (count($area_permission) > 1) ? trans('permissions.inherit_all', ['area' => $area])  : trans('permissions.inherit', ['area' => $area]) }}">
-              <input
-                      class="form-control  {{ str_slug($area) }} inherit"
-                      data-checker-group="{{ str_slug($area) }}"
-                      aria-label="{{ str_slug($area) }}"
-                      name="permission[{{ str_slug($area) }}]"
-                      @checked(array_key_exists(str_slug($area), $groupPermissions) && $groupPermissions[str_slug($area)] == '-1')
-                      type="radio"
-                      value="-1"
-                      {{-- Disable the superuser and admin allow if the user is not a superuser --}}
-                      @if (((str_slug($area) == 'admin') && (!auth()->user()->hasAccess('admin'))) || ((str_slug($area) == 'superuser') && (!auth()->user()->isSuperUser())))
-                        disabled
-                      @endif
-                      id="{{ str_slug($area) }}_inherit"
-              >
+              <!-- start .radio-slider-inputs allow -->
+              <div class="radio-slider-inputs" data-tooltip="true" title="{{ (count($main_section_permission) > 1) ? trans('permissions.grant_all', ['area' => $main_section])  : trans('permissions.grant', ['area' => $main_section]) }}">
+                <input
+                        class="form-control {{ str_slug($main_section) }} allow"
+                        data-checker-group="{{ str_slug($main_section) }}"
+                        aria-label="{{ str_slug($main_section) }}"
+                        name="permission[{{ str_slug($main_section) }}]"
+                        @checked(array_key_exists(str_slug($main_section), $groupPermissions) && $groupPermissions[str_slug($main_section)] == '1')
+                        type="radio"
+                        value="1"
+                        {{-- Disable the superuser and admin allow if the user is not a superuser --}}
+                        @if (((str_slug($main_section) == 'admin') && (!auth()->user()->hasAccess('admin'))) || ((str_slug($main_section) == 'superuser') && (!auth()->user()->isSuperUser())))
+                          disabled
+                        @endif
+                        id="{{ str_slug($main_section) }}_allow"
+                >
 
-              <label class="inherit" for="{{ str_slug($area) }}_inherit">
-                <i class="fa-solid fa-layer-group"></i>
-              </label>
-            </div>
+                <label class="allow" for="{{ str_slug($main_section) }}_allow">
+                  <i class="fa-solid fa-square-check"></i>
+                </label>
+              </div>
+              <!-- end .radio-slider-inputs allow -->
 
-          @endif
-
-          <div class="radio-slider-inputs" data-tooltip="true" title="{{ (count($area_permission) > 1) ? trans('permissions.deny_all', ['area' => $area])  : trans('permissions.deny', ['area' => $area]) }}">
-            <input
-                    class="form-control  {{ str_slug($area) }} deny"
-                    data-checker-group="{{ str_slug($area) }}"
-                    aria-label="{{ str_slug($area) }}"
-                    name="permission[{{ str_slug($area) }}]"
-                    @checked(array_key_exists(str_slug($area), $groupPermissions) && $groupPermissions[str_slug($area)] == '0')
-                    type="radio"
-                    value="0"
-                    {{-- Disable the superuser and admin allow if the user is not a superuser --}}
-                    @if (((str_slug($area) == 'admin') && (!auth()->user()->hasAccess('admin'))) || ((str_slug($area) == 'superuser') && (!auth()->user()->isSuperUser())))
-                      disabled
-                    @endif
-                    id="{{ str_slug($area) }}_deny"
-            >
-
-            <label class="deny" for="{{ str_slug($area) }}_deny">
-              <i class="fa-solid fa-square-xmark"></i>
-            </label>
-          </div>
-
-        </div>
-      </div>
-
-    </div>
-  </div>
-  @if (count($area_permission) > 1)
-
-    @foreach ($area_permission as $index => $this_permission)
-      @if ($this_permission['display'])
-        @php
-            $section_translation = trans('permissions.'.str_slug($this_permission['permission']).'.name');
-        @endphp
-        <div class="{{ ($localPermission['permission']!='superuser') ? ' nonsuperuser' : '' }}{{ ( ($localPermission['permission']!='superuser') && ($localPermission['permission']!='admin')) ? ' nonadmin' : '' }}">
-          <div class="form-group" style="border-bottom: 1px solid #eee; padding-right: 9px;">
-            <div class="col-md-10">
-              <strong>{{ $section_translation }}</strong>
-              @if (\Lang::has('permissions.'.str_slug($this_permission['permission']).'.note'))
-                <p>{{ trans('permissions.'.str_slug($this_permission['permission']).'.note') }}</p>
-              @endif
-            </div>
-
-            <div class="form-group col-md-2 text-right">
-              <div class="radio-toggle-wrapper">
-                <div class="radio-slider-inputs" data-tooltip="true" title="{{ trans('permissions.grant', ['area' => $section_translation]) }}">
+              <!-- start .radio-slider-inputs inherit if used -->
+              @if ($use_inherit)
+                <div class="radio-slider-inputs" data-tooltip="true" title="{{ (count($main_section_permission) > 1) ? trans('permissions.inherit_all', ['area' => $main_section])  : trans('permissions.inherit', ['area' => $main_section]) }}">
                   <input
-                          class="form-control allow radiochecker-{{ str_slug($area) }}"
-                          aria-label="permission[{{ $this_permission['permission'] }}]"
-                          @checked(array_key_exists($this_permission['permission'], $groupPermissions) && $groupPermissions[$this_permission['permission']] == '1')
-                          name="permission[{{ $this_permission['permission'] }}]"
+                          class="form-control  {{ str_slug($main_section) }} inherit"
+                          data-checker-group="{{ str_slug($main_section) }}"
+                          aria-label="{{ str_slug($main_section) }}"
+                          name="permission[{{ str_slug($main_section) }}]"
+                          @checked(array_key_exists(str_slug($main_section), $groupPermissions) && $groupPermissions[str_slug($main_section)] == '0')
                           type="radio"
-                          id="{{ str_slug($this_permission['permission']) }}_allow"
-                          value="1"
+                          value="0"
+                          {{-- Disable the superuser and admin allow if the user is not a superuser --}}
+                          @if (((str_slug($main_section) == 'admin') && (!auth()->user()->hasAccess('admin'))) || ((str_slug($main_section) == 'superuser') && (!auth()->user()->isSuperUser())))
+                            disabled
+                          @endif
+                          id="{{ str_slug($main_section) }}_inherit"
                   >
-                  <label for="{{ str_slug($this_permission['permission']) }}_allow" class="allow">
-                    <i class="fa-solid fa-square-check"></i>
-                  </label>
-                </div>
 
-                @if ($use_inherit)
-                <div class="radio-slider-inputs" data-tooltip="true" title="{{ trans('permissions.inherit', ['area' => $section_translation]) }}">
-                  <input
-                          class="form-control inherit radiochecker-{{ str_slug($area) }}"
-                          aria-label="permission[{{ $this_permission['permission'] }}]"
-                          @checked(array_key_exists($this_permission['permission'], $groupPermissions) && $groupPermissions[$this_permission['permission']] == '-1')
-                          name="permission[{{ $this_permission['permission'] }}]"
-                          type="radio"
-                          id="{{ str_slug($this_permission['permission']) }}_inherit"
-                          value="-1"
-                  >
-                  <label for="{{ str_slug($this_permission['permission']) }}_inherit" class="inherit">
+                  <label class="inherit" for="{{ str_slug($main_section) }}_inherit">
                     <i class="fa-solid fa-layer-group"></i>
                   </label>
                 </div>
-                @endif
+              @endif
+              <!-- end .radio-slider-inputs inherit if used -->
 
-                <div class="radio-slider-inputs" data-tooltip="true" title="{{ trans('permissions.deny', ['area' => $section_translation]) }}">
-                  <input
-                          class="form-control deny radiochecker-{{ str_slug($area) }}"
-                          aria-label="permission[{{ $this_permission['permission'] }}]"
-                          @checked(array_key_exists($this_permission['permission'], $groupPermissions) && $groupPermissions[$this_permission['permission']] == '0')
-                          name="permission[{{ $this_permission['permission'] }}]"
-                          type="radio"
-                          value="0"
-                          id="{{ str_slug($this_permission['permission']) }}_deny"
-                  >
-                  <label for="{{ str_slug($this_permission['permission']) }}_deny">
-                    <i class="fa-solid fa-square-xmark"></i>
-                  </label>
-                </div>
+              <!-- start .radio-slider-inputs deny -->
+              <div class="radio-slider-inputs" data-tooltip="true" title="{{ (count($main_section_permission) > 1) ? trans('permissions.deny_all', ['area' => $main_section])  : trans('permissions.deny', ['area' => $main_section]) }}">
+                <input
+                        class="form-control  {{ str_slug($main_section) }} deny"
+                        data-checker-group="{{ str_slug($main_section) }}"
+                        aria-label="{{ str_slug($main_section) }}"
+                        name="permission[{{ str_slug($main_section) }}]"
+                        @checked(array_key_exists(str_slug($main_section), $groupPermissions) && $groupPermissions[str_slug($main_section)] == '-1')
+                        type="radio"
+                        value="-1"
+                        {{-- Disable the superuser and admin allow if the user is not a superuser --}}
+                        @if (((str_slug($main_section) == 'admin') && (!auth()->user()->hasAccess('admin'))) || ((str_slug($main_section) == 'superuser') && (!auth()->user()->isSuperUser())))
+                          disabled
+                        @endif
+                        id="{{ str_slug($main_section) }}_deny"
+                >
+
+                <label class="deny" for="{{ str_slug($main_section) }}_deny">
+                  <i class="fa-solid fa-square-xmark"></i>
+                </label>
               </div>
-            </div>
+                <!-- end .radio-slider-inputs deny -->
+
+            </div> <!-- end .radio-toggle-wrapper -->
+          </div> <!-- end right column radios -->
+
+    </div> <!-- end callout legend for major sections -->
+  </div> <!-- end form row -->
+
+  <!-- now handle sub-permissions if they exist -->
+  @if (count($main_section_permission) > 2)
+      <div
+           class="toggle-content-{{ str_slug($sectionPermission['permission']) }} {{ str_slug($sectionPermission['permission']) }}
+          {{ ($sectionPermission['permission']!='superuser') ? ' nonsuperuser' : '' }}{{ ( ($sectionPermission['permission']!='superuser') && ($sectionPermission['permission']!='admin')) ? ' nonadmin' : '' }}"
+      >
+
+                @foreach ($main_section_permission as $index => $this_permission)
+                  @if ($this_permission['display'])
+
+                    @php
+                        $section_translation = trans('permissions.'.str_slug($this_permission['permission']).'.name');
+                    @endphp
+
+                      <div class="form-group" style="border-bottom: 1px solid #eee; padding-right: 13px;">
+                        <div class="col-md-10">
+                          <strong>{{ $section_translation }}</strong>
+                          @if (\Lang::has('permissions.'.str_slug($this_permission['permission']).'.note'))
+                            <p>{{ trans('permissions.'.str_slug($this_permission['permission']).'.note') }}</p>
+                          @endif
+                        </div>
+
+                        <div class="form-group col-md-2 text-right">
+                          <div class="radio-toggle-wrapper">
+
+                                <div class="radio-slider-inputs" data-tooltip="true" title="{{ trans('permissions.grant', ['area' => $section_translation]) }}">
+                                  <input
+                                          class="form-control allow radiochecker-{{ str_slug($main_section) }}"
+                                          aria-label="permission[{{ $this_permission['permission'] }}]"
+                                          @checked(array_key_exists($this_permission['permission'], $groupPermissions) && $groupPermissions[$this_permission['permission']] == '1')
+                                          name="permission[{{ $this_permission['permission'] }}]"
+                                          type="radio"
+                                          id="{{ str_slug($this_permission['permission']) }}_allow"
+                                          value="1"
+                                  >
+                                  <label for="{{ str_slug($this_permission['permission']) }}_allow" class="allow">
+                                    <i class="fa-solid fa-square-check"></i>
+                                  </label>
+                              </div>
+
+                            @if ($use_inherit)
+                                <div class="radio-slider-inputs" data-tooltip="true" title="{{ trans('permissions.inherit', ['area' => $section_translation]) }}">
+                                  <input
+                                          class="form-control inherit radiochecker-{{ str_slug($main_section) }}"
+                                          aria-label="permission[{{ $this_permission['permission'] }}]"
+                                          @checked(array_key_exists($this_permission['permission'], $groupPermissions) && $groupPermissions[$this_permission['permission']] == '0')
+                                          name="permission[{{ $this_permission['permission'] }}]"
+                                          type="radio"
+                                          id="{{ str_slug($this_permission['permission']) }}_inherit"
+                                          value="0"
+                                  >
+                                  <label for="{{ str_slug($this_permission['permission']) }}_inherit" class="inherit">
+                                    <i class="fa-solid fa-layer-group"></i>
+                                  </label>
+                                </div>
+                            @endif
+
+                            <div class="radio-slider-inputs" data-tooltip="true" title="{{ trans('permissions.deny', ['area' => $section_translation]) }}">
+                                <input
+                                        class="form-control deny radiochecker-{{ str_slug($main_section) }}"
+                                        aria-label="permission[{{ $this_permission['permission'] }}]"
+                                        @checked(array_key_exists($this_permission['permission'], $groupPermissions) && $groupPermissions[$this_permission['permission']] == '-1')
+                                        name="permission[{{ $this_permission['permission'] }}]"
+                                        type="radio"
+                                        value="-1"
+                                        id="{{ str_slug($this_permission['permission']) }}_deny"
+                                >
+                                <label for="{{ str_slug($this_permission['permission']) }}_deny">
+                                  <i class="fa-solid fa-square-xmark"></i>
+                                </label>
+                            </div>
+                          </div>
 
 
-          </div>
-        </div>
-      @endif
-    @endforeach
+
+                      </div>
+                    </div>
+                  @endif
+                @endforeach
+      </div>
   @endif
 
 @endforeach

resources/views/users/edit.blade.php

@@ -291,18 +291,16 @@
 
                       <div class="col-md-12">
 
-                      <fieldset name="optional-details">
+                      <fieldset name="optional_details">
 
                           <x-form-legend>
-                              <a id="optional_user_info">
-                                  <x-icon type="caret-right" id="optional_user_info_icon" />
+                              <h4 id="optional_details" class="remember-toggle optional_details">
+                                  <x-icon type="caret-right" class="fa-fw" id="toggle-arrow-optional_details" />
                                   {{ trans('admin/hardware/form.optional_infos') }}
-                              </a>
+                              </h4>
                           </x-form-legend>
 
-                          <div id="optional_user_details" class="col-md-12" style="display:none">
-
-
+                          <div class="col-md-12 toggle-content-optional_details" style="display:none">
 
                               <!-- everything here should be what is considered optional -->
                               <br>
@@ -707,7 +705,7 @@ $(document).ready(function() {
         'bind': 'click',
         'passwordElement': '#password',
         'displayElement': '#generated-password',
-        'passwordLength': {{ ($settings->pwd_secure_min + 5) }},
+        'passwordLength': {{ ($settings->pwd_secure_min + 9) }},
         'uppercase': true,
         'lowercase': true,
         'numbers':   true,
@@ -717,24 +715,6 @@ $(document).ready(function() {
         }
     });
 
-    $("#optional_user_info").on("click",function(){
-        $('#optional_user_details').fadeToggle(100);
-        $('#optional_user_info_icon').toggleClass('fa-caret-right fa-caret-down');
-        var optional_user_info_open = $('#optional_user_info_icon').hasClass('fa-caret-down');
-        document.cookie = "optional_user_info_open="+optional_user_info_open+'; path=/';
-    });
-
-
-    var all_cookies = document.cookie.split(';')
-    for(var i in all_cookies) {
-        var trimmed_cookie = all_cookies[i].trim(' ')
-        if (trimmed_cookie.startsWith('optional_user_info_open=')) {
-            elems = all_cookies[i].split('=', 2)
-            if (elems[1] == 'true') {
-                $('#optional_user_info').trigger('click')
-            }
-        }
-    }
 
     $("#two_factor_reset").click(function(){
         $("#two_factor_resetrow").removeClass('success');
@@ -765,54 +745,6 @@ $(document).ready(function() {
         });
     });
 
-    if ($("#superuser_allow").is(':checked')) {
-        // alert('superuser is checked on page load');
-
-        // Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
-        $(".nonsuperuser").hide();
-        $(".nonsuperuser").attr('display','none');
-    }
-
-
-    $(".superuser").change(function() {
-        if ($(this).val() == '1') {
-            $(".nonsuperuser").fadeOut();
-            $(".nonsuperuser").attr('display','none');
-            $(".nonadmin").fadeOut();
-            $(".nonadmin").attr('display','none');
-        } else if ($(this).val() != '1') {
-            $(".nonsuperuser").fadeIn();
-            $(".nonsuperuser").attr('display','block');
-        }
-    });
-
-
-
-    if ($("#admin_allow").is(':checked')) {
-        // alert('admin is checked on page load');
-
-        // Hide here instead of fadeout on pageload to prevent what looks like Flash Of Unstyled Content (FOUC)
-        $(".nonadmin").hide();
-        $(".nonadmin").attr('display','none');
-    }
-
-    $(".admin").change(function() {
-        if ($(this).val() == '1') {
-            $(".nonadmin").fadeOut();
-            $(".nonadmin").attr('display','none');
-        } else if ($(this).val() != '1') {
-            $(".nonadmin").fadeIn();
-            $(".nonadmin").attr('display','block');
-        }
-    });
-
-
-    // Check/Uncheck all radio buttons in the group
-    $('.header-row input:radio').change(function() {
-        value = $(this).attr('value');
-        area = $(this).data('checker-group');
-        $('.radiochecker-'+area+'[value='+value+']').prop('checked', true);
-    });