From cd7ebecdd3c3b2bff7ba05cb8cf0ee9927940374 Mon Sep 17 00:00:00 2001
From: Franco Fichtner <franco@opnsense.org>
Date: Sun, 3 Jun 2018 16:42:45 +0000
Subject: [PATCH] system: restyle users and groups

---
 src/www/diag_authentication.php |  2 +-
 src/www/system_groupmanager.php | 54 +++++++++++++--------------
 src/www/system_usermanager.php  | 65 ++++++++++++++-------------------
 3 files changed, 56 insertions(+), 65 deletions(-)

diff --git a/src/www/diag_authentication.php b/src/www/diag_authentication.php
index ffe09120e..434555024 100644
--- a/src/www/diag_authentication.php
+++ b/src/www/diag_authentication.php
@@ -100,7 +100,7 @@ include("head.inc");
                 <tr>
                   <td style="width:22%"><?=gettext("Authentication Server"); ?></td>
                   <td style="width:78%">
-                    <select name="authmode" id="authmode" class="form-control" >
+                    <select class="selectpicker" name="authmode" id="authmode" class="form-control" >
 <?php
                     foreach (auth_get_authserver_list() as $auth_server_id => $auth_server):?>
                       <option value="<?=$auth_server_id;?>" <?=$auth_server['name'] == $pconfig['authmode'] ? "selected=\"selected\"" : "";?>>
diff --git a/src/www/system_groupmanager.php b/src/www/system_groupmanager.php
index 3f06cfdd5..654d64312 100644
--- a/src/www/system_groupmanager.php
+++ b/src/www/system_groupmanager.php
@@ -277,11 +277,11 @@ $( document ).ready(function() {
                         <td class="text-center">
                           <br />
                           <a id="add_users" class="btn btn-default btn-xs" data-toggle="tooltip" title="<?=gettext("Add Users"); ?>">
-                              <span class="glyphicon glyphicon-arrow-right"></span>
+                              <span class="fa fa-arrow-right fa-fw"></span>
                           </a>
                           <br /><br />
                           <a id="add_groups" class="btn btn-default btn-xs" data-toggle="tooltip" title="<?=gettext("Remove Users"); ?>">
-                              <span class="glyphicon glyphicon-arrow-left"></span>
+                              <span class="fa fa-arrow-left fa-fw"></span>
                           </a>
                         </td>
                         <td>
@@ -331,7 +331,7 @@ $( document ).ready(function() {
                     <tr>
                       <td colspan="2">
                         <a href="system_usermanager_addprivs.php?groupid=<?=htmlspecialchars($id)?>" class="btn btn-default btn-xs">
-                          <span class="fa fa-pencil"></span>
+                          <span class="fa fa-pencil fa-fw"></span>
                         </a>
                       </td>
                     </tr>
@@ -365,9 +365,9 @@ $( document ).ready(function() {
               <thead>
                 <tr>
                   <th><?=gettext("Group name");?></th>
-                  <th class="hidden-xs"><?=gettext("Description");?></th>
                   <th><?=gettext("Member Count");?></th>
-                  <th></th>
+                  <th><?=gettext("Description");?></th>
+                  <th class="text-nowrap"></th>
                 </tr>
               </thead>
               <tbody>
@@ -376,16 +376,15 @@ $( document ).ready(function() {
               foreach ($a_group as $group) :?>
                 <tr>
                   <td>
-                    <span class="glyphicon glyphicon-user <?= !empty($group['priv']) && in_array('page-all', $group['priv']) ? 'text-danger' : 'text-info' ?>"></span>
+                    <span class="fa fa-user <?= !empty($group['priv']) && in_array('page-all', $group['priv']) ? 'text-danger' : 'text-info' ?>"></span>
                     <?=$group['name']; ?>
                   </td>
-                  <td class="hidden-xs"><?=$group['description'];?></td>
-                  <td><?= count($group['member']) ?>
-                  </td>
-                  <td>
+                  <td><?= count($group['member']) ?></td>
+                  <td ><?=$group['description'];?></td>
+                  <td class="text-nowrap">
                     <a href="system_groupmanager.php?act=edit&groupid=<?=$i?>"
                        class="btn btn-default btn-xs" data-toggle="tooltip" title="<?=gettext("edit group");?>">
-                        <span class="glyphicon glyphicon-pencil"></span>
+                        <span class="fa fa-pencil fa-fw"></span>
                     </a>
 
 <?php
@@ -393,7 +392,7 @@ $( document ).ready(function() {
                     <button type="button" class="btn btn-default btn-xs act-del-group"
                         data-groupname="<?=$group['name'];?>"
                         data-groupid="<?=$i?>" title="<?=gettext("delete group");?>" data-toggle="tooltip">
-                      <span class="fa fa-trash text-muted"></span>
+                      <span class="fa fa-trash fa-fw"></span>
                     </button>
 <?php
                     endif;?>
@@ -402,27 +401,28 @@ $( document ).ready(function() {
 <?php
               $i++;
               endforeach;?>
-              </tbody>
-              <tfoot>
                 <tr>
-                  <td class="list" colspan="2"></td>
-                  <td class="hidden-xs"> </td>
-                  <td class="list">
+                  <td colspan="3">
+                    <table>
+                      <tr>
+                        <td></td>
+                        <td style="width:20px"></td>
+                        <td style="width:20px"><span class="fa fa-user text-danger"></span></td>
+                        <td style="width:200px"><?= gettext('Superuser group') ?></td>
+                        <td style="width:20px"><span class="fa fa-user text-info"></span></td>
+                        <td style="width:200px"><?= gettext('Normal group') ?></td>
+                        <td></td>
+                      </tr>
+                    </table>
+                  </td>
+                  <td class="text-nowrap">
                     <a href="system_groupmanager.php?act=new" class="btn btn-default btn-xs"
                        title="<?=gettext("add group");?>" data-toggle="tooltip">
-                      <span class="glyphicon glyphicon-plus"></span>
+                      <span class="fa fa-plus fa-fw"></span>
                     </a>
                   </td>
                 </tr>
-                <tr  class="hidden-xs">
-                  <td colspan="4">
-                      <?=gettext('Additional groups can be added here. ' .
-                      'Group permissions can be assigned which are inherited by users who are members of the group. ' .
-                      'An icon that appears grey indicates that it is a system defined object. ' .
-                      'Some system object properties can be modified but they cannot be deleted.');?>
-                  </td>
-                </tr>
-              </tfoot>
+              </tbody>
             </table>
           </form>
 <?php
diff --git a/src/www/system_usermanager.php b/src/www/system_usermanager.php
index 7071559ba..6656d6834 100644
--- a/src/www/system_usermanager.php
+++ b/src/www/system_usermanager.php
@@ -618,7 +618,8 @@ $( document ).ready(function() {
                       <input name="passwordfld1" type="password" class="formfld pwd" id="passwordfld1" size="20" value="" /><br/>
                       <input name="passwordfld2" type="password" class="formfld pwd" id="passwordfld2" size="20" value="" />
                       <small><?= gettext("(confirmation)"); ?></small><br/><br/>
-                      <input type="checkbox" name="gen_new_password" <?= !empty($pconfig['gen_new_password']) ? 'checked="checked"' : '' ?>/>&nbsp;<small><?=gettext('Generate a scrambled password to prevent local database logins for this user.') ?></small>
+                      <input type="checkbox" name="gen_new_password" <?= !empty($pconfig['gen_new_password']) ? 'checked="checked"' : '' ?>/>
+                      <small><?=gettext('Generate a scrambled password to prevent local database logins for this user.') ?></small>
                     </td>
                   </tr>
                   <tr>
@@ -716,11 +717,11 @@ $( document ).ready(function() {
                             <td class="text-center">
                               <br />
                               <a id="add_groups" class="btn btn-default btn-xs" data-toggle="tooltip" title="<?=gettext("Add groups"); ?>">
-                                  <span class="glyphicon glyphicon-arrow-right"></span>
+                                  <span class="fa fa-arrow-right fa-fw"></span>
                               </a>
                               <br /><br />
                               <a id="remove_groups" class="btn btn-default btn-xs" data-toggle="tooltip" title="<?=gettext("Remove groups"); ?>">
-                                  <span class="glyphicon glyphicon-arrow-left"></span>
+                                  <span class="fa fa-arrow-left fa-fw"></span>
                               </a>
                             </td>
                             <td>
@@ -785,7 +786,7 @@ $( document ).ready(function() {
                           <td colspan="3">
                               <a href="system_usermanager_addprivs.php?userid=<?=$id?>" class="btn btn-xs btn-default"
                                   title="<?=gettext("edit privileges");?>" data-toggle="tooltip">
-                                <span class="fa fa-pencil"></span>
+                                <span class="fa fa-pencil fa-fw"></span>
                               </a>
                           </td>
                         </tr>
@@ -818,15 +819,15 @@ $( document ).ready(function() {
                           <td>
                             <a href="system_usermanager.php?act=expckey&amp;certid=<?=$i?>&amp;userid=<?=$id?>"
                                 class="btn btn-default btn-xs" data-toggle="tooltip" title="<?=gettext("export private key");?>">
-                              <span class="glyphicon glyphicon-arrow-down"></span>
+                              <span class="fa fa-arrow-down fa-fw"></span>
                             </a>
                             <a href="system_usermanager.php?act=expcert&amp;certid=<?=$i?>&amp;userid=<?=$id?>"
                                 class="btn btn-default btn-xs" data-toggle="tooltip" title="<?=gettext("export certificate");?>">
-                              <span class="glyphicon glyphicon-arrow-down"></span>
+                              <span class="fa fa-arrow-down fa-fw"></span>
                             </a>
                             <button type="submit" data-certid="<?=$i;?>" class="btn btn-default btn-xs act-del-cert"
                                 title="<?=gettext("unlink certificate");?>" data-toggle="tooltip">
-                              <span class="fa fa-trash text-muted"></span>
+                              <span class="fa fa-trash fa-fw"></span>
                             </button>
                           </td>
                         </tr>
@@ -838,7 +839,7 @@ $( document ).ready(function() {
                           <td colspan="3">
                             <a href="system_certmanager.php?act=new&amp;userid=<?=$id?>" class="btn btn-default btn-xs"
                                 title="<?=gettext("create or link user certificate");?>" data-toggle="tooltip">
-                              <span class="glyphicon glyphicon-plus"></span>
+                              <span class="fa fa-plus fa-fw"></span>
                             </a>
                           </td>
                         </tr>
@@ -848,7 +849,6 @@ $( document ).ready(function() {
                   <tr>
                       <td><a id="help_for_apikeys" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("API keys");?> </td>
                       <td>
-                          <!-- -->
                           <table class="table table-condensed">
                               <thead>
                                   <tr>
@@ -874,7 +874,7 @@ $( document ).ready(function() {
                                       <td>
                                         <button data-key="<?=$userApiKey['key'][0];?>" type="button" class="btn btn-default btn-xs act-del-api-key"
                                             title="<?=gettext("delete API key");?>" data-toggle="tooltip">
-                                          <span class="glyphicon glyphicon-trash"></span>
+                                          <span class="fa fa-trash fa-fw"></span>
                                         </button>
                                       </td>
                                   </tr>
@@ -887,7 +887,7 @@ $( document ).ready(function() {
                                     <td colspan="2">
                                       <button type="button" class="btn btn-default btn-xs" id="newApiKey"
                                           title="<?=gettext('Create API key');?>" data-toggle="tooltip">
-                                        <span class="glyphicon glyphicon-plus"></span>
+                                        <span class="fa fa-plus fa-fw"></span>
                                       </button>
                                     </td>
                                   </tr>
@@ -913,7 +913,8 @@ $( document ).ready(function() {
                     <td><a id="help_for_otp_seed" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?= gettext('OTP seed') ?></td>
                     <td>
                       <input name="otp_seed" type="text" value="<?=$pconfig['otp_seed'];?>"/>
-                      <input type="checkbox" name="gen_otp_seed"/>&nbsp;<small><?= gettext('Generate new secret (160 bit)') ?></small>
+                      <input type="checkbox" name="gen_otp_seed"/>
+                      <small><?= gettext('Generate new secret (160 bit)') ?></small>
                       <div class="hidden" data-for="help_for_otp_seed">
                         <?=gettext("OTP (base32) seed to use when a one time password authenticator is used");?><br/>
                       </div>
@@ -993,29 +994,27 @@ $( document ).ready(function() {
                       <td>
 <?php
                         if (isset($userent['disabled'])) {
-                            $usrimg = 'glyphicon glyphicon-user text-muted';
+                            $usrimg = 'text-muted';
                         } elseif (userHasPrivilege($userent, 'page-all')) {
-                            $usrimg = 'glyphicon glyphicon-user text-danger';
+                            $usrimg = 'text-danger';
                         } else {
-                            $usrimg = 'glyphicon glyphicon-user text-info';
+                            $usrimg = 'text-info';
                         }?>
-                        <span class="<?=$usrimg;?>"></span> <?=$userent['name'];?>
+                        <span class="fa fa-user <?=$usrimg;?>"></span> <?=$userent['name'];?>
                       </td>
-                      <td><?=$userent['descr'];?></td>
-                      <td>
-                        <?=implode(",", local_user_get_groups($userent));?>
-                      </td>
-                      <td>
+                      <td><?= $userent['descr'] ?></td>
+                      <td><?= implode(', ', local_user_get_groups($userent)) ?></td>
+                      <td class="text-nowrap">
                         <a href="system_usermanager.php?act=edit&userid=<?=$i?>"
                             class="btn btn-default btn-xs" data-toggle="tooltip" title="<?=gettext("edit user");?>">
-                          <span class="glyphicon glyphicon-pencil"></span>
+                          <span class="fa fa-pencil fa-fw"></span>
                         </a>
 <?php
                         if ($userent['scope'] != "system") :?>
                         <button type="button" class="btn btn-default btn-xs act-del-user"
                             data-username="<?=$userent['name'];?>"
                             data-userid="<?=$i?>" title="<?=gettext("delete user");?>" data-toggle="tooltip">
-                          <span class="fa fa-trash text-muted"></span>
+                          <span class="fa fa-trash fa-fw"></span>
                         </button>
 <?php
                         endif;?>
@@ -1031,20 +1030,20 @@ $( document ).ready(function() {
                           <tr>
                             <td></td>
                             <td style="width:20px"></td>
-                            <td style="width:20px"><span class="glyphicon glyphicon-user text-danger"></span></td>
+                            <td style="width:20px"><span class="fa fa-user text-danger"></span></td>
                             <td style="width:200px"><?= gettext('System Administrator') ?></td>
-                            <td style="width:20px"><span class="glyphicon glyphicon-user text-muted"></span></td>
+                            <td style="width:20px"><span class="fa fa-user text-muted"></span></td>
                             <td style="width:200px"><?= gettext('Disabled User') ?></td>
-                            <td style="width:20px"><span class="glyphicon glyphicon-user text-info"></span></td>
+                            <td style="width:20px"><span class="fa fa-user text-info"></span></td>
                             <td style="width:200px"><?= gettext('Normal User') ?></td>
                             <td></td>
                           </tr>
                         </table>
                       </td>
-                      <td>
+                      <td class="text-nowrap">
                         <a href="system_usermanager.php?act=new" class="btn btn-default btn-xs"
                            title="<?=gettext("add user");?>" data-toggle="tooltip">
-                          <span class="glyphicon glyphicon-plus"></span>
+                          <span class="fa fa-plus fa-fw"></span>
                         </a>
 <?php
                         $authcfg_type = auth_get_authserver($config['system']['webgui']['authmode'])['type'];
@@ -1053,20 +1052,12 @@ $( document ).ready(function() {
                                   id="import_ldap_users"
                                   class="btn btn-default btn-xs"
                                   title="<?=gettext("import users")?>">
-                              <i class="fa fa-cloud-download"></i>
+                              <i class="fa fa-cloud-download fa-fw"></i>
                           </button>
 <?php
                       endif;?>
                       </td>
                     </tr>
-                    <tr>
-                      <td colspan="4">
-                          <?=gettext("Additional users can be added here. User permissions for accessing " .
-                                        "the web GUI or other subsystems can be assigned directly or inherited from group memberships. " .
-                                        "An icon that appears grey indicates that it is a system defined object. " .
-                                        "Some system object properties can be modified but they cannot be deleted."); ?>
-                      </td>
-                    </tr>
                   </tbody>
                 </table>
               </form>