From 3acefba069dfe2de5403eee57d0aa6d5d9425c66 Mon Sep 17 00:00:00 2001
From: congs <mcpacino@gmail.com>
Date: Tue, 26 Jul 2022 17:17:54 +1200
Subject: [PATCH] feat(ui): EE-3540 portainer-account (#7177)

---
 .../BEFeatureIndicator.html                   |   4 +-
 .../access-tokens-datatable.html              | 115 ++++++++++--------
 .../registriesDatatable.html                  |  38 +++---
 .../registry-form-ecr.html                    |  57 ++++++---
 .../registry-form-ecr.js                      |  11 ++
 .../registry-form-azure.html                  |  33 +++--
 .../registry-form-custom.html                 |  45 ++++---
 .../registry-form-custom.js                   |  11 ++
 .../registry-form-dockerhub.html              |  26 ++--
 .../gitlabProjectsDatatable.html              |  65 ++++++----
 .../registry-form-gitlab.html                 |  40 ++++--
 .../registry-form-proget.html                 |  40 ++++--
 .../registry-form-quay.html                   |  36 ++++--
 .../registry-form-quay/registry-form-quay.js  |  11 ++
 .../components/theme/theme-settings.html      |  34 +++---
 .../components/widget/rd-widget-title.ts      |   2 +-
 app/portainer/views/account/account.html      |  54 ++++----
 .../registries/create/createRegistry.html     |  16 +--
 app/react/components/PasswordCheckHint.tsx    |   9 +-
 19 files changed, 411 insertions(+), 236 deletions(-)

diff --git a/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html b/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html
index f908cde6b..ba53bf81e 100644
--- a/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html
+++ b/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html
@@ -1,5 +1,5 @@
-<a class="ml-5" href="{{ $ctrl.url }}" target="_blank" rel="noopener" ng-if="$ctrl.limitedToBE">
+<a class="ml-5 vertical-center" href="{{ $ctrl.url }}" target="_blank" rel="noopener" ng-if="$ctrl.limitedToBE">
   <ng-transclude></ng-transclude>
-  <i class="be-indicator-icon fas fa-briefcase space-right"></i>
+  <pr-icon icon="'briefcase'" feather="true" class="icon-primary"></pr-icon>
   <span class="be-indicator-label">Business Edition Feature</span>
 </a>
diff --git a/app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html b/app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html
index fa826a682..97ecb5461 100644
--- a/app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html
+++ b/app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html
@@ -1,67 +1,84 @@
 <div class="datatable" style="margin-top: 25px">
   <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="actionBar">
-        <button
-          ng-if="!$ctrl.endpointType"
-          type="button"
-          class="btn btn-sm btn-danger"
-          ng-disabled="$ctrl.state.selectedItemCount === 0"
-          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-        >
-          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
-        </button>
-        <button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.onClickAdd()"> <i class="fa fa-plus space-right" aria-hidden="true"></i>Add access token </button>
-      </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..."
-          ng-model-options="{ debounce: 300 }"
-        />
+      <div class="toolBar vertical-center">
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-primary icon-nested-blue'"></pr-icon>
+          <span>{{ $ctrl.titleText }}</span>
+        </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true" class="searchIcon"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
+        <div class="actionBar">
+          <button
+            ng-if="!$ctrl.endpointType"
+            type="button"
+            class="btn btn-sm btn-dangerlight vertical-center"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+          >
+            <pr-icon icon="'trash-2'" feather="true" class-name="'icon-white'"></pr-icon>
+            <span>Remove</span>
+          </button>
+          <button type="button" class="btn btn-sm btn-primary vertical-center" ng-click="$ctrl.onClickAdd()">
+            <pr-icon icon="'plus'" feather="true" class-name="'icon-white'"></pr-icon>
+            <span>Add access token</span>
+          </button>
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <a ng-click="$ctrl.changeOrderBy('description')">
-                  Description
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'description' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'description' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <div class="vertical-center">
+                  <span class="md-checkbox">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <table-column-header
+                    col-title="'Description'"
+                    can-sort="true"
+                    is-sorted="$ctrl.state.orderBy === 'description'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'description' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('description')"
+                  ></table-column-header>
+                </div>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('prefix')">
-                  Prefix
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'prefix' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'prefix' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Prefix'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'prefix'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'prefix' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('prefix')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('dateCreated')">
-                  Created
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'dateCreated' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'dateCreated' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Created'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'dateCreated'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'dateCreated' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('dateCreated')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('lastUsed')">
-                  Last Used
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'lastUsed' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'lastUsed' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Last Used'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'lastUsed'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'lastUsed' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('lastUsed')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
diff --git a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
index 889c7cb34..233661014 100644
--- a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
+++ b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
@@ -40,24 +40,32 @@
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox" ng-if="$ctrl.isAdmin && !$ctrl.endpointType">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <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>
+                <div class="vertical-center">
+                  <span class="md-checkbox vertical-center" ng-if="$ctrl.isAdmin && !$ctrl.endpointType">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <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>
+                </div>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('URL')">
-                  URL
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'URL' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'URL' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'URL'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'URL'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'URL' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('URL')"
+                ></table-column-header>
+              </th>
+              <th>
+                <table-column-header col-title="'Actions'" can-sort="false"></table-column-header>
               </th>
-              <th>Actions</th>
             </tr>
           </thead>
           <tbody>
diff --git a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
index 705a149a1..2d6f6d889 100644
--- a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
+++ b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
@@ -11,7 +11,7 @@
 
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-ecr-registry" required auto-focus />
     </div>
@@ -19,8 +19,14 @@
   <div class="form-group" ng-show="$ctrl.registryFormEcr.registry_name.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormEcr.registry_name.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
-        <p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
+        <p ng-message="used" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          A registry with the same name already exists.
+        </p>
       </div>
     </div>
   </div>
@@ -29,7 +35,7 @@
   <!-- url-input -->
   <div class="form-group">
     <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
-      Registry URL
+      <span class="required">Registry URL</span>
       <portainer-tooltip message="'URL of an Amazon Elastic Container Registry, which contains an account id and region.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
@@ -47,7 +53,10 @@
   <div class="form-group" ng-show="$ctrl.registryFormEcr.registry_url.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormEcr.registry_url.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
@@ -56,11 +65,13 @@
   <!-- authentication-checkbox -->
   <div class="form-group">
     <div class="col-sm-12">
-      <label class="control-label text-left">
-        Authentication
-        <portainer-tooltip message="'Enable this option if you need to specify credentials to connect to a private registry.'"></portainer-tooltip>
-      </label>
-      <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.model.Authentication" /><i></i> </label>
+      <por-switch-field
+        label="'Authentication'"
+        tooltip="'Enable this option if you need to specify credentials to connect to a private registry.'"
+        name="'administrator'"
+        checked="$ctrl.model.Authentication"
+        on-change="($ctrl.toggleAuthentication)"
+      ></por-switch-field>
     </div>
   </div>
   <!-- !authentication-checkbox -->
@@ -68,7 +79,7 @@
   <div ng-if="$ctrl.model.Authentication">
     <!-- aws-access-key -->
     <div class="form-group">
-      <label for="registry_access_key" class="col-sm-3 col-lg-2 control-label text-left">AWS Access Key</label>
+      <label for="registry_access_key" class="col-sm-3 col-lg-2 control-label text-left required">AWS Access Key</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_access_key" name="registry_access_key" ng-model="$ctrl.model.Username" required />
       </div>
@@ -76,7 +87,10 @@
     <div class="form-group" ng-show="$ctrl.registryFormEcr.registry_access_key.$invalid">
       <div class="col-sm-12 small text-warning">
         <div ng-messages="$ctrl.registryFormEcr.registry_access_key.$error">
-          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          <p ng-message="required" class="vertical-center">
+            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+            This field is required.
+          </p>
         </div>
       </div>
     </div>
@@ -84,7 +98,7 @@
 
     <!-- aws-secret-access-key -->
     <div class="form-group">
-      <label for="registry_secret_access_key" class="col-sm-3 col-lg-2 control-label text-left">AWS Secret Access Key</label>
+      <label for="registry_secret_access_key" class="col-sm-3 col-lg-2 control-label text-left required">AWS Secret Access Key</label>
       <div class="col-sm-9 col-lg-10">
         <input type="password" class="form-control" id="registry_secret_access_key" name="registry_secret_access_key" ng-model="$ctrl.model.Password" required />
       </div>
@@ -92,7 +106,10 @@
     <div class="form-group" ng-show="$ctrl.registryFormEcr.registry_secret_access_key.$invalid">
       <div class="col-sm-12 small text-warning">
         <div ng-messages="$ctrl.registryFormEcr.registry_secret_access_key.$error">
-          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          <p ng-message="required" class="vertical-center">
+            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+            This field is required.
+          </p>
         </div>
       </div>
     </div>
@@ -101,7 +118,7 @@
 
   <!-- region -->
   <div class="form-group">
-    <label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left">Region</label>
+    <label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left required">Region</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_region" name="registry_region" placeholder="us-west-1" ng-model="$ctrl.model.Ecr.Region" required />
     </div>
@@ -109,8 +126,14 @@
   <div class="form-group" ng-show="$ctrl.registryFormEcr.registry_region.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormEcr.registry_region.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
-        <p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
+        <p ng-message="used" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          A registry with the same name already exists.
+        </p>
       </div>
     </div>
   </div>
diff --git a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.js b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.js
index bd07ecbff..2eba8888b 100644
--- a/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.js
+++ b/app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.js
@@ -1,7 +1,18 @@
 class controller {
+  constructor($scope) {
+    this.$scope = $scope;
+    this.toggleAuthentication = this.toggleAuthentication.bind(this);
+  }
+
   $postLink() {
     this.registryFormEcr.registry_name.$validators.used = (modelValue) => !this.nameIsUsed(modelValue);
   }
+
+  toggleAuthentication(newValue) {
+    this.$scope.$evalAsync(() => {
+      this.model.Authentication = newValue;
+    });
+  }
 }
 
 angular.module('portainer.app').component('registryFormEcr', {
diff --git a/app/portainer/components/forms/registry-form-azure/registry-form-azure.html b/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
index 26f4bcc2b..811bb2a86 100644
--- a/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
+++ b/app/portainer/components/forms/registry-form-azure/registry-form-azure.html
@@ -2,7 +2,7 @@
   <div class="col-sm-12 form-section-title"> Azure registry details </div>
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-azure-registry" required auto-focus />
     </div>
@@ -10,8 +10,14 @@
   <div class="form-group" ng-show="$ctrl.registryFormAzure.registry_name.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormAzure.registry_name.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
-        <p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
+        <p ng-message="used" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          A registry with the same name already exists.
+        </p>
       </div>
     </div>
   </div>
@@ -19,7 +25,7 @@
   <!-- url-input -->
   <div class="form-group">
     <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
-      Registry URL
+      <span class="required">Registry URL</span>
       <portainer-tooltip message="'URL of an Azure Container Registry. Any protocol will be stripped.'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
@@ -29,14 +35,17 @@
   <div class="form-group" ng-show="$ctrl.registryFormAzure.registry_url.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormAzure.registry_url.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
   <!-- url-input -->
   <!-- credentials-user -->
   <div class="form-group">
-    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
+    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
     </div>
@@ -44,14 +53,17 @@
   <div class="form-group" ng-show="$ctrl.registryFormAzure.registry_username.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormAzure.registry_username.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
   <!-- !credentials-user -->
   <!-- credentials-password -->
   <div class="form-group">
-    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
+    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
     </div>
@@ -59,7 +71,10 @@
   <div class="form-group" ng-show="$ctrl.registryFormAzure.registry_password.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormAzure.registry_password.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
diff --git a/app/portainer/components/forms/registry-form-custom/registry-form-custom.html b/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
index e4bf84871..2e77af807 100644
--- a/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
+++ b/app/portainer/components/forms/registry-form-custom/registry-form-custom.html
@@ -9,7 +9,7 @@
   <div class="col-sm-12 form-section-title"> Custom registry details </div>
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-custom-registry" required auto-focus />
     </div>
@@ -17,15 +17,21 @@
   <div class="form-group" ng-show="$ctrl.registryFormCustom.registry_name.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormCustom.registry_name.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
-        <p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
+        <p ng-message="used" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          A registry with the same name already exists.
+        </p>
       </div>
     </div>
   </div>
   <!-- !name-input -->
   <!-- url-input -->
   <div class="form-group">
-    <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
+    <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left required">
       Registry URL
       <portainer-tooltip message="'URL or IP address of a Docker registry. Any protocol and trailing slash will be stripped if present.'"></portainer-tooltip>
     </label>
@@ -36,7 +42,10 @@
   <div class="form-group" ng-show="$ctrl.registryFormCustom.registry_url.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormCustom.registry_url.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
@@ -44,18 +53,20 @@
   <!-- authentication-checkbox -->
   <div class="form-group">
     <div class="col-sm-12">
-      <label for="registry_auth" class="control-label text-left">
-        Authentication
-        <portainer-tooltip message="'Enable this option if you need to specify credentials to connect to this registry.'"></portainer-tooltip>
-      </label>
-      <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.model.Authentication" /><i></i> </label>
+      <por-switch-field
+        label="'Authentication'"
+        tooltip="'Enable this option if you need to specify credentials to connect to this registry.'"
+        name="'administrator'"
+        checked="$ctrl.model.Authentication"
+        on-change="($ctrl.toggleAuthentication)"
+      ></por-switch-field>
     </div>
   </div>
   <!-- !authentication-checkbox -->
   <div ng-if="$ctrl.model.Authentication">
     <!-- credentials-user -->
     <div class="form-group">
-      <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
+      <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
       </div>
@@ -63,14 +74,17 @@
     <div class="form-group" ng-show="$ctrl.registryFormCustom.registry_username.$invalid">
       <div class="col-sm-12 small text-warning">
         <div ng-messages="$ctrl.registryFormCustom.registry_username.$error">
-          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          <p ng-message="required" class="vertical-center">
+            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+            This field is required.
+          </p>
         </div>
       </div>
     </div>
     <!-- !credentials-user -->
     <!-- credentials-password -->
     <div class="form-group">
-      <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
+      <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
       <div class="col-sm-9 col-lg-10">
         <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
       </div>
@@ -78,7 +92,10 @@
     <div class="form-group" ng-show="$ctrl.registryFormCustom.registry_password.$invalid">
       <div class="col-sm-12 small text-warning">
         <div ng-messages="$ctrl.registryFormCustom.registry_password.$error">
-          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          <p ng-message="required" class="vertical-center">
+            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+            This field is required.
+          </p>
         </div>
       </div>
     </div>
diff --git a/app/portainer/components/forms/registry-form-custom/registry-form-custom.js b/app/portainer/components/forms/registry-form-custom/registry-form-custom.js
index fbb0d726b..c0e56e76b 100644
--- a/app/portainer/components/forms/registry-form-custom/registry-form-custom.js
+++ b/app/portainer/components/forms/registry-form-custom/registry-form-custom.js
@@ -1,7 +1,18 @@
 class controller {
+  constructor($scope) {
+    this.$scope = $scope;
+    this.toggleAuthentication = this.toggleAuthentication.bind(this);
+  }
+
   $postLink() {
     this.registryFormCustom.registry_name.$validators.used = (modelValue) => !this.nameIsUsed(modelValue);
   }
+
+  toggleAuthentication(newValue) {
+    this.$scope.$evalAsync(() => {
+      this.model.Authentication = newValue;
+    });
+  }
 }
 
 angular.module('portainer.app').component('registryFormCustom', {
diff --git a/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html b/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
index b8f16d75b..c5f7e2c37 100644
--- a/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
+++ b/app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
@@ -11,7 +11,7 @@
   <div class="col-sm-12 form-section-title"> DockerHub account details </div>
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="dockerhub-prod-us" required />
     </div>
@@ -19,15 +19,21 @@
   <div class="form-group" ng-show="$ctrl.registryFormDockerhub.registry_name.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormDockerhub.registry_name.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
-        <p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
+        <p ng-message="used" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          A registry with the same name already exists.
+        </p>
       </div>
     </div>
   </div>
   <!-- !name-input -->
   <!-- credentials-user -->
   <div class="form-group">
-    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">DockerHub username</label>
+    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">DockerHub username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
     </div>
@@ -35,14 +41,17 @@
   <div class="form-group" ng-show="$ctrl.registryFormDockerhub.registry_username.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormDockerhub.registry_username.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
   <!-- !credentials-user -->
   <!-- credentials-password -->
   <div class="form-group">
-    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">DockerHub access token</label>
+    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">DockerHub access token</label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
     </div>
@@ -50,7 +59,10 @@
   <div class="form-group" ng-show="$ctrl.registryFormDockerhub.registry_password.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormDockerhub.registry_password.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
diff --git a/app/portainer/components/forms/registry-form-gitlab/gitlab-projects-datatable/gitlabProjectsDatatable.html b/app/portainer/components/forms/registry-form-gitlab/gitlab-projects-datatable/gitlabProjectsDatatable.html
index 9c1c28cb0..c0cd8a814 100644
--- a/app/portainer/components/forms/registry-form-gitlab/gitlab-projects-datatable/gitlabProjectsDatatable.html
+++ b/app/portainer/components/forms/registry-form-gitlab/gitlab-projects-datatable/gitlabProjectsDatatable.html
@@ -1,43 +1,56 @@
 <div class="datatable">
   <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 />
+      <div class="toolBar vertical-center">
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-blue'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true" class="searchIcon"></pr-icon>
+          <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus />
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <a ng-click="$ctrl.changeOrderBy('Namespace')">
-                  Namespace
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Namespace' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Namespace' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <div class="vertical-center">
+                  <span class="md-checkbox vertical-center">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <table-column-header
+                    col-title="'Namespace'"
+                    can-sort="true"
+                    is-sorted="$ctrl.state.orderBy === 'Namespace'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'Namespace' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Namespace')"
+                  ></table-column-header>
+                </div>
               </th>
               <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>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('PathWithNamespace')">
-                  Path with namespace
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PathWithNamespace' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PathWithNamespace' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'PathWithNamespace'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'PathWithNamespace'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'PathWithNamespace' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('PathWithNamespace')"
+                ></table-column-header>
+              </th>
+              <th>
+                <table-column-header col-title="'Description'" can-sort="false"></table-column-header>
               </th>
-              <th>Description</th>
             </tr>
           </thead>
           <tbody>
diff --git a/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html b/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
index a425c5f08..018ad00c6 100644
--- a/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
+++ b/app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
@@ -11,7 +11,7 @@
   <div class="col-sm-12 form-section-title"> Gitlab registry connection details </div>
   <!-- credentials-user -->
   <div class="form-group">
-    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
+    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
     </div>
@@ -19,14 +19,17 @@
   <div class="form-group" ng-show="registryFormGitlab.registry_username.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="registryFormGitlab.registry_username.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
   <!-- !credentials-user -->
   <!-- credentials-pat -->
   <div class="form-group">
-    <label for="registry_perso_acc_token" class="col-sm-3 col-lg-2 control-label text-left">Personal Access Token </label>
+    <label for="registry_perso_acc_token" class="col-sm-3 col-lg-2 control-label text-left required">Personal Access Token </label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_perso_acc_token" name="registry_perso_acc_token" ng-model="$ctrl.model.Token" required />
     </div>
@@ -34,7 +37,10 @@
   <div class="form-group" ng-show="registryFormGitlab.registry_perso_acc_token.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="registryFormGitlab.registry_perso_acc_token.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
@@ -42,11 +48,13 @@
 
   <div class="form-group">
     <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.state.overrideConfiguration = false; $ctrl.resetDefaults()">
-        <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.state.overrideConfiguration = false; $ctrl.resetDefaults()">
+        <pr-icon icon="'settings'" feather="true"></pr-icon>
+        Use default configuration
       </a>
     </div>
   </div>
@@ -64,7 +72,10 @@
   <div class="form-group" ng-show="registryFormGitlab.instance_url.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="registryFormGitlab.instance_url.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
@@ -82,7 +93,10 @@
   <div class="form-group" ng-show="registryFormGitlab.registry_url.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="registryFormGitlab.registry_url.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
@@ -101,8 +115,8 @@
   <div class="col-sm-12 form-section-title"> Gitlab projects </div>
   <div class="form-group">
     <span class="col-sm-12 text-muted small"> Select the project's registries you want to manage. Portainer will create one registry for each selected project. </span>
-    <span class="col-sm-12 text-muted small">
-      <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
+    <span class="col-sm-12 text-muted small vertical-center">
+      <pr-icon icon="'alert-triangle'" feather="true" class-name="'icon-warning'"></pr-icon>
       If you can't select a project, make sure that registry feature is activated on it.
     </span>
   </div>
@@ -110,7 +124,7 @@
     <div class="col-sm-12">
       <gitlab-projects-datatable
         title-text="Gitlab projects"
-        title-icon="fa-project-diagram"
+        title-icon="list"
         dataset="$ctrl.projects"
         table-key="gitlab_projects"
         state="$ctrl.state.gitlab"
diff --git a/app/portainer/components/forms/registry-form-proget/registry-form-proget.html b/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
index 64894c4fd..d126e35d4 100644
--- a/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
+++ b/app/portainer/components/forms/registry-form-proget/registry-form-proget.html
@@ -9,7 +9,7 @@
   <div class="col-sm-12 form-section-title"> ProGet registry details </div>
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="proget-registry" required auto-focus />
     </div>
@@ -17,8 +17,14 @@
   <div class="form-group" ng-show="$ctrl.registryFormProGet.registry_name.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormProGet.registry_name.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>This field is required.</p>
-        <p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
+        <p ng-message="used" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          A registry with the same name already exists.
+        </p>
       </div>
     </div>
   </div>
@@ -26,7 +32,7 @@
   <!-- url-input -->
   <div class="form-group">
     <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
-      Registry URL
+      <span class="required">Registry URL</span>
       <portainer-tooltip message="'The URL of the ProGet registry including the Feed name'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
@@ -36,7 +42,10 @@
   <div class="form-group" ng-show="$ctrl.registryFormProGet.registry_url.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormProGet.registry_url.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
@@ -44,7 +53,7 @@
   <!-- base-url-input -->
   <div class="form-group">
     <label for="registry_base_url" class="col-sm-3 col-lg-2 control-label text-left">
-      Base URL
+      <span class="required">Base URL</span>
       <portainer-tooltip message="'The base URL of the ProGet registry'"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
@@ -54,7 +63,10 @@
   <div class="form-group" ng-show="$ctrl.registryFormProGet.registry_base_url.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormProGet.registry_base_url.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
@@ -62,7 +74,7 @@
   <div>
     <!-- credentials-user -->
     <div class="form-group">
-      <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
+      <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
       </div>
@@ -70,14 +82,17 @@
     <div class="form-group" ng-show="$ctrl.registryFormProGet.registry_username.$invalid">
       <div class="col-sm-12 small text-warning">
         <div ng-messages="$ctrl.registryFormProGet.registry_username.$error">
-          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          <p ng-message="required" class="vertical-center">
+            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+            This field is required.
+          </p>
         </div>
       </div>
     </div>
     <!-- !credentials-user -->
     <!-- credentials-password -->
     <div class="form-group">
-      <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
+      <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
       <div class="col-sm-9 col-lg-10">
         <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
       </div>
@@ -85,7 +100,10 @@
     <div class="form-group" ng-show="$ctrl.registryFormProGet.registry_password.$invalid">
       <div class="col-sm-12 small text-warning">
         <div ng-messages="$ctrl.registryFormProGet.registry_password.$error">
-          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          <p ng-message="required" class="vertical-center">
+            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+            This field is required.
+          </p>
         </div>
       </div>
     </div>
diff --git a/app/portainer/components/forms/registry-form-quay/registry-form-quay.html b/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
index fedc1aae9..3b583f762 100644
--- a/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
+++ b/app/portainer/components/forms/registry-form-quay/registry-form-quay.html
@@ -2,7 +2,7 @@
   <div class="col-sm-12 form-section-title"> Quay account details </div>
   <!-- name-input -->
   <div class="form-group">
-    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="Quay" required />
     </div>
@@ -10,15 +10,21 @@
   <div class="form-group" ng-show="$ctrl.registryFormQuay.registry_name.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormQuay.registry_name.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
-        <p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
+        <p ng-message="used" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          A registry with the same name already exists.
+        </p>
       </div>
     </div>
   </div>
   <!-- !name-input -->
   <!-- credentials-user -->
   <div class="form-group">
-    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
+    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
     <div class="col-sm-9 col-lg-10">
       <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required auto-focus />
     </div>
@@ -26,14 +32,17 @@
   <div class="form-group" ng-show="$ctrl.registryFormQuay.registry_username.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormQuay.registry_username.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
   <!-- !credentials-user -->
   <!-- credentials-password -->
   <div class="form-group">
-    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
+    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
     <div class="col-sm-9 col-lg-10">
       <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
     </div>
@@ -41,7 +50,10 @@
   <div class="form-group" ng-show="$ctrl.registryFormQuay.registry_password.$invalid">
     <div class="col-sm-12 small text-warning">
       <div ng-messages="$ctrl.registryFormQuay.registry_password.$error">
-        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        <p ng-message="required" class="vertical-center">
+          <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+          This field is required.
+        </p>
       </div>
     </div>
   </div>
@@ -50,15 +62,14 @@
   <!-- organisation-checkbox -->
   <div class="form-group">
     <div class="col-sm-12">
-      <label class="control-label text-left"> Use organisation registry </label>
-      <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.model.Quay.useOrganisation" /><i></i> </label>
+      <por-switch-field label="'Use organisation registry'" checked="$ctrl.model.Quay.useOrganisation" on-change="($ctrl.toggleOrganisation)"></por-switch-field>
     </div>
   </div>
   <!-- !organisation-checkbox -->
   <div ng-if="$ctrl.model.Quay.useOrganisation">
     <!-- organisation_name -->
     <div class="form-group">
-      <label for="organisation_name" class="col-sm-3 col-lg-2 control-label text-left">Organisation name</label>
+      <label for="organisation_name" class="col-sm-3 col-lg-2 control-label text-left required">Organisation name</label>
       <div class="col-sm-9 col-lg-10">
         <input type="text" class="form-control" id="organisation_name" name="organisation_name" ng-model="$ctrl.model.Quay.organisationName" required />
       </div>
@@ -66,7 +77,10 @@
     <div class="form-group" ng-show="$ctrl.registryFormQuay.organisation_name.$invalid">
       <div class="col-sm-12 small text-warning">
         <div ng-messages="$ctrl.registryFormQuay.organisation_name.$error">
-          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+          <p ng-message="required" class="vertical-center">
+            <pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
+            This field is required.
+          </p>
         </div>
       </div>
     </div>
diff --git a/app/portainer/components/forms/registry-form-quay/registry-form-quay.js b/app/portainer/components/forms/registry-form-quay/registry-form-quay.js
index 87a902508..24869cfb7 100644
--- a/app/portainer/components/forms/registry-form-quay/registry-form-quay.js
+++ b/app/portainer/components/forms/registry-form-quay/registry-form-quay.js
@@ -1,7 +1,18 @@
 class controller {
+  constructor($scope) {
+    this.$scope = $scope;
+    this.toggleOrganisation = this.toggleOrganisation.bind(this);
+  }
+
   $postLink() {
     this.registryFormQuay.registry_name.$validators.used = (modelValue) => !this.nameIsUsed(modelValue);
   }
+
+  toggleOrganisation(newValue) {
+    this.$scope.$evalAsync(() => {
+      this.model.Quay.useOrganisation = newValue;
+    });
+  }
 }
 
 angular.module('portainer.app').component('registryFormQuay', {
diff --git a/app/portainer/components/theme/theme-settings.html b/app/portainer/components/theme/theme-settings.html
index 131139930..4aa471045 100644
--- a/app/portainer/components/theme/theme-settings.html
+++ b/app/portainer/components/theme/theme-settings.html
@@ -1,18 +1,16 @@
-<information-panel class="theme-information" title-text="Information">
-  <span class="small text-muted">
-    <p>
-      <i class="fa fa-flask orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
-      Dark and High-contrast theme are experimental. Some UI components might not display properly.
-    </p>
-  </span>
-</information-panel>
-<rd-widget>
-  <rd-widget-header icon="fa-palette" title-text="Change user theme"></rd-widget-header>
-  <rd-widget-body>
-    <form class="theme-panel">
-      <!-- Theme Selector-->
-      <box-selector radio-name="'theme'" value="$ctrl.state.userTheme" options="$ctrl.state.availableThemes" on-change="($ctrl.setTheme)"></box-selector>
-      <!-- !Theme -->
-    </form>
-  </rd-widget-body>
-</rd-widget>
+<div class="mt-6">
+  <rd-widget>
+    <rd-widget-header icon="sliders" feather-icon="true" title-text="User theme"></rd-widget-header>
+    <rd-widget-body>
+      <form class="theme-panel">
+        <!-- Theme Selector-->
+        <box-selector radio-name="'theme'" value="$ctrl.state.userTheme" options="$ctrl.state.availableThemes" on-change="($ctrl.setTheme)"></box-selector>
+        <!-- !Theme -->
+      </form>
+      <p class="mt-2 vertical-center">
+        <pr-icon icon="'alert-circle'" class-name="'icon-primary'" feather="true"></pr-icon>
+        Dark and High-contrast theme are experimental. Some UI components might not display properly.
+      </p>
+    </rd-widget-body>
+  </rd-widget>
+</div>
diff --git a/app/portainer/components/widget/rd-widget-title.ts b/app/portainer/components/widget/rd-widget-title.ts
index cb5118c15..b13ab13a5 100644
--- a/app/portainer/components/widget/rd-widget-title.ts
+++ b/app/portainer/components/widget/rd-widget-title.ts
@@ -13,7 +13,7 @@ export const rdWidgetTitle = {
     <div class="widget-header">
       <div class="row">
         <span ng-class="$ctrl.classes" class="pull-left vertical-center">
-          <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon" class-name="'icon-primary icon-nested-blue'"></pr-icon>
+          <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon"></pr-icon>
           <span ng-transclude="title">{{ $ctrl.titleText }}</span>
         </span>
         <span ng-class="$ctrl.classes" class="pull-right" ng-transclude></span>
diff --git a/app/portainer/views/account/account.html b/app/portainer/views/account/account.html
index 07bb25899..00faa05d6 100644
--- a/app/portainer/views/account/account.html
+++ b/app/portainer/views/account/account.html
@@ -5,52 +5,40 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-lock" title-text="Change user password"></rd-widget-header>
+      <rd-widget-header icon="lock" feather-icon="true" title-text="Change user password"></rd-widget-header>
       <rd-widget-body>
         <form name="form" class="form-horizontal" style="margin-top: 15px">
           <!-- current-password-input -->
           <div class="form-group">
-            <label for="current_password" class="col-sm-2 control-label text-left">Current password</label>
+            <label for="current_password" class="col-sm-2 control-label text-left required">Current password</label>
             <div class="col-sm-8">
-              <div class="input-group">
-                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
-                <input type="password" class="form-control" ng-model="formValues.currentPassword" id="current_password" />
-              </div>
+              <input type="password" class="form-control" ng-model="formValues.currentPassword" id="current_password" />
             </div>
           </div>
           <!-- !current-password-input -->
           <!-- new-password-input -->
           <div class="form-group">
-            <label for="new_password" class="col-sm-2 control-label text-left">New password</label>
+            <label for="new_password" class="col-sm-2 control-label text-left required">New password</label>
             <div class="col-sm-8">
-              <div class="input-group">
-                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
-                <input type="password" class="form-control" ng-model="formValues.newPassword" ng-minlength="requiredPasswordLength" id="new_password" name="new_password" />
-              </div>
+              <input type="password" class="form-control" ng-model="formValues.newPassword" ng-minlength="requiredPasswordLength" id="new_password" name="new_password" />
             </div>
           </div>
           <!-- !new-password-input -->
 
           <!-- confirm-password-input -->
           <div class="form-group">
-            <label for="confirm_password" class="col-sm-2 control-label text-left">Confirm password</label>
+            <label for="confirm_password" class="col-sm-2 control-label text-left required">Confirm password</label>
             <div class="col-sm-8">
               <div class="input-group">
-                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
                 <input type="password" class="form-control" ng-model="formValues.confirmPassword" id="confirm_password" />
-                <span class="input-group-addon"
-                  ><i ng-class="{ true: 'fa fa-check green-icon', false: 'fa fa-times red-icon' }[formValues.newPassword === formValues.confirmPassword]" aria-hidden="true"></i
-                ></span>
+                <span class="input-group-addon">
+                  <pr-icon icon="'check'" feather="true" class="icon-success" ng-if="formValues.newPassword === formValues.confirmPassword"></pr-icon>
+                  <pr-icon icon="'x'" feather="true" class="icon-danger" ng-if="!(formValues.newPassword === formValues.confirmPassword)"></pr-icon>
+                </span>
               </div>
             </div>
           </div>
           <password-check-hint password-valid="form.new_password.$valid && formValues.newPassword" force-change-password="forceChangePassword"></password-check-hint>
-          <div ng-if="userRole === 1">
-            <p class="text-muted">
-              <i class="fa fa-exclamation-circle blue-icon" aria-hidden="true"></i>
-              Minimum password length is set <a ui-sref="portainer.settings.authentication">here.</a>
-            </p>
-          </div>
           <!-- !confirm-password-input -->
           <div class="form-group">
             <div class="col-sm-12">
@@ -62,25 +50,31 @@
               >
                 Update password
               </button>
-              <button type="submit" class="btn btn-primary btn-sm" ng-click="skipPasswordChange()" ng-if="forceChangePassword && timesPasswordChangeSkipped < 2"
-                >Remind me later</button
-              >
-              <span class="text-muted small" style="margin-left: 5px" ng-if="AuthenticationMethod === 2 && !isInitialAdmin">
-                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+              <button type="submit" class="btn btn-primary btn-sm" ng-click="skipPasswordChange()" ng-if="forceChangePassword && timesPasswordChangeSkipped < 2">
+                Remind me later
+              </button>
+              <span class="text-muted small vertical-center" style="margin-left: 5px" ng-if="AuthenticationMethod === 2 && !isInitialAdmin">
+                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
                 You cannot change your password when using LDAP authentication.
               </span>
-              <span class="text-muted small" style="margin-left: 5px" ng-if="AuthenticationMethod === 3 && !isInitialAdmin">
-                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+              <span class="text-muted small vertical-center" style="margin-left: 5px" ng-if="AuthenticationMethod === 3 && !isInitialAdmin">
+                <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
                 You cannot change your password when using OAuth authentication.
               </span>
             </div>
           </div>
+          <div ng-if="userRole === 1">
+            <p class="text-muted vertical-center">
+              <pr-icon icon="'alert-circle'" class-name="'icon-primary'" feather="true"></pr-icon>
+              Minimum password length is set <a ui-sref="portainer.settings.authentication">here.</a>
+            </p>
+          </div>
         </form>
       </rd-widget-body>
     </rd-widget>
     <access-tokens-datatable
       title-text="Access tokens"
-      title-icon="fa-key"
+      title-icon="key"
       dataset="tokens"
       table-key="tokens"
       order-by="Description"
diff --git a/app/portainer/views/registries/create/createRegistry.html b/app/portainer/views/registries/create/createRegistry.html
index b690d93be..2792cc296 100644
--- a/app/portainer/views/registries/create/createRegistry.html
+++ b/app/portainer/views/registries/create/createRegistry.html
@@ -14,8 +14,8 @@
               <div>
                 <input type="radio" id="registry_dockerhub" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.DOCKERHUB" />
                 <label for="registry_dockerhub" ng-click="$ctrl.selectDockerHub()">
-                  <div class="boxselector_header">
-                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px"></i>
+                  <div class="boxselector_header vertical-center">
+                    <pr-icon icon="'database'" feather="true"></pr-icon>
                     DockerHub
                   </div>
                   <p>DockerHub authenticated account</p>
@@ -34,8 +34,8 @@
               <div>
                 <input type="radio" id="registry_quay" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.QUAY" />
                 <label for="registry_quay" ng-click="$ctrl.selectQuayRegistry()">
-                  <div class="boxselector_header">
-                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px"></i>
+                  <div class="boxselector_header vertical-center">
+                    <pr-icon icon="'database'" feather="true"></pr-icon>
                     Quay.io
                   </div>
                   <p>Quay container registry</p>
@@ -44,8 +44,8 @@
               <div>
                 <input type="radio" id="registry_proget" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.PROGET" />
                 <label for="registry_proget" ng-click="$ctrl.selectProGetRegistry()">
-                  <div class="boxselector_header">
-                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px"></i>
+                  <div class="boxselector_header vertical-center">
+                    <pr-icon icon="'database'" feather="true"></pr-icon>
                     ProGet
                   </div>
                   <p>ProGet container registry</p>
@@ -74,8 +74,8 @@
               <div>
                 <input type="radio" id="registry_custom" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.CUSTOM" />
                 <label for="registry_custom" ng-click="$ctrl.selectCustomRegistry()">
-                  <div class="boxselector_header">
-                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px"></i>
+                  <div class="boxselector_header vertical-center">
+                    <pr-icon icon="'database'" feather="true"></pr-icon>
                     Custom registry
                   </div>
                   <p>Define your own registry</p>
diff --git a/app/react/components/PasswordCheckHint.tsx b/app/react/components/PasswordCheckHint.tsx
index cdaaec032..069fe6d2d 100644
--- a/app/react/components/PasswordCheckHint.tsx
+++ b/app/react/components/PasswordCheckHint.tsx
@@ -1,5 +1,7 @@
 import { usePublicSettings } from '@/portainer/settings/queries';
 
+import { Icon } from '@@/Icon';
+
 interface Props {
   passwordValid: boolean;
   forceChangePassword?: boolean;
@@ -14,11 +16,8 @@ export function PasswordCheckHint({
 
   return (
     <div>
-      <p className="text-muted">
-        <i
-          className="fa fa-exclamation-triangle orange-icon space-right"
-          aria-hidden="true"
-        />
+      <p className="text-muted vertical-center">
+        <Icon icon="alert-triangle" className="icon-warning" feather />
         {forceChangePassword &&
           'An administrator has changed your password requirements, '}
         The password must be at least {minPasswordLength} characters long.