feat(ui): EE-3567 css portainer settings auth (#7423)

app/assets/ico/vendor/internal.svg

@@ -0,0 +1 @@
+<svg width="auto" height="auto" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3805 14.085C11.3543 14.085 8.9012 16.5097 8.9012 19.5009C8.9012 22.492 11.3543 24.9168 14.3805 24.9168C17.4066 24.9168 19.8597 22.492 19.8597 19.5009C19.8597 16.5097 17.4066 14.085 14.3805 14.085ZM7.81738 19.5009C7.81738 15.9181 10.7558 13.0137 14.3805 13.0137C18.0052 13.0137 20.9436 15.9181 20.9436 19.5009C20.9436 23.0837 18.0052 25.9881 14.3805 25.9881C10.7558 25.9881 7.81738 23.0837 7.81738 19.5009ZM14.3805 16.5846C14.6798 16.5846 14.9224 16.8244 14.9224 17.1203V20.5884L16.4058 19.1221C16.6174 18.9129 16.9605 18.9129 17.1721 19.1221C17.3838 19.3313 17.3838 19.6705 17.1721 19.8796L14.7637 22.2603C14.552 22.4694 14.2089 22.4694 13.9973 22.2603L11.5888 19.8796C11.3772 19.6705 11.3772 19.3313 11.5888 19.1221C11.8004 18.9129 12.1436 18.9129 12.3552 19.1221L13.8386 20.5884V17.1203C13.8386 16.8244 14.0812 16.5846 14.3805 16.5846Z" fill="#0086C9"/> </svg>

app/portainer/oauth/components/oauth-settings/oauth-settings.html

@@ -54,12 +54,12 @@
 
       <div class="col-sm-9" ng-if="$ctrl.teams.length > 0">
         <div class="col-sm-12 small text-muted">
-          <p>
-            <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+          <p class="vertical-center">
+            <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
             The default team option will be disabled when automatic team membership is enabled
           </p>
         </div>
-        <div class="col-xs-11">
+        <div class="col-xs-12 vertical-center">
           <select
             class="form-control"
             ng-disabled="$ctrl.settings.OAuthAutoMapTeamMemberships"
@@ -68,16 +68,16 @@
           >
             <option value="">No team</option>
           </select>
+          <button
+            type="button"
+            class="btn btn-md btn-danger"
+            ng-click="$ctrl.settings.DefaultTeamID = null"
+            ng-disabled="!$ctrl.settings.DefaultTeamID || $ctrl.settings.OAuthAutoMapTeamMemberships"
+            ng-if="$ctrl.teams.length > 0"
+          >
+            <pr-icon icon="'x'" feather="true" size="'md'"></pr-icon>
+          </button>
         </div>
-        <button
-          type="button"
-          class="btn btn-sm btn-danger"
-          ng-click="$ctrl.settings.DefaultTeamID = null"
-          ng-disabled="!$ctrl.settings.DefaultTeamID || $ctrl.settings.OAuthAutoMapTeamMemberships"
-          ng-if="$ctrl.teams.length > 0"
-        >
-          <i class="fa fa-times" aria-hidden="true"> </i
-        ></button>
       </div>
     </div>
   </div>
@@ -114,8 +114,9 @@
     <div class="form-group">
       <label class="col-sm-3 col-lg-2 control-label text-left"> Statically assigned teams </label>
       <div class="col-sm-9 col-lg-10">
-        <span class="label label-default interactive" style="margin-left: 1.4em" ng-click="$ctrl.addTeamMembershipMapping()">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> add team mapping
+        <span class="label label-default interactive vertical-center ml-4" ng-click="$ctrl.addTeamMembershipMapping()">
+          <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+          add team mapping
         </span>
 
         <div class="col-sm-12 form-inline" ng-repeat="mapping in $ctrl.settings.TeamMemberships.OAuthClaimMappings" style="margin-top: 0.75em">
@@ -135,10 +136,15 @@
               <option selected value="">Select a team</option>
             </select>
           </div>
-          <button type="button" class="btn btn-sm btn-danger" ng-click="$ctrl.removeTeamMembership($index)"> <i class="fa fa-trash" aria-hidden="true"> </i></button>
+          <button type="button" class="btn btn-md btn-danger" ng-click="$ctrl.removeTeamMembership($index)">
+            <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
+          </button>
 
-          <div class="small text-warning" ng-show="!mapping.ClaimValRegex" style="margin-top: 0.4em">
-            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Claim value regex is required.
+          <div>
+            <div class="small text-warning vertical-center mt-1" ng-show="!mapping.ClaimValRegex">
+              <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
+              Claim value regex is required.
+            </div>
           </div>
         </div>
       </div>
@@ -361,11 +367,13 @@
 
   <div class="form-group" ng-if="$ctrl.state.provider != 'custom'">
     <div class="col-sm-12">
-      <a class="small interactive" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
-        <i class="fa fa-wrench space-right" aria-hidden="true"></i> Override default configuration
+      <a class="small interactive vertical-center" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
+        <pr-icon icon="'tool'" feather="true"></pr-icon>
+        Override default configuration
       </a>
-      <a class="small interactive" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.useDefaultProviderConfiguration($ctrl.state.provider)">
-        <i class="fa fa-cogs space-right" aria-hidden="true"></i> Use default configuration
+      <a class="small interactive vertical-center" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.useDefaultProviderConfiguration($ctrl.state.provider)">
+        <pr-icon icon="'settings'" feather="true"></pr-icon>
+        Use default configuration
       </a>
     </div>
   </div>

app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html

@@ -3,8 +3,11 @@
   <span class="col-sm-12 text-muted small" ng-transclude="description"> </span>
 </div>
 <div class="form-group">
-  <div class="col-sm-12">
-    <label for="tls" class="control-label text-left"> Automatic user provisioning </label>
-    <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.ngModel" /><i></i> </label>
+  <div class="col-sm-12 vertical-center">
+    <label for="tls" class="control-label text-left !pt-0"> Automatic user provisioning </label>
+    <label class="switch ml-6 my-0">
+      <input type="checkbox" ng-model="$ctrl.ngModel" />
+      <span class="slider round"></span>
+    </label>
   </div>
 </div>

app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html

@@ -20,8 +20,8 @@
 
   <div class="form-group">
     <div class="col-sm-12 small text-muted">
-      <p>
-        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+      <p class="vertical-center">
+        <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
         You can configure multiple AD Controllers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all use
         the same certificates).
       </p>
@@ -33,13 +33,14 @@
       AD Controller
       <button
         type="button"
-        class="label label-default interactive"
+        class="label label-default interactive vertical-center"
         style="border: 0"
         ng-click="$ctrl.addLDAPUrl()"
         limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
         limited-feature-tabindex="-1"
       >
-        <i class="fa fa-plus-circle" aria-hidden="true"></i> Add additional server
+        <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+        Add additional server
       </button>
     </label>
     <div class="col-sm-9 col-lg-10">
@@ -61,7 +62,7 @@
           limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
           limited-feature-tabindex="-1"
         >
-          <i class="fa fa-trash" aria-hidden="true"></i>
+          <pr-icon icon="'trash-2'" feather="true"></pr-icon>
         </button>
       </div>
     </div>

app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html

@@ -1,8 +1,8 @@
 <div class="form-group">
-  <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
+  <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left vertical-center">
     Connectivity check
-    <i class="fa fa-check green-icon ml-2" ng-if="$ctrl.state.successfulConnectivityCheck"></i>
-    <i class="fa fa-times red-icon ml-2" ng-if="$ctrl.state.failedConnectivityCheck"></i>
+    <pr-icon icon="'check'" feather="true" mode="'success'" ng-if="$ctrl.state.successfulConnectivityCheck"></pr-icon>
+    <pr-icon icon="'x'" feather="true" mode="'danger'" ng-if="$ctrl.state.failedConnectivityCheck"></pr-icon>
   </label>
   <div class="col-sm-9 col-lg-10">
     <button

app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html

@@ -50,7 +50,7 @@
         Group Filter
         <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
       </label>
-      <div ng-class="{ 'col-sm-7 col-md-9': $index, 'col-sm-8 col-md-10': !$index }">
+      <div class="col-sm-8 col-md-10 vertical-center">
         <input
           type="text"
           class="form-control"
@@ -62,10 +62,8 @@
           ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
           limited-feature-tabindex="-1"
         />
-      </div>
-      <div class="col-sm-1" ng-if="$index > 0">
-        <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)">
-          <i class="fa fa-trash" aria-hidden="true"></i>
+        <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
@@ -75,16 +73,17 @@
 <div class="form-group mt-3">
   <div class="col-sm-12">
     <button
-      class="label label-default interactive no-border"
+      class="label label-default interactive no-border vertical-center"
       ng-click="$ctrl.onAddClick()"
       limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
       limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
       limited-feature-disabled
     >
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add group search configuration
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add group search configuration
     </button>
   </div>
-  <div class="col-sm-12 mt-3">
+  <div class="col-sm-12 vertical-center mt-2">
     <button
       class="btn btm-sm btn-primary"
       type="button"
@@ -96,15 +95,21 @@
     >
       Fetch Admin Group(s)
     </button>
-    <span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="ml-5"> <i class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i> No groups found</span>
+    <span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="ml-6 vertical-center">
+      <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
+      No groups found
+    </span>
   </div>
 </div>
 
 <div class="form-group">
-  <div class="col-sm-12">
-    <label for="admin-auto-populate" class="control-label text-left text-muted" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }"> Assign admin rights to group(s) </label>
-    <label class="switch ml-7" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
-      <input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" /><i></i>
+  <div class="col-sm-12 vertical-center">
+    <label for="admin-auto-populate" class="control-label text-left text-muted !pt-0" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }">
+      Assign admin rights to group(s)
+    </label>
+    <label class="switch ml-7 my-0" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
+      <input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" />
+      <span class="slider round"></span>
     </label>
   </div>
 </div>

app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html

@@ -28,12 +28,10 @@
         Group Filter
         <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
       </label>
-      <div ng-class="{ 'col-sm-7 col-md-9': $index, 'col-sm-8 col-md-10': !$index }">
+      <div class="col-sm-8 col-md-10 vertical-center">
         <input type="text" class="form-control" id="ldap_group_filter_{{ $index }}" ng-model="config.GroupFilter" placeholder="(objectClass=account)" />
-      </div>
-      <div class="col-sm-1" ng-if="$index > 0">
-        <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)">
-          <i class="fa fa-trash" aria-hidden="true"></i>
+        <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
@@ -42,8 +40,9 @@
 
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
-    <button class="label label-default interactive" style="border: 0" ng-click="$ctrl.onAddClick()">
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add group search configuration
+    <button class="label label-default interactive vertical-center" style="border: 0" ng-click="$ctrl.onAddClick()">
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add group search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
@@ -63,7 +62,7 @@
 </div>
 
 <div ng-if="$ctrl.showTable">
-  <div class="form-group">
-    <ldap-groups-datatable dataset="$ctrl.groups" title-text="Groups" title-icon="fa-users" table-key="ldapGroups"></ldap-groups-datatable>
+  <div class="form-group col-sm-12">
+    <ldap-groups-datatable dataset="$ctrl.groups" title-text="Groups" title-icon="users" table-key="ldapGroups"></ldap-groups-datatable>
   </div>
 </div>

app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html

@@ -28,12 +28,10 @@
         Filter
         <portainer-tooltip message="'The LDAP search filter used to select user elements, optional.'"></portainer-tooltip>
       </label>
-      <div ng-class="{ 'col-sm-7 col-md-9': $index, 'col-sm-8 col-md-10': !$index }">
+      <div class="col-sm-8 col-md-10 vertical-center">
         <input type="text" class="form-control" id="ldap_filter_{{ $index }}" ng-model="config.Filter" placeholder="(objectClass=account)" />
-      </div>
-      <div class="col-sm-1" ng-if="$index > 0">
-        <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)">
-          <i class="fa fa-trash" aria-hidden="true"></i>
+        <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
@@ -42,8 +40,9 @@
 
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
-    <button class="label label-default interactive" style="border: 0" ng-click="$ctrl.onAddClick()">
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add user search configuration
+    <button class="label label-default interactive vertical-center" style="border: 0" ng-click="$ctrl.onAddClick()">
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add user search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
@@ -63,7 +62,7 @@
 </div>
 
 <div ng-if="$ctrl.showTable">
-  <div class="form-group">
-    <ldap-users-datatable dataset="$ctrl.users" title-text="Users" title-icon="fa-users" table-key="ldapUsers" order-by="" reverse-order=""></ldap-users-datatable>
+  <div class="form-group col-sm-12">
+    <ldap-users-datatable dataset="$ctrl.users" title-text="Users" title-icon="users" table-key="ldapUsers" order-by="" reverse-order=""></ldap-users-datatable>
   </div>
 </div>

app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html

@@ -9,7 +9,7 @@
         limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
         limited-feature-tabindex="-1"
       >
-        <i class="fa fa-trash" aria-hidden="true"></i>
+        <pr-icon icon="'trash-2'" feather="true"></pr-icon>
       </button>
     </div>
 
@@ -29,10 +29,11 @@
     </div>
 
     <div class="form-group">
-      <div class="col-sm-12" style="margin-bottom: 5px">
-        <label class="control-label text-left">Groups</label>
-        <span class="label label-default interactive" style="margin-left: 10px" ng-click="$ctrl.addGroup()">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> add another group
+      <div class="col-sm-12 vertical-center" style="margin-bottom: 5px">
+        <label class="control-label text-left !pt-0">Groups</label>
+        <span class="label label-default interactive vertical-center" style="margin-left: 10px" ng-click="$ctrl.addGroup()">
+          <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+          add another group
         </span>
       </div>
       <div class="col-sm-12" ng-if="$ctrl.groups.length">
@@ -62,13 +63,13 @@
               </div>
               <div class="col-sm-3 text-right">
                 <button
-                  class="btn btn-sm btn-danger"
+                  class="btn btn-md btn-danger"
                   type="button"
                   ng-click="$ctrl.removeGroup($index)"
                   limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
                   limited-feature-tabindex="-1"
                 >
-                  <i class="fa fa-trash-alt" aria-hidden="true"></i>
+                  <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                 </button>
               </div>
             </div>

app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html

@@ -14,13 +14,14 @@
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
     <button
-      class="label label-default interactive"
+      class="label label-default interactive vertical-center"
       style="border: 0"
       ng-click="$ctrl.onAddClick()"
       limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
       limited-feature-tabindex="-1"
     >
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add group search configuration
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add group search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
@@ -31,7 +32,7 @@
 </div>
 
 <div ng-if="$ctrl.showTable">
-  <div class="form-group">
-    <ldap-groups-datatable dataset="$ctrl.groups" title-text="Groups" title-icon="fa-users" table-key="ldapGroups"></ldap-groups-datatable>
+  <div class="form-group col-sm-12">
+    <ldap-groups-datatable dataset="$ctrl.groups" title-text="Groups" title-icon="users" table-key="ldapGroups"></ldap-groups-datatable>
   </div>
 </div>

app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html

@@ -2,32 +2,39 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
-      </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  User Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'User Name'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Name'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Name')"
+                ></table-column-header>
+              </th>
+              <th>
+                <table-column-header col-title="'Groups'" can-sort="false"></table-column-header>
               </th>
-              <th> Groups </th>
             </tr>
           </thead>
           <tbody>

app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html

@@ -9,8 +9,8 @@
 
 <div class="form-group">
   <div class="col-sm-12 small text-muted">
-    <p>
-      <i class="fa fa-info-circle blue-icon mr-1" aria-hidden="true"></i>
+    <p class="vertical-center">
+      <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
       You can configure multiple LDAP Servers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all use the
       same certificates).
     </p>
@@ -22,20 +22,21 @@
     LDAP Server
     <button
       type="button"
-      class="label label-default interactive no-border"
+      class="label label-default interactive no-border vertical-center"
       ng-click="$ctrl.addLDAPUrl()"
       limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
       limited-feature-disabled
       limited-feature-class="limited-be"
     >
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> Add additional server
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      Add additional server
     </button>
   </label>
   <div class="col-sm-9 col-lg-10">
     <div class="mb-3 flex" ng-repeat="url in $ctrl.settings.URLs track by $index">
       <input type="text" class="form-control" id="ldap_url" ng-model="$ctrl.settings.URLs[$index]" placeholder="e.g. 10.0.0.10:389 or myldap.domain.tld:389" required />
       <button ng-if="$index > 0" class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLDAPUrl($index)">
-        <i class="fa fa-trash" aria-hidden="true"></i>
+        <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
       </button>
     </div>
   </div>
@@ -48,7 +49,8 @@
   </label>
   <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" id="anonymous_mode" ng-model="$ctrl.settings.AnonymousMode" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+      <input type="checkbox" id="anonymous_mode" ng-model="$ctrl.settings.AnonymousMode" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <span class="slider round"></span>
     </label>
   </div>
 </div>

app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html

@@ -3,13 +3,14 @@
     <label class="control-label text-left">{{ $ctrl.label || 'DN entries' }}</label>
     <button
       type="button"
-      class="label label-default interactive"
+      class="label label-default interactive vertical-center"
       style="margin-left: 10px; border: 0"
       ng-click="$ctrl.addEntry()"
       limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
       limited-feature-tabindex="-1"
     >
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add another entry
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add another entry
     </button>
   </div>
   <div class="col-sm-12" ng-if="$ctrl.entries.length">
@@ -33,33 +34,33 @@
           </div>
           <div class="col-sm-3 text-right">
             <button
-              class="btn btn-sm btn-primary"
+              class="btn btn-md btn-primary"
               type="button"
               ng-disabled="$first"
               ng-click="$ctrl.moveUp($index)"
               limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
               limited-feature-tabindex="-1"
             >
-              <i class="fa fa-arrow-up" aria-hidden="true"></i>
+              <pr-icon icon="'arrow-up'" feather="true" size="'md'"></pr-icon>
             </button>
             <button
-              class="btn btn-sm btn-primary"
+              class="btn btn-md btn-primary"
               type="button"
               ng-disabled="$last"
               ng-click="$ctrl.moveDown($index)"
               limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
               limited-feature-tabindex="-1"
             >
-              <i class="fa fa-arrow-down" aria-hidden="true"></i>
+              <pr-icon icon="'arrow-down'" feather="true" size="'md'"></pr-icon>
             </button>
             <button
-              class="btn btn-sm btn-danger"
+              class="btn btn-md btn-danger"
               type="button"
               ng-click="$ctrl.removeEntry($index)"
               limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
               limited-feature-tabindex="-1"
             >
-              <i class="fa fa-trash" aria-hidden="true"></i>
+              <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
             </button>
           </div>
         </div>

app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html

@@ -14,13 +14,13 @@
   <div class="col-sm-1">
     <button
       type="button"
-      class="btn btn-danger btn-sm"
+      class="btn btn-danger btn-md vertical-center"
       ng-if="$ctrl.onRemoveClick"
       ng-click="$ctrl.onRemoveClick()"
       limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
       limited-feature-tabindex="-1"
     >
-      <i class="fa fa-trash" aria-hidden="true"></i>
+      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
     </button>
   </div>
 </div>

app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html

@@ -12,8 +12,8 @@
 
   <div class="form-group">
     <div class="col-sm-12 small text-muted">
-      <p>
-        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+      <p class="vertical-center">
+        <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
         You can configure multiple LDAP Servers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all use the
         same certificates).
       </p>
@@ -25,13 +25,14 @@
       LDAP Server
       <button
         type="button"
-        class="label label-default interactive"
+        class="label label-default interactive vertical-center"
         style="border: 0"
         ng-click="$ctrl.addLDAPUrl()"
         limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
         limited-feature-tabindex="-1"
       >
-        <i class="fa fa-plus-circle" aria-hidden="true"></i> Add additional server
+        <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+        Add additional server
       </button>
     </label>
     <div class="col-sm-9 col-lg-10">
@@ -53,7 +54,7 @@
           limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
           limited-feature-tabindex="-1"
         >
-          <i class="fa fa-trash" aria-hidden="true"></i>
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
@@ -61,20 +62,15 @@
 
   <!-- Anonymous mode-->
   <div class="form-group">
-    <div class="col-sm-12">
-      <label for="anonymous_mode" class="control-label text-left">
-        Anonymous mode
-        <portainer-tooltip message="'Enable this option if the server is configured for Anonymous access.'"></portainer-tooltip>
-      </label>
+    <label for="anonymous_mode" class="control-label text-left col-sm-3 col-lg-2">
+      Anonymous mode
+      <portainer-tooltip message="'Enable this option if the server is configured for Anonymous access.'"></portainer-tooltip>
+    </label>
 
-      <label class="switch" style="margin-left: 20px">
-        <input
-          type="checkbox"
-          id="anonymous_mode"
-          ng-model="$ctrl.settings.AnonymousMode"
-          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-          limited-feature-tabindex="-1"
-        /><i></i>
+    <div class="col-sm-9 col-lg-10">
+      <label class="switch">
+        <input type="checkbox" id="anonymous_mode" ng-model="$ctrl.settings.AnonymousMode" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+        <span class="slider round"></span>
       </label>
     </div>
   </div>

app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html

@@ -4,13 +4,14 @@
 
 <!-- starttls -->
 <div class="form-group" ng-if="!$ctrl.settings.TLSConfig.TLS">
-  <label for="tls" class="control-label col-sm-3 text-left" style="padding-top: 0">
+  <label for="tls" class="control-label col-sm-3 col-lg-2 text-left" style="padding-top: 0">
     Use StartTLS
     <portainer-tooltip message="'Enable this option if want to use StartTLS to secure the connection to the server. Ignored if Use TLS is selected.'"></portainer-tooltip>
   </label>
-  <div class="col-sm-9">
+  <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" ng-model="$ctrl.settings.StartTLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+      <input type="checkbox" ng-model="$ctrl.settings.StartTLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <span class="slider round"></span>
     </label>
   </div>
 </div>
@@ -18,13 +19,14 @@
 
 <!-- tls-checkbox -->
 <div class="form-group" ng-if="!$ctrl.settings.StartTLS">
-  <label for="tls" class="control-label col-sm-3 text-left" style="padding-top: 0">
+  <label for="tls" class="control-label col-sm-3 col-lg-2 text-left" style="padding-top: 0">
     Use TLS
     <portainer-tooltip message="'Enable this option if you need to specify TLS certificates to connect to the LDAP server.'"></portainer-tooltip>
   </label>
-  <div class="col-sm-9">
+  <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <span class="slider round"></span>
     </label>
   </div>
 </div>
@@ -32,13 +34,14 @@
 
 <!-- tls-skip-verify -->
 <div class="form-group">
-  <label for="tls" class="control-label col-sm-3 text-left" style="padding-top: 0">
+  <label for="tls" class="control-label col-sm-3 col-lg-2 text-left" style="padding-top: 0">
     Skip verification of server certificate
     <portainer-tooltip message="'Skip the verification of the server TLS certificate. Not recommended on unsecured networks.'"></portainer-tooltip>
   </label>
-  <div class="col-sm-9">
+  <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLSSkipVerify" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLSSkipVerify" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <span class="slider round"></span>
     </label>
   </div>
 </div>
@@ -46,8 +49,8 @@
 
 <!-- ca-input -->
 <div class="form-group" ng-if="$ctrl.settings.TLSConfig.TLS || ($ctrl.settings.StartTLS && !$ctrl.settings.TLSConfig.TLSSkipVerify)">
-  <label class="col-sm-3 control-label text-left">TLS CA certificate</label>
-  <div class="col-sm-9">
+  <label class="col-sm-3 col-lg-2 control-label text-left">TLS CA certificate</label>
+  <div class="col-sm-9 col-lg-10 vertical-center">
     <button
       type="button"
       class="btn btn-sm btn-primary"
@@ -58,11 +61,11 @@
     >
       Select file
     </button>
-    <span style="margin-left: 5px">
+    <span class="vertical-center">
       {{ $ctrl.tlscaCert.name }}
-      <i class="fa fa-check green-icon" ng-if="$ctrl.tlscaCert && $ctrl.tlscaCert === $ctrl.settings.TLSConfig.TLSCACert" aria-hidden="true"></i>
-      <i class="fa fa-times red-icon" ng-if="!$ctrl.tlscaCert" aria-hidden="true"></i>
-      <i class="fa fa-circle-notch fa-spin" ng-if="$ctrl.uploadInProgress"></i>
+      <pr-icon icon="'check'" feather="true" class="icon-success" ng-if="$ctrl.tlscaCert && $ctrl.tlscaCert === $ctrl.settings.TLSConfig.TLSCACert"></pr-icon>
+      <pr-icon icon="'x'" feather="true" class="icon-danger" ng-if="!$ctrl.tlscaCert"></pr-icon>
+      <pr-icon icon="'fa fa-circle-notch fa-spin'" ng-if="$ctrl.uploadInProgress"></pr-icon>
     </span>
   </div>
 </div>

app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html

@@ -37,20 +37,22 @@
     />
   </div>
 
-  <div class="form-group no-margin">
-    <button
-      type="submit"
-      class="btn btn-primary"
-      ng-disabled="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING || !$ctrl.username || !$ctrl.password"
-      ng-click="$ctrl.testLogin($ctrl.username, $ctrl.password)"
-      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-      limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-      limited-feature-tabindex="-1"
-    >
-      <span ng-if="$ctrl.state.testStatus !== $ctrl.TEST_STATUS.LOADING">Test</span>
-      <span ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING">Testing...</span>
-    </button>
-    <i ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.SUCCESS" class="fa fa-check green-icon"></i>
-    <i ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.FAILURE" class="fa fa-times red-icon"></i>
+  <div class="form-group !ml-0">
+    <div class="vertical-center">
+      <button
+        type="submit"
+        class="btn btn-primary"
+        ng-disabled="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING || !$ctrl.username || !$ctrl.password"
+        ng-click="$ctrl.testLogin($ctrl.username, $ctrl.password)"
+        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+        limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+        limited-feature-tabindex="-1"
+      >
+        <span ng-if="$ctrl.state.testStatus !== $ctrl.TEST_STATUS.LOADING">Test</span>
+        <span ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING">Testing...</span>
+      </button>
+      <pr-icon icon="'check'" feather="true" class="icon-success" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.SUCCESS"></pr-icon>
+      <pr-icon icon="'x'" feather="true" class="icon-danger" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.FAILURE"></pr-icon>
+    </div>
   </div>
 </div>

app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html

@@ -10,7 +10,7 @@
         limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
         limited-feature-tabindex="-1"
       >
-        <i class="fa fa-trash" aria-hidden="true"></i>
+        <pr-icon icon="'trash-2'" feather="true"></pr-icon>
       </button>
     </div>
 
@@ -63,13 +63,14 @@
         <label class="control-label text-left">Allowed Groups (optional)</label>
         <button
           type="button"
-          class="label label-default interactive"
+          class="label label-default interactive vertical-center"
           style="margin-left: 10px; border: 0"
           ng-click="$ctrl.addGroup()"
           limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
           limited-feature-tabindex="-1"
         >
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> add another group
+          <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+          add another group
         </button>
       </div>
       <div class="col-sm-12">

app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html

@@ -15,13 +15,14 @@
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
     <button
-      class="label label-default interactive"
+      class="label label-default interactive vertical-center"
       style="border: 0"
       ng-click="$ctrl.onAddClick()"
       limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
       limited-feature-tabindex="-1"
     >
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add user search configuration
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add user search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
@@ -32,7 +33,7 @@
 </div>
 
 <div ng-if="$ctrl.showTable">
-  <div class="form-group">
-    <ldap-users-datatable dataset="$ctrl.users" title-text="Users" title-icon="fa-users" table-key="ldapUsers" order-by="" reverse-order=""></ldap-users-datatable>
+  <div class="form-group col-sm-12">
+    <ldap-users-datatable dataset="$ctrl.users" title-text="Users" title-icon="users" table-key="ldapUsers" order-by="" reverse-order=""></ldap-users-datatable>
   </div>
 </div>

app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html

@@ -2,30 +2,35 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
-      </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Name'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Name'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Name')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>

app/portainer/views/settings/authentication/options.tsx

@@ -6,8 +6,7 @@ import Oauth from '@/assets/ico/oauth.svg?c';
 export const options = [
   {
     id: 'auth_internal',
-    icon: 'user',
-    featherIcon: true,
+    icon: 'svg-internal',
     label: 'Internal',
     description: 'Internal authentication mechanism',
     value: 1,

app/portainer/views/settings/authentication/settingsAuthentication.html

@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-users" title-text="Authentication"></rd-widget-header>
+      <rd-widget-header icon="users" feather-icon="true" title-text="Authentication"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal" name="authSettingsForm">
           <div class="col-sm-12 form-section-title"> Configuration </div>
@@ -22,9 +22,9 @@
             </div>
           </div>
           <div class="form-group">
-            <span class="col-sm-12 text-muted small vertical-center"
-              ><pr-icon icon="'alert-triangle'" feather="true" class-name="'icon-sm icon-yellow'"></pr-icon> Changing from default is only recommended if you have additional layers
-              of authentication in front of Portainer.
+            <span class="col-sm-12 text-muted small vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true" class-name="'icon-sm icon-yellow'"></pr-icon>
+              Changing from default is only recommended if you have additional layers of authentication in front of Portainer.
             </span>
           </div>
 

app/react/components/Svg.tsx

@@ -66,6 +66,7 @@ import nomad from '@/assets/ico/vendor/nomad.svg?c';
 import openldap from '@/assets/ico/vendor/openldap.svg?c';
 import proget from '@/assets/ico/vendor/proget.svg?c';
 import quay from '@/assets/ico/vendor/quay.svg?c';
+import internal from '@/assets/ico/vendor/internal.svg?c';
 
 const placeholder = Placeholder;
 
@@ -135,6 +136,7 @@ export const SvgIcons = {
   openldap,
   proget,
   quay,
+  internal,
 };
 
 interface SvgProps {