auth: Implement base_bootgrid_table in user, group and priv templates (#8529)

src/opnsense/mvc/app/controllers/OPNsense/Auth/GroupController.php

@@ -33,6 +33,7 @@ class GroupController extends \OPNsense\Base\IndexController
     public function indexAction()
     {
         $this->view->formDialogEditGroup = $this->getForm("dialogGroup");
+        $this->view->formGridGroup = $this->getFormGrid("dialogGroup");
         $this->view->pick('OPNsense/Auth/group');
     }
 }

src/opnsense/mvc/app/controllers/OPNsense/Auth/PrivController.php

@@ -33,6 +33,7 @@ class PrivController extends \OPNsense\Base\IndexController
     public function indexAction()
     {
         $this->view->formDialogEditPriv = $this->getForm("dialogPriv");
+        $this->view->formGridPriv = $this->getFormGrid("dialogPriv");
         $this->view->pick('OPNsense/Auth/priv');
     }
 }

src/opnsense/mvc/app/controllers/OPNsense/Auth/UserController.php

@@ -51,6 +51,7 @@ class UserController extends \OPNsense\Base\IndexController
     public function indexAction()
     {
         $this->view->formDialogEditUser = $this->getForm("dialogUser");
+        $this->view->formGridUser = $this->getFormGrid("dialogUser");
         $this->view->pick('OPNsense/Auth/user');
     }
 }

src/opnsense/mvc/app/controllers/OPNsense/Auth/forms/dialogGroup.xml

@@ -3,32 +3,50 @@
         <id>group.scope</id>
         <label>Defined By</label>
         <type>info</type>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>group.gid</id>
         <label>gid</label>
         <type>info</type>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>group.name</id>
         <label>Group name</label>
         <type>text</type>
+        <grid_view>
+            <sequence>10</sequence>
+        </grid_view>
     </field>
     <field>
         <id>group.description</id>
         <label>Description</label>
         <type>text</type>
         <help>You may enter a description here for your reference (not parsed).</help>
+        <grid_view>
+            <sequence>40</sequence>
+        </grid_view>
     </field>
     <field>
         <id>group.priv</id>
         <label>Privileges</label>
         <type>select_multiple</type>
+        <grid_view>
+            <sequence>20</sequence>
+        </grid_view>
     </field>
     <field>
         <id>group.member</id>
         <label>Members</label>
         <type>select_multiple</type>
         <help>List of users that are a member of this group</help>
+        <grid_view>
+            <sequence>30</sequence>
+        </grid_view>
     </field>
 </form>

src/opnsense/mvc/app/controllers/OPNsense/Auth/forms/dialogPriv.xml

@@ -4,14 +4,33 @@
         <label>Id</label>
         <type>info</type>
     </field>
+    <field>
+        <id>priv.name</id>
+        <label>Name</label>
+        <type>ignore</type>
+        <grid_view>
+            <formatter>lines</formatter>
+        </grid_view>
+    </field>
+    <field>
+        <id>priv.match</id>
+        <label>Match</label>
+        <type>ignore</type>
+    </field>
     <field>
         <id>priv.users</id>
         <label>Users</label>
         <type>select_multiple</type>
+        <grid_view>
+            <formatter>count</formatter>
+        </grid_view>
     </field>
     <field>
         <id>priv.groups</id>
         <label>Groups</label>
         <type>select_multiple</type>
+        <grid_view>
+            <formatter>count</formatter>
+        </grid_view>
     </field>
 </form>

src/opnsense/mvc/app/controllers/OPNsense/Auth/forms/dialogUser.xml

@@ -3,93 +3,149 @@
         <id>user.scope</id>
         <label>Defined By</label>
         <type>info</type>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>user.uid</id>
         <label>uid</label>
         <type>info</type>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>user.disabled</id>
         <label>Disabled</label>
         <type>checkbox</type>
         <help>Deny authentication, only applicable for local users</help>
+        <grid_view>
+            <visible>false</visible>
+            <type>boolean</type>
+            <formatter>boolean</formatter>
+        </grid_view>
     </field>
     <field>
         <id>user.name</id>
         <label>Username</label>
         <type>text</type>
+        <grid_view>
+            <formatter>username</formatter>
+            <sequence>10</sequence>
+        </grid_view>
     </field>
     <field>
         <id>user.password</id>
         <label>Password</label>
         <type>password</type>
+        <grid_view>
+            <ignore>true</ignore>
+        </grid_view>
     </field>
     <field>
         <id>user.scrambled_password</id>
         <label>Scrambled Password</label>
         <type>checkbox</type>
         <help>Generate a scrambled password to prevent local database logins for this user.</help>
+        <grid_view>
+            <visible>false</visible>
+            <type>boolean</type>
+            <formatter>boolean</formatter>
+        </grid_view>
     </field>
     <field>
         <id>user.descr</id>
         <label>Full name</label>
         <type>text</type>
         <help>User's full name, for your own information only</help>
+        <grid_view>
+            <sequence>30</sequence>
+        </grid_view>
     </field>
     <field>
         <id>user.email</id>
         <label>E-mail</label>
         <type>text</type>
         <help>User's e-mail address, for your own information only</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>user.comment</id>
         <label>Comment</label>
         <type>textbox</type>
         <help>User comment, for your own information only</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>user.landing_page</id>
         <label>Preferred landing page</label>
         <type>text</type>
         <help>Preferred landing page after login or authentication failure</help>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>user.language</id>
         <label>Language</label>
         <type>dropdown</type>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>user.shell</id>
         <label>Login shell</label>
         <type>dropdown</type>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>user.expires</id>
         <label>Expiration date</label>
         <type>text</type>
         <style>datepicker</style>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>user.group_memberships</id>
         <label>Group membership</label>
         <type>select_multiple</type>
+        <grid_view>
+            <sequence>20</sequence>
+        </grid_view>
     </field>
     <field>
         <id>user.priv</id>
         <label>Privileges</label>
         <type>select_multiple</type>
+        <grid_view>
+            <visible>false</visible>
+        </grid_view>
     </field>
     <field>
         <id>user.otp_seed</id>
         <label>OTP seed</label>
         <type>text</type>
         <style>otp_seed otp_default_hidden</style>
+        <grid_view>
+            <ignore>true</ignore>
+        </grid_view>
     </field>
     <field>
         <id>user.authorizedkeys</id>
         <label>Authorized Keys</label>
         <type>textbox</type>
+        <grid_view>
+            <ignore>true</ignore>
+        </grid_view>
     </field>
 </form>

src/opnsense/mvc/app/views/OPNsense/Auth/group.volt

@@ -28,7 +28,7 @@
     'use strict';
 
     $( document ).ready(function () {
-        let grid_group = $("#grid-group").UIBootgrid({
+        let grid_group = $("#{{formGridGroup['table_id']}}").UIBootgrid({
             search:'/api/auth/group/search/',
             get:'/api/auth/group/get/',
             add:'/api/auth/group/add/',
@@ -56,32 +56,8 @@
 
 </script>
 
-
 <div class="tab-content content-box">
-    <div id="group" class="tab-pane fade in active">
-        <table id="grid-group" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogGroup">
-            <thead>
-                <tr>
-                    <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
-                    <th data-column-id="name" data-type="string">{{ lang._('Name') }}</th>
-                    <th data-column-id="member" data-type="string" data-formatter="member_count">{{ lang._('Member Count') }}</th>
-                    <th data-column-id="description" data-type="string">{{ lang._('Description') }}</th>
-                    <th data-column-id="commands" data-width="10em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td></td>
-                    <td>
-                        <button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-fw fa-plus"></span></button>
-                        <button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-fw fa-trash-o"></span></button>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
-    </div>
+    {{ partial('layout_partials/base_bootgrid_table', formGridGroup + {'command_width': '10em'})}}
 </div>
 
-{{ partial("layout_partials/base_dialog",['fields':formDialogEditGroup,'id':'DialogGroup','label':lang._('Edit Group')])}}
+{{ partial("layout_partials/base_dialog",['fields':formDialogEditGroup,'id':formGridGroup['edit_dialog_id'],'label':lang._('Edit Group')])}}

src/opnsense/mvc/app/views/OPNsense/Auth/priv.volt

@@ -28,7 +28,7 @@
     'use strict';
 
     $( document ).ready(function () {
-        let grid_group = $("#grid-group").UIBootgrid({
+        let grid_priv = $("#{{formGridPriv['table_id']}}").UIBootgrid({
             search:'/api/auth/priv/search/',
             get:'/api/auth/priv/get_item/',
             set:'/api/auth/priv/set_item/',
@@ -58,27 +58,15 @@
             }
         });
 
+        $('button[data-action="add"]').hide();
+        $('button[data-action="deleteSelected"]').hide();
+
     });
 
 </script>
 
 <div class="tab-content content-box">
-    <div id="group" class="tab-pane fade in active">
-        <table id="grid-group" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogPriv">
-            <thead>
-                <tr>
-                    <th data-column-id="id" data-type="string" data-identifier="true">{{ lang._('ID') }}</th>
-                    <th data-column-id="name" data-type="string">{{ lang._('Name') }}</th>
-                    <th data-column-id="match" data-type="string" data-formatter="lines">{{ lang._('Match') }}</th>
-                    <th data-column-id="users" data-type="string" data-formatter="count" data-sortable="false">{{ lang._('Users') }}</th>
-                    <th data-column-id="groups" data-type="string" data-formatter="count" data-sortable="false">{{ lang._('Groups') }}</th>
-                    <th data-column-id="commands" data-width="10em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-        </table>
-    </div>
+    {{ partial('layout_partials/base_bootgrid_table', formGridPriv)}}
 </div>
 
-{{ partial("layout_partials/base_dialog",['fields':formDialogEditPriv,'id':'DialogPriv','label':lang._('Edit Privilege')])}}
+{{ partial("layout_partials/base_dialog",['fields':formDialogEditPriv,'id':formGridPriv['edit_dialog_id'],'label':lang._('Edit Privilege')])}}

src/opnsense/mvc/app/views/OPNsense/Auth/user.volt

@@ -28,7 +28,7 @@
     'use strict';
 
     $( document ).ready(function () {
-        let grid_user = $("#grid-user").UIBootgrid({
+        let grid_user = $("#{{formGridUser['table_id']}}").UIBootgrid({
             search:'/api/auth/user/search/',
             get:'/api/auth/user/get/',
             add:'/api/auth/user/add/',
@@ -171,6 +171,8 @@
         $('.datepicker').datepicker({format: 'mm/dd/yyyy'});
         /* format  authorizedkeys */
         $("#user\\.authorizedkeys").css('max-width', 'inherit').prop('wrap', 'off');
+
+        $("#grid-user-buttons").children().insertAfter($("#{{ formGridUser['table_id'] }} tfoot [data-action='deleteSelected']"));
     });
 
 </script>
@@ -182,49 +184,32 @@
     .tooltip-inner {
         max-width: 1000px !important;
     }
+    .btn-user-action {
+        margin-left: 3px;
+    }
 </style>
 
 <ul class="nav nav-tabs" data-tabs="tabs" id="maintabs">
     <li class="active"><a data-toggle="tab" href="#user">{{ lang._('Users') }}</a></li>
     <li><a data-toggle="tab" href="#apikeys" id="tab_apikeys"> {{ lang._('ApiKeys') }} </a></li>
 </ul>
+
+<div id="grid-user-buttons" style="display: none;">
+    <button
+        id="upload_users"
+        type="button"
+        data-title="{{ lang._('Import Users') }}"
+        data-endpoint='/api/auth/user/upload'
+        title="{{ lang._('Import csv') }}"
+        data-toggle="tooltip"
+        class="btn btn-xs btn-user-action"
+    ><span class="fa fa-fw fa-upload"></span></button>&nbsp;
+    <button id="download_users" type="button" title="{{ lang._('Export as csv') }}" data-toggle="tooltip"  class="btn btn-xs btn-user-action"><span class="fa fa-fw fa-table"></span></button>
+</div>
+
 <div class="tab-content content-box">
     <div id="user" class="tab-pane fade in active">
-        <table id="grid-user" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogUser">
-            <thead>
-                <tr>
-                    <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
-                    <th data-column-id="name" data-type="string" data-formatter="username">{{ lang._('Name') }}</th>
-                    <th data-column-id="email" data-type="string" data-visible="false">{{ lang._('Email') }}</th>
-                    <th data-column-id="comment" data-type="string" data-visible="false">{{ lang._('Comments') }}</th>
-                    <th data-column-id="language" data-type="string" data-visible="false">{{ lang._('Language') }}</th>
-                    <th data-column-id="group_memberships" data-type="string">{{ lang._('Groups') }}</th>
-                    <th data-column-id="descr" data-type="string">{{ lang._('Description') }}</th>
-                    <th data-column-id="commands" data-width="10em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td></td>
-                    <td>
-                        <button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-fw fa-plus"></span></button>
-                        <button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-fw fa-trash-o"></span></button>
-                        <button
-                            id="upload_users"
-                            type="button"
-                            data-title="{{ lang._('Import Users') }}"
-                            data-endpoint='/api/auth/user/upload'
-                            title="{{ lang._('Import csv') }}"
-                            data-toggle="tooltip"
-                            class="btn btn-xs"
-                        ><span class="fa fa-fw fa-upload"></span></button>
-                        <button id="download_users" type="button" title="{{ lang._('Export as csv') }}" data-toggle="tooltip"  class="btn btn-xs"><span class="fa fa-fw fa-table"></span></button>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
+        {{ partial('layout_partials/base_bootgrid_table', formGridUser + {'command_width': '9em'})}}
     </div>
     <div id="apikeys" class="tab-pane fade in">
         <table id="grid-apikey" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogUser">
@@ -250,4 +235,4 @@
     </div>
 </div>
 
-{{ partial("layout_partials/base_dialog",['fields':formDialogEditUser,'id':'DialogUser','label':lang._('Edit User')])}}
+{{ partial("layout_partials/base_dialog",['fields':formDialogEditUser,'id':formGridUser['edit_dialog_id'],'label':lang._('Edit User')])}}