From 9c279e7fae0e1f72d46bde3d6cc88ac4e95b5993 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Fri, 24 Sep 2021 14:02:10 +0300
Subject: [PATCH 01/18] fix(k8s/ns): validate ingress ctrl host pattern (#5662)

* fix(k8s/ns): validate ingress ctrl host pattern

* feat(kube/ns): validate ingress hostname
---
 .../views/resource-pools/create/createResourcePool.html     | 5 +++++
 .../resource-pools/create/createResourcePoolController.js   | 2 +-
 app/kubernetes/views/resource-pools/edit/resourcePool.html  | 6 ++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/kubernetes/views/resource-pools/create/createResourcePool.html b/app/kubernetes/views/resource-pools/create/createResourcePool.html
index 8529a0395..611c2bc45 100644
--- a/app/kubernetes/views/resource-pools/create/createResourcePool.html
+++ b/app/kubernetes/views/resource-pools/create/createResourcePool.html
@@ -269,6 +269,7 @@
                             ng-model="item.Host"
                             ng-change="$ctrl.onChangeIngressHostname()"
                             placeholder="foo"
+                            pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*"
                             required
                           />
                         </div>
@@ -288,6 +289,10 @@
                       >
                         <ng-messages for="resourcePoolCreationForm['hostname_' + ic.IngressClass.Name + '_' + $index].$error">
                           <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Hostname is required.</p>
+                          <p ng-message="pattern">
+                            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                            This field must consist of lower case alphanumeric characters, '-' or '.', and must start and end with an alphanumeric character (e.g. 'example.com').
+                          </p>
                         </ng-messages>
                         <p ng-if="$ctrl.state.duplicates.ingressHosts.refs[ic.IngressClass.Name][$index] !== undefined">
                           <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This hostname is already used.
diff --git a/app/kubernetes/views/resource-pools/create/createResourcePoolController.js b/app/kubernetes/views/resource-pools/create/createResourcePoolController.js
index 5cdc8accc..92149f4f9 100644
--- a/app/kubernetes/views/resource-pools/create/createResourcePoolController.js
+++ b/app/kubernetes/views/resource-pools/create/createResourcePoolController.js
@@ -34,7 +34,7 @@ class KubernetesCreateResourcePoolController {
   onChangeIngressHostname() {
     const state = this.state.duplicates.ingressHosts;
     const hosts = _.flatMap(this.formValues.IngressClasses, 'Hosts');
-    const hostnames = _.map(hosts, 'Host');
+    const hostnames = _.compact(hosts.map((h) => h.Host));
     const hostnamesWithoutRemoved = _.filter(hostnames, (h) => !h.NeedsDeletion);
     const allHosts = _.flatMap(this.allIngresses, 'Hosts');
     const formDuplicates = KubernetesFormValidationHelper.getDuplicates(hostnamesWithoutRemoved);
diff --git a/app/kubernetes/views/resource-pools/edit/resourcePool.html b/app/kubernetes/views/resource-pools/edit/resourcePool.html
index 29d39b3a4..d847527e0 100644
--- a/app/kubernetes/views/resource-pools/edit/resourcePool.html
+++ b/app/kubernetes/views/resource-pools/edit/resourcePool.html
@@ -221,6 +221,7 @@
                                 ng-model="item.Host"
                                 ng-change="ctrl.onChangeIngressHostname()"
                                 placeholder="foo"
+                                pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*"
                                 required
                               />
                             </div>
@@ -240,6 +241,11 @@
                           >
                             <ng-messages for="resourcePoolEditForm['hostname_' + ic.IngressClass.Name + '_' + $index].$error">
                               <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Hostname is required.</p>
+                              <p ng-message="pattern">
+                                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                                This field must consist of lower case alphanumeric characters, '-' or '.', and must start and end with an alphanumeric character (e.g.
+                                'example.com').
+                              </p>
                             </ng-messages>
                             <p ng-if="item.Duplicate">
                               <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>

From 885ae16278d152016b166c4e30f1394086fee46e Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Fri, 1 Oct 2021 08:27:31 +0300
Subject: [PATCH 02/18] fix(db): warn on missing docker id when migrating to db
 31 (#5782)

* fix(db): warn on missing docker id when migrating to db 31

* fix(db): guard against nil exception
---
 api/bolt/migrator/migrate_dbversion31.go | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/api/bolt/migrator/migrate_dbversion31.go b/api/bolt/migrator/migrate_dbversion31.go
index 8086dfc40..55555096d 100644
--- a/api/bolt/migrator/migrate_dbversion31.go
+++ b/api/bolt/migrator/migrate_dbversion31.go
@@ -176,7 +176,8 @@ func (m *Migrator) updateVolumeResourceControlToDB32() error {
 
 		endpointDockerID, err := snapshotutils.FetchDockerID(snapshot)
 		if err != nil {
-			return fmt.Errorf("failed fetching environment docker id: %w", err)
+			log.Printf("[WARN] [bolt,migrator,v31] [message: failed fetching environment docker id] [err: %s]", err)
+			continue
 		}
 
 		if volumesData, done := snapshot.SnapshotRaw.Volumes.(map[string]interface{}); done {
@@ -213,7 +214,11 @@ func findResourcesToUpdateForDB32(dockerID string, volumesData map[string]interf
 	volumes := volumesData["Volumes"].([]interface{})
 	for _, volumeMeta := range volumes {
 		volume := volumeMeta.(map[string]interface{})
-		volumeName := volume["Name"].(string)
+		volumeName, nameExist := volume["Name"].(string)
+		if !nameExist {
+			continue
+		}
+
 		oldResourceID := fmt.Sprintf("%s%s", volumeName, volume["CreatedAt"].(string))
 		resourceControl, ok := volumeResourceControls[oldResourceID]
 

From 8096c5e8bc6be65ea9ec517e23f039e691125543 Mon Sep 17 00:00:00 2001
From: Matt Hook <hookenz@gmail.com>
Date: Thu, 7 Oct 2021 08:07:00 +1300
Subject: [PATCH 03/18] remove default value for compose path (#5832)

Co-authored-by: cheloRydel <marcelorydel26@gmail.com>
---
 app/kubernetes/views/deploy/deployController.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/kubernetes/views/deploy/deployController.js b/app/kubernetes/views/deploy/deployController.js
index 8a8eab073..d5d1855a3 100644
--- a/app/kubernetes/views/deploy/deployController.js
+++ b/app/kubernetes/views/deploy/deployController.js
@@ -63,7 +63,7 @@ class KubernetesDeployController {
       RepositoryUsername: '',
       RepositoryPassword: '',
       AdditionalFiles: [],
-      ComposeFilePathInRepository: 'deployment.yml',
+      ComposeFilePathInRepository: '',
       RepositoryAutomaticUpdates: true,
       RepositoryMechanism: RepositoryMechanismTypes.INTERVAL,
       RepositoryFetchInterval: '5m',

From b7841e7fc362d432b53382d4c77642976789f128 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Thu, 7 Oct 2021 01:59:53 +0300
Subject: [PATCH 04/18] feat(app): highlight be provided value [EE-882] (#5703)
 (#5835)

---
 api/http/handler/handler.go                   |   4 +
 api/http/handler/ldap/handler.go              |  53 +++
 .../ldap_check.go}                            |  29 +-
 api/http/handler/settings/handler.go          |   4 +-
 api/http/server.go                            |   7 +
 api/ldap/ldap.go                              | 212 +++++++--
 api/portainer.go                              |   8 +
 app/assets/css/app.css                        |  30 +-
 app/assets/css/theme.css                      |   5 +
 app/assets/css/vendor-override.css            |  11 +
 app/kubernetes/views/configure/configure.html |  16 +-
 .../views/configure/configureController.js    |   3 +-
 .../create/createResourcePool.html            |  31 +-
 .../create/createResourcePoolController.js    |   4 +
 .../resource-pools/edit/resourcePool.html     |  31 +-
 .../edit/resourcePoolController.js            |   4 +
 app/portainer/__module.js                     |  28 +-
 .../por-access-management-users-selector.html |   4 +-
 .../accessManagement/por-access-management.js |   1 +
 .../accessManagement/porAccessManagement.html |  30 +-
 .../porAccessManagementController.js          |  43 +-
 .../be-feature-indicator.controller.js        |  18 +
 .../be-feature-indicator.css                  |  26 ++
 .../be-feature-indicator.html                 |   5 +
 .../components/be-feature-indicator/index.js  |  15 +
 .../box-selector-item.controller.js           |  23 +
 .../box-selector-item/box-selector-item.css   | 117 +++++
 .../box-selector-item/box-selector-item.html  |   7 +-
 .../box-selector/box-selector-item/index.js   |   8 +
 .../box-selector/box-selector.controller.js   |   4 +-
 .../components/box-selector/box-selector.css  |  86 ----
 .../components/box-selector/index.js          |   4 +-
 .../accessViewerDatatable.html                |  26 --
 .../components/datatables/datatable.css       |   4 +
 .../filter/datatable-filter.controller.js     |  19 +
 .../datatables/filter/datatable-filter.html   |  32 ++
 .../components/datatables/filter/index.js     |  13 +
 .../datatables/genericDatatableController.js  |   6 +-
 app/portainer/components/datatables/index.js  |  16 +
 .../components/datatables/pagination/index.js |   9 +
 .../datatables/pagination/pagination.html     |  15 +
 .../registriesDatatable.html                  |  13 +-
 .../registriesDatatableController.js          |   3 +-
 .../roles-datatable/rolesDatatable.html       |  64 ---
 .../searchbar/datatable-searchbar.html        |   4 +
 .../components/datatables/searchbar/index.js  |   7 +
 .../datatable-sort-icon.controller.js         |   5 +
 .../sort-icon/datatable-sort-icon.html        |   9 +
 .../components/datatables/sort-icon/index.js  |  11 +
 .../titlebar/datatable-titlebar.html          |   7 +
 .../components/datatables/titlebar/index.js   |   8 +
 .../por-switch-field/por-switch-field.html    |   2 +
 .../por-switch-field/por-switch-field.js      |   4 +-
 .../forms/por-switch/por-switch.controller.js |  14 +
 .../por-switch.css}                           |  15 +
 .../forms/por-switch/por-switch.html          |  14 +-
 .../components/forms/por-switch/por-switch.js |   6 +
 app/portainer/components/widget-header.js     |  17 +-
 app/portainer/feature-flags/enums.js          |  10 +
 app/portainer/feature-flags/feature-flags.css |  26 ++
 .../feature-flags/feature-flags.service.js    |  57 +++
 app/portainer/feature-flags/feature-ids.js    |  11 +
 app/portainer/feature-flags/index.js          |   7 +
 .../limited-feature.directive.js              |  41 ++
 .../{oauth-providers-selector.js => index.js} |   9 +-
 .../oauth-provider-selector-controller.js     |  39 --
 .../oauth-provider-selector.controller.js     |  14 +
 .../oauth-providers-selector.html             |  16 +-
 .../{oauth-settings.js => index.js}           |   5 +-
 .../oauth-settings-controller.js              |  23 -
 .../oauth-settings.controller.js              | 109 +++++
 .../oauth-settings/oauth-settings.html        | 430 +++++++++++++-----
 .../components/oauth-settings/providers.js    |  43 ++
 .../access-viewer-datatable.html              |  73 +++
 .../access-viewer-datatable/index.js}         |   6 +-
 .../access-viewer/access-viewer.controller.js | 128 ++++++
 .../access-viewer/access-viewer.html          |  43 ++
 .../rbac/components/access-viewer/index.js    |   6 +
 .../rbac/components/roles-datatable/index.js  |  15 +
 .../roles-datatable.controller.js             |  15 +
 .../roles-datatable/roles-datatable.css       |   7 +
 .../roles-datatable/roles-datatable.html      |  85 ++++
 app/portainer/rbac/index.js                   |  33 ++
 app/portainer/rbac/models/access.js           |  16 +
 app/portainer/rbac/models/role.js             |  14 +
 app/portainer/rbac/services/role.rest.js      |  14 +
 app/portainer/rbac/services/role.service.js   |  19 +
 app/portainer/rbac/views/roles/index.js       |   6 +
 .../rbac/views/roles/roles.controller.js      |  20 +
 app/portainer/rbac/views/roles/roles.html     |  18 +
 .../authentication/auth-method-constants.js   |  11 +
 .../authentication/auth-type-constants.js     |  11 +
 .../auto-user-provision-toggle.html           |  14 +
 .../auto-user-provision-toggle/index.js       |   9 +
 .../settings/authentication/index.js          |  10 +
 .../ad-settings/ad-settings.controller.js     |  62 +++
 .../ldap/ad-settings/ad-settings.html         | 157 +++++++
 .../authentication/ldap/ad-settings/index.js  |  12 +
 .../settings/authentication/ldap/index.js     |  44 ++
 .../ldap/ldap-connectivity-check/index.js     |   9 +
 .../ldap-connectivity-check.html              |  21 +
 .../ldap/ldap-custom-group-search/index.js    |  11 +
 .../ldap-custom-group-search.controller.js    |  34 ++
 .../ldap-custom-group-search.html             | 117 +++++
 .../ldap/ldap-custom-user-search/index.js     |  11 +
 .../ldap-custom-user-search.controller.js     |  33 ++
 .../ldap-custom-user-search.html              | 117 +++++
 .../ldap/ldap-group-search-item/index.js      |  15 +
 .../ldap-group-search-item.controller.js      |  51 +++
 .../ldap-group-search-item.html               |  93 ++++
 .../ldap/ldap-group-search/index.js           |  14 +
 .../ldap-group-search.controller.js           |  36 ++
 .../ldap-group-search/ldap-group-search.html  |  39 ++
 .../ldap/ldap-groups-datatable/index.js}      |   6 +-
 .../ldap-groups-datatable.html                |  77 ++++
 .../ldap/ldap-settings-custom/index.js        |  15 +
 .../ldap-settings-custom.controller.js        |  15 +
 .../ldap-settings-custom.html                 | 119 +++++
 .../ldap/ldap-settings-dn-builder/index.js    |  16 +
 .../ldap-settings-dn-builder.controller.js    |  84 ++++
 .../ldap-settings-dn-builder.html             |  69 +++
 .../ldap-settings-group-dn-builder/index.js   |  18 +
 ...ap-settings-group-dn-builder.controller.js |  55 +++
 .../ldap-settings-group-dn-builder.html       |  37 ++
 .../ldap/ldap-settings-openldap/index.js      |  16 +
 .../ldap-settings-openldap.controller.js      |  45 ++
 .../ldap-settings-openldap.html               | 187 ++++++++
 .../ldap/ldap-settings-security/index.js      |  11 +
 .../ldap-settings-security.html               |  72 +++
 .../ldap/ldap-settings-test-login/index.js    |  11 +
 .../ldap-settings-test-login.controller.js    |  31 ++
 .../ldap-settings-test-login.html             |  45 ++
 .../ldap/ldap-settings.model.js               |  54 +++
 .../ldap/ldap-settings/index.js               |  11 +
 .../ldap-settings/ldap-settings.controller.js |  67 +++
 .../ldap/ldap-settings/ldap-settings.html     |  41 ++
 .../ldap/ldap-user-search-item/index.js       |  15 +
 .../ldap-user-search-item.controller.js       |  67 +++
 .../ldap-user-search-item.html                | 106 +++++
 .../ldap/ldap-user-search/index.js            |  15 +
 .../ldap-user-search.controller.js            |  38 ++
 .../ldap-user-search/ldap-user-search.html    |  40 ++
 .../ldap/ldap-users-datatable/index.js        |  12 +
 .../ldap-users-datatable.html                 |  71 +++
 .../settings/authentication/ldap/ldap.rest.js |  15 +
 .../authentication/ldap/ldap.service.js       |  29 ++
 app/portainer/settings/index.js               |   3 +-
 .../activity-logs-datatable.controller.js     |  38 ++
 .../activity-logs-datatable.css               |   3 +
 .../activity-logs-datatable.html              |  66 +++
 .../activity-logs-datatable/index.js          |  24 +
 .../activity-logs-view.controller.js          |  93 ++++
 .../activity-logs-view.html                   |  48 ++
 .../activity-logs-view/activity-logs-view.js  |   6 +
 .../user-activity/activity-logs-view/index.js |   9 +
 .../auth-logs-datatable.controller.js         |  68 +++
 .../auth-logs-datatable.html                  |  64 +++
 .../auth-logs-datatable/index.js              |  25 +
 .../auth-logs-view.controller.js              | 103 +++++
 .../auth-logs-view/auth-logs-view.html        |  51 +++
 .../auth-logs-view/auth-logs-view.js          |   6 +
 .../user-activity/auth-logs-view/index.js     |   6 +
 app/portainer/user-activity/index.js          |  29 ++
 .../endpoints/access/endpointAccess.html      |   1 +
 .../access/endpointAccessController.js        |   4 +
 .../views/groups/access/groupAccess.html      |   1 +
 .../groups/access/groupAccessController.js    |   4 +
 app/portainer/views/roles/roles.html          |  56 ---
 .../settingsAuthentication.html               | 401 ++--------------
 .../settingsAuthenticationController.js       | 395 +++++++++-------
 app/portainer/views/settings/settings.html    | 255 ++++++++---
 .../views/settings/settingsController.js      |  20 +
 app/portainer/views/sidebar/sidebar.html      |   4 +
 package.json                                  |   4 +-
 yarn.lock                                     |  13 +-
 175 files changed, 5612 insertions(+), 1201 deletions(-)
 create mode 100644 api/http/handler/ldap/handler.go
 rename api/http/handler/{settings/settings_ldap_check.go => ldap/ldap_check.go} (50%)
 create mode 100644 app/portainer/components/be-feature-indicator/be-feature-indicator.controller.js
 create mode 100644 app/portainer/components/be-feature-indicator/be-feature-indicator.css
 create mode 100644 app/portainer/components/be-feature-indicator/be-feature-indicator.html
 create mode 100644 app/portainer/components/be-feature-indicator/index.js
 create mode 100644 app/portainer/components/box-selector/box-selector-item/box-selector-item.controller.js
 create mode 100644 app/portainer/components/box-selector/box-selector-item/box-selector-item.css
 delete mode 100644 app/portainer/components/datatables/access-viewer-datatable/accessViewerDatatable.html
 create mode 100644 app/portainer/components/datatables/filter/datatable-filter.controller.js
 create mode 100644 app/portainer/components/datatables/filter/datatable-filter.html
 create mode 100644 app/portainer/components/datatables/filter/index.js
 create mode 100644 app/portainer/components/datatables/index.js
 create mode 100644 app/portainer/components/datatables/pagination/index.js
 create mode 100644 app/portainer/components/datatables/pagination/pagination.html
 delete mode 100644 app/portainer/components/datatables/roles-datatable/rolesDatatable.html
 create mode 100644 app/portainer/components/datatables/searchbar/datatable-searchbar.html
 create mode 100644 app/portainer/components/datatables/searchbar/index.js
 create mode 100644 app/portainer/components/datatables/sort-icon/datatable-sort-icon.controller.js
 create mode 100644 app/portainer/components/datatables/sort-icon/datatable-sort-icon.html
 create mode 100644 app/portainer/components/datatables/sort-icon/index.js
 create mode 100644 app/portainer/components/datatables/titlebar/datatable-titlebar.html
 create mode 100644 app/portainer/components/datatables/titlebar/index.js
 create mode 100644 app/portainer/components/forms/por-switch/por-switch.controller.js
 rename app/portainer/components/forms/{por-switch-field/por-switch-field.css => por-switch/por-switch.css} (82%)
 create mode 100644 app/portainer/feature-flags/enums.js
 create mode 100644 app/portainer/feature-flags/feature-flags.css
 create mode 100644 app/portainer/feature-flags/feature-flags.service.js
 create mode 100644 app/portainer/feature-flags/feature-ids.js
 create mode 100644 app/portainer/feature-flags/index.js
 create mode 100644 app/portainer/feature-flags/limited-feature.directive.js
 rename app/portainer/oauth/components/oauth-providers-selector/{oauth-providers-selector.js => index.js} (50%)
 delete mode 100644 app/portainer/oauth/components/oauth-providers-selector/oauth-provider-selector-controller.js
 create mode 100644 app/portainer/oauth/components/oauth-providers-selector/oauth-provider-selector.controller.js
 rename app/portainer/oauth/components/oauth-settings/{oauth-settings.js => index.js} (61%)
 delete mode 100644 app/portainer/oauth/components/oauth-settings/oauth-settings-controller.js
 create mode 100644 app/portainer/oauth/components/oauth-settings/oauth-settings.controller.js
 create mode 100644 app/portainer/oauth/components/oauth-settings/providers.js
 create mode 100644 app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
 rename app/portainer/{components/datatables/access-viewer-datatable/accessViewerDatatable.js => rbac/components/access-viewer/access-viewer-datatable/index.js} (56%)
 create mode 100644 app/portainer/rbac/components/access-viewer/access-viewer.controller.js
 create mode 100644 app/portainer/rbac/components/access-viewer/access-viewer.html
 create mode 100644 app/portainer/rbac/components/access-viewer/index.js
 create mode 100644 app/portainer/rbac/components/roles-datatable/index.js
 create mode 100644 app/portainer/rbac/components/roles-datatable/roles-datatable.controller.js
 create mode 100644 app/portainer/rbac/components/roles-datatable/roles-datatable.css
 create mode 100644 app/portainer/rbac/components/roles-datatable/roles-datatable.html
 create mode 100644 app/portainer/rbac/index.js
 create mode 100644 app/portainer/rbac/models/access.js
 create mode 100644 app/portainer/rbac/models/role.js
 create mode 100644 app/portainer/rbac/services/role.rest.js
 create mode 100644 app/portainer/rbac/services/role.service.js
 create mode 100644 app/portainer/rbac/views/roles/index.js
 create mode 100644 app/portainer/rbac/views/roles/roles.controller.js
 create mode 100644 app/portainer/rbac/views/roles/roles.html
 create mode 100644 app/portainer/settings/authentication/auth-method-constants.js
 create mode 100644 app/portainer/settings/authentication/auth-type-constants.js
 create mode 100644 app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
 create mode 100644 app/portainer/settings/authentication/auto-user-provision-toggle/index.js
 create mode 100644 app/portainer/settings/authentication/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ad-settings/ad-settings.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
 create mode 100644 app/portainer/settings/authentication/ldap/ad-settings/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-connectivity-check/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-custom-group-search/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-custom-user-search/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-group-search-item/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-group-search/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
 rename app/portainer/{components/datatables/roles-datatable/rolesDatatable.js => settings/authentication/ldap/ldap-groups-datatable/index.js} (63%)
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-custom/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-openldap/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-security/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-test-login/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings.model.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-user-search-item/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-user-search/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.controller.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-users-datatable/index.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html
 create mode 100644 app/portainer/settings/authentication/ldap/ldap.rest.js
 create mode 100644 app/portainer/settings/authentication/ldap/ldap.service.js
 create mode 100644 app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.controller.js
 create mode 100644 app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.css
 create mode 100644 app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
 create mode 100644 app/portainer/user-activity/activity-logs-view/activity-logs-datatable/index.js
 create mode 100644 app/portainer/user-activity/activity-logs-view/activity-logs-view.controller.js
 create mode 100644 app/portainer/user-activity/activity-logs-view/activity-logs-view.html
 create mode 100644 app/portainer/user-activity/activity-logs-view/activity-logs-view.js
 create mode 100644 app/portainer/user-activity/activity-logs-view/index.js
 create mode 100644 app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.controller.js
 create mode 100644 app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
 create mode 100644 app/portainer/user-activity/auth-logs-view/auth-logs-datatable/index.js
 create mode 100644 app/portainer/user-activity/auth-logs-view/auth-logs-view.controller.js
 create mode 100644 app/portainer/user-activity/auth-logs-view/auth-logs-view.html
 create mode 100644 app/portainer/user-activity/auth-logs-view/auth-logs-view.js
 create mode 100644 app/portainer/user-activity/auth-logs-view/index.js
 create mode 100644 app/portainer/user-activity/index.js
 delete mode 100644 app/portainer/views/roles/roles.html

diff --git a/api/http/handler/handler.go b/api/http/handler/handler.go
index 8ea0e3792..df6333f6a 100644
--- a/api/http/handler/handler.go
+++ b/api/http/handler/handler.go
@@ -18,6 +18,7 @@ import (
 	"github.com/portainer/portainer/api/http/handler/file"
 	"github.com/portainer/portainer/api/http/handler/helm"
 	"github.com/portainer/portainer/api/http/handler/kubernetes"
+	"github.com/portainer/portainer/api/http/handler/ldap"
 	"github.com/portainer/portainer/api/http/handler/motd"
 	"github.com/portainer/portainer/api/http/handler/registries"
 	"github.com/portainer/portainer/api/http/handler/resourcecontrols"
@@ -53,6 +54,7 @@ type Handler struct {
 	HelmTemplatesHandler   *helm.Handler
 	KubernetesHandler      *kubernetes.Handler
 	FileHandler            *file.Handler
+	LDAPHandler            *ldap.Handler
 	MOTDHandler            *motd.Handler
 	RegistryHandler        *registries.Handler
 	ResourceControlHandler *resourcecontrols.Handler
@@ -189,6 +191,8 @@ func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		default:
 			http.StripPrefix("/api", h.EndpointHandler).ServeHTTP(w, r)
 		}
+	case strings.HasPrefix(r.URL.Path, "/api/ldap"):
+		http.StripPrefix("/api", h.LDAPHandler).ServeHTTP(w, r)
 	case strings.HasPrefix(r.URL.Path, "/api/motd"):
 		http.StripPrefix("/api", h.MOTDHandler).ServeHTTP(w, r)
 	case strings.HasPrefix(r.URL.Path, "/api/registries"):
diff --git a/api/http/handler/ldap/handler.go b/api/http/handler/ldap/handler.go
new file mode 100644
index 000000000..aac809cca
--- /dev/null
+++ b/api/http/handler/ldap/handler.go
@@ -0,0 +1,53 @@
+package ldap
+
+import (
+	"net/http"
+
+	"github.com/gorilla/mux"
+	httperror "github.com/portainer/libhttp/error"
+	portainer "github.com/portainer/portainer/api"
+	"github.com/portainer/portainer/api/filesystem"
+	"github.com/portainer/portainer/api/http/security"
+)
+
+// Handler is the HTTP handler used to handle LDAP search Operations
+type Handler struct {
+	*mux.Router
+	DataStore   portainer.DataStore
+	FileService portainer.FileService
+	LDAPService portainer.LDAPService
+}
+
+// NewHandler returns a new Handler
+func NewHandler(bouncer *security.RequestBouncer) *Handler {
+	h := &Handler{
+		Router: mux.NewRouter(),
+	}
+
+	h.Handle("/ldap/check",
+		bouncer.AdminAccess(httperror.LoggerHandler(h.ldapCheck))).Methods(http.MethodPost)
+
+	return h
+}
+
+func (handler *Handler) prefillSettings(ldapSettings *portainer.LDAPSettings) error {
+	if !ldapSettings.AnonymousMode && ldapSettings.Password == "" {
+		settings, err := handler.DataStore.Settings().Settings()
+		if err != nil {
+			return err
+		}
+
+		ldapSettings.Password = settings.LDAPSettings.Password
+	}
+
+	if (ldapSettings.TLSConfig.TLS || ldapSettings.StartTLS) && !ldapSettings.TLSConfig.TLSSkipVerify {
+		caCertPath, err := handler.FileService.GetPathForTLSFile(filesystem.LDAPStorePath, portainer.TLSFileCA)
+		if err != nil {
+			return err
+		}
+
+		ldapSettings.TLSConfig.TLSCACertPath = caCertPath
+	}
+
+	return nil
+}
diff --git a/api/http/handler/settings/settings_ldap_check.go b/api/http/handler/ldap/ldap_check.go
similarity index 50%
rename from api/http/handler/settings/settings_ldap_check.go
rename to api/http/handler/ldap/ldap_check.go
index 2ef1fb4d2..36c25c407 100644
--- a/api/http/handler/settings/settings_ldap_check.go
+++ b/api/http/handler/ldap/ldap_check.go
@@ -1,4 +1,4 @@
-package settings
+package ldap
 
 import (
 	"net/http"
@@ -7,42 +7,43 @@ import (
 	"github.com/portainer/libhttp/request"
 	"github.com/portainer/libhttp/response"
 	portainer "github.com/portainer/portainer/api"
-	"github.com/portainer/portainer/api/filesystem"
 )
 
-type settingsLDAPCheckPayload struct {
+type checkPayload struct {
 	LDAPSettings portainer.LDAPSettings
 }
 
-func (payload *settingsLDAPCheckPayload) Validate(r *http.Request) error {
+func (payload *checkPayload) Validate(r *http.Request) error {
 	return nil
 }
 
-// @id SettingsLDAPCheck
+// @id LDAPCheck
 // @summary Test LDAP connectivity
 // @description Test LDAP connectivity using LDAP details
 // @description **Access policy**: administrator
-// @tags settings
+// @tags ldap
 // @security jwt
 // @accept json
-// @param body body settingsLDAPCheckPayload true "details"
+// @param body body checkPayload true "details"
 // @success 204 "Success"
 // @failure 400 "Invalid request"
 // @failure 500 "Server error"
-// @router /settings/ldap/check [put]
-func (handler *Handler) settingsLDAPCheck(w http.ResponseWriter, r *http.Request) *httperror.HandlerError {
-	var payload settingsLDAPCheckPayload
+// @router /ldap/check [post]
+func (handler *Handler) ldapCheck(w http.ResponseWriter, r *http.Request) *httperror.HandlerError {
+	var payload checkPayload
 	err := request.DecodeAndValidateJSONPayload(r, &payload)
 	if err != nil {
 		return &httperror.HandlerError{http.StatusBadRequest, "Invalid request payload", err}
 	}
 
-	if (payload.LDAPSettings.TLSConfig.TLS || payload.LDAPSettings.StartTLS) && !payload.LDAPSettings.TLSConfig.TLSSkipVerify {
-		caCertPath, _ := handler.FileService.GetPathForTLSFile(filesystem.LDAPStorePath, portainer.TLSFileCA)
-		payload.LDAPSettings.TLSConfig.TLSCACertPath = caCertPath
+	settings := &payload.LDAPSettings
+
+	err = handler.prefillSettings(settings)
+	if err != nil {
+		return &httperror.HandlerError{http.StatusInternalServerError, "Unable to fetch default settings", err}
 	}
 
-	err = handler.LDAPService.TestConnectivity(&payload.LDAPSettings)
+	err = handler.LDAPService.TestConnectivity(settings)
 	if err != nil {
 		return &httperror.HandlerError{http.StatusInternalServerError, "Unable to connect to LDAP server", err}
 	}
diff --git a/api/http/handler/settings/handler.go b/api/http/handler/settings/handler.go
index 9fa17b842..cbb159fca 100644
--- a/api/http/handler/settings/handler.go
+++ b/api/http/handler/settings/handler.go
@@ -5,7 +5,7 @@ import (
 
 	"github.com/gorilla/mux"
 	httperror "github.com/portainer/libhttp/error"
-	"github.com/portainer/portainer/api"
+	portainer "github.com/portainer/portainer/api"
 	"github.com/portainer/portainer/api/http/security"
 )
 
@@ -35,8 +35,6 @@ func NewHandler(bouncer *security.RequestBouncer) *Handler {
 		bouncer.AdminAccess(httperror.LoggerHandler(h.settingsUpdate))).Methods(http.MethodPut)
 	h.Handle("/settings/public",
 		bouncer.PublicAccess(httperror.LoggerHandler(h.settingsPublic))).Methods(http.MethodGet)
-	h.Handle("/settings/authentication/checkLDAP",
-		bouncer.AdminAccess(httperror.LoggerHandler(h.settingsLDAPCheck))).Methods(http.MethodPut)
 
 	return h
 }
diff --git a/api/http/server.go b/api/http/server.go
index ac6f1d79b..3dfe047f3 100644
--- a/api/http/server.go
+++ b/api/http/server.go
@@ -29,6 +29,7 @@ import (
 	"github.com/portainer/portainer/api/http/handler/file"
 	"github.com/portainer/portainer/api/http/handler/helm"
 	kubehandler "github.com/portainer/portainer/api/http/handler/kubernetes"
+	"github.com/portainer/portainer/api/http/handler/ldap"
 	"github.com/portainer/portainer/api/http/handler/motd"
 	"github.com/portainer/portainer/api/http/handler/registries"
 	"github.com/portainer/portainer/api/http/handler/resourcecontrols"
@@ -175,6 +176,11 @@ func (server *Server) Start() error {
 
 	var helmTemplatesHandler = helm.NewTemplateHandler(requestBouncer, server.HelmPackageManager)
 
+	var ldapHandler = ldap.NewHandler(requestBouncer)
+	ldapHandler.DataStore = server.DataStore
+	ldapHandler.FileService = server.FileService
+	ldapHandler.LDAPService = server.LDAPService
+
 	var motdHandler = motd.NewHandler(requestBouncer)
 
 	var registryHandler = registries.NewHandler(requestBouncer)
@@ -255,6 +261,7 @@ func (server *Server) Start() error {
 		EndpointEdgeHandler:    endpointEdgeHandler,
 		EndpointProxyHandler:   endpointProxyHandler,
 		FileHandler:            fileHandler,
+		LDAPHandler:            ldapHandler,
 		HelmTemplatesHandler:   helmTemplatesHandler,
 		KubernetesHandler:      kubernetesHandler,
 		MOTDHandler:            motdHandler,
diff --git a/api/ldap/ldap.go b/api/ldap/ldap.go
index 89c08ec61..21358816c 100644
--- a/api/ldap/ldap.go
+++ b/api/ldap/ldap.go
@@ -1,11 +1,11 @@
 package ldap
 
 import (
-	"errors"
 	"fmt"
 	"strings"
 
 	ldap "github.com/go-ldap/ldap/v3"
+	"github.com/pkg/errors"
 	portainer "github.com/portainer/portainer/api"
 	"github.com/portainer/portainer/api/crypto"
 	httperrors "github.com/portainer/portainer/api/http/errors"
@@ -20,55 +20,28 @@ var (
 // Service represents a service used to authenticate users against a LDAP/AD.
 type Service struct{}
 
-func searchUser(username string, conn *ldap.Conn, settings []portainer.LDAPSearchSettings) (string, error) {
-	var userDN string
-	found := false
-	usernameEscaped := ldap.EscapeFilter(username)
-
-	for _, searchSettings := range settings {
-		searchRequest := ldap.NewSearchRequest(
-			searchSettings.BaseDN,
-			ldap.ScopeWholeSubtree, ldap.NeverDerefAliases, 0, 0, false,
-			fmt.Sprintf("(&%s(%s=%s))", searchSettings.Filter, searchSettings.UserNameAttribute, usernameEscaped),
-			[]string{"dn"},
-			nil,
-		)
-
-		// Deliberately skip errors on the search request so that we can jump to other search settings
-		// if any issue arise with the current one.
-		sr, err := conn.Search(searchRequest)
-		if err != nil {
-			continue
-		}
-
-		if len(sr.Entries) == 1 {
-			found = true
-			userDN = sr.Entries[0].DN
-			break
-		}
-	}
-
-	if !found {
-		return "", errUserNotFound
+func createConnection(settings *portainer.LDAPSettings) (*ldap.Conn, error) {
+	conn, err := createConnectionForURL(settings.URL, settings)
+	if err != nil {
+		return nil, errors.Wrap(err, "failed creating LDAP connection")
 	}
 
-	return userDN, nil
+	return conn, nil
 }
 
-func createConnection(settings *portainer.LDAPSettings) (*ldap.Conn, error) {
-
+func createConnectionForURL(url string, settings *portainer.LDAPSettings) (*ldap.Conn, error) {
 	if settings.TLSConfig.TLS || settings.StartTLS {
 		config, err := crypto.CreateTLSConfigurationFromDisk(settings.TLSConfig.TLSCACertPath, settings.TLSConfig.TLSCertPath, settings.TLSConfig.TLSKeyPath, settings.TLSConfig.TLSSkipVerify)
 		if err != nil {
 			return nil, err
 		}
-		config.ServerName = strings.Split(settings.URL, ":")[0]
+		config.ServerName = strings.Split(url, ":")[0]
 
 		if settings.TLSConfig.TLS {
-			return ldap.DialTLS("tcp", settings.URL, config)
+			return ldap.DialTLS("tcp", url, config)
 		}
 
-		conn, err := ldap.Dial("tcp", settings.URL)
+		conn, err := ldap.Dial("tcp", url)
 		if err != nil {
 			return nil, err
 		}
@@ -81,7 +54,7 @@ func createConnection(settings *portainer.LDAPSettings) (*ldap.Conn, error) {
 		return conn, nil
 	}
 
-	return ldap.Dial("tcp", settings.URL)
+	return ldap.Dial("tcp", url)
 }
 
 // AuthenticateUser is used to authenticate a user against a LDAP/AD.
@@ -133,13 +106,157 @@ func (*Service) GetUserGroups(username string, settings *portainer.LDAPSettings)
 		return nil, err
 	}
 
-	userGroups := getGroups(userDN, connection, settings.GroupSearchSettings)
+	userGroups := getGroupsByUser(userDN, connection, settings.GroupSearchSettings)
 
 	return userGroups, nil
 }
 
+// SearchUsers searches for users with the specified settings
+func (*Service) SearchUsers(settings *portainer.LDAPSettings) ([]string, error) {
+	connection, err := createConnection(settings)
+	if err != nil {
+		return nil, err
+	}
+	defer connection.Close()
+
+	if !settings.AnonymousMode {
+		err = connection.Bind(settings.ReaderDN, settings.Password)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	users := map[string]bool{}
+
+	for _, searchSettings := range settings.SearchSettings {
+		searchRequest := ldap.NewSearchRequest(
+			searchSettings.BaseDN,
+			ldap.ScopeWholeSubtree, ldap.NeverDerefAliases, 0, 0, false,
+			searchSettings.Filter,
+			[]string{"dn", searchSettings.UserNameAttribute},
+			nil,
+		)
+
+		sr, err := connection.Search(searchRequest)
+		if err != nil {
+			return nil, err
+		}
+
+		for _, user := range sr.Entries {
+			username := user.GetAttributeValue(searchSettings.UserNameAttribute)
+			if username != "" {
+				users[username] = true
+			}
+		}
+	}
+
+	usersList := []string{}
+	for user := range users {
+		usersList = append(usersList, user)
+	}
+
+	return usersList, nil
+}
+
+// SearchGroups searches for groups with the specified settings
+func (*Service) SearchGroups(settings *portainer.LDAPSettings) ([]portainer.LDAPUser, error) {
+	type groupSet map[string]bool
+
+	connection, err := createConnection(settings)
+	if err != nil {
+		return nil, err
+	}
+	defer connection.Close()
+
+	if !settings.AnonymousMode {
+		err = connection.Bind(settings.ReaderDN, settings.Password)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	userGroups := map[string]groupSet{}
+
+	for _, searchSettings := range settings.GroupSearchSettings {
+		searchRequest := ldap.NewSearchRequest(
+			searchSettings.GroupBaseDN,
+			ldap.ScopeWholeSubtree, ldap.NeverDerefAliases, 0, 0, false,
+			searchSettings.GroupFilter,
+			[]string{"cn", searchSettings.GroupAttribute},
+			nil,
+		)
+
+		sr, err := connection.Search(searchRequest)
+		if err != nil {
+			return nil, err
+		}
+
+		for _, entry := range sr.Entries {
+			members := entry.GetAttributeValues(searchSettings.GroupAttribute)
+			for _, username := range members {
+				_, ok := userGroups[username]
+				if !ok {
+					userGroups[username] = groupSet{}
+				}
+				userGroups[username][entry.GetAttributeValue("cn")] = true
+			}
+		}
+	}
+
+	users := []portainer.LDAPUser{}
+
+	for username, groups := range userGroups {
+		groupList := []string{}
+		for group := range groups {
+			groupList = append(groupList, group)
+		}
+		user := portainer.LDAPUser{
+			Name:   username,
+			Groups: groupList,
+		}
+		users = append(users, user)
+	}
+
+	return users, nil
+}
+
+func searchUser(username string, conn *ldap.Conn, settings []portainer.LDAPSearchSettings) (string, error) {
+	var userDN string
+	found := false
+	usernameEscaped := ldap.EscapeFilter(username)
+
+	for _, searchSettings := range settings {
+		searchRequest := ldap.NewSearchRequest(
+			searchSettings.BaseDN,
+			ldap.ScopeWholeSubtree, ldap.NeverDerefAliases, 0, 0, false,
+			fmt.Sprintf("(&%s(%s=%s))", searchSettings.Filter, searchSettings.UserNameAttribute, usernameEscaped),
+			[]string{"dn"},
+			nil,
+		)
+
+		// Deliberately skip errors on the search request so that we can jump to other search settings
+		// if any issue arise with the current one.
+		sr, err := conn.Search(searchRequest)
+		if err != nil {
+			continue
+		}
+
+		if len(sr.Entries) == 1 {
+			found = true
+			userDN = sr.Entries[0].DN
+			break
+		}
+	}
+
+	if !found {
+		return "", errUserNotFound
+	}
+
+	return userDN, nil
+}
+
 // Get a list of group names for specified user from LDAP/AD
-func getGroups(userDN string, conn *ldap.Conn, settings []portainer.LDAPGroupSearchSettings) []string {
+func getGroupsByUser(userDN string, conn *ldap.Conn, settings []portainer.LDAPGroupSearchSettings) []string {
 	groups := make([]string, 0)
 	userDNEscaped := ldap.EscapeFilter(userDN)
 
@@ -179,9 +296,18 @@ func (*Service) TestConnectivity(settings *portainer.LDAPSettings) error {
 	}
 	defer connection.Close()
 
-	err = connection.Bind(settings.ReaderDN, settings.Password)
-	if err != nil {
-		return err
+	if !settings.AnonymousMode {
+		err = connection.Bind(settings.ReaderDN, settings.Password)
+		if err != nil {
+			return err
+		}
+
+	} else {
+		err = connection.UnauthenticatedBind("")
+		if err != nil {
+			return err
+		}
 	}
+
 	return nil
 }
diff --git a/api/portainer.go b/api/portainer.go
index 4fa7430aa..50f2d1ac0 100644
--- a/api/portainer.go
+++ b/api/portainer.go
@@ -513,6 +513,12 @@ type (
 		AutoCreateUsers bool `json:"AutoCreateUsers" example:"true"`
 	}
 
+	// LDAPUser represents a LDAP user
+	LDAPUser struct {
+		Name   string
+		Groups []string
+	}
+
 	// LicenseInformation represents information about an extension license
 	LicenseInformation struct {
 		LicenseKey string `json:"LicenseKey,omitempty"`
@@ -1295,6 +1301,8 @@ type (
 		AuthenticateUser(username, password string, settings *LDAPSettings) error
 		TestConnectivity(settings *LDAPSettings) error
 		GetUserGroups(username string, settings *LDAPSettings) ([]string, error)
+		SearchGroups(settings *LDAPSettings) ([]LDAPUser, error)
+		SearchUsers(settings *LDAPSettings) ([]string, error)
 	}
 
 	// OAuthService represents a service used to authenticate users using OAuth
diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index c75fcd32d..c9b2de5a9 100644
--- a/app/assets/css/app.css
+++ b/app/assets/css/app.css
@@ -816,10 +816,6 @@ json-tree .branch-preview {
 }
 /* !spinkit override */
 
-.w-full {
-  width: 100%;
-}
-
 /* uib-typeahead override */
 #scrollable-dropdown-menu .dropdown-menu {
   max-height: 300px;
@@ -827,17 +823,33 @@ json-tree .branch-preview {
 }
 /* !uib-typeahead override */
 
-.my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
 .kubectl-shell {
   display: block;
   text-align: center;
   padding-bottom: 5px;
 }
 
+.w-full {
+  width: 100%;
+}
+
+.flex {
+  display: flex;
+}
+
+.block {
+  display: block;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .text-wrap {
   word-break: break-all;
   white-space: normal;
diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index 902fbd2c8..17e94309b 100644
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@@ -89,8 +89,13 @@ html {
   --green-1: #164;
   --green-2: #1ec863;
   --green-3: #23ae89;
+
+  --orange-1: #e86925;
+
+  --BE-only: var(--orange-1);
 }
 
+/* Default Theme */
 :root {
   --bg-card-color: var(--grey-10);
   --bg-main-color: var(--white-color);
diff --git a/app/assets/css/vendor-override.css b/app/assets/css/vendor-override.css
index 5b0152acc..ddcd04356 100644
--- a/app/assets/css/vendor-override.css
+++ b/app/assets/css/vendor-override.css
@@ -401,3 +401,14 @@ input:-webkit-autofill {
   color: var(--white-color);
 }
 /* Overide Vendor CSS */
+
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn {
+  pointer-events: none;
+  touch-action: none;
+}
+
+.multiSelect.inlineBlock button {
+  margin: 0;
+}
diff --git a/app/kubernetes/views/configure/configure.html b/app/kubernetes/views/configure/configure.html
index 0a02767d4..b40814156 100644
--- a/app/kubernetes/views/configure/configure.html
+++ b/app/kubernetes/views/configure/configure.html
@@ -178,14 +178,14 @@
             </div>
             <div class="form-group">
               <div class="col-sm-12">
-                <label class="control-label text-left">
-                  Allow resource over-commit
-                </label>
-                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" checked disabled /><i data-cy="kubeSetup-resourceOverCommitToggle"></i> </label>
-                <span class="text-muted small" style="margin-left: 15px;">
-                  <i class="fa fa-user" aria-hidden="true"></i>
-                  This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-setup-overcommit" target="_blank"> Portainer Business Edition</a>.
-                </span>
+                <por-switch-field
+                  label="Allow resource over-commit"
+                  name="resource-over-commit-switch"
+                  feature="ctrl.limitedFeature"
+                  ng-model="ctrl.formValues.EnableResourceOverCommit"
+                  ng-change="ctrl.onChangeEnableResourceOverCommit()"
+                  ng-data-cy="kubeSetup-resourceOverCommitToggle"
+                ></por-switch-field>
               </div>
             </div>
 
diff --git a/app/kubernetes/views/configure/configureController.js b/app/kubernetes/views/configure/configureController.js
index 4e38cd27d..ac9468e2b 100644
--- a/app/kubernetes/views/configure/configureController.js
+++ b/app/kubernetes/views/configure/configureController.js
@@ -6,7 +6,7 @@ import { KubernetesIngressClass } from 'Kubernetes/ingress/models';
 import KubernetesFormValidationHelper from 'Kubernetes/helpers/formValidationHelper';
 import { KubernetesIngressClassTypes } from 'Kubernetes/ingress/constants';
 import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
-
+import { K8S_SETUP_DEFAULT } from '@/portainer/feature-flags/feature-ids';
 class KubernetesConfigureController {
   /* #region  CONSTRUCTOR */
 
@@ -38,6 +38,7 @@ class KubernetesConfigureController {
 
     this.onInit = this.onInit.bind(this);
     this.configureAsync = this.configureAsync.bind(this);
+    this.limitedFeature = K8S_SETUP_DEFAULT;
   }
   /* #endregion */
 
diff --git a/app/kubernetes/views/resource-pools/create/createResourcePool.html b/app/kubernetes/views/resource-pools/create/createResourcePool.html
index 6a26f36f2..4ab2b8c84 100644
--- a/app/kubernetes/views/resource-pools/create/createResourcePool.html
+++ b/app/kubernetes/views/resource-pools/create/createResourcePool.html
@@ -162,14 +162,13 @@
             </div>
             <div class="form-group">
               <div class="col-sm-12">
-                <label class="control-label text-left">
-                  Load Balancer quota
-                </label>
-                <label class="switch" style="margin-left: 20px;" data-cy="k8sNamespaceCreate-loadBalancerQuotaToggle"> <input type="checkbox" disabled /><i></i> </label>
-                <span class="text-muted small" style="margin-left: 15px;">
-                  <i class="fa fa-user" aria-hidden="true"></i>
-                  This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-resourcepool-lbquota" target="_blank"> Portainer Business Edition</a>.
-                </span>
+                <por-switch-field
+                  ng-data-cy="k8sNamespaceCreate-loadBalancerQuotaToggle"
+                  label="Load Balancer quota"
+                  name="k8s-resourcepool-Ibquota"
+                  feature="$ctrl.LBQuotaFeatureId"
+                  ng-model="lbquota"
+                ></por-switch-field>
               </div>
             </div>
             <!-- #endregion -->
@@ -192,15 +191,13 @@
             </div>
             <div class="form-group">
               <div class="col-sm-12">
-                <label class="control-label text-left">
-                  Enable quota
-                </label>
-                <label class="switch" style="margin-left: 20px;" data-cy="k8sNamespaceCreate-enableQuotaToggle"> <input type="checkbox" disabled /><i></i> </label>
-                <span class="text-muted small" style="margin-left: 15px;">
-                  <i class="fa fa-user" aria-hidden="true"></i>
-                  This feature is available in
-                  <a href="https://www.portainer.io/business-upsell?from=k8s-resourcepool-storagequota" target="_blank"> Portainer Business Edition</a>.
-                </span>
+                <por-switch-field
+                  ng-data-cy="k8sNamespaceCreate-enableQuotaToggle"
+                  label="Enable quota"
+                  name="k8s-resourcepool-storagequota"
+                  feature="$ctrl.StorageQuotaFeatureId"
+                  ng-model="storagequota"
+                ></por-switch-field>
               </div>
             </div>
             <!-- #endregion -->
diff --git a/app/kubernetes/views/resource-pools/create/createResourcePoolController.js b/app/kubernetes/views/resource-pools/create/createResourcePoolController.js
index 92149f4f9..a352b0a9a 100644
--- a/app/kubernetes/views/resource-pools/create/createResourcePoolController.js
+++ b/app/kubernetes/views/resource-pools/create/createResourcePoolController.js
@@ -12,6 +12,8 @@ import KubernetesFormValidationHelper from 'Kubernetes/helpers/formValidationHel
 import { KubernetesFormValidationReferences } from 'Kubernetes/models/application/formValues';
 import { KubernetesIngressClassTypes } from 'Kubernetes/ingress/constants';
 
+import { K8S_RESOURCE_POOL_LB_QUOTA, K8S_RESOURCE_POOL_STORAGE_QUOTA } from '@/portainer/feature-flags/feature-ids';
+
 class KubernetesCreateResourcePoolController {
   /* #region  CONSTRUCTOR */
   /* @ngInject */
@@ -28,6 +30,8 @@ class KubernetesCreateResourcePoolController {
     });
 
     this.IngressClassTypes = KubernetesIngressClassTypes;
+    this.LBQuotaFeatureId = K8S_RESOURCE_POOL_LB_QUOTA;
+    this.StorageQuotaFeatureId = K8S_RESOURCE_POOL_STORAGE_QUOTA;
   }
   /* #endregion */
 
diff --git a/app/kubernetes/views/resource-pools/edit/resourcePool.html b/app/kubernetes/views/resource-pools/edit/resourcePool.html
index d847527e0..45963b455 100644
--- a/app/kubernetes/views/resource-pools/edit/resourcePool.html
+++ b/app/kubernetes/views/resource-pools/edit/resourcePool.html
@@ -146,14 +146,13 @@
                 </div>
                 <div class="form-group">
                   <div class="col-sm-12">
-                    <label class="control-label text-left">
-                      Load Balancer quota
-                    </label>
-                    <label class="switch" style="margin-left: 20px;"> <input type="checkbox" disabled /><i></i> </label>
-                    <span class="text-muted small" style="margin-left: 15px;">
-                      <i class="fa fa-user" aria-hidden="true"></i>
-                      This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-resourcepool-lbquota" target="_blank"> Portainer Business Edition</a>.
-                    </span>
+                    <por-switch-field
+                      ng-data-cy="k8sNamespaceCreate-loadBalancerQuotaToggle"
+                      label="Load Balancer quota"
+                      name="k8s-resourcepool-Lbquota"
+                      feature="ctrl.LBQuotaFeatureId"
+                      ng-model="lbquota"
+                    ></por-switch-field>
                   </div>
                 </div>
                 <!-- #endregion -->
@@ -389,15 +388,13 @@
                 </div>
                 <div class="form-group">
                   <div class="col-sm-12">
-                    <label class="control-label text-left">
-                      Enable quota
-                    </label>
-                    <label class="switch" style="margin-left: 20px;"> <input type="checkbox" disabled /><i></i> </label>
-                    <span class="text-muted small" style="margin-left: 15px;">
-                      <i class="fa fa-user" aria-hidden="true"></i>
-                      This feature is available in
-                      <a href="https://www.portainer.io/business-upsell?from=k8s-resourcepool-storagequota" target="_blank"> Portainer Business Edition</a>.
-                    </span>
+                    <por-switch-field
+                      ng-data-cy="k8sNamespaceCreate-enableQuotaToggle"
+                      label="Enable quota"
+                      name="k8s-resourcepool-storagequota"
+                      feature="ctrl.StorageQuotaFeatureId"
+                      ng-model="storagequota"
+                    ></por-switch-field>
                   </div>
                 </div>
                 <!-- #endregion -->
diff --git a/app/kubernetes/views/resource-pools/edit/resourcePoolController.js b/app/kubernetes/views/resource-pools/edit/resourcePoolController.js
index d35600c32..b2aefdc93 100644
--- a/app/kubernetes/views/resource-pools/edit/resourcePoolController.js
+++ b/app/kubernetes/views/resource-pools/edit/resourcePoolController.js
@@ -16,6 +16,7 @@ import KubernetesFormValidationHelper from 'Kubernetes/helpers/formValidationHel
 import { KubernetesIngressClassTypes } from 'Kubernetes/ingress/constants';
 import KubernetesResourceQuotaConverter from 'Kubernetes/converters/resourceQuota';
 import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
+import { K8S_RESOURCE_POOL_LB_QUOTA, K8S_RESOURCE_POOL_STORAGE_QUOTA } from '@/portainer/feature-flags/feature-ids';
 
 class KubernetesResourcePoolController {
   /* #region  CONSTRUCTOR */
@@ -60,6 +61,9 @@ class KubernetesResourcePoolController {
     this.IngressClassTypes = KubernetesIngressClassTypes;
     this.ResourceQuotaDefaults = KubernetesResourceQuotaDefaults;
 
+    this.LBQuotaFeatureId = K8S_RESOURCE_POOL_LB_QUOTA;
+    this.StorageQuotaFeatureId = K8S_RESOURCE_POOL_STORAGE_QUOTA;
+
     this.updateResourcePoolAsync = this.updateResourcePoolAsync.bind(this);
     this.getEvents = this.getEvents.bind(this);
   }
diff --git a/app/portainer/__module.js b/app/portainer/__module.js
index 3ee842a5a..7124cf7b0 100644
--- a/app/portainer/__module.js
+++ b/app/portainer/__module.js
@@ -1,7 +1,10 @@
 import _ from 'lodash-es';
 
+import './rbac';
 import componentsModule from './components';
 import settingsModule from './settings';
+import featureFlagModule from './feature-flags';
+import userActivityModule from './user-activity';
 
 async function initAuthentication(authManager, Authentication, $rootScope, $state) {
   authManager.checkAuthOnRefresh();
@@ -18,7 +21,7 @@ async function initAuthentication(authManager, Authentication, $rootScope, $stat
   return await Authentication.init();
 }
 
-angular.module('portainer.app', ['portainer.oauth', componentsModule, settingsModule]).config([
+angular.module('portainer.app', ['portainer.oauth', 'portainer.rbac', componentsModule, settingsModule, featureFlagModule, userActivityModule, 'portainer.shared.datatable']).config([
   '$stateRegistryProvider',
   function ($stateRegistryProvider) {
     'use strict';
@@ -51,6 +54,18 @@ angular.module('portainer.app', ['portainer.oauth', componentsModule, settingsMo
           controller: 'SidebarController',
         },
       },
+      resolve: {
+        featuresServiceInitialized: /* @ngInject */ function featuresServiceInitialized($async, featureService, Notifications) {
+          return $async(async () => {
+            try {
+              await featureService.init();
+            } catch (e) {
+              Notifications.error('Failed initializing features service', e);
+              throw e;
+            }
+          });
+        },
+      },
     };
 
     var endpointRoot = {
@@ -403,16 +418,6 @@ angular.module('portainer.app', ['portainer.oauth', componentsModule, settingsMo
       },
     };
 
-    var roles = {
-      name: 'portainer.roles',
-      url: '/roles',
-      views: {
-        'content@': {
-          templateUrl: './views/roles/roles.html',
-        },
-      },
-    };
-
     $stateRegistryProvider.register(root);
     $stateRegistryProvider.register(endpointRoot);
     $stateRegistryProvider.register(portainer);
@@ -444,7 +449,6 @@ angular.module('portainer.app', ['portainer.oauth', componentsModule, settingsMo
     $stateRegistryProvider.register(user);
     $stateRegistryProvider.register(teams);
     $stateRegistryProvider.register(team);
-    $stateRegistryProvider.register(roles);
   },
 ]);
 
diff --git a/app/portainer/components/accessManagement/por-access-management-users-selector/por-access-management-users-selector.html b/app/portainer/components/accessManagement/por-access-management-users-selector/por-access-management-users-selector.html
index 14471129b..5b1ad6e66 100644
--- a/app/portainer/components/accessManagement/por-access-management-users-selector/por-access-management-users-selector.html
+++ b/app/portainer/components/accessManagement/por-access-management-users-selector/por-access-management-users-selector.html
@@ -11,8 +11,8 @@
       ng-if="$ctrl.options.length > 0"
       input-model="$ctrl.options"
       output-model="$ctrl.value"
-      button-label="icon '-' Name"
-      item-label="icon '-' Name"
+      button-label="icon Name"
+      item-label="icon Name"
       tick-property="ticked"
       helper-elements="filter"
       search-property="Name"
diff --git a/app/portainer/components/accessManagement/por-access-management.js b/app/portainer/components/accessManagement/por-access-management.js
index 7c8cf34ab..0ab867014 100644
--- a/app/portainer/components/accessManagement/por-access-management.js
+++ b/app/portainer/components/accessManagement/por-access-management.js
@@ -9,5 +9,6 @@ export const porAccessManagement = {
     updateAccess: '<',
     actionInProgress: '<',
     filterUsers: '<',
+    limitedFeature: '<',
   },
 };
diff --git a/app/portainer/components/accessManagement/porAccessManagement.html b/app/portainer/components/accessManagement/porAccessManagement.html
index 077df83d7..b8670486e 100644
--- a/app/portainer/components/accessManagement/porAccessManagement.html
+++ b/app/portainer/components/accessManagement/porAccessManagement.html
@@ -4,17 +4,31 @@
       <rd-widget-header icon="fa-user-lock" title-text="Create access"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
+          <div ng-if="ctrl.entityType !== 'registry'" class="form-group">
+            <span class="col-sm-12 small text-warning">
+              <p>
+                <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+                Adding user access will require the affected user(s) to logout and login for the changes to be taken into account.
+              </p>
+            </span>
+          </div>
+
           <por-access-management-users-selector options="ctrl.availableUsersAndTeams" value="ctrl.formValues.multiselectOutput"></por-access-management-users-selector>
 
-          <div class="form-group" ng-if="ctrl.entityType != 'registry'">
+          <div class="form-group" ng-if="ctrl.entityType !== 'registry'">
             <label class="col-sm-3 col-lg-2 control-label text-left">
               Role
             </label>
-            <div class="col-sm-9 col-lg-4">
-              <span class="text-muted small">
-                <i class="fa fa-user" aria-hidden="true"></i>
-                This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-rbac-access" target="_blank"> Portainer Business Edition</a>.
-              </span>
+            <div class="col-sm-9 col-lg-6">
+              <div class="flex items-center">
+                <select
+                  class="form-control"
+                  ng-model="ctrl.formValues.selectedRole"
+                  ng-options="role as ctrl.roleLabel(role) disable when ctrl.isRoleLimitedToBE(role) for role in ctrl.roles"
+                >
+                </select>
+                <be-feature-indicator feature="ctrl.limitedFeature" class="space-left"></be-feature-indicator>
+              </div>
             </div>
           </div>
 
@@ -48,6 +62,10 @@
       title-icon="fa-user-lock"
       table-key="{{ 'access_' + ctrl.entityType }}"
       order-by="Name"
+      show-warning="ctrl.entityType !== 'registry'"
+      is-update-enabled="ctrl.entityType !== 'registry'"
+      show-roles="ctrl.entityType !== 'registry'"
+      roles="ctrl.roles"
       inherit-from="ctrl.inheritFrom"
       dataset="ctrl.authorizedUsersAndTeams"
       update-action="ctrl.updateAction"
diff --git a/app/portainer/components/accessManagement/porAccessManagementController.js b/app/portainer/components/accessManagement/porAccessManagementController.js
index 8c1e5d524..2b4c8bc82 100644
--- a/app/portainer/components/accessManagement/porAccessManagementController.js
+++ b/app/portainer/components/accessManagement/porAccessManagementController.js
@@ -1,12 +1,14 @@
 import _ from 'lodash-es';
-
 import angular from 'angular';
 
+import { RoleTypes } from '@/portainer/rbac/models/role';
+
 class PorAccessManagementController {
   /* @ngInject */
-  constructor(Notifications, AccessService) {
-    this.Notifications = Notifications;
-    this.AccessService = AccessService;
+  constructor(Notifications, AccessService, RoleService, featureService) {
+    Object.assign(this, { Notifications, AccessService, RoleService, featureService });
+
+    this.limitedToBE = false;
 
     this.unauthorizeAccess = this.unauthorizeAccess.bind(this);
     this.updateAction = this.updateAction.bind(this);
@@ -29,10 +31,11 @@ class PorAccessManagementController {
     const entity = this.accessControlledEntity;
     const oldUserAccessPolicies = entity.UserAccessPolicies;
     const oldTeamAccessPolicies = entity.TeamAccessPolicies;
+    const selectedRoleId = this.formValues.selectedRole.Id;
     const selectedUserAccesses = _.filter(this.formValues.multiselectOutput, (access) => access.Type === 'user');
     const selectedTeamAccesses = _.filter(this.formValues.multiselectOutput, (access) => access.Type === 'team');
 
-    const accessPolicies = this.AccessService.generateAccessPolicies(oldUserAccessPolicies, oldTeamAccessPolicies, selectedUserAccesses, selectedTeamAccesses, 0);
+    const accessPolicies = this.AccessService.generateAccessPolicies(oldUserAccessPolicies, oldTeamAccessPolicies, selectedUserAccesses, selectedTeamAccesses, selectedRoleId);
     this.accessControlledEntity.UserAccessPolicies = accessPolicies.userAccessPolicies;
     this.accessControlledEntity.TeamAccessPolicies = accessPolicies.teamAccessPolicies;
     this.updateAccess();
@@ -50,11 +53,41 @@ class PorAccessManagementController {
     this.updateAccess();
   }
 
+  isRoleLimitedToBE(role) {
+    if (!this.limitedToBE) {
+      return false;
+    }
+
+    return role.ID !== RoleTypes.STANDARD;
+  }
+
+  roleLabel(role) {
+    if (!this.limitedToBE) {
+      return role.Name;
+    }
+
+    if (this.isRoleLimitedToBE(role)) {
+      return `${role.Name} (Business Edition Feature)`;
+    }
+
+    return `${role.Name} (Default)`;
+  }
+
   async $onInit() {
     try {
+      if (this.limitedFeature) {
+        this.limitedToBE = this.featureService.isLimitedToBE(this.limitedFeature);
+      }
+
       const entity = this.accessControlledEntity;
       const parent = this.inheritFrom;
 
+      const roles = await this.RoleService.roles();
+      this.roles = _.orderBy(roles, 'Priority', 'asc');
+      this.formValues = {
+        selectedRole: this.roles.find((role) => !this.isRoleLimitedToBE(role)),
+      };
+
       const data = await this.AccessService.accesses(entity, parent, this.roles);
 
       if (this.filterUsers) {
diff --git a/app/portainer/components/be-feature-indicator/be-feature-indicator.controller.js b/app/portainer/components/be-feature-indicator/be-feature-indicator.controller.js
new file mode 100644
index 000000000..5d7a71cbf
--- /dev/null
+++ b/app/portainer/components/be-feature-indicator/be-feature-indicator.controller.js
@@ -0,0 +1,18 @@
+const BE_URL = 'https://www.portainer.io/business-upsell?from=';
+
+export default class BeIndicatorController {
+  /* @ngInject */
+  constructor(featureService) {
+    Object.assign(this, { featureService });
+
+    this.limitedToBE = false;
+  }
+
+  $onInit() {
+    if (this.feature) {
+      this.url = `${BE_URL}${this.feature}`;
+
+      this.limitedToBE = this.featureService.isLimitedToBE(this.feature);
+    }
+  }
+}
diff --git a/app/portainer/components/be-feature-indicator/be-feature-indicator.css b/app/portainer/components/be-feature-indicator/be-feature-indicator.css
new file mode 100644
index 000000000..33e4eb1da
--- /dev/null
+++ b/app/portainer/components/be-feature-indicator/be-feature-indicator.css
@@ -0,0 +1,26 @@
+.be-indicator {
+  border: solid 1px var(--BE-only);
+  border-radius: 15px;
+  padding: 5px 10px;
+  font-weight: 400;
+  touch-action: all;
+  pointer-events: all;
+  white-space: nowrap;
+}
+
+.be-indicator .be-indicator-icon {
+  color: #000000;
+}
+
+.be-indicator:hover {
+  text-decoration: none;
+}
+
+.be-indicator:hover .be-indicator-label {
+  text-decoration: underline;
+}
+
+.be-indicator-container {
+  border: solid 1px var(--BE-only);
+  margin: 15px;
+}
diff --git a/app/portainer/components/be-feature-indicator/be-feature-indicator.html b/app/portainer/components/be-feature-indicator/be-feature-indicator.html
new file mode 100644
index 000000000..89261049f
--- /dev/null
+++ b/app/portainer/components/be-feature-indicator/be-feature-indicator.html
@@ -0,0 +1,5 @@
+<a class="be-indicator" 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>
+  <span class="be-indicator-label">Business Edition Feature</span>
+</a>
diff --git a/app/portainer/components/be-feature-indicator/index.js b/app/portainer/components/be-feature-indicator/index.js
new file mode 100644
index 000000000..6d214f2d2
--- /dev/null
+++ b/app/portainer/components/be-feature-indicator/index.js
@@ -0,0 +1,15 @@
+import angular from 'angular';
+import controller from './be-feature-indicator.controller.js';
+
+import './be-feature-indicator.css';
+
+export const beFeatureIndicator = {
+  templateUrl: './be-feature-indicator.html',
+  controller,
+  bindings: {
+    feature: '<',
+  },
+  transclude: true,
+};
+
+angular.module('portainer.app').component('beFeatureIndicator', beFeatureIndicator);
diff --git a/app/portainer/components/box-selector/box-selector-item/box-selector-item.controller.js b/app/portainer/components/box-selector/box-selector-item/box-selector-item.controller.js
new file mode 100644
index 000000000..720f67afe
--- /dev/null
+++ b/app/portainer/components/box-selector/box-selector-item/box-selector-item.controller.js
@@ -0,0 +1,23 @@
+export default class BoxSelectorItemController {
+  /* @ngInject */
+  constructor(featureService) {
+    Object.assign(this, { featureService });
+
+    this.limitedToBE = false;
+  }
+
+  handleChange(value) {
+    this.formCtrl.$setValidity(this.radioName, !this.limitedToBE, this.formCtrl);
+    this.onChange(value);
+  }
+
+  $onInit() {
+    if (this.option.feature) {
+      this.limitedToBE = this.featureService.isLimitedToBE(this.option.feature);
+    }
+  }
+
+  $onDestroy() {
+    this.formCtrl.$setValidity(this.radioName, true, this.formCtrl);
+  }
+}
diff --git a/app/portainer/components/box-selector/box-selector-item/box-selector-item.css b/app/portainer/components/box-selector/box-selector-item/box-selector-item.css
new file mode 100644
index 000000000..936879064
--- /dev/null
+++ b/app/portainer/components/box-selector/box-selector-item/box-selector-item.css
@@ -0,0 +1,117 @@
+.boxselector_wrapper > div,
+.boxselector_wrapper box-selector-item {
+  --selected-item-color: var(--blue-2);
+  flex: 1;
+  padding: 0.5rem;
+}
+
+.boxselector_wrapper .boxselector_header {
+  font-size: 14px;
+  margin-bottom: 5px;
+  font-weight: bold;
+  user-select: none;
+}
+
+.boxselector_header .fa,
+.fab {
+  font-weight: normal;
+}
+
+.boxselector_wrapper input[type='radio'] {
+  display: none;
+}
+
+.boxselector_wrapper input[type='radio']:not(:disabled) ~ label {
+  cursor: pointer;
+  background-color: var(--bg-boxselector-wrapper-disabled-color);
+}
+
+.boxselector_wrapper input[type='radio']:not(:disabled):hover ~ label:hover {
+  cursor: pointer;
+}
+
+.boxselector_wrapper label {
+  font-weight: normal;
+  font-size: 12px;
+  display: block;
+  background: var(--bg-boxselector-color);
+  border: 1px solid var(--border-boxselector-color);
+  border-radius: 2px;
+  padding: 10px 10px 0 10px;
+  text-align: center;
+  box-shadow: var(--shadow-boxselector-color);
+  position: relative;
+}
+
+.box-selector-item input:disabled + label,
+.boxselector_wrapper label.boxselector_disabled {
+  background: var(--bg-boxselector-disabled-color) !important;
+  border-color: #787878;
+  color: #787878;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.boxselector_wrapper input[type='radio']:checked + label {
+  background: var(--selected-item-color);
+  color: white;
+  padding-top: 2rem;
+  border-color: var(--selected-item-color);
+}
+
+.boxselector_wrapper input[type='radio']:checked + label::after {
+  color: var(--selected-item-color);
+  font-family: 'Font Awesome 5 Free';
+  border: 2px solid var(--selected-item-color);
+  content: '\f00c';
+  font-size: 16px;
+  font-weight: bold;
+  position: absolute;
+  top: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 30px;
+  width: 30px;
+  line-height: 26px;
+  text-align: center;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.25);
+}
+
+@media only screen and (max-width: 700px) {
+  .boxselector_wrapper {
+    flex-direction: column;
+  }
+}
+
+.box-selector-item-description {
+  height: 1em;
+}
+
+.box-selector-item.limited.business {
+  --selected-item-color: var(--BE-only);
+}
+
+.box-selector-item.limited.business label {
+  border-color: var(--BE-only);
+  border-width: 2px;
+}
+
+.box-selector-item .limited-icon {
+  position: absolute;
+  left: 1em;
+  top: calc(50% - 0.5em);
+  height: 1em;
+}
+
+@media (min-width: 992px) {
+  .box-selector-item .limited-icon {
+    left: 2em;
+  }
+}
+
+.box-selector-item.limited.business :checked + label {
+  background-color: initial;
+  color: initial;
+}
diff --git a/app/portainer/components/box-selector/box-selector-item/box-selector-item.html b/app/portainer/components/box-selector/box-selector-item/box-selector-item.html
index c0aec093a..3fa7c8107 100644
--- a/app/portainer/components/box-selector/box-selector-item/box-selector-item.html
+++ b/app/portainer/components/box-selector/box-selector-item/box-selector-item.html
@@ -1,5 +1,6 @@
 <div
   class="box-selector-item"
+  ng-class="{ business: $ctrl.limitedToBE, limited: $ctrl.limitedToBE }"
   tooltip-append-to-body="true"
   tooltip-placement="bottom"
   tooltip-class="portainer-tooltip"
@@ -14,11 +15,13 @@
     ng-value="$ctrl.option.value"
     ng-disabled="$ctrl.disabled"
   />
-  <label for="{{ $ctrl.option.id }}" ng-click="$ctrl.onChange($ctrl.option.value)" t data-cy="edgeStackCreate-deploymentSelector_{{ $ctrl.option.value }}">
+  <label for="{{ $ctrl.option.id }}" ng-click="$ctrl.handleChange($ctrl.option.value)">
+    <i class="fas fa-briefcase limited-icon" ng-if="$ctrl.limitedToBE"></i>
+
     <div class="boxselector_header">
       <i ng-class="$ctrl.option.icon" aria-hidden="true" style="margin-right: 2px;"></i>
       {{ $ctrl.option.label }}
     </div>
-    <p ng-if="$ctrl.option.description">{{ $ctrl.option.description }}</p>
+    <p class="box-selector-item-description">{{ $ctrl.option.description }}</p>
   </label>
 </div>
diff --git a/app/portainer/components/box-selector/box-selector-item/index.js b/app/portainer/components/box-selector/box-selector-item/index.js
index 91756c5ad..f43c0a439 100644
--- a/app/portainer/components/box-selector/box-selector-item/index.js
+++ b/app/portainer/components/box-selector/box-selector-item/index.js
@@ -1,7 +1,15 @@
 import angular from 'angular';
 
+import './box-selector-item.css';
+
+import controller from './box-selector-item.controller';
+
 angular.module('portainer.app').component('boxSelectorItem', {
   templateUrl: './box-selector-item.html',
+  controller,
+  require: {
+    formCtrl: '^^form',
+  },
   bindings: {
     radioName: '@',
     isChecked: '<',
diff --git a/app/portainer/components/box-selector/box-selector.controller.js b/app/portainer/components/box-selector/box-selector.controller.js
index 3b3c60d49..8d7d65fff 100644
--- a/app/portainer/components/box-selector/box-selector.controller.js
+++ b/app/portainer/components/box-selector/box-selector.controller.js
@@ -4,10 +4,10 @@ export default class BoxSelectorController {
     this.change = this.change.bind(this);
   }
 
-  change(value) {
+  change(value, limited) {
     this.ngModel = value;
     if (this.onChange) {
-      this.onChange(value);
+      this.onChange(value, limited);
     }
   }
 
diff --git a/app/portainer/components/box-selector/box-selector.css b/app/portainer/components/box-selector/box-selector.css
index 2fded1581..58b64f790 100644
--- a/app/portainer/components/box-selector/box-selector.css
+++ b/app/portainer/components/box-selector/box-selector.css
@@ -3,89 +3,3 @@
   flex-flow: row wrap;
   margin: 0.5rem;
 }
-
-.boxselector_wrapper > div,
-.boxselector_wrapper box-selector-item {
-  flex: 1;
-  padding: 0.5rem;
-}
-
-.boxselector_wrapper .boxselector_header {
-  font-size: 14px;
-  margin-bottom: 5px;
-  font-weight: bold;
-  user-select: none;
-}
-
-.boxselector_header .fa,
-.fab {
-  font-weight: normal;
-}
-
-.boxselector_wrapper input[type='radio'] {
-  display: none;
-}
-
-.boxselector_wrapper input[type='radio']:not(:disabled) ~ label {
-  cursor: pointer;
-  background-color: var(--bg-boxselector-wrapper-disabled-color);
-}
-
-.boxselector_wrapper input[type='radio']:not(:disabled):hover ~ label:hover {
-  cursor: pointer;
-}
-
-.boxselector_wrapper label {
-  font-weight: normal;
-  font-size: 12px;
-  display: block;
-  background: var(--bg-boxselector-color);
-  border: 1px solid var(--border-boxselector-color);
-  border-radius: 2px;
-  padding: 10px 10px 0 10px;
-  text-align: center;
-  box-shadow: var(--shadow-boxselector-color);
-  position: relative;
-}
-
-.box-selector-item input:disabled + label,
-.boxselector_wrapper label.boxselector_disabled {
-  background: var(--bg-boxselector-disabled-color) !important;
-  border-color: #787878;
-  color: #787878;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.boxselector_wrapper input[type='radio']:checked + label {
-  background: #337ab7;
-  color: white;
-  padding-top: 2rem;
-  border-color: #337ab7;
-}
-
-.boxselector_wrapper input[type='radio']:checked + label::after {
-  color: #337ab7;
-  font-family: 'Font Awesome 5 Free';
-  border: 2px solid #337ab7;
-  content: '\f00c';
-  font-size: 16px;
-  font-weight: bold;
-  position: absolute;
-  top: -15px;
-  left: 50%;
-  transform: translateX(-50%);
-  height: 30px;
-  width: 30px;
-  line-height: 26px;
-  text-align: center;
-  border-radius: 50%;
-  background: white;
-  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.25);
-}
-
-@media only screen and (max-width: 700px) {
-  .boxselector_wrapper {
-    flex-direction: column;
-  }
-}
diff --git a/app/portainer/components/box-selector/index.js b/app/portainer/components/box-selector/index.js
index 70ae7d768..555b6191f 100644
--- a/app/portainer/components/box-selector/index.js
+++ b/app/portainer/components/box-selector/index.js
@@ -15,6 +15,6 @@ angular.module('portainer.app').component('boxSelector', {
   },
 });
 
-export function buildOption(id, icon, label, description, value) {
-  return { id, icon, label, description, value };
+export function buildOption(id, icon, label, description, value, feature) {
+  return { id, icon, label, description, value, feature };
 }
diff --git a/app/portainer/components/datatables/access-viewer-datatable/accessViewerDatatable.html b/app/portainer/components/datatables/access-viewer-datatable/accessViewerDatatable.html
deleted file mode 100644
index 9a725651a..000000000
--- a/app/portainer/components/datatables/access-viewer-datatable/accessViewerDatatable.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="datatable">
-  <div class="searchBar">
-    <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-    <input type="text" class="searchInput" placeholder="Search..." ng-model-options="{ debounce: 300 }" />
-  </div>
-  <div class="table-responsive">
-    <table class="table table-hover nowrap-cells">
-      <thead>
-        <tr>
-          <th>
-            Environment
-          </th>
-          <th>
-            Role
-          </th>
-          <th>Access origin</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr ng-if="!$ctrl.dataset">
-          <td colspan="3" class="text-center text-muted">Select a user to show associated access and role</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css
index c7f17b4c5..c6ae521da 100644
--- a/app/portainer/components/datatables/datatable.css
+++ b/app/portainer/components/datatables/datatable.css
@@ -92,6 +92,10 @@
   float: none;
 }
 
+.datatable.datatable-empty .table > tbody > tr > td {
+  padding: 15px 0;
+}
+
 .tableMenu {
   color: #767676;
   padding: 10px;
diff --git a/app/portainer/components/datatables/filter/datatable-filter.controller.js b/app/portainer/components/datatables/filter/datatable-filter.controller.js
new file mode 100644
index 000000000..32c6de64d
--- /dev/null
+++ b/app/portainer/components/datatables/filter/datatable-filter.controller.js
@@ -0,0 +1,19 @@
+export default class DatatableFilterController {
+  isEnabled() {
+    return 0 < this.state.length && this.state.length < this.labels.length;
+  }
+
+  onChangeItem(filterValue) {
+    if (this.isChecked(filterValue)) {
+      return this.onChange(
+        this.filterKey,
+        this.state.filter((v) => v !== filterValue)
+      );
+    }
+    return this.onChange(this.filterKey, [...this.state, filterValue]);
+  }
+
+  isChecked(filterValue) {
+    return this.state.includes(filterValue);
+  }
+}
diff --git a/app/portainer/components/datatables/filter/datatable-filter.html b/app/portainer/components/datatables/filter/datatable-filter.html
new file mode 100644
index 000000000..f824447ff
--- /dev/null
+++ b/app/portainer/components/datatables/filter/datatable-filter.html
@@ -0,0 +1,32 @@
+<div uib-dropdown dropdown-append-to-body auto-close="outsideClick" is-open="$ctrl.isOpen">
+  <span ng-transclude></span>
+  <div class="filter-button">
+    <span uib-dropdown-toggle class="table-filter" ng-class="{ 'filter-active': $ctrl.isEnabled() }">
+      Filter
+      <i class="fa" ng-class="[$ctrl.isEnabled() ? 'fa-check' : 'fa-filter']" aria-hidden="true"></i>
+    </span>
+  </div>
+  <div class="dropdown-menu" style="min-width: 0;" uib-dropdown-menu>
+    <div class="tableMenu">
+      <div class="menuContent">
+        <div class="md-checkbox" ng-repeat="filter in $ctrl.labels track by filter.value">
+          <input
+            id="filter_{{ $ctrl.filterKey }}_{{ $index }}"
+            type="checkbox"
+            ng-value="filter.value"
+            ng-checked="$ctrl.state.includes(filter.value)"
+            ng-click="$ctrl.onChangeItem(filter.value)"
+          />
+          <label for="filter_{{ $ctrl.filterKey }}_{{ $index }}">
+            {{ filter.label }}
+          </label>
+        </div>
+      </div>
+      <div>
+        <a class="btn btn-default btn-sm" ng-click="$ctrl.isOpen = false;">
+          Close
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/portainer/components/datatables/filter/index.js b/app/portainer/components/datatables/filter/index.js
new file mode 100644
index 000000000..87ea3f18a
--- /dev/null
+++ b/app/portainer/components/datatables/filter/index.js
@@ -0,0 +1,13 @@
+import controller from './datatable-filter.controller';
+
+export const datatableFilter = {
+  bindings: {
+    labels: '<', // [{label, value}]
+    state: '<', // [filterValue]
+    filterKey: '@',
+    onChange: '<',
+  },
+  controller,
+  templateUrl: './datatable-filter.html',
+  transclude: true,
+};
diff --git a/app/portainer/components/datatables/genericDatatableController.js b/app/portainer/components/datatables/genericDatatableController.js
index 30f02dd44..bc7f93de7 100644
--- a/app/portainer/components/datatables/genericDatatableController.js
+++ b/app/portainer/components/datatables/genericDatatableController.js
@@ -128,7 +128,11 @@ angular.module('portainer.app').controller('GenericDatatableController', [
      * https://github.com/portainer/portainer/pull/2877#issuecomment-503333425
      * https://github.com/portainer/portainer/pull/2877#issuecomment-503537249
      */
-    this.$onInit = function () {
+    this.$onInit = function $onInit() {
+      this.$onInitGeneric();
+    };
+
+    this.$onInitGeneric = function $onInitGeneric() {
       this.setDefaults();
       this.prepareTableFromDataset();
 
diff --git a/app/portainer/components/datatables/index.js b/app/portainer/components/datatables/index.js
new file mode 100644
index 000000000..d8bb89dbc
--- /dev/null
+++ b/app/portainer/components/datatables/index.js
@@ -0,0 +1,16 @@
+import angular from 'angular';
+import 'angular-utils-pagination';
+
+import { datatableTitlebar } from './titlebar';
+import { datatableSearchbar } from './searchbar';
+import { datatableSortIcon } from './sort-icon';
+import { datatablePagination } from './pagination';
+import { datatableFilter } from './filter';
+
+export default angular
+  .module('portainer.shared.datatable', ['angularUtils.directives.dirPagination'])
+  .component('datatableTitlebar', datatableTitlebar)
+  .component('datatableSearchbar', datatableSearchbar)
+  .component('datatableSortIcon', datatableSortIcon)
+  .component('datatablePagination', datatablePagination)
+  .component('datatableFilter', datatableFilter).name;
diff --git a/app/portainer/components/datatables/pagination/index.js b/app/portainer/components/datatables/pagination/index.js
new file mode 100644
index 000000000..2f299755f
--- /dev/null
+++ b/app/portainer/components/datatables/pagination/index.js
@@ -0,0 +1,9 @@
+export const datatablePagination = {
+  bindings: {
+    onChangeLimit: '<',
+    limit: '<',
+    enableNoLimit: '<',
+    onChangePage: '<',
+  },
+  templateUrl: './pagination.html',
+};
diff --git a/app/portainer/components/datatables/pagination/pagination.html b/app/portainer/components/datatables/pagination/pagination.html
new file mode 100644
index 000000000..930b047c3
--- /dev/null
+++ b/app/portainer/components/datatables/pagination/pagination.html
@@ -0,0 +1,15 @@
+<div class="paginationControls">
+  <form class="form-inline">
+    <span class="limitSelector">
+      <span style="margin-right: 5px;"> Items per page </span>
+      <select class="form-control" ng-model="$ctrl.limit" ng-change="$ctrl.onChangeLimit($ctrl.limit)">
+        <option ng-if="$ctrl.enableNoLimit" ng-value="0">All</option>
+        <option ng-value="10">10</option>
+        <option ng-value="25">25</option>
+        <option ng-value="50">50</option>
+        <option ng-value="100">100</option>
+      </select>
+    </span>
+    <dir-pagination-controls max-size="5" on-page-change="$ctrl.onChangePage(newPageNumber)"> </dir-pagination-controls>
+  </form>
+</div>
diff --git a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
index 684d3e0b9..1930a37de 100644
--- a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
+++ b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
@@ -87,15 +87,10 @@
               </td>
               <td>
                 <a ng-if="$ctrl.canManageAccess(item)" ng-click="$ctrl.redirectToManageAccess(item)"> <i class="fa fa-users" aria-hidden="true"></i> Manage access </a>
-                <span
-                  ng-if="$ctrl.canBrowse(item)"
-                  class="text-muted space-left"
-                  style="cursor: pointer;"
-                  data-toggle="tooltip"
-                  title="This feature is available in Portainer Business Edition"
-                >
-                  <i class="fa fa-search" aria-hidden="true"></i> Browse</span
-                >
+                <be-feature-indicator feature="$ctrl.limitedFeature" ng-if="$ctrl.canBrowse(item)">
+                  <span class="text-muted space-left" style="padding-right: 5px;"> <i class="fa fa-search" aria-hidden="true"></i> Browse</span>
+                </be-feature-indicator>
+
                 <span ng-if="!$ctrl.canBrowse(item) && !$ctrl.canManageAccess(item)"> - </span>
               </td>
             </tr>
diff --git a/app/portainer/components/datatables/registries-datatable/registriesDatatableController.js b/app/portainer/components/datatables/registries-datatable/registriesDatatableController.js
index 1b2f86e35..67e46352c 100644
--- a/app/portainer/components/datatables/registries-datatable/registriesDatatableController.js
+++ b/app/portainer/components/datatables/registries-datatable/registriesDatatableController.js
@@ -1,5 +1,5 @@
 import { PortainerEndpointTypes } from 'Portainer/models/endpoint/models';
-
+import { REGISTRY_MANAGEMENT } from '@/portainer/feature-flags/feature-ids';
 angular.module('portainer.docker').controller('RegistriesDatatableController', RegistriesDatatableController);
 
 /* @ngInject */
@@ -45,6 +45,7 @@ function RegistriesDatatableController($scope, $controller, $state, Authenticati
   };
 
   this.$onInit = function () {
+    this.limitedFeature = REGISTRY_MANAGEMENT;
     this.isAdmin = Authentication.isAdmin();
     this.setDefaults();
     this.prepareTableFromDataset();
diff --git a/app/portainer/components/datatables/roles-datatable/rolesDatatable.html b/app/portainer/components/datatables/roles-datatable/rolesDatatable.html
deleted file mode 100644
index 9ea5b1500..000000000
--- a/app/portainer/components/datatables/roles-datatable/rolesDatatable.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<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" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
-      </div>
-      <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
-          <thead>
-            <tr>
-              <th>
-                Name
-              </th>
-              <th>
-                Description
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td class="text-muted">Environment administrator</td>
-              <td class="text-muted">Full control of all resources in an environment</td>
-            </tr>
-            <tr>
-              <td class="text-muted">Helpdesk</td>
-              <td class="text-muted">Read-only access of all resources in an environment</td>
-            </tr>
-            <tr>
-              <td class="text-muted">Read-only user</td>
-              <td class="text-muted">Read-only access of assigned resources in an environment</td>
-            </tr>
-            <tr>
-              <td class="text-muted">Standard user</td>
-              <td class="text-muted">Full control of assigned resources in an environment</td>
-            </tr>
-          </tbody>
-        </table>
-        <div class="footer">
-          <div class="paginationControls">
-            <form class="form-inline">
-              <span class="limitSelector">
-                <span style="margin-right: 5px;">
-                  Items per page
-                </span>
-                <select class="form-control">
-                  <option value="0">All</option>
-                  <option value="10">10</option>
-                  <option value="25">25</option>
-                  <option value="50">50</option>
-                  <option value="100">100</option>
-                </select>
-              </span>
-              <dir-pagination-controls max-size="5"></dir-pagination-controls>
-            </form>
-          </div>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>
diff --git a/app/portainer/components/datatables/searchbar/datatable-searchbar.html b/app/portainer/components/datatables/searchbar/datatable-searchbar.html
new file mode 100644
index 000000000..a2d0333b4
--- /dev/null
+++ b/app/portainer/components/datatables/searchbar/datatable-searchbar.html
@@ -0,0 +1,4 @@
+<div class="searchBar">
+  <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+  <input type="text" class="searchInput" ng-model="$ctrl.filter" ng-change="$ctrl.onChange($ctrl.filter)" placeholder="Search..." ng-model-options="{ debounce: 300 }" />
+</div>
diff --git a/app/portainer/components/datatables/searchbar/index.js b/app/portainer/components/datatables/searchbar/index.js
new file mode 100644
index 000000000..6a8da2b4a
--- /dev/null
+++ b/app/portainer/components/datatables/searchbar/index.js
@@ -0,0 +1,7 @@
+export const datatableSearchbar = {
+  bindings: {
+    onChange: '<',
+    ngModel: '<',
+  },
+  templateUrl: './datatable-searchbar.html',
+};
diff --git a/app/portainer/components/datatables/sort-icon/datatable-sort-icon.controller.js b/app/portainer/components/datatables/sort-icon/datatable-sort-icon.controller.js
new file mode 100644
index 000000000..5a0b2e436
--- /dev/null
+++ b/app/portainer/components/datatables/sort-icon/datatable-sort-icon.controller.js
@@ -0,0 +1,5 @@
+export default class datatableSortIconController {
+  isCurrentSortOrder() {
+    return this.selectedSortKey === this.key;
+  }
+}
diff --git a/app/portainer/components/datatables/sort-icon/datatable-sort-icon.html b/app/portainer/components/datatables/sort-icon/datatable-sort-icon.html
new file mode 100644
index 000000000..11335c671
--- /dev/null
+++ b/app/portainer/components/datatables/sort-icon/datatable-sort-icon.html
@@ -0,0 +1,9 @@
+<i
+  class="fa fa-sort-alpha-down"
+  ng-class="{
+    'fa-sort-alpha-down': !$ctrl.reverseOrder,
+    'fa-sort-alpha-up': $ctrl.reverseOrder,
+  }"
+  aria-hidden="true"
+  ng-if="$ctrl.isCurrentSortOrder()"
+></i>
diff --git a/app/portainer/components/datatables/sort-icon/index.js b/app/portainer/components/datatables/sort-icon/index.js
new file mode 100644
index 000000000..b7f22bf6a
--- /dev/null
+++ b/app/portainer/components/datatables/sort-icon/index.js
@@ -0,0 +1,11 @@
+import controller from './datatable-sort-icon.controller';
+
+export const datatableSortIcon = {
+  bindings: {
+    key: '@',
+    selectedSortKey: '@',
+    reverseOrder: '<',
+  },
+  controller,
+  templateUrl: './datatable-sort-icon.html',
+};
diff --git a/app/portainer/components/datatables/titlebar/datatable-titlebar.html b/app/portainer/components/datatables/titlebar/datatable-titlebar.html
new file mode 100644
index 000000000..add8e9fff
--- /dev/null
+++ b/app/portainer/components/datatables/titlebar/datatable-titlebar.html
@@ -0,0 +1,7 @@
+<div class="toolBar">
+  <div class="toolBarTitle">
+    <i class="fa" ng-class="$ctrl.icon" aria-hidden="true" style="margin-right: 2px;"></i>
+    <span style="margin-right: 10px;">{{ $ctrl.title }}</span>
+    <be-feature-indicator feature="$ctrl.feature"></be-feature-indicator>
+  </div>
+</div>
diff --git a/app/portainer/components/datatables/titlebar/index.js b/app/portainer/components/datatables/titlebar/index.js
new file mode 100644
index 000000000..43dd588f7
--- /dev/null
+++ b/app/portainer/components/datatables/titlebar/index.js
@@ -0,0 +1,8 @@
+export const datatableTitlebar = {
+  bindings: {
+    icon: '@',
+    title: '@',
+    feature: '@',
+  },
+  templateUrl: './datatable-titlebar.html',
+};
diff --git a/app/portainer/components/forms/por-switch-field/por-switch-field.html b/app/portainer/components/forms/por-switch-field/por-switch-field.html
index d20ae2776..19f458722 100644
--- a/app/portainer/components/forms/por-switch-field/por-switch-field.html
+++ b/app/portainer/components/forms/por-switch-field/por-switch-field.html
@@ -10,5 +10,7 @@
     ng-model="$ctrl.ngModel"
     disabled="$ctrl.disabled"
     on-change="($ctrl.onChange)"
+    feature="$ctrl.feature"
+    ng-data-cy="{{::$ctrl.ngDataCy}}"
   ></por-switch>
 </label>
diff --git a/app/portainer/components/forms/por-switch-field/por-switch-field.js b/app/portainer/components/forms/por-switch-field/por-switch-field.js
index 800604209..0a38e0483 100644
--- a/app/portainer/components/forms/por-switch-field/por-switch-field.js
+++ b/app/portainer/components/forms/por-switch-field/por-switch-field.js
@@ -1,7 +1,5 @@
 import angular from 'angular';
 
-import './por-switch-field.css';
-
 export const porSwitchField = {
   templateUrl: './por-switch-field.html',
   bindings: {
@@ -10,8 +8,10 @@ export const porSwitchField = {
     label: '@',
     name: '@',
     labelClass: '@',
+    ngDataCy: '@',
     disabled: '<',
     onChange: '<',
+    feature: '<', // feature id
   },
 };
 
diff --git a/app/portainer/components/forms/por-switch/por-switch.controller.js b/app/portainer/components/forms/por-switch/por-switch.controller.js
new file mode 100644
index 000000000..0f7ed0532
--- /dev/null
+++ b/app/portainer/components/forms/por-switch/por-switch.controller.js
@@ -0,0 +1,14 @@
+export default class PorSwitchController {
+  /* @ngInject */
+  constructor(featureService) {
+    Object.assign(this, { featureService });
+
+    this.limitedToBE = false;
+  }
+
+  $onInit() {
+    if (this.feature) {
+      this.limitedToBE = this.featureService.isLimitedToBE(this.feature);
+    }
+  }
+}
diff --git a/app/portainer/components/forms/por-switch-field/por-switch-field.css b/app/portainer/components/forms/por-switch/por-switch.css
similarity index 82%
rename from app/portainer/components/forms/por-switch-field/por-switch-field.css
rename to app/portainer/components/forms/por-switch/por-switch.css
index 0bf57f6b0..c09420285 100644
--- a/app/portainer/components/forms/por-switch-field/por-switch-field.css
+++ b/app/portainer/components/forms/por-switch/por-switch.css
@@ -51,3 +51,18 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+.switch.limited {
+  pointer-events: none;
+  touch-action: none;
+}
+
+.switch.limited i {
+  opacity: 1;
+  cursor: not-allowed;
+}
+
+.switch.business i {
+  background-color: var(--BE-only);
+  box-shadow: inset 0 0 1px rgb(0 0 0 / 50%), inset 0 0 40px var(--BE-only);
+}
diff --git a/app/portainer/components/forms/por-switch/por-switch.html b/app/portainer/components/forms/por-switch/por-switch.html
index 3710e4077..acacc784c 100644
--- a/app/portainer/components/forms/por-switch/por-switch.html
+++ b/app/portainer/components/forms/por-switch/por-switch.html
@@ -1,4 +1,12 @@
-<label class="switch" ng-class="$ctrl.className" style="margin-bottom: 0;">
-  <input type="checkbox" name="{{::$ctrl.name}}" id="{{::$ctrl.id}}" ng-model="$ctrl.ngModel" ng-disabled="$ctrl.disabled" ng-change="$ctrl.onChange($ctrl.ngModel)" />
-  <i></i>
+<label class="switch" ng-class="[$ctrl.className, { business: $ctrl.limitedToBE, limited: $ctrl.limitedToBE }]" style="margin-bottom: 0;">
+  <input
+    type="checkbox"
+    name="{{::$ctrl.name}}"
+    id="{{::$ctrl.id}}"
+    ng-model="$ctrl.ngModel"
+    ng-disabled="$ctrl.disabled || $ctrl.limitedToBE"
+    ng-change="$ctrl.onChange($ctrl.ngModel)"
+  />
+  <i data-cy="{{::$ctrl.ngDataCy}}"></i>
 </label>
+<be-feature-indicator ng-if="$ctrl.limitedToBE" feature="$ctrl.feature"></be-feature-indicator>
diff --git a/app/portainer/components/forms/por-switch/por-switch.js b/app/portainer/components/forms/por-switch/por-switch.js
index 5382b437f..793733fb9 100644
--- a/app/portainer/components/forms/por-switch/por-switch.js
+++ b/app/portainer/components/forms/por-switch/por-switch.js
@@ -1,14 +1,20 @@
 import angular from 'angular';
+import controller from './por-switch.controller';
+
+import './por-switch.css';
 
 const porSwitch = {
   templateUrl: './por-switch.html',
+  controller,
   bindings: {
     ngModel: '=',
     id: '@',
     className: '@',
     name: '@',
+    ngDataCy: '@',
     disabled: '<',
     onChange: '<',
+    feature: '<', // feature id
   },
 };
 
diff --git a/app/portainer/components/widget-header.js b/app/portainer/components/widget-header.js
index 9370ef57d..9eb50e500 100644
--- a/app/portainer/components/widget-header.js
+++ b/app/portainer/components/widget-header.js
@@ -6,9 +6,20 @@ angular.module('portainer.app').directive('rdWidgetHeader', function rdWidgetTit
       icon: '@',
       classes: '@?',
     },
-    transclude: true,
-    template:
-      '<div class="widget-header"><div class="row"><span ng-class="classes" class="pull-left"><i class="fa" ng-class="icon"></i> {{titleText}} </span><span ng-class="classes" class="pull-right" ng-transclude></span></div></div>',
+    transclude: {
+      title: '?headerTitle',
+    },
+    template: `
+    <div class="widget-header">
+      <div class="row">
+        <span ng-class="classes" class="pull-left">
+          <i class="fa" ng-class="icon"></i>
+          <span ng-transclude="title">{{ titleText }}</span>
+        </span>
+        <span ng-class="classes" class="pull-right" ng-transclude></span>
+      </div>
+    </div>
+`,
     restrict: 'E',
   };
   return directive;
diff --git a/app/portainer/feature-flags/enums.js b/app/portainer/feature-flags/enums.js
new file mode 100644
index 000000000..ed8d0f2fb
--- /dev/null
+++ b/app/portainer/feature-flags/enums.js
@@ -0,0 +1,10 @@
+export const EDITIONS = {
+  CE: 0,
+  BE: 1,
+};
+
+export const STATES = {
+  HIDDEN: 0,
+  VISIBLE: 1,
+  LIMITED_BE: 2,
+};
diff --git a/app/portainer/feature-flags/feature-flags.css b/app/portainer/feature-flags/feature-flags.css
new file mode 100644
index 000000000..9ffda18d8
--- /dev/null
+++ b/app/portainer/feature-flags/feature-flags.css
@@ -0,0 +1,26 @@
+.form-control.limited-be {
+  border-color: var(--BE-only);
+}
+
+.form-control.limited-be.no-border {
+  border-color: var(--border-form-control-color);
+}
+
+button.limited-be {
+  background-color: var(--BE-only);
+  border-color: var(--BE-only);
+}
+
+ng-form.limited-be,
+form.limited-be,
+div.limited-be {
+  border: solid 1px var(--BE-only);
+  padding: 10px;
+  pointer-events: none;
+  touch-action: none;
+  display: block;
+}
+
+.form-control.limited-be[disabled] {
+  background-color: transparent !important;
+}
diff --git a/app/portainer/feature-flags/feature-flags.service.js b/app/portainer/feature-flags/feature-flags.service.js
new file mode 100644
index 000000000..6512f7a74
--- /dev/null
+++ b/app/portainer/feature-flags/feature-flags.service.js
@@ -0,0 +1,57 @@
+import { EDITIONS, STATES } from './enums';
+
+import * as FEATURE_IDS from './feature-ids';
+
+export function featureService() {
+  const state = {
+    currentEdition: undefined,
+    features: {},
+  };
+
+  return {
+    selectShow,
+    init,
+    isLimitedToBE,
+  };
+
+  async function init() {
+    // will be loaded on runtime
+    const currentEdition = EDITIONS.CE;
+    const features = {
+      [FEATURE_IDS.K8S_RESOURCE_POOL_LB_QUOTA]: EDITIONS.BE,
+      [FEATURE_IDS.K8S_RESOURCE_POOL_STORAGE_QUOTA]: EDITIONS.BE,
+      [FEATURE_IDS.ACTIVITY_AUDIT]: EDITIONS.BE,
+      [FEATURE_IDS.EXTERNAL_AUTH_LDAP]: EDITIONS.BE,
+      [FEATURE_IDS.HIDE_INTERNAL_AUTH]: EDITIONS.BE,
+      [FEATURE_IDS.HIDE_INTERNAL_AUTHENTICATION_PROMPT]: EDITIONS.BE,
+      [FEATURE_IDS.K8S_SETUP_DEFAULT]: EDITIONS.BE,
+      [FEATURE_IDS.RBAC_ROLES]: EDITIONS.BE,
+      [FEATURE_IDS.REGISTRY_MANAGEMENT]: EDITIONS.BE,
+      [FEATURE_IDS.S3_BACKUP_SETTING]: EDITIONS.BE,
+      [FEATURE_IDS.TEAM_MEMBERSHIP]: EDITIONS.BE,
+    };
+
+    state.currentEdition = currentEdition;
+    state.features = features;
+  }
+
+  function selectShow(featureId) {
+    if (!state.features[featureId]) {
+      return STATES.HIDDEN;
+    }
+
+    if (state.features[featureId] <= state.currentEdition) {
+      return STATES.VISIBLE;
+    }
+
+    if (state.features[featureId] === EDITIONS.BE) {
+      return STATES.LIMITED_BE;
+    }
+
+    return STATES.HIDDEN;
+  }
+
+  function isLimitedToBE(featureId) {
+    return selectShow(featureId) === STATES.LIMITED_BE;
+  }
+}
diff --git a/app/portainer/feature-flags/feature-ids.js b/app/portainer/feature-flags/feature-ids.js
new file mode 100644
index 000000000..f116606f3
--- /dev/null
+++ b/app/portainer/feature-flags/feature-ids.js
@@ -0,0 +1,11 @@
+export const K8S_RESOURCE_POOL_LB_QUOTA = 'k8s-resourcepool-Ibquota';
+export const K8S_RESOURCE_POOL_STORAGE_QUOTA = 'k8s-resourcepool-storagequota';
+export const RBAC_ROLES = 'rbac-roles';
+export const REGISTRY_MANAGEMENT = 'registry-management';
+export const K8S_SETUP_DEFAULT = 'k8s-setup-default';
+export const S3_BACKUP_SETTING = 's3-backup-setting';
+export const HIDE_INTERNAL_AUTHENTICATION_PROMPT = 'hide-internal-authentication-prompt';
+export const TEAM_MEMBERSHIP = 'team-membership';
+export const HIDE_INTERNAL_AUTH = 'hide-internal-auth';
+export const EXTERNAL_AUTH_LDAP = 'external-auth-ldap';
+export const ACTIVITY_AUDIT = 'activity-audit';
diff --git a/app/portainer/feature-flags/index.js b/app/portainer/feature-flags/index.js
new file mode 100644
index 000000000..2830b08f2
--- /dev/null
+++ b/app/portainer/feature-flags/index.js
@@ -0,0 +1,7 @@
+import angular from 'angular';
+
+import { limitedFeatureDirective } from './limited-feature.directive';
+import { featureService } from './feature-flags.service';
+import './feature-flags.css';
+
+export default angular.module('portainer.feature-flags', []).directive('limitedFeatureDir', limitedFeatureDirective).factory('featureService', featureService).name;
diff --git a/app/portainer/feature-flags/limited-feature.directive.js b/app/portainer/feature-flags/limited-feature.directive.js
new file mode 100644
index 000000000..b368714f7
--- /dev/null
+++ b/app/portainer/feature-flags/limited-feature.directive.js
@@ -0,0 +1,41 @@
+import _ from 'lodash-es';
+
+import { STATES } from '@/portainer/feature-flags/enums';
+
+const BASENAME = 'limitedFeature';
+
+/* @ngInject */
+export function limitedFeatureDirective(featureService) {
+  return {
+    restrict: 'A',
+    link,
+  };
+
+  function link(scope, elem, attrs) {
+    const { limitedFeatureDir: featureId } = attrs;
+
+    if (!featureId) {
+      return;
+    }
+
+    const limitedFeatureAttrs = Object.keys(attrs)
+      .filter((attr) => attr.startsWith(BASENAME) && attr !== `${BASENAME}Dir`)
+      .map((attr) => [_.kebabCase(attr.replace(BASENAME, '')), attrs[attr]]);
+
+    const state = featureService.selectShow(featureId);
+
+    if (state === STATES.HIDDEN) {
+      elem.hide();
+      return;
+    }
+
+    if (state === STATES.VISIBLE) {
+      return;
+    }
+
+    limitedFeatureAttrs.forEach(([attr, value = attr]) => {
+      const currentValue = elem.attr(attr) || '';
+      elem.attr(attr, `${currentValue} ${value}`.trim());
+    });
+  }
+}
diff --git a/app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.js b/app/portainer/oauth/components/oauth-providers-selector/index.js
similarity index 50%
rename from app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.js
rename to app/portainer/oauth/components/oauth-providers-selector/index.js
index d0a1dca08..000f8694c 100644
--- a/app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.js
+++ b/app/portainer/oauth/components/oauth-providers-selector/index.js
@@ -1,8 +1,11 @@
+import angular from 'angular';
+import controller from './oauth-provider-selector.controller';
+
 angular.module('portainer.oauth').component('oauthProvidersSelector', {
   templateUrl: './oauth-providers-selector.html',
   bindings: {
-    onSelect: '<',
-    provider: '=',
+    onChange: '<',
+    value: '<',
   },
-  controller: 'OAuthProviderSelectorController',
+  controller,
 });
diff --git a/app/portainer/oauth/components/oauth-providers-selector/oauth-provider-selector-controller.js b/app/portainer/oauth/components/oauth-providers-selector/oauth-provider-selector-controller.js
deleted file mode 100644
index 32a527120..000000000
--- a/app/portainer/oauth/components/oauth-providers-selector/oauth-provider-selector-controller.js
+++ /dev/null
@@ -1,39 +0,0 @@
-angular.module('portainer.oauth').controller('OAuthProviderSelectorController', function OAuthProviderSelectorController() {
-  var ctrl = this;
-
-  this.providers = [
-    {
-      authUrl: '',
-      accessTokenUrl: '',
-      resourceUrl: '',
-      userIdentifier: '',
-      scopes: '',
-      name: 'custom',
-      label: 'Custom',
-      description: 'Custom OAuth provider',
-      icon: 'fa fa-user-check',
-    },
-  ];
-
-  this.$onInit = onInit;
-
-  function onInit() {
-    if (ctrl.provider.authUrl) {
-      ctrl.provider = getProviderByURL(ctrl.provider.authUrl);
-    } else {
-      ctrl.provider = ctrl.providers[0];
-    }
-    ctrl.onSelect(ctrl.provider, false);
-  }
-
-  function getProviderByURL(providerAuthURL) {
-    if (providerAuthURL.indexOf('login.microsoftonline.com') !== -1) {
-      return ctrl.providers[0];
-    } else if (providerAuthURL.indexOf('accounts.google.com') !== -1) {
-      return ctrl.providers[1];
-    } else if (providerAuthURL.indexOf('github.com') !== -1) {
-      return ctrl.providers[2];
-    }
-    return ctrl.providers[3];
-  }
-});
diff --git a/app/portainer/oauth/components/oauth-providers-selector/oauth-provider-selector.controller.js b/app/portainer/oauth/components/oauth-providers-selector/oauth-provider-selector.controller.js
new file mode 100644
index 000000000..a08daee0c
--- /dev/null
+++ b/app/portainer/oauth/components/oauth-providers-selector/oauth-provider-selector.controller.js
@@ -0,0 +1,14 @@
+import { HIDE_INTERNAL_AUTH } from '@/portainer/feature-flags/feature-ids';
+
+import { buildOption } from '@/portainer/components/box-selector';
+
+export default class OAuthProviderSelectorController {
+  constructor() {
+    this.options = [
+      buildOption('microsoft', 'fab fa-microsoft', 'Microsoft', 'Microsoft OAuth provider', 'microsoft', HIDE_INTERNAL_AUTH),
+      buildOption('google', 'fab fa-google', 'Google', 'Google OAuth provider', 'google', HIDE_INTERNAL_AUTH),
+      buildOption('github', 'fab fa-github', 'Github', 'Github OAuth provider', 'github', HIDE_INTERNAL_AUTH),
+      buildOption('custom', 'fa fa-user-check', 'Custom', 'Custom OAuth provider', 'custom'),
+    ];
+  }
+}
diff --git a/app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.html b/app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.html
index 17dffd726..f45db531b 100644
--- a/app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.html
+++ b/app/portainer/oauth/components/oauth-providers-selector/oauth-providers-selector.html
@@ -2,18 +2,4 @@
   Provider
 </div>
 
-<div class="form-group"></div>
-<div class="form-group" style="margin-bottom: 0;">
-  <div class="boxselector_wrapper">
-    <div ng-repeat="provider in $ctrl.providers" ng-click="$ctrl.onSelect(provider, true)">
-      <input type="radio" id="{{ 'oauth_provider_' + provider.name }}" ng-model="$ctrl.provider" ng-value="provider" />
-      <label for="{{ 'oauth_provider_' + provider.name }}">
-        <div class="boxselector_header">
-          <i ng-class="provider.icon" aria-hidden="true" style="margin-right: 2px;"></i>
-          {{ provider.label }}
-        </div>
-        <p>{{ provider.description }}</p>
-      </label>
-    </div>
-  </div>
-</div>
+<box-selector ng-model="$ctrl.value" options="$ctrl.options" on-change="($ctrl.onChange)" radio-name="oauth_provider"></box-selector>
diff --git a/app/portainer/oauth/components/oauth-settings/oauth-settings.js b/app/portainer/oauth/components/oauth-settings/index.js
similarity index 61%
rename from app/portainer/oauth/components/oauth-settings/oauth-settings.js
rename to app/portainer/oauth/components/oauth-settings/index.js
index ffe6b1739..c7fc2712f 100644
--- a/app/portainer/oauth/components/oauth-settings/oauth-settings.js
+++ b/app/portainer/oauth/components/oauth-settings/index.js
@@ -1,8 +1,11 @@
+import angular from 'angular';
+import controller from './oauth-settings.controller';
+
 angular.module('portainer.oauth').component('oauthSettings', {
   templateUrl: './oauth-settings.html',
   bindings: {
     settings: '=',
     teams: '<',
   },
-  controller: 'OAuthSettingsController',
+  controller,
 });
diff --git a/app/portainer/oauth/components/oauth-settings/oauth-settings-controller.js b/app/portainer/oauth/components/oauth-settings/oauth-settings-controller.js
deleted file mode 100644
index ce7f6ec47..000000000
--- a/app/portainer/oauth/components/oauth-settings/oauth-settings-controller.js
+++ /dev/null
@@ -1,23 +0,0 @@
-angular.module('portainer.oauth').controller('OAuthSettingsController', function OAuthSettingsController() {
-  var ctrl = this;
-
-  this.state = {
-    provider: {},
-  };
-
-  this.$onInit = $onInit;
-
-  function $onInit() {
-    if (ctrl.settings.RedirectURI === '') {
-      ctrl.settings.RedirectURI = window.location.origin;
-    }
-
-    if (ctrl.settings.AuthorizationURI !== '') {
-      ctrl.state.provider.authUrl = ctrl.settings.AuthorizationURI;
-    }
-
-    if (ctrl.settings.DefaultTeamID === 0) {
-      ctrl.settings.DefaultTeamID = null;
-    }
-  }
-});
diff --git a/app/portainer/oauth/components/oauth-settings/oauth-settings.controller.js b/app/portainer/oauth/components/oauth-settings/oauth-settings.controller.js
new file mode 100644
index 000000000..500560ad7
--- /dev/null
+++ b/app/portainer/oauth/components/oauth-settings/oauth-settings.controller.js
@@ -0,0 +1,109 @@
+import { HIDE_INTERNAL_AUTH } from '@/portainer/feature-flags/feature-ids';
+
+import providers, { getProviderByUrl } from './providers';
+
+export default class OAuthSettingsController {
+  /* @ngInject */
+  constructor(featureService) {
+    this.featureService = featureService;
+
+    this.limitedFeature = HIDE_INTERNAL_AUTH;
+
+    this.state = {
+      provider: 'custom',
+      overrideConfiguration: false,
+      microsoftTenantID: '',
+    };
+
+    this.$onInit = this.$onInit.bind(this);
+    this.onSelectProvider = this.onSelectProvider.bind(this);
+    this.onMicrosoftTenantIDChange = this.onMicrosoftTenantIDChange.bind(this);
+    this.useDefaultProviderConfiguration = this.useDefaultProviderConfiguration.bind(this);
+    this.updateSSO = this.updateSSO.bind(this);
+    this.addTeamMembershipMapping = this.addTeamMembershipMapping.bind(this);
+    this.removeTeamMembership = this.removeTeamMembership.bind(this);
+  }
+
+  onMicrosoftTenantIDChange() {
+    const tenantID = this.state.microsoftTenantID;
+
+    this.settings.AuthorizationURI = `https://login.microsoftonline.com/${tenantID}/oauth2/authorize`;
+    this.settings.AccessTokenURI = `https://login.microsoftonline.com/${tenantID}/oauth2/token`;
+    this.settings.ResourceURI = `https://graph.windows.net/${tenantID}/me?api-version=2013-11-08`;
+  }
+
+  useDefaultProviderConfiguration(providerId) {
+    const provider = providers[providerId];
+
+    this.state.overrideConfiguration = false;
+
+    if (!this.isLimitedToBE || providerId === 'custom') {
+      this.settings.AuthorizationURI = provider.authUrl;
+      this.settings.AccessTokenURI = provider.accessTokenUrl;
+      this.settings.ResourceURI = provider.resourceUrl;
+      this.settings.LogoutURI = provider.logoutUrl;
+      this.settings.UserIdentifier = provider.userIdentifier;
+      this.settings.Scopes = provider.scopes;
+
+      if (providerId === 'microsoft' && this.state.microsoftTenantID !== '') {
+        this.onMicrosoftTenantIDChange();
+      }
+    } else {
+      this.settings.ClientID = '';
+      this.settings.ClientSecret = '';
+    }
+  }
+
+  onSelectProvider(provider) {
+    this.state.provider = provider;
+
+    this.useDefaultProviderConfiguration(provider);
+  }
+
+  updateSSO() {
+    this.settings.HideInternalAuth = this.settings.SSO;
+  }
+
+  addTeamMembershipMapping() {
+    this.settings.TeamMemberships.OAuthClaimMappings.push({ ClaimValRegex: '', Team: this.settings.DefaultTeamID });
+  }
+
+  removeTeamMembership(index) {
+    this.settings.TeamMemberships.OAuthClaimMappings.splice(index, 1);
+  }
+
+  $onInit() {
+    this.isLimitedToBE = this.featureService.isLimitedToBE(this.limitedFeature);
+
+    if (this.isLimitedToBE) {
+      return;
+    }
+
+    if (this.settings.RedirectURI === '') {
+      this.settings.RedirectURI = window.location.origin;
+    }
+
+    if (this.settings.AuthorizationURI) {
+      const authUrl = this.settings.AuthorizationURI;
+
+      this.state.provider = getProviderByUrl(authUrl);
+      if (this.state.provider === 'microsoft') {
+        const tenantID = authUrl.match(/login.microsoftonline.com\/(.*?)\//)[1];
+        this.state.microsoftTenantID = tenantID;
+        this.onMicrosoftTenantIDChange();
+      }
+    }
+
+    if (this.settings.DefaultTeamID === 0) {
+      this.settings.DefaultTeamID = null;
+    }
+
+    if (this.settings.TeamMemberships == null) {
+      this.settings.TeamMemberships = {};
+    }
+
+    if (this.settings.TeamMemberships.OAuthClaimMappings === null) {
+      this.settings.TeamMemberships.OAuthClaimMappings = [];
+    }
+  }
+}
diff --git a/app/portainer/oauth/components/oauth-settings/oauth-settings.html b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
index 61ad0014c..4853aabc1 100644
--- a/app/portainer/oauth/components/oauth-settings/oauth-settings.html
+++ b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
@@ -1,54 +1,50 @@
-<div
-  ><div class="col-sm-12 form-section-title">
+<ng-form name="$ctrl.oauthSettingsForm">
+  <div class="col-sm-12 form-section-title">
     Single Sign-On
   </div>
+
   <!-- SSO -->
   <div class="form-group">
-    <label for="use-sso" class="control-label col-sm-2 text-left" style="padding-top: 0;">
-      Use SSO
-      <portainer-tooltip position="bottom" message="When using SSO the OAuth provider is not forced to prompt for credentials."></portainer-tooltip>
-    </label>
-    <div class="col-sm-9">
-      <label class="switch"> <input id="use-sso" type="checkbox" ng-model="$ctrl.settings.SSO" /><i></i> </label>
+    <div class="col-sm-12">
+      <por-switch-field
+        label="Use SSO"
+        tooltip="When using SSO the OAuth provider is not forced to prompt for credentials."
+        name="use-sso"
+        ng-model="$ctrl.settings.SSO"
+        on-change="$ctrl.updateSSO()"
+      ></por-switch-field>
     </div>
   </div>
   <!-- !SSO -->
 
   <!-- HideInternalAuth -->
   <div class="form-group" ng-if="$ctrl.settings.SSO">
-    <label for="hide-internal-auth" class="control-label col-sm-2 text-left" style="padding-top: 0;">
-      Hide internal authentication prompt
-    </label>
-    <div class="col-sm-9">
-      <label class="switch"> <input id="hide-internal-auth" type="checkbox" disabled /><i></i> </label>
-      <span class="text-muted small" style="margin-left: 15px;">
-        This feature is available in <a href="https://www.portainer.io/business-upsell?from=hide-internal-auth" target="_blank"> Portainer Business Edition</a>.
-      </span>
+    <div class="col-sm-12">
+      <por-switch-field
+        label="Hide internal authentication prompt"
+        name="hide-internal-auth"
+        feature="$ctrl.limitedFeature"
+        ng-model="$ctrl.settings.HideInternalAuth"
+      ></por-switch-field>
     </div>
   </div>
   <!-- !HideInternalAuth -->
-  <div class="col-sm-12 form-section-title">
-    Automatic user provisioning
-  </div>
-  <div class="form-group">
-    <span class="col-sm-12 text-muted small">
+
+  <auto-user-provision-toggle ng-model="$ctrl.settings.OAuthAutoCreateUsers">
+    <field-description>
       With automatic user provisioning enabled, Portainer will create user(s) automatically with the standard user role. If disabled, users must be created beforehand in Portainer
       in order to login.
-    </span>
-  </div>
-  <div class="form-group">
-    <label class="col-sm-3 col-lg-2 control-label text-left">Automatic user provisioning</label>
-    <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="$ctrl.settings.OAuthAutoCreateUsers" /><i></i> </label>
-  </div>
+    </field-description>
+  </auto-user-provision-toggle>
 
   <div ng-if="$ctrl.settings.OAuthAutoCreateUsers">
     <div class="form-group">
       <span class="col-sm-12 text-muted small">
         <p>The users created by the automatic provisioning feature can be added to a default team on creation.</p>
-        <p
-          >By assigning newly created users to a team, they will be able to access the environments associated to that team. This setting is optional and if not set, newly created
-          users won't be able to access any environments.</p
-        >
+        <p>
+          By assigning newly created users to a team, they will be able to access the environments associated to that team. This setting is optional and if not set, newly created
+          users won't be able to access any environments.
+        </p>
       </span>
     </div>
     <div class="form-group">
@@ -56,13 +52,33 @@
       <span class="small text-muted" style="margin-left: 20px;" ng-if="$ctrl.teams.length === 0">
         You have not yet created any teams. Head over to the <a ui-sref="portainer.teams">Teams view</a> to manage teams.
       </span>
-      <button type="button" class="btn btn-sm btn-danger" ng-click="$ctrl.settings.DefaultTeamID = null" ng-disabled="!$ctrl.settings.DefaultTeamID" ng-if="$ctrl.teams.length > 0"
-        ><i class="fa fa-times" aria-hidden="true"></i
-      ></button>
-      <div class="col-sm-9 col-lg-9" ng-if="$ctrl.teams.length > 0">
-        <select class="form-control" ng-model="$ctrl.settings.DefaultTeamID" ng-options="team.Id as team.Name for team in $ctrl.teams">
-          <option value="">No team</option>
-        </select>
+
+      <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>
+            The default team option will be disabled when automatic team membership is enabled
+          </p>
+        </div>
+        <div class="col-xs-11">
+          <select
+            class="form-control"
+            ng-disabled="$ctrl.settings.OAuthAutoMapTeamMemberships"
+            ng-model="$ctrl.settings.DefaultTeamID"
+            ng-options="team.Id as team.Name for team in $ctrl.teams"
+          >
+            <option value="">No team</option>
+          </select>
+        </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>
@@ -71,118 +87,296 @@
     Team membership
   </div>
   <div class="form-group">
-    <span class="col-sm-12 text-muted small">
+    <div class="col-sm-12 text-muted small">
       Automatic team membership synchronizes the team membership based on a custom claim in the token from the OAuth provider.
-    </span>
+    </div>
   </div>
   <div class="form-group">
-    <span class="text-muted small" style="margin-left: 15px;">
-      <i class="fa fa-user" aria-hidden="true"></i>
-      This feature is available in <a href="https://www.portainer.io/business-upsell?from=oauth-group-membership" target="_blank"> Portainer Business Edition</a>.
-    </span>
+    <div class="col-sm-12">
+      <por-switch-field label="Automatic team membership" name="tls" feature="$ctrl.limitedFeature" ng-model="$ctrl.settings.OAuthAutoMapTeamMemberships"></por-switch-field>
+    </div>
   </div>
 
-  <div class="col-sm-12 form-section-title">OAuth Configuration</div>
+  <div ng-if="$ctrl.settings.OAuthAutoMapTeamMemberships">
+    <div class="form-group">
+      <label class="col-sm-3 col-lg-2 control-label text-left">
+        Claim name
+        <portainer-tooltip position="bottom" message="The OpenID Connect UserInfo Claim name that contains the team identifier the user belongs to."></portainer-tooltip>
+      </label>
+      <div class="col-sm-9 col-lg-10">
+        <div class="col-xs-11 col-lg-10">
+          <input type="text" class="form-control" id="oauth_token_claim_name" ng-model="$ctrl.settings.TeamMemberships.OAuthClaimName" placeholder="groups" />
+        </div>
+      </div>
+    </div>
 
-  <div class="form-group">
-    <label for="oauth_client_id" class="col-sm-3 col-lg-2 control-label text-left">
-      Client ID
-      <portainer-tooltip position="bottom" message="Public identifier of the OAuth application"></portainer-tooltip>
-    </label>
-    <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="oauth_client_id" ng-model="$ctrl.settings.ClientID" placeholder="xxxxxxxxxxxxxxxxxxxx" />
+    <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>
+
+        <div class="col-sm-12 form-inline" ng-repeat="mapping in $ctrl.settings.TeamMemberships.OAuthClaimMappings" style="margin-top: 0.75em;">
+          <div class="input-group input-group-sm col-sm-5">
+            <span class="input-group-addon">claim value regex</span>
+            <input type="text" class="form-control" ng-model="mapping.ClaimValRegex" />
+          </div>
+          <span style="margin: 0px 0.5em;">maps to</span>
+          <div class="input-group input-group-sm col-sm-3 col-lg-4">
+            <span class="input-group-addon">team</span>
+            <select
+              class="form-control"
+              ng-init="mapping.Team = mapping.Team || $ctrl.settings.DefaultTeamID"
+              ng-model="mapping.Team"
+              ng-options="team.Id as team.Name for team in $ctrl.teams"
+            >
+              <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>
+
+          <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>
+      </div>
     </div>
-  </div>
 
-  <div class="form-group">
-    <label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left">
-      Client secret
-    </label>
-    <div class="col-sm-9 col-lg-10">
-      <input type="password" class="form-control" id="oauth_client_secret" ng-model="$ctrl.settings.ClientSecret" placeholder="xxxxxxxxxxxxxxxxxxxx" autocomplete="new-password" />
+    <div class="form-group">
+      <div class="col-sm-12 text-muted small" style="margin-bottom: 0.5em;">
+        The default team will be assigned when the user does not belong to any other team
+      </div>
+      <label class="col-sm-3 col-lg-2 control-label text-left">Default team</label>
+      <span class="small text-muted" style="margin-left: 20px;" ng-if="$ctrl.teams.length === 0">
+        You have not yet created any teams. Head over to the <a ui-sref="portainer.teams">Teams view</a> to manage teams.
+      </span>
+
+      <div class="col-sm-9" ng-if="$ctrl.teams.length > 0">
+        <div class="col-xs-11">
+          <select class="form-control" ng-model="$ctrl.settings.DefaultTeamID" ng-options="team.Id as team.Name for team in $ctrl.teams">
+            <option value="">No team</option>
+          </select>
+        </div>
+      </div>
     </div>
   </div>
 
-  <div class="form-group">
-    <label for="oauth_authorization_uri" class="col-sm-3 col-lg-2 control-label text-left">
-      Authorization URL
-      <portainer-tooltip
-        position="bottom"
-        message="URL used to authenticate against the OAuth provider. Will redirect the user to the OAuth provider login view"
-      ></portainer-tooltip>
+  <oauth-providers-selector on-change="($ctrl.onSelectProvider)" value="$ctrl.state.provider"></oauth-providers-selector>
+
+  <div class="col-sm-12 form-section-title">OAuth Configuration</div>
+
+  <div class="form-group" ng-if="$ctrl.state.provider == 'microsoft'">
+    <label for="oauth_microsoft_tenant_id" class="col-sm-3 col-lg-2 control-label text-left">
+      Tenant ID
+      <portainer-tooltip position="bottom" message="ID of the Azure Directory you wish to authenticate against. Also known as the Directory ID"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="oauth_authorization_uri" ng-model="$ctrl.settings.AuthorizationURI" placeholder="https://example.com/oauth/authorize" />
+      <input
+        type="text"
+        class="form-control"
+        id="oauth_microsoft_tenant_id"
+        placeholder="xxxxxxxxxxxxxxxxxxxx"
+        ng-model="$ctrl.state.microsoftTenantID"
+        ng-change="$ctrl.onMicrosoftTenantIDChange()"
+        limited-feature-dir="{{::$ctrl.limitedFeature}}"
+        limited-feature-class="limited-be"
+        limited-feature-disabled
+        limited-feature-tabindex="-1"
+        required
+      />
     </div>
   </div>
 
   <div class="form-group">
-    <label for="oauth_access_token_uri" class="col-sm-3 col-lg-2 control-label text-left">
-      Access token URL
-      <portainer-tooltip position="bottom" message="URL used by Portainer to exchange a valid OAuth authentication code for an access token"></portainer-tooltip>
+    <label for="oauth_client_id" class="col-sm-3 col-lg-2 control-label text-left">
+      {{ $ctrl.state.provider == 'microsoft' ? 'Application ID' : 'Client ID' }}
+      <portainer-tooltip position="bottom" message="Public identifier of the OAuth application"></portainer-tooltip>
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="oauth_access_token_uri" ng-model="$ctrl.settings.AccessTokenURI" placeholder="https://example.com/oauth/token" />
+      <input
+        type="text"
+        id="oauth_client_id"
+        ng-model="$ctrl.settings.ClientID"
+        placeholder="xxxxxxxxxxxxxxxxxxxx"
+        ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+        ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+        tabindex="{{ $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' ? -1 : 0 }}"
+      />
     </div>
   </div>
 
   <div class="form-group">
-    <label for="oauth_resource_uri" class="col-sm-3 col-lg-2 control-label text-left">
-      Resource URL
-      <portainer-tooltip position="bottom" message="URL used by Portainer to retrieve information about the authenticated user"></portainer-tooltip>
+    <label for="oauth_client_secret" class="col-sm-3 col-lg-2 control-label text-left">
+      {{ $ctrl.state.provider == 'microsoft' ? 'Application key' : 'Client secret' }}
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="oauth_resource_uri" ng-model="$ctrl.settings.ResourceURI" placeholder="https://example.com/user" />
+      <input
+        type="password"
+        class="form-control"
+        id="oauth_client_secret"
+        ng-model="$ctrl.settings.ClientSecret"
+        placeholder="xxxxxxxxxxxxxxxxxxxx"
+        autocomplete="new-password"
+        ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+        ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+        tabindex="{{ $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' ? -1 : 0 }}"
+      />
     </div>
   </div>
 
-  <div class="form-group">
-    <label for="oauth_redirect_uri" class="col-sm-3 col-lg-2 control-label text-left">
-      Redirect URL
-      <portainer-tooltip
-        position="bottom"
-        message="URL used by the OAuth provider to redirect the user after successful authentication. Should be set to your Portainer instance URL"
-      ></portainer-tooltip>
-    </label>
-    <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="oauth_redirect_uri" ng-model="$ctrl.settings.RedirectURI" placeholder="http://yourportainer.com/" />
+  <div ng-if="$ctrl.state.provider == 'custom' || $ctrl.state.overrideConfiguration">
+    <div class="form-group">
+      <label for="oauth_authorization_uri" class="col-sm-3 col-lg-2 control-label text-left">
+        Authorization URL
+        <portainer-tooltip
+          position="bottom"
+          message="URL used to authenticate against the OAuth provider. Will redirect the user to the OAuth provider login view"
+        ></portainer-tooltip>
+      </label>
+      <div class="col-sm-9 col-lg-10">
+        <input
+          type="text"
+          class="form-control"
+          id="oauth_authorization_uri"
+          ng-model="$ctrl.settings.AuthorizationURI"
+          placeholder="https://example.com/oauth/authorize"
+          ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+          ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+        />
+      </div>
     </div>
-  </div>
-  <div class="form-group">
-    <label for="oauth_logout_url" class="col-sm-3 col-lg-2 control-label text-left">
-      Logout URL
-      <portainer-tooltip
-        position="bottom"
-        message="URL used by Portainer to redirect the user to the OAuth provider in order to log the user out of the identity provider session."
-      ></portainer-tooltip>
-    </label>
-    <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="oauth_logout_url" ng-model="$ctrl.settings.LogoutURI" />
+
+    <div class="form-group">
+      <label for="oauth_access_token_uri" class="col-sm-3 col-lg-2 control-label text-left">
+        Access token URL
+        <portainer-tooltip position="bottom" message="URL used by Portainer to exchange a valid OAuth authentication code for an access token"></portainer-tooltip>
+      </label>
+      <div class="col-sm-9 col-lg-10">
+        <input
+          type="text"
+          class="form-control"
+          id="oauth_access_token_uri"
+          ng-model="$ctrl.settings.AccessTokenURI"
+          placeholder="https://example.com/oauth/token"
+          ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+          ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+        />
+      </div>
     </div>
-  </div>
-  <div class="form-group">
-    <label for="oauth_user_identifier" class="col-sm-3 col-lg-2 control-label text-left">
-      User identifier
-      <portainer-tooltip
-        position="bottom"
-        message="Identifier that will be used by Portainer to create an account for the authenticated user. Retrieved from the resource server specified via the Resource URL field"
-      ></portainer-tooltip>
-    </label>
-    <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="oauth_user_identifier" ng-model="$ctrl.settings.UserIdentifier" placeholder="id" />
+
+    <div class="form-group">
+      <label for="oauth_resource_uri" class="col-sm-3 col-lg-2 control-label text-left">
+        Resource URL
+        <portainer-tooltip position="bottom" message="URL used by Portainer to retrieve information about the authenticated user"></portainer-tooltip>
+      </label>
+      <div class="col-sm-9 col-lg-10">
+        <input
+          type="text"
+          class="form-control"
+          id="oauth_resource_uri"
+          ng-model="$ctrl.settings.ResourceURI"
+          placeholder="https://example.com/user"
+          ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+          ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="oauth_redirect_uri" class="col-sm-3 col-lg-2 control-label text-left">
+        Redirect URL
+        <portainer-tooltip
+          position="bottom"
+          message="URL used by the OAuth provider to redirect the user after successful authentication. Should be set to your Portainer instance URL"
+        ></portainer-tooltip>
+      </label>
+      <div class="col-sm-9 col-lg-10">
+        <input
+          type="text"
+          class="form-control"
+          id="oauth_redirect_uri"
+          ng-model="$ctrl.settings.RedirectURI"
+          placeholder="http://yourportainer.com/"
+          ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+          ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="oauth_logout_url" class="col-sm-3 col-lg-2 control-label text-left">
+        Logout URL
+        <portainer-tooltip
+          position="bottom"
+          message="URL used by Portainer to redirect the user to the OAuth provider in order to log the user out of the identity provider session."
+        ></portainer-tooltip>
+      </label>
+      <div class="col-sm-9 col-lg-10">
+        <input
+          type="text"
+          class="form-control"
+          id="oauth_logout_url"
+          ng-model="$ctrl.settings.LogoutURI"
+          ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+          ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="oauth_user_identifier" class="col-sm-3 col-lg-2 control-label text-left">
+        User identifier
+        <portainer-tooltip
+          position="bottom"
+          message="Identifier that will be used by Portainer to create an account for the authenticated user. Retrieved from the resource server specified via the Resource URL field"
+        ></portainer-tooltip>
+      </label>
+      <div class="col-sm-9 col-lg-10">
+        <input
+          type="text"
+          class="form-control"
+          id="oauth_user_identifier"
+          ng-model="$ctrl.settings.UserIdentifier"
+          placeholder="id"
+          ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+          ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="oauth_scopes" class="col-sm-3 col-lg-2 control-label text-left">
+        Scopes
+        <portainer-tooltip
+          position="bottom"
+          message="Scopes required by the OAuth provider to retrieve information about the authenticated user. Refer to your OAuth provider documentation for more information about this"
+        ></portainer-tooltip>
+      </label>
+      <div class="col-sm-9 col-lg-10">
+        <input
+          type="text"
+          class="form-control"
+          id="oauth_scopes"
+          ng-model="$ctrl.settings.Scopes"
+          placeholder="id,email,name"
+          ng-class="['form-control', { 'limited-be': $ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom' }]"
+          ng-disabled="$ctrl.isLimitedToBE && $ctrl.state.provider !== 'custom'"
+        />
+      </div>
     </div>
   </div>
 
-  <div class="form-group">
-    <label for="oauth_scopes" class="col-sm-3 col-lg-2 control-label text-left">
-      Scopes
-      <portainer-tooltip
-        position="bottom"
-        message="Scopes required by the OAuth provider to retrieve information about the authenticated user. Refer to your OAuth provider documentation for more information about this"
-      ></portainer-tooltip>
-    </label>
-    <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="oauth_scopes" ng-model="$ctrl.settings.Scopes" placeholder="id,email,name" />
+  <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>
+      <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>
     </div>
   </div>
-</div>
+</ng-form>
diff --git a/app/portainer/oauth/components/oauth-settings/providers.js b/app/portainer/oauth/components/oauth-settings/providers.js
new file mode 100644
index 000000000..fc04de927
--- /dev/null
+++ b/app/portainer/oauth/components/oauth-settings/providers.js
@@ -0,0 +1,43 @@
+export default {
+  microsoft: {
+    authUrl: 'https://login.microsoftonline.com/TENANT_ID/oauth2/authorize',
+    accessTokenUrl: 'https://login.microsoftonline.com/TENANT_ID/oauth2/token',
+    resourceUrl: 'https://graph.windows.net/TENANT_ID/me?api-version=2013-11-08',
+    logoutUrl: `https://login.microsoftonline.com/common/oauth2/v2.0/logout?post_logout_redirect_uri=${window.location.origin}/#!/auth`,
+    userIdentifier: 'userPrincipalName',
+    scopes: 'id,email,name',
+  },
+  google: {
+    authUrl: 'https://accounts.google.com/o/oauth2/auth',
+    accessTokenUrl: 'https://accounts.google.com/o/oauth2/token',
+    resourceUrl: 'https://www.googleapis.com/oauth2/v1/userinfo?alt=json',
+    logoutUrl: `https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=${window.location.origin}/#!/auth`,
+    userIdentifier: 'email',
+    scopes: 'profile email',
+  },
+  github: {
+    authUrl: 'https://github.com/login/oauth/authorize',
+    accessTokenUrl: 'https://github.com/login/oauth/access_token',
+    resourceUrl: 'https://api.github.com/user',
+    logoutUrl: `https://github.com/logout`,
+    userIdentifier: 'login',
+    scopes: 'id email name',
+  },
+  custom: { authUrl: '', accessTokenUrl: '', resourceUrl: '', logoutUrl: '', userIdentifier: '', scopes: '' },
+};
+
+export function getProviderByUrl(providerAuthURL = '') {
+  if (providerAuthURL.includes('login.microsoftonline.com')) {
+    return 'microsoft';
+  }
+
+  if (providerAuthURL.includes('accounts.google.com')) {
+    return 'google';
+  }
+
+  if (providerAuthURL.includes('github.com')) {
+    return 'github';
+  }
+
+  return 'custom';
+}
diff --git a/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
new file mode 100644
index 000000000..66a856a90
--- /dev/null
+++ b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
@@ -0,0 +1,73 @@
+<div class="datatable">
+  <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>
+  <div class="table-responsive">
+    <table class="table table-hover nowrap-cells">
+      <thead>
+        <tr>
+          <th>
+            <a ng-click="$ctrl.changeOrderBy('EndpointName')">
+              Environment
+              <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'EndpointName' && !$ctrl.state.reverseOrder"></i>
+              <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'EndpointName' && $ctrl.state.reverseOrder"></i>
+            </a>
+          </th>
+          <th>
+            <a ng-click="$ctrl.changeOrderBy('RoleName')">
+              Role
+              <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RoleName' && !$ctrl.state.reverseOrder"></i>
+              <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RoleName' && $ctrl.state.reverseOrder"></i>
+            </a>
+          </th>
+          <th>Access origin</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit)) track by $index"
+        >
+          <td>{{ item.EndpointName }}</td>
+          <td>{{ item.RoleName }}</td>
+          <td
+            >{{ item.TeamName ? 'Team' : 'User' }} <code ng-if="item.TeamName">{{ item.TeamName }}</code> access defined on {{ item.AccessLocation }}
+            <code ng-if="item.GroupName">{{ item.GroupName }}</code>
+            <a ng-if="item.AccessLocation === 'endpoint'" ui-sref="portainer.endpoints.endpoint.access({id: item.EndpointId})"
+              ><i style="margin-left: 5px;" class="fa fa-users" aria-hidden="true"></i> Manage access
+            </a>
+            <a ng-if="item.AccessLocation === 'endpoint group'" ui-sref="portainer.groups.group.access({id: item.GroupId})"
+              ><i style="margin-left: 5px;" class="fa fa-users" aria-hidden="true"></i> Manage access
+            </a>
+          </td>
+        </tr>
+        <tr ng-if="!$ctrl.dataset">
+          <td colspan="3" class="text-center text-muted">Select a user to show associated access and role</td>
+        </tr>
+        <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+          <td colspan="3" class="text-center text-muted">The selected user does not have access to any environment(s)</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class="footer" ng-if="$ctrl.dataset">
+    <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
+    <div class="paginationControls">
+      <form class="form-inline">
+        <span class="limitSelector">
+          <span style="margin-right: 5px;">
+            Items per page
+          </span>
+          <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+            <option value="0">All</option>
+            <option value="10">10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+        </span>
+        <dir-pagination-controls max-size="5"></dir-pagination-controls>
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/app/portainer/components/datatables/access-viewer-datatable/accessViewerDatatable.js b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/index.js
similarity index 56%
rename from app/portainer/components/datatables/access-viewer-datatable/accessViewerDatatable.js
rename to app/portainer/rbac/components/access-viewer/access-viewer-datatable/index.js
index 39bf39f70..e096ef51a 100644
--- a/app/portainer/components/datatables/access-viewer-datatable/accessViewerDatatable.js
+++ b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/index.js
@@ -1,5 +1,5 @@
-angular.module('portainer.app').component('accessViewerDatatable', {
-  templateUrl: './accessViewerDatatable.html',
+export const accessViewerDatatable = {
+  templateUrl: './access-viewer-datatable.html',
   controller: 'GenericDatatableController',
   bindings: {
     titleText: '@',
@@ -8,4 +8,4 @@ angular.module('portainer.app').component('accessViewerDatatable', {
     orderBy: '@',
     dataset: '<',
   },
-});
+};
diff --git a/app/portainer/rbac/components/access-viewer/access-viewer.controller.js b/app/portainer/rbac/components/access-viewer/access-viewer.controller.js
new file mode 100644
index 000000000..a4a03e483
--- /dev/null
+++ b/app/portainer/rbac/components/access-viewer/access-viewer.controller.js
@@ -0,0 +1,128 @@
+import _ from 'lodash-es';
+
+import AccessViewerPolicyModel from '../../models/access';
+
+export default class AccessViewerController {
+  /* @ngInject */
+  constructor(featureService, Notifications, RoleService, UserService, EndpointService, GroupService, TeamService, TeamMembershipService) {
+    this.featureService = featureService;
+    this.Notifications = Notifications;
+    this.RoleService = RoleService;
+    this.UserService = UserService;
+    this.EndpointService = EndpointService;
+    this.GroupService = GroupService;
+    this.TeamService = TeamService;
+    this.TeamMembershipService = TeamMembershipService;
+
+    this.limitedFeature = 'rbac-roles';
+    this.users = [];
+  }
+
+  onUserSelect() {
+    this.userRoles = [];
+    const userRoles = {};
+    const user = this.selectedUser;
+    const userMemberships = _.filter(this.teamMemberships, { UserId: user.Id });
+
+    for (const [, endpoint] of _.entries(this.endpoints)) {
+      let role = this.getRoleFromUserEndpointPolicy(user, endpoint);
+      if (role) {
+        userRoles[endpoint.Id] = role;
+        continue;
+      }
+
+      role = this.getRoleFromUserEndpointGroupPolicy(user, endpoint);
+      if (role) {
+        userRoles[endpoint.Id] = role;
+        continue;
+      }
+
+      role = this.getRoleFromTeamEndpointPolicies(userMemberships, endpoint);
+      if (role) {
+        userRoles[endpoint.Id] = role;
+        continue;
+      }
+
+      role = this.getRoleFromTeamEndpointGroupPolicies(userMemberships, endpoint);
+      if (role) {
+        userRoles[endpoint.Id] = role;
+      }
+    }
+
+    this.userRoles = _.values(userRoles);
+  }
+
+  findLowestRole(policies) {
+    return _.first(_.orderBy(policies, 'RolePriority', 'desc'));
+  }
+
+  getRoleFromUserEndpointPolicy(user, endpoint) {
+    const policyRoles = [];
+    const policy = (endpoint.UserAccessPolicies || {})[user.Id];
+    if (policy) {
+      const accessPolicy = new AccessViewerPolicyModel(policy, endpoint, this.roles, null, null);
+      policyRoles.push(accessPolicy);
+    }
+    return this.findLowestRole(policyRoles);
+  }
+
+  getRoleFromUserEndpointGroupPolicy(user, endpoint) {
+    const policyRoles = [];
+    const policy = this.groupUserAccessPolicies[endpoint.GroupId][user.Id];
+    if (policy) {
+      const accessPolicy = new AccessViewerPolicyModel(policy, endpoint, this.roles, this.groups[endpoint.GroupId], null);
+      policyRoles.push(accessPolicy);
+    }
+    return this.findLowestRole(policyRoles);
+  }
+
+  getRoleFromTeamEndpointPolicies(memberships, endpoint) {
+    const policyRoles = [];
+    for (const membership of memberships) {
+      const policy = (endpoint.TeamAccessPolicies || {})[membership.TeamId];
+      if (policy) {
+        const accessPolicy = new AccessViewerPolicyModel(policy, endpoint, this.roles, null, this.teams[membership.TeamId]);
+        policyRoles.push(accessPolicy);
+      }
+    }
+    return this.findLowestRole(policyRoles);
+  }
+
+  getRoleFromTeamEndpointGroupPolicies(memberships, endpoint) {
+    const policyRoles = [];
+    for (const membership of memberships) {
+      const policy = this.groupTeamAccessPolicies[endpoint.GroupId][membership.TeamId];
+      if (policy) {
+        const accessPolicy = new AccessViewerPolicyModel(policy, endpoint, this.roles, this.groups[endpoint.GroupId], this.teams[membership.TeamId]);
+        policyRoles.push(accessPolicy);
+      }
+    }
+    return this.findLowestRole(policyRoles);
+  }
+
+  async $onInit() {
+    try {
+      const limitedToBE = this.featureService.isLimitedToBE(this.limitedFeature);
+
+      if (limitedToBE) {
+        return;
+      }
+
+      this.users = await this.UserService.users();
+      this.endpoints = _.keyBy((await this.EndpointService.endpoints()).value, 'Id');
+      const groups = await this.GroupService.groups();
+      this.groupUserAccessPolicies = {};
+      this.groupTeamAccessPolicies = {};
+      _.forEach(groups, (group) => {
+        this.groupUserAccessPolicies[group.Id] = group.UserAccessPolicies;
+        this.groupTeamAccessPolicies[group.Id] = group.TeamAccessPolicies;
+      });
+      this.groups = _.keyBy(groups, 'Id');
+      this.roles = _.keyBy(await this.RoleService.roles(), 'Id');
+      this.teams = _.keyBy(await this.TeamService.teams(), 'Id');
+      this.teamMemberships = await this.TeamMembershipService.memberships();
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve accesses');
+    }
+  }
+}
diff --git a/app/portainer/rbac/components/access-viewer/access-viewer.html b/app/portainer/rbac/components/access-viewer/access-viewer.html
new file mode 100644
index 000000000..1f42912d1
--- /dev/null
+++ b/app/portainer/rbac/components/access-viewer/access-viewer.html
@@ -0,0 +1,43 @@
+<div class="col-sm-12" style="margin-bottom: 0px;">
+  <rd-widget>
+    <rd-widget-header icon="fa-user-lock">
+      <header-title>
+        Effective access viewer
+        <be-feature-indicator feature="$ctrl.limitedFeature" class="space-left"></be-feature-indicator>
+      </header-title>
+    </rd-widget-header>
+    <rd-widget-body>
+      <form class="form-horizontal">
+        <div class="col-sm-12 form-section-title">
+          User
+        </div>
+        <div class="form-group">
+          <div class="col-sm-12">
+            <span class="small text-muted" ng-if="$ctrl.users.length === 0">
+              No user available
+            </span>
+            <ui-select ng-if="$ctrl.users.length > 0" ng-model="$ctrl.selectedUser" ng-change="$ctrl.onUserSelect()">
+              <ui-select-match placeholder="Select a user">
+                <span>{{ $select.selected.Username }}</span>
+              </ui-select-match>
+              <ui-select-choices repeat="item in ($ctrl.users | filter: $select.search)">
+                <span>{{ item.Username }}</span>
+              </ui-select-choices>
+            </ui-select>
+          </div>
+        </div>
+
+        <div class="col-sm-12 form-section-title">
+          Access
+        </div>
+        <div>
+          <div class="small text-muted" style="margin-bottom: 15px;">
+            <i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
+            Effective role for each environment will be displayed for the selected user
+          </div>
+        </div>
+        <access-viewer-datatable table-key="access_viewer" dataset="$ctrl.userRoles" order-by="EndpointName"> </access-viewer-datatable>
+      </form>
+    </rd-widget-body>
+  </rd-widget>
+</div>
diff --git a/app/portainer/rbac/components/access-viewer/index.js b/app/portainer/rbac/components/access-viewer/index.js
new file mode 100644
index 000000000..334f0f0f7
--- /dev/null
+++ b/app/portainer/rbac/components/access-viewer/index.js
@@ -0,0 +1,6 @@
+import controller from './access-viewer.controller';
+
+export const accessViewer = {
+  templateUrl: './access-viewer.html',
+  controller,
+};
diff --git a/app/portainer/rbac/components/roles-datatable/index.js b/app/portainer/rbac/components/roles-datatable/index.js
new file mode 100644
index 000000000..06af2dcf4
--- /dev/null
+++ b/app/portainer/rbac/components/roles-datatable/index.js
@@ -0,0 +1,15 @@
+import controller from './roles-datatable.controller';
+import './roles-datatable.css';
+
+export const rolesDatatable = {
+  templateUrl: './roles-datatable.html',
+  controller,
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    dataset: '<',
+    tableKey: '@',
+    orderBy: '@',
+    reverseOrder: '<',
+  },
+};
diff --git a/app/portainer/rbac/components/roles-datatable/roles-datatable.controller.js b/app/portainer/rbac/components/roles-datatable/roles-datatable.controller.js
new file mode 100644
index 000000000..ff980bbac
--- /dev/null
+++ b/app/portainer/rbac/components/roles-datatable/roles-datatable.controller.js
@@ -0,0 +1,15 @@
+import angular from 'angular';
+import { RoleTypes } from '../../models/role';
+
+export default class RolesDatatableController {
+  /* @ngInject */
+  constructor($controller, $scope) {
+    this.limitedFeature = 'rbac-roles';
+
+    angular.extend(this, $controller('GenericDatatableController', { $scope }));
+  }
+
+  isDefaultItem(item) {
+    return item.ID === RoleTypes.STANDARD;
+  }
+}
diff --git a/app/portainer/rbac/components/roles-datatable/roles-datatable.css b/app/portainer/rbac/components/roles-datatable/roles-datatable.css
new file mode 100644
index 000000000..14def6618
--- /dev/null
+++ b/app/portainer/rbac/components/roles-datatable/roles-datatable.css
@@ -0,0 +1,7 @@
+th.be-visual-indicator-col {
+  width: 300px;
+}
+
+td.be-visual-indicator-col {
+  text-align: center;
+}
diff --git a/app/portainer/rbac/components/roles-datatable/roles-datatable.html b/app/portainer/rbac/components/roles-datatable/roles-datatable.html
new file mode 100644
index 000000000..59c7e4003
--- /dev/null
+++ b/app/portainer/rbac/components/roles-datatable/roles-datatable.html
@@ -0,0 +1,85 @@
+<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
+          ng-model-options="{ debounce: 300 }"
+        />
+      </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>
+              </th>
+              <th>
+                <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>
+              </th>
+              <th class="be-visual-indicator-col"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
+              <td>{{ item.Name }}</td>
+              <td>{{ item.Description }}</td>
+              <td class="be-visual-indicator-col" ng-switch on="$ctrl.isDefaultItem(item)">
+                <span ng-switch-when="false">
+                  <be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator>
+                </span>
+                <b ng-switch-when="true">Default</b>
+              </td>
+            </tr>
+            <tr ng-if="!$ctrl.dataset">
+              <td colspan="3" class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+              <td colspan="3" class="text-center text-muted">No role available.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.dataset">
+        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
+        <div class="paginationControls">
+          <form class="form-inline">
+            <span class="limitSelector">
+              <span style="margin-right: 5px;">
+                Items per page
+              </span>
+              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+                <option value="0">All</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+            </span>
+            <dir-pagination-controls max-size="5"></dir-pagination-controls>
+          </form>
+        </div>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>
diff --git a/app/portainer/rbac/index.js b/app/portainer/rbac/index.js
new file mode 100644
index 000000000..28647e586
--- /dev/null
+++ b/app/portainer/rbac/index.js
@@ -0,0 +1,33 @@
+import { rolesView } from './views/roles';
+import { accessViewer } from './components/access-viewer';
+import { accessViewerDatatable } from './components/access-viewer/access-viewer-datatable';
+import { rolesDatatable } from './components/roles-datatable';
+
+import { RoleService } from './services/role.service';
+import { RolesFactory } from './services/role.rest';
+
+angular
+  .module('portainer.rbac', ['ngResource'])
+  .constant('API_ENDPOINT_ROLES', 'api/roles')
+  .component('accessViewer', accessViewer)
+  .component('accessViewerDatatable', accessViewerDatatable)
+  .component('rolesDatatable', rolesDatatable)
+  .component('rolesView', rolesView)
+  .factory('RoleService', RoleService)
+  .factory('Roles', RolesFactory)
+  .config(config);
+
+/* @ngInject */
+function config($stateRegistryProvider) {
+  const roles = {
+    name: 'portainer.roles',
+    url: '/roles',
+    views: {
+      'content@': {
+        component: 'rolesView',
+      },
+    },
+  };
+
+  $stateRegistryProvider.register(roles);
+}
diff --git a/app/portainer/rbac/models/access.js b/app/portainer/rbac/models/access.js
new file mode 100644
index 000000000..18b7269fe
--- /dev/null
+++ b/app/portainer/rbac/models/access.js
@@ -0,0 +1,16 @@
+export default function AccessViewerPolicyModel(policy, endpoint, roles, group, team) {
+  this.EndpointId = endpoint.Id;
+  this.EndpointName = endpoint.Name;
+  this.RoleId = policy.RoleId;
+  this.RoleName = roles[policy.RoleId].Name;
+  this.RolePriority = roles[policy.RoleId].Priority;
+  if (group) {
+    this.GroupId = group.Id;
+    this.GroupName = group.Name;
+  }
+  if (team) {
+    this.TeamId = team.Id;
+    this.TeamName = team.Name;
+  }
+  this.AccessLocation = group ? 'environment group' : 'environment';
+}
diff --git a/app/portainer/rbac/models/role.js b/app/portainer/rbac/models/role.js
new file mode 100644
index 000000000..44cb4a377
--- /dev/null
+++ b/app/portainer/rbac/models/role.js
@@ -0,0 +1,14 @@
+export function RoleViewModel(id, name, description, authorizations) {
+  this.ID = id;
+  this.Name = name;
+  this.Description = description;
+  this.Authorizations = authorizations;
+}
+
+export const RoleTypes = Object.freeze({
+  ENDPOINT_ADMIN: 1,
+  HELPDESK: 2,
+  STANDARD: 3,
+  READ_ONLY: 4,
+  OPERATOR: 5,
+});
diff --git a/app/portainer/rbac/services/role.rest.js b/app/portainer/rbac/services/role.rest.js
new file mode 100644
index 000000000..121360957
--- /dev/null
+++ b/app/portainer/rbac/services/role.rest.js
@@ -0,0 +1,14 @@
+/* @ngInject */
+export function RolesFactory($resource, API_ENDPOINT_ROLES) {
+  return $resource(
+    API_ENDPOINT_ROLES + '/:id',
+    {},
+    {
+      create: { method: 'POST', ignoreLoadingBar: true },
+      query: { method: 'GET', isArray: true },
+      get: { method: 'GET', params: { id: '@id' } },
+      update: { method: 'PUT', params: { id: '@id' } },
+      remove: { method: 'DELETE', params: { id: '@id' } },
+    }
+  );
+}
diff --git a/app/portainer/rbac/services/role.service.js b/app/portainer/rbac/services/role.service.js
new file mode 100644
index 000000000..14b763b31
--- /dev/null
+++ b/app/portainer/rbac/services/role.service.js
@@ -0,0 +1,19 @@
+import { RoleViewModel, RoleTypes } from '../models/role';
+
+export function RoleService() {
+  const rolesData = [
+    new RoleViewModel(RoleTypes.ENDPOINT_ADMIN, 'Environment administrator', 'Full control of all resources in an environment', []),
+    new RoleViewModel(RoleTypes.OPERATOR, 'Operator', 'Operational Control of all existing resources in an environment', []),
+    new RoleViewModel(RoleTypes.HELPDESK, 'Helpdesk', 'Read-only access of all resources in an environment', []),
+    new RoleViewModel(RoleTypes.READ_ONLY, 'Read-only user', 'Read-only access of assigned resources in an environment', []),
+    new RoleViewModel(RoleTypes.STANDARD, 'Standard user', 'Full control of assigned resources in an environment', []),
+  ];
+
+  return {
+    roles,
+  };
+
+  function roles() {
+    return rolesData;
+  }
+}
diff --git a/app/portainer/rbac/views/roles/index.js b/app/portainer/rbac/views/roles/index.js
new file mode 100644
index 000000000..c1e91cf9f
--- /dev/null
+++ b/app/portainer/rbac/views/roles/index.js
@@ -0,0 +1,6 @@
+import controller from './roles.controller';
+
+export const rolesView = {
+  templateUrl: './roles.html',
+  controller,
+};
diff --git a/app/portainer/rbac/views/roles/roles.controller.js b/app/portainer/rbac/views/roles/roles.controller.js
new file mode 100644
index 000000000..742c243c3
--- /dev/null
+++ b/app/portainer/rbac/views/roles/roles.controller.js
@@ -0,0 +1,20 @@
+import _ from 'lodash-es';
+
+export default class RolesController {
+  /* @ngInject */
+  constructor(Notifications, RoleService) {
+    this.Notifications = Notifications;
+    this.RoleService = RoleService;
+  }
+
+  async $onInit() {
+    this.roles = [];
+
+    try {
+      this.roles = await this.RoleService.roles();
+      this.roles = _.orderBy(this.roles, 'Priority', 'asc');
+    } catch (err) {
+      this.Notifications.error('Failure', err, 'Unable to retrieve roles');
+    }
+  }
+}
diff --git a/app/portainer/rbac/views/roles/roles.html b/app/portainer/rbac/views/roles/roles.html
new file mode 100644
index 000000000..85ee70459
--- /dev/null
+++ b/app/portainer/rbac/views/roles/roles.html
@@ -0,0 +1,18 @@
+<rd-header>
+  <rd-header-title title-text="Roles">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.roles" ui-sref-opts="{reload: true}">
+      <i class="fa fa-sync" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Role management</rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <roles-datatable title-text="Roles" title-icon="fa-file-code" dataset="$ctrl.roles" table-key="roles"></roles-datatable>
+  </div>
+</div>
+
+<div class="row">
+  <access-viewer> </access-viewer>
+</div>
diff --git a/app/portainer/settings/authentication/auth-method-constants.js b/app/portainer/settings/authentication/auth-method-constants.js
new file mode 100644
index 000000000..dc9bf0a0c
--- /dev/null
+++ b/app/portainer/settings/authentication/auth-method-constants.js
@@ -0,0 +1,11 @@
+export const authenticationMethodTypesMap = {
+  INTERNAL: 1,
+  LDAP: 2,
+  OAUTH: 3,
+};
+
+export const authenticationMethodTypesLabels = {
+  [authenticationMethodTypesMap.INTERNAL]: 'Internal',
+  [authenticationMethodTypesMap.LDAP]: 'LDAP',
+  [authenticationMethodTypesMap.OAUTH]: 'OAuth',
+};
diff --git a/app/portainer/settings/authentication/auth-type-constants.js b/app/portainer/settings/authentication/auth-type-constants.js
new file mode 100644
index 000000000..84de1d959
--- /dev/null
+++ b/app/portainer/settings/authentication/auth-type-constants.js
@@ -0,0 +1,11 @@
+export const authenticationActivityTypesMap = {
+  AuthSuccess: 1,
+  AuthFailure: 2,
+  Logout: 3,
+};
+
+export const authenticationActivityTypesLabels = {
+  [authenticationActivityTypesMap.AuthSuccess]: 'Authentication success',
+  [authenticationActivityTypesMap.AuthFailure]: 'Authentication failure',
+  [authenticationActivityTypesMap.Logout]: 'Logout',
+};
diff --git a/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html b/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
new file mode 100644
index 000000000..aac43263a
--- /dev/null
+++ b/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
@@ -0,0 +1,14 @@
+<div class="col-sm-12 form-section-title">
+  Automatic user provisioning
+</div>
+<div class="form-group">
+  <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>
+</div>
diff --git a/app/portainer/settings/authentication/auto-user-provision-toggle/index.js b/app/portainer/settings/authentication/auto-user-provision-toggle/index.js
new file mode 100644
index 000000000..68c7b95d1
--- /dev/null
+++ b/app/portainer/settings/authentication/auto-user-provision-toggle/index.js
@@ -0,0 +1,9 @@
+export const autoUserProvisionToggle = {
+  templateUrl: './auto-user-provision-toggle.html',
+  transclude: {
+    description: 'fieldDescription',
+  },
+  bindings: {
+    ngModel: '=',
+  },
+};
diff --git a/app/portainer/settings/authentication/index.js b/app/portainer/settings/authentication/index.js
new file mode 100644
index 000000000..897e48042
--- /dev/null
+++ b/app/portainer/settings/authentication/index.js
@@ -0,0 +1,10 @@
+import angular from 'angular';
+
+import ldapModule from './ldap';
+
+import { autoUserProvisionToggle } from './auto-user-provision-toggle';
+
+export default angular
+  .module('portainer.settings.authentication', [ldapModule])
+
+  .component('autoUserProvisionToggle', autoUserProvisionToggle).name;
diff --git a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.controller.js b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.controller.js
new file mode 100644
index 000000000..41d29e0ef
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.controller.js
@@ -0,0 +1,62 @@
+import _ from 'lodash-es';
+import { HIDE_INTERNAL_AUTH } from '@/portainer/feature-flags/feature-ids';
+
+export default class AdSettingsController {
+  /* @ngInject */
+  constructor(LDAPService) {
+    this.LDAPService = LDAPService;
+
+    this.domainSuffix = '';
+    this.limitedFeatureId = HIDE_INTERNAL_AUTH;
+    this.onTlscaCertChange = this.onTlscaCertChange.bind(this);
+    this.searchUsers = this.searchUsers.bind(this);
+    this.searchGroups = this.searchGroups.bind(this);
+    this.parseDomainName = this.parseDomainName.bind(this);
+    this.onAccountChange = this.onAccountChange.bind(this);
+  }
+
+  parseDomainName(account) {
+    this.domainName = '';
+
+    if (!account || !account.includes('@')) {
+      return;
+    }
+
+    const [, domainName] = account.split('@');
+    if (!domainName) {
+      return;
+    }
+
+    const parts = _.compact(domainName.split('.'));
+    this.domainSuffix = parts.map((part) => `dc=${part}`).join(',');
+  }
+
+  onAccountChange(account) {
+    this.parseDomainName(account);
+  }
+
+  searchUsers() {
+    return this.LDAPService.users(this.settings);
+  }
+
+  searchGroups() {
+    return this.LDAPService.groups(this.settings);
+  }
+
+  onTlscaCertChange(file) {
+    this.tlscaCert = file;
+  }
+
+  addLDAPUrl() {
+    this.settings.URLs.push('');
+  }
+
+  removeLDAPUrl(index) {
+    this.settings.URLs.splice(index, 1);
+  }
+
+  $onInit() {
+    this.tlscaCert = this.settings.TLSCACert;
+    this.parseDomainName(this.settings.ReaderDN);
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
new file mode 100644
index 000000000..ffe36a0f4
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
@@ -0,0 +1,157 @@
+<ng-form class="ad-settings" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-class="limited-be">
+  <be-feature-indicator feature="$ctrl.limitedFeatureId" class="my-8 block"></be-feature-indicator>
+
+  <auto-user-provision-toggle ng-model="$ctrl.settings.AutoCreateUsers">
+    <field-description>
+      With automatic user provisioning enabled, Portainer will create user(s) automatically with standard user role and assign them to team(s) which matches to LDAP group name(s).
+      If disabled, users must be created in Portainer beforehand.
+    </field-description>
+  </auto-user-provision-toggle>
+
+  <div>
+    <div class="col-sm-12 form-section-title">
+      Information
+    </div>
+    <div class="form-group col-sm-12 text-muted small">
+      When using Microsoft AD authentication, Portainer will delegate user authentication to the Domain Controller(s) configured below; if there is no connectivity, Portainer will
+      fallback to internal authentication.
+    </div>
+  </div>
+
+  <div class="col-sm-12 form-section-title">
+    AD configuration
+  </div>
+
+  <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>
+        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>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="ldap_url" class="col-sm-3 col-lg-2 control-label text-left" style="display: flex; flex-wrap: wrap;">
+      AD Controller
+      <button
+        type="button"
+        class="label label-default interactive"
+        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
+      </button>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <div ng-repeat="url in $ctrl.settings.URLs track by $index" style="display: flex; margin-bottom: 10px;">
+        <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"
+          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+          limited-feature-tabindex="-1"
+        />
+        <button
+          ng-if="$index > 0"
+          class="btn btn-sm btn-danger"
+          type="button"
+          ng-click="$ctrl.removeLDAPUrl($index)"
+          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+          limited-feature-tabindex="-1"
+        >
+          <i class="fa fa-trash" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="ldap_username" class="col-sm-3 control-label text-left">
+      Service Account
+      <portainer-tooltip position="bottom" message="Account that will be used to search for users."></portainer-tooltip>
+    </label>
+    <div class="col-sm-9">
+      <input
+        type="text"
+        class="form-control"
+        id="ldap_username"
+        ng-model="$ctrl.settings.ReaderDN"
+        placeholder="reader@domain.tld"
+        ng-change="$ctrl.onAccountChange($ctrl.settings.ReaderDN)"
+        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+        limited-feature-tabindex="-1"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="ldap_password" class="col-sm-3 control-label text-left">
+      Service Account Password
+      <portainer-tooltip position="bottom" message="If you do not enter a password, Portainer will leave the current password unchanged."></portainer-tooltip>
+    </label>
+    <div class="col-sm-9">
+      <input
+        type="password"
+        class="form-control"
+        id="ldap_password"
+        ng-model="$ctrl.settings.Password"
+        placeholder="password"
+        autocomplete="new-password"
+        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+        limited-feature-tabindex="-1"
+      />
+    </div>
+  </div>
+
+  <ldap-connectivity-check
+    ng-if="!$ctrl.settings.TLSConfig.TLS && !$ctrl.settings.StartTLS"
+    settings="$ctrl.settings"
+    state="$ctrl.state"
+    connectivity-check="$ctrl.connectivityCheck"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-connectivity-check>
+
+  <ldap-settings-security
+    title="AD Connectivity Security"
+    settings="$ctrl.settings"
+    tlsca-cert="$ctrl.tlscaCert"
+    upload-in-progress="$ctrl.state.uploadInProgress"
+    on-tlsca-cert-change="($ctrl.onTlscaCertChange)"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-settings-security>
+
+  <ldap-connectivity-check
+    ng-if="$ctrl.settings.TLSConfig.TLS || $ctrl.settings.StartTLS"
+    settings="$ctrl.settings"
+    state="$ctrl.state"
+    connectivity-check="$ctrl.connectivityCheck"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-connectivity-check>
+
+  <ldap-user-search
+    style="margin-top: 5px;"
+    show-username-format="true"
+    settings="$ctrl.settings.SearchSettings"
+    domain-suffix="{{ $ctrl.domainSuffix }}"
+    base-filter="(objectClass=user)"
+    on-search-click="($ctrl.searchUsers)"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-user-search>
+
+  <ldap-group-search
+    style="margin-top: 5px;"
+    settings="$ctrl.settings.GroupSearchSettings"
+    domain-suffix="{{ $ctrl.domainSuffix }}"
+    base-filter="(objectClass=group)"
+    on-search-click="($ctrl.searchGroups)"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-group-search>
+
+  <ldap-settings-test-login settings="$ctrl.settings" limited-feature-id="$ctrl.limitedFeatureId"></ldap-settings-test-login>
+</ng-form>
diff --git a/app/portainer/settings/authentication/ldap/ad-settings/index.js b/app/portainer/settings/authentication/ldap/ad-settings/index.js
new file mode 100644
index 000000000..59a474097
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ad-settings/index.js
@@ -0,0 +1,12 @@
+import controller from './ad-settings.controller';
+
+export const adSettings = {
+  templateUrl: './ad-settings.html',
+  controller,
+  bindings: {
+    settings: '=',
+    tlscaCert: '=',
+    state: '=',
+    connectivityCheck: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/index.js b/app/portainer/settings/authentication/ldap/index.js
new file mode 100644
index 000000000..2b3612be8
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/index.js
@@ -0,0 +1,44 @@
+import angular from 'angular';
+
+import { adSettings } from './ad-settings';
+import { ldapSettings } from './ldap-settings';
+import { ldapSettingsCustom } from './ldap-settings-custom';
+import { ldapSettingsOpenLdap } from './ldap-settings-openldap';
+
+import { ldapConnectivityCheck } from './ldap-connectivity-check';
+import { ldapGroupsDatatable } from './ldap-groups-datatable';
+import { ldapGroupSearch } from './ldap-group-search';
+import { ldapGroupSearchItem } from './ldap-group-search-item';
+import { ldapUserSearch } from './ldap-user-search';
+import { ldapUserSearchItem } from './ldap-user-search-item';
+import { ldapSettingsDnBuilder } from './ldap-settings-dn-builder';
+import { ldapSettingsGroupDnBuilder } from './ldap-settings-group-dn-builder';
+import { ldapCustomGroupSearch } from './ldap-custom-group-search';
+import { ldapSettingsSecurity } from './ldap-settings-security';
+import { ldapSettingsTestLogin } from './ldap-settings-test-login';
+import { ldapCustomUserSearch } from './ldap-custom-user-search';
+import { ldapUsersDatatable } from './ldap-users-datatable';
+import { LDAPService } from './ldap.service';
+import { LDAP } from './ldap.rest';
+
+export default angular
+  .module('portainer.settings.authentication.ldap', [])
+  .service('LDAPService', LDAPService)
+  .service('LDAP', LDAP)
+  .component('ldapConnectivityCheck', ldapConnectivityCheck)
+  .component('ldapGroupsDatatable', ldapGroupsDatatable)
+  .component('ldapSettings', ldapSettings)
+  .component('adSettings', adSettings)
+  .component('ldapGroupSearch', ldapGroupSearch)
+  .component('ldapGroupSearchItem', ldapGroupSearchItem)
+  .component('ldapUserSearch', ldapUserSearch)
+  .component('ldapUserSearchItem', ldapUserSearchItem)
+  .component('ldapSettingsCustom', ldapSettingsCustom)
+  .component('ldapSettingsDnBuilder', ldapSettingsDnBuilder)
+  .component('ldapSettingsGroupDnBuilder', ldapSettingsGroupDnBuilder)
+  .component('ldapCustomGroupSearch', ldapCustomGroupSearch)
+  .component('ldapSettingsOpenLdap', ldapSettingsOpenLdap)
+  .component('ldapSettingsSecurity', ldapSettingsSecurity)
+  .component('ldapSettingsTestLogin', ldapSettingsTestLogin)
+  .component('ldapCustomUserSearch', ldapCustomUserSearch)
+  .component('ldapUsersDatatable', ldapUsersDatatable).name;
diff --git a/app/portainer/settings/authentication/ldap/ldap-connectivity-check/index.js b/app/portainer/settings/authentication/ldap/ldap-connectivity-check/index.js
new file mode 100644
index 000000000..93784cb42
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-connectivity-check/index.js
@@ -0,0 +1,9 @@
+export const ldapConnectivityCheck = {
+  templateUrl: './ldap-connectivity-check.html',
+  bindings: {
+    settings: '<',
+    state: '<',
+    connectivityCheck: '<',
+    limitedFeatureId: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html b/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
new file mode 100644
index 000000000..0d88ade53
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
@@ -0,0 +1,21 @@
+<div class="form-group">
+  <label for="ldap_password" class="col-sm-3 control-label text-left">
+    Connectivity check
+    <i class="fa fa-check green-icon" style="margin-left: 5px;" ng-if="$ctrl.state.successfulConnectivityCheck"></i>
+    <i class="fa fa-times red-icon" style="margin-left: 5px;" ng-if="$ctrl.state.failedConnectivityCheck"></i>
+  </label>
+  <div class="col-sm-9">
+    <button
+      type="button"
+      class="btn btn-primary btn-sm"
+      ng-disabled="($ctrl.state.connectivityCheckInProgress) || (!$ctrl.settings.URLs.length) || ((!$ctrl.settings.ReaderDN || !$ctrl.settings.Password) && !$ctrl.settings.AnonymousMode)"
+      ng-click="$ctrl.connectivityCheck()"
+      button-spinner="$ctrl.state.connectivityCheckInProgress"
+      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+      limited-feature-tabindex="-1"
+    >
+      <span ng-hide="$ctrl.state.connectivityCheckInProgress">Test connectivity</span>
+      <span ng-show="$ctrl.state.connectivityCheckInProgress">Testing connectivity...</span>
+    </button>
+  </div>
+</div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/index.js b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/index.js
new file mode 100644
index 000000000..1f51f32f8
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/index.js
@@ -0,0 +1,11 @@
+import controller from './ldap-custom-group-search.controller';
+
+export const ldapCustomGroupSearch = {
+  templateUrl: './ldap-custom-group-search.html',
+  controller,
+  bindings: {
+    settings: '=',
+    onSearchClick: '<',
+    limitedFeatureId: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.controller.js b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.controller.js
new file mode 100644
index 000000000..4c746f50a
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.controller.js
@@ -0,0 +1,34 @@
+export default class LdapCustomGroupSearchController {
+  /* @ngInject */
+  constructor($async, Notifications) {
+    Object.assign(this, { $async, Notifications });
+
+    this.groups = null;
+    this.showTable = false;
+
+    this.onRemoveClick = this.onRemoveClick.bind(this);
+    this.onAddClick = this.onAddClick.bind(this);
+    this.search = this.search.bind(this);
+  }
+
+  onAddClick() {
+    this.settings.push({ GroupBaseDN: '', GroupAttribute: '', GroupFilter: '' });
+  }
+
+  onRemoveClick(index) {
+    this.settings.splice(index, 1);
+  }
+
+  search() {
+    return this.$async(async () => {
+      try {
+        this.groups = null;
+        this.showTable = true;
+        this.groups = await this.onSearchClick();
+      } catch (error) {
+        this.showTable = false;
+        this.Notifications.error('Failure', error, 'Failed to search users');
+      }
+    });
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
new file mode 100644
index 000000000..e7db2ed5b
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
@@ -0,0 +1,117 @@
+<div class="col-sm-12 form-section-title" style="float: initial;">
+  Teams auto-population configurations
+</div>
+
+<rd-widget ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)" style="display: block; margin-bottom: 10px;">
+  <rd-widget-body>
+    <div class="form-group" ng-if="$index > 0" style="margin-bottom: 10px;">
+      <span class="col-sm-12 text-muted small">
+        Extra search configuration
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label for="ldap_group_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+        Group Base DN
+        <portainer-tooltip position="bottom" message="The distinguished name of the element from which the LDAP server will search for groups."></portainer-tooltip>
+      </label>
+      <div class="col-sm-8 col-md-4">
+        <input
+          type="text"
+          class="form-control"
+          id="ldap_group_basedn_{{ $index }}"
+          ng-model="config.GroupBaseDN"
+          placeholder="dc=ldap,dc=domain,dc=tld"
+          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+          limited-feature-class="limited-be no-border"
+          limited-feature-disabled
+          limited-feature-tabindex="-1"
+        />
+      </div>
+
+      <label for="ldap_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+        Group Membership Attribute
+        <portainer-tooltip position="bottom" message="LDAP attribute which denotes the group membership."></portainer-tooltip>
+      </label>
+      <div class="col-sm-8 col-md-4">
+        <input
+          type="text"
+          class="form-control"
+          id="ldap_group_att_{{ $index }}"
+          ng-model="config.GroupAttribute"
+          placeholder="member"
+          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+          limited-feature-class="limited-be no-border"
+          limited-feature-disabled
+          limited-feature-tabindex="-1"
+        />
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="ldap_group_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+        Group Filter
+        <portainer-tooltip position="bottom" 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 }">
+        <input
+          type="text"
+          class="form-control"
+          id="ldap_group_filter_{{ $index }}"
+          ng-model="config.GroupFilter"
+          placeholder="(objectClass=account)"
+          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+          limited-feature-class="limited-be no-border"
+          limited-feature-disabled
+          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)"
+          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+          limited-feature-disabled
+          limited-feature-tabindex="-1"
+        >
+          <i class="fa fa-trash" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </rd-widget-body>
+</rd-widget>
+
+<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()"
+      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+      limited-feature-tabindex="-1"
+      limited-feature-disabled
+    >
+      <i class="fa fa-plus-circle" aria-hidden="true"></i> add group search configuration
+    </button>
+  </div>
+  <div class="col-sm-12" style="margin-top: 10px;">
+    <button
+      class="btn btm-sm btn-primary"
+      type="button"
+      ng-click="$ctrl.search()"
+      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+      limited-feature-tabindex="-1"
+      limited-feature-disabled
+      limited-feature-class="limited-be"
+    >
+      Display User/Group matching
+    </button>
+    <be-feature-indicator feature="$ctrl.limitedFeatureId" class="space-left"></be-feature-indicator>
+  </div>
+</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>
+</div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/index.js b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/index.js
new file mode 100644
index 000000000..06fdedd24
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/index.js
@@ -0,0 +1,11 @@
+import controller from './ldap-custom-user-search.controller';
+
+export const ldapCustomUserSearch = {
+  templateUrl: './ldap-custom-user-search.html',
+  controller,
+  bindings: {
+    settings: '=',
+    onSearchClick: '<',
+    limitedFeatureId: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.controller.js b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.controller.js
new file mode 100644
index 000000000..e672e9ed4
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.controller.js
@@ -0,0 +1,33 @@
+export default class LdapCustomUserSearchController {
+  /* @ngInject */
+  constructor($async, Notifications) {
+    Object.assign(this, { $async, Notifications });
+
+    this.users = null;
+
+    this.onRemoveClick = this.onRemoveClick.bind(this);
+    this.onAddClick = this.onAddClick.bind(this);
+    this.search = this.search.bind(this);
+  }
+
+  onAddClick() {
+    this.settings.push({ BaseDN: '', UserNameAttribute: '', Filter: '' });
+  }
+
+  onRemoveClick(index) {
+    this.settings.splice(index, 1);
+  }
+
+  search() {
+    return this.$async(async () => {
+      try {
+        this.users = null;
+        this.showTable = true;
+        this.users = await this.onSearchClick();
+      } catch (error) {
+        this.showTable = false;
+        this.Notifications.error('Failure', error, 'Failed to search users');
+      }
+    });
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
new file mode 100644
index 000000000..331d8e8ab
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
@@ -0,0 +1,117 @@
+<div class="col-sm-12 form-section-title" style="float: initial;">
+  User search configurations
+</div>
+
+<rd-widget ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)" style="display: block; margin-bottom: 10px;">
+  <rd-widget-body>
+    <div class="form-group" ng-if="$index > 0" style="margin-bottom: 10px;">
+      <span class="col-sm-12 text-muted small">
+        Extra search configuration
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label for="ldap_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+        Base DN
+        <portainer-tooltip position="bottom" message="The distinguished name of the element from which the LDAP server will search for users."></portainer-tooltip>
+      </label>
+      <div class="col-sm-8 col-md-4">
+        <input
+          type="text"
+          class="form-control"
+          id="ldap_basedn_{{ $index }}"
+          ng-model="config.BaseDN"
+          placeholder="dc=ldap,dc=domain,dc=tld"
+          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+          limited-feature-class="limited-be no-border"
+          limited-feature-tabindex="-1"
+          limited-feature-disabled
+        />
+      </div>
+
+      <label for="ldap_username_att_{{ $index }}" class="col-sm-4 col-md-3 col-lg-2 control-label text-left">
+        Username attribute
+        <portainer-tooltip position="bottom" message="LDAP attribute which denotes the username."></portainer-tooltip>
+      </label>
+      <div class="col-sm-8 col-md-3 col-lg-4">
+        <input
+          type="text"
+          class="form-control"
+          id="ldap_username_att_{{ $index }}"
+          ng-model="config.UserNameAttribute"
+          placeholder="uid"
+          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+          limited-feature-class="limited-be no-border"
+          limited-feature-tabindex="-1"
+          limited-feature-disabled
+        />
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="ldap_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
+        Filter
+        <portainer-tooltip position="bottom" 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 }">
+        <input
+          type="text"
+          class="form-control"
+          id="ldap_filter_{{ $index }}"
+          ng-model="config.Filter"
+          placeholder="(objectClass=account)"
+          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+          limited-feature-class="limited-be no-border"
+          limited-feature-tabindex="-1"
+          limited-feature-disabled
+        />
+      </div>
+      <div class="col-sm-1" ng-if="$index > 0">
+        <button
+          class="btn btn-sm btn-danger"
+          type="button"
+          ng-click="$ctrl.onRemoveClick($index)"
+          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+          limited-feature-tabindex="-1"
+          limited-feature-disabled
+        >
+          <i class="fa fa-trash" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </rd-widget-body>
+</rd-widget>
+
+<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()"
+      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+      limited-feature-tabindex="-1"
+      limited-feature-disabled
+    >
+      <i class="fa fa-plus-circle" aria-hidden="true"></i> add user search configuration
+    </button>
+  </div>
+  <div class="col-sm-12" style="margin-top: 10px;">
+    <button
+      class="btn btm-sm btn-primary"
+      type="button"
+      ng-click="$ctrl.search()"
+      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
+      limited-feature-disabled
+      limited-feature-class="limited-be"
+      limited-feature-tabindex="-1"
+    >
+      Display Users
+    </button>
+    <be-feature-indicator feature="$ctrl.limitedFeatureId" class="space-left"></be-feature-indicator>
+  </div>
+</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>
+</div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search-item/index.js b/app/portainer/settings/authentication/ldap/ldap-group-search-item/index.js
new file mode 100644
index 000000000..62fcd5b1f
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search-item/index.js
@@ -0,0 +1,15 @@
+import controller from './ldap-group-search-item.controller';
+
+export const ldapGroupSearchItem = {
+  templateUrl: './ldap-group-search-item.html',
+  controller,
+  bindings: {
+    config: '=',
+    index: '<',
+    domainSuffix: '@',
+    baseFilter: '@',
+
+    onRemoveClick: '<',
+    limitedFeatureId: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.controller.js b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.controller.js
new file mode 100644
index 000000000..95a1cc31a
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.controller.js
@@ -0,0 +1,51 @@
+export default class LdapSettingsAdGroupSearchItemController {
+  /* @ngInject */
+  constructor(Notifications) {
+    Object.assign(this, { Notifications });
+
+    this.groups = [];
+
+    this.onChangeBaseDN = this.onChangeBaseDN.bind(this);
+  }
+
+  onChangeBaseDN(baseDN) {
+    this.config.GroupBaseDN = baseDN;
+  }
+
+  addGroup() {
+    this.groups.push({ type: 'ou', value: '' });
+  }
+
+  removeGroup($index) {
+    this.groups.splice($index, 1);
+    this.onGroupsChange();
+  }
+
+  onGroupsChange() {
+    const groupsFilter = this.groups.map(({ type, value }) => `(${type}=${value})`).join('');
+    this.onFilterChange(groupsFilter ? `(&${this.baseFilter}(|${groupsFilter}))` : `${this.baseFilter}`);
+  }
+
+  onFilterChange(filter) {
+    this.config.GroupFilter = filter;
+  }
+
+  parseGroupFilter() {
+    const match = this.config.GroupFilter.match(/^\(&\(objectClass=(\w+)\)\(\|((\(\w+=.+\))+)\)\)$/);
+    if (!match) {
+      return;
+    }
+
+    const [, , groupFilter = ''] = match;
+
+    this.groups = groupFilter
+      .slice(1, -1)
+      .split(')(')
+      .map((str) => str.split('='))
+      .map(([type, value]) => ({ type, value }));
+  }
+
+  $onInit() {
+    this.parseGroupFilter();
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
new file mode 100644
index 000000000..cb3791e28
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
@@ -0,0 +1,93 @@
+<rd-widget>
+  <rd-widget-body>
+    <div ng-if="$ctrl.index > 0" style="margin-bottom: 10px;">
+      <span class="text-muted small">
+        Extra search configuration
+      </span>
+      <button
+        class="btn btn-sm btn-danger"
+        type="button"
+        ng-click="$ctrl.onRemoveClick($ctrl.index)"
+        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+        limited-feature-tabindex="-1"
+      >
+        <i class="fa fa-trash" aria-hidden="true"></i>
+      </button>
+    </div>
+
+    <ldap-settings-dn-builder
+      label="Group Search Path (optional)"
+      suffix="{{ $ctrl.domainSuffix }}"
+      ng-model="$ctrl.config.GroupBaseDN"
+      on-change="($ctrl.onChangeBaseDN)"
+      limited-feature-id="$ctrl.limitedFeatureId"
+    ></ldap-settings-dn-builder>
+
+    <div class="form-group">
+      <label class="col-sm-4 col-md-2 control-label text-left">
+        Group Base DN
+      </label>
+      <div class="col-sm-8 col-md-10">
+        {{ $ctrl.config.GroupBaseDN }}
+      </div>
+    </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
+        </span>
+      </div>
+      <div class="col-sm-12" ng-if="$ctrl.groups.length">
+        <rd-widget>
+          <rd-widget-body>
+            <div class="form-group no-margin-last-child" ng-repeat="entry in $ctrl.groups">
+              <div class="col-sm-4">
+                <select
+                  class="form-control"
+                  ng-model="entry.type"
+                  ng-change="$ctrl.onGroupsChange()"
+                  limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+                  limited-feature-tabindex="-1"
+                >
+                  <option value="ou">OU Name</option>
+                  <option value="cn">Folder Name</option>
+                </select>
+              </div>
+              <div class="col-sm-5">
+                <input
+                  class="form-control"
+                  ng-model="entry.value"
+                  ng-change="$ctrl.onGroupsChange()"
+                  limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+                  limited-feature-tabindex="-1"
+                />
+              </div>
+              <div class="col-sm-3 text-right">
+                <button
+                  class="btn btn-sm 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>
+                </button>
+              </div>
+            </div>
+          </rd-widget-body>
+        </rd-widget>
+      </div>
+    </div>
+
+    <div class="form-group no-margin-last-child">
+      <label class="col-sm-4 col-md-2 control-label text-left">
+        Group Filter
+      </label>
+      <div class="col-sm-8 col-md-10">
+        {{ $ctrl.config.GroupFilter }}
+      </div>
+    </div>
+  </rd-widget-body>
+</rd-widget>
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search/index.js b/app/portainer/settings/authentication/ldap/ldap-group-search/index.js
new file mode 100644
index 000000000..8b610ddcb
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search/index.js
@@ -0,0 +1,14 @@
+import controller from './ldap-group-search.controller';
+
+export const ldapGroupSearch = {
+  templateUrl: './ldap-group-search.html',
+  controller,
+  bindings: {
+    settings: '=',
+    domainSuffix: '@',
+    baseFilter: '@',
+
+    onSearchClick: '<',
+    limitedFeatureId: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.controller.js b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.controller.js
new file mode 100644
index 000000000..c431bb230
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.controller.js
@@ -0,0 +1,36 @@
+import _ from 'lodash-es';
+
+export default class LdapGroupSearchController {
+  /* @ngInject */
+  constructor($async, Notifications) {
+    Object.assign(this, { $async, Notifications });
+
+    this.groups = null;
+
+    this.onRemoveClick = this.onRemoveClick.bind(this);
+    this.onAddClick = this.onAddClick.bind(this);
+    this.search = this.search.bind(this);
+  }
+
+  onAddClick() {
+    const lastSetting = _.last(this.settings);
+    this.settings.push({ GroupBaseDN: this.domainSuffix, GroupAttribute: lastSetting.GroupAttribute, GroupFilter: this.baseFilter });
+  }
+
+  onRemoveClick(index) {
+    this.settings.splice(index, 1);
+  }
+
+  search() {
+    return this.$async(async () => {
+      try {
+        this.groups = null;
+        this.showTable = true;
+        this.groups = await this.onSearchClick();
+      } catch (error) {
+        this.showTable = false;
+        this.Notifications.error('Failure', error, 'Failed to search users');
+      }
+    });
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
new file mode 100644
index 000000000..473aade4b
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
@@ -0,0 +1,39 @@
+<div class="col-sm-12 form-section-title" style="float: initial;">
+  Teams auto-population configurations
+</div>
+
+<div style="margin-top: 10px;" ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)">
+  <ldap-group-search-item
+    config="config"
+    domain-suffix="{{ $ctrl.domainSuffix }}"
+    index="$index"
+    base-filter="{{ $ctrl.baseFilter }}"
+    on-remove-click="($ctrl.onRemoveClick)"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-group-search-item>
+</div>
+
+<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()"
+      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+      limited-feature-tabindex="-1"
+    >
+      <i class="fa fa-plus-circle" aria-hidden="true"></i> add group search configuration
+    </button>
+  </div>
+  <div class="col-sm-12" style="margin-top: 10px;">
+    <button class="btn btm-sm btn-primary" type="button" ng-click="$ctrl.search()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
+      Display User/Group matching
+    </button>
+  </div>
+</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>
+</div>
diff --git a/app/portainer/components/datatables/roles-datatable/rolesDatatable.js b/app/portainer/settings/authentication/ldap/ldap-groups-datatable/index.js
similarity index 63%
rename from app/portainer/components/datatables/roles-datatable/rolesDatatable.js
rename to app/portainer/settings/authentication/ldap/ldap-groups-datatable/index.js
index 3cb7cf24a..28cacef0c 100644
--- a/app/portainer/components/datatables/roles-datatable/rolesDatatable.js
+++ b/app/portainer/settings/authentication/ldap/ldap-groups-datatable/index.js
@@ -1,5 +1,5 @@
-angular.module('portainer.app').component('rolesDatatable', {
-  templateUrl: './rolesDatatable.html',
+export const ldapGroupsDatatable = {
+  templateUrl: './ldap-groups-datatable.html',
   controller: 'GenericDatatableController',
   bindings: {
     titleText: '@',
@@ -9,4 +9,4 @@ angular.module('portainer.app').component('rolesDatatable', {
     orderBy: '@',
     reverseOrder: '<',
   },
-});
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html b/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html
new file mode 100644
index 000000000..061448f70
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html
@@ -0,0 +1,77 @@
+<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
+          ng-model-options="{ debounce: 300 }"
+        />
+      </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>
+              </th>
+              <th>
+                Groups
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
+              ng-class="{ active: item.Checked }"
+            >
+              <td>
+                {{ item.Name }}
+              </td>
+              <td>
+                <p ng-repeat="group in item.Groups" style="margin: 0;">{{ group }}</p>
+              </td>
+            </tr>
+            <tr ng-if="!$ctrl.dataset">
+              <td colspan="3" class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+              <td colspan="5" class="text-center text-muted">No groups found.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.dataset">
+        <div class="paginationControls">
+          <form class="form-inline">
+            <span class="limitSelector">
+              <span style="margin-right: 5px;">
+                Items per page
+              </span>
+              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+                <option value="0">All</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+            </span>
+            <dir-pagination-controls max-size="5"></dir-pagination-controls>
+          </form>
+        </div>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-custom/index.js b/app/portainer/settings/authentication/ldap/ldap-settings-custom/index.js
new file mode 100644
index 000000000..321223717
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-custom/index.js
@@ -0,0 +1,15 @@
+import controller from './ldap-settings-custom.controller';
+
+export const ldapSettingsCustom = {
+  templateUrl: './ldap-settings-custom.html',
+  controller,
+  bindings: {
+    settings: '=',
+    tlscaCert: '=',
+    state: '=',
+    onTlscaCertChange: '<',
+    connectivityCheck: '<',
+    onSearchUsersClick: '<',
+    onSearchGroupsClick: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.controller.js b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.controller.js
new file mode 100644
index 000000000..b4c3de4d5
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.controller.js
@@ -0,0 +1,15 @@
+import { EXTERNAL_AUTH_LDAP } from '@/portainer/feature-flags/feature-ids';
+
+export default class LdapSettingsCustomController {
+  constructor() {
+    this.limitedFeatureId = EXTERNAL_AUTH_LDAP;
+  }
+
+  addLDAPUrl() {
+    this.settings.URLs.push('');
+  }
+
+  removeLDAPUrl(index) {
+    this.settings.URLs.splice(index, 1);
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
new file mode 100644
index 000000000..00690e750
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
@@ -0,0 +1,119 @@
+<div>
+  <div class="col-sm-12 form-section-title">
+    Information
+  </div>
+  <div class="form-group col-sm-12 text-muted small">
+    When using LDAP authentication, Portainer will delegate user authentication to a LDAP server and fallback to internal authentication if LDAP authentication fails.
+  </div>
+</div>
+
+<div class="col-sm-12 form-section-title">
+  LDAP configuration
+</div>
+
+<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>
+      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>
+  </div>
+</div>
+
+<div class="form-group">
+  <label for="ldap_url" class="col-sm-3 col-lg-2 control-label text-left" style="display: flex; flex-wrap: wrap;">
+    LDAP Server
+    <button
+      type="button"
+      class="label label-default interactive"
+      style="border: 0;"
+      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
+    </button>
+  </label>
+  <div class="col-sm-9 col-lg-10">
+    <div ng-repeat="url in $ctrl.settings.URLs track by $index" style="display: flex; margin-bottom: 10px;">
+      <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>
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- Anonymous mode-->
+<div class="form-group">
+  <div class="col-sm-12">
+    <label for="anonymous_mode" class="control-label text-left">
+      Anonymous mode
+      <portainer-tooltip position="bottom" 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" /><i></i> </label>
+  </div>
+</div>
+<!-- !Anonymous mode-->
+
+<div ng-if="!$ctrl.settings.AnonymousMode">
+  <div class="form-group">
+    <label for="ldap_username" class="col-sm-3 col-lg-2 control-label text-left">
+      Reader DN
+      <portainer-tooltip position="bottom" message="Account that will be used to search for users."></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input type="text" class="form-control" id="ldap_username" ng-model="$ctrl.settings.ReaderDN" placeholder="{{ $ctrl.clickToSetValues.readerDNPlaceholder }}" />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
+      Password
+      <portainer-tooltip position="bottom" message="If you do not enter a password, Portainer will leave the current password unchanged."></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input type="password" class="form-control" id="ldap_password" ng-model="$ctrl.settings.Password" placeholder="password" autocomplete="new-password" />
+    </div>
+  </div>
+</div>
+
+<ldap-connectivity-check
+  ng-if="!$ctrl.settings.TLSConfig.TLS && !$ctrl.settings.StartTLS"
+  settings="$ctrl.settings"
+  state="$ctrl.state"
+  connectivity-check="$ctrl.connectivityCheck"
+></ldap-connectivity-check>
+
+<ldap-settings-security
+  settings="$ctrl.settings"
+  tlsca-cert="$ctrl.tlscaCert"
+  upload-in-progress="$ctrl.state.uploadInProgress"
+  on-tlsca-cert-change="($ctrl.onTlscaCertChange)"
+></ldap-settings-security>
+
+<ldap-connectivity-check
+  ng-if="$ctrl.settings.TLSConfig.TLS || $ctrl.settings.StartTLS"
+  settings="$ctrl.settings"
+  state="$ctrl.state"
+  connectivity-check="$ctrl.connectivityCheck"
+></ldap-connectivity-check>
+
+<ldap-custom-user-search
+  style="margin-top: 5px;"
+  settings="$ctrl.settings.SearchSettings"
+  on-search-click="($ctrl.onSearchUsersClick)"
+  limited-feature-id="$ctrl.limitedFeatureId"
+></ldap-custom-user-search>
+<ldap-custom-group-search
+  style="margin-top: 5px;"
+  settings="$ctrl.settings.GroupSearchSettings"
+  on-search-click="($ctrl.onSearchGroupsClick)"
+  limited-feature-id="$ctrl.limitedFeatureId"
+></ldap-custom-group-search>
+
+<div limited-feature-dir="{{ $ctrl.limitedFeatureId }}" limited-feature-class="limited-be">
+  <ldap-settings-test-login settings="$ctrl.settings" limited-feature-id="$ctrl.limitedFeatureId" show-be-indicator-if-needed="true"></ldap-settings-test-login>
+</div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/index.js b/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/index.js
new file mode 100644
index 000000000..32ab9fe29
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/index.js
@@ -0,0 +1,16 @@
+import controller from './ldap-settings-dn-builder.controller';
+
+export const ldapSettingsDnBuilder = {
+  templateUrl: './ldap-settings-dn-builder.html',
+  controller,
+  bindings: {
+    // ngModel: string (dc=,cn=,)
+    ngModel: '<',
+    // onChange(string) => void
+    onChange: '<',
+    // suffix: string (dc=,dc=,)
+    suffix: '@',
+    label: '@',
+    limitedFeatureId: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.controller.js b/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.controller.js
new file mode 100644
index 000000000..4b829967a
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.controller.js
@@ -0,0 +1,84 @@
+export default class LdapSettingsBaseDnBuilderController {
+  /* @ngInject */
+  constructor() {
+    this.entries = [];
+  }
+
+  addEntry() {
+    this.entries.push({ type: 'ou', value: '' });
+  }
+
+  removeEntry($index) {
+    this.entries.splice($index, 1);
+    this.onEntriesChange();
+  }
+
+  moveUp($index) {
+    if ($index <= 0) {
+      return;
+    }
+    arrayMove(this.entries, $index, $index - 1);
+    this.onEntriesChange();
+  }
+
+  moveDown($index) {
+    if ($index >= this.entries.length - 1) {
+      return;
+    }
+    arrayMove(this.entries, $index, $index + 1);
+    this.onEntriesChange();
+  }
+
+  onEntriesChange() {
+    const dn = this.entries
+      .filter(({ value }) => value)
+      .map(({ type, value }) => `${type}=${value}`)
+      .concat(this.suffix)
+      .filter((value) => value)
+      .join(',');
+
+    this.onChange(dn);
+  }
+
+  getOUValues(dn, domainSuffix = '') {
+    const regex = /(\w+)=(\w*),?/;
+    let ouValues = [];
+    let left = dn;
+    let match = left.match(regex);
+    while (match && left !== domainSuffix) {
+      const [, type, value] = match;
+      ouValues.push({ type, value });
+      left = left.replace(regex, '');
+      match = left.match(/(\w+)=(\w+),?/);
+    }
+    return ouValues;
+  }
+
+  parseBaseDN() {
+    this.entries = this.getOUValues(this.ngModel, this.suffix);
+  }
+
+  $onChanges({ suffix, ngModel }) {
+    if ((!suffix && !ngModel) || (suffix && suffix.isFirstChange())) {
+      return;
+    }
+    this.onEntriesChange();
+  }
+
+  $onInit() {
+    this.parseBaseDN();
+  }
+}
+
+function arrayMove(array, fromIndex, toIndex) {
+  if (!checkValidIndex(array, fromIndex) || !checkValidIndex(array, toIndex)) {
+    throw new Error('index is out of bounds');
+  }
+  const [item] = array.splice(fromIndex, 1);
+
+  array.splice(toIndex, 0, item);
+
+  function checkValidIndex(array, index) {
+    return index >= 0 && index <= array.length;
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html b/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html
new file mode 100644
index 000000000..ab1902981
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html
@@ -0,0 +1,69 @@
+<div class="form-group ldap-dn-builder">
+  <div class="col-sm-12" style="margin-bottom: 5px;">
+    <label class="control-label text-left">{{ $ctrl.label || 'DN entries' }}</label>
+    <button
+      type="button"
+      class="label label-default interactive"
+      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
+    </button>
+  </div>
+  <div class="col-sm-12" ng-if="$ctrl.entries.length">
+    <rd-widget>
+      <rd-widget-body>
+        <div class="form-group no-margin-last-child" ng-repeat="entry in $ctrl.entries">
+          <div class="col-sm-4">
+            <select class="form-control" ng-model="entry.type" ng-change="$ctrl.onEntriesChange()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
+              <option value="ou">OU Name</option>
+              <option value="cn">Folder Name</option>
+            </select>
+          </div>
+          <div class="col-sm-5">
+            <input
+              class="form-control"
+              ng-model="entry.value"
+              ng-change="$ctrl.onEntriesChange()"
+              limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+              limited-feature-tabindex="-1"
+            />
+          </div>
+          <div class="col-sm-3 text-right">
+            <button
+              class="btn btn-sm 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>
+            </button>
+            <button
+              class="btn btn-sm 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>
+            </button>
+            <button
+              class="btn btn-sm 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>
+            </button>
+          </div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/index.js b/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/index.js
new file mode 100644
index 000000000..21a2a8625
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/index.js
@@ -0,0 +1,18 @@
+import controller from './ldap-settings-group-dn-builder.controller';
+
+export const ldapSettingsGroupDnBuilder = {
+  templateUrl: './ldap-settings-group-dn-builder.html',
+  controller,
+  bindings: {
+    // ngModel: string (dc=,cn=,)
+    ngModel: '<',
+    // onChange(string) => void
+    onChange: '<',
+    // suffix: string (dc=,dc=,)
+    suffix: '@',
+    // index: int >= 0
+    index: '<',
+    onRemoveClick: '<',
+    limitedFeatureId: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.controller.js b/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.controller.js
new file mode 100644
index 000000000..32ee7f3ee
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.controller.js
@@ -0,0 +1,55 @@
+export default class LdapSettingsGroupDnBuilderController {
+  /* @ngInject */
+  constructor() {
+    this.groupName = '';
+    this.entries = '';
+
+    this.onEntriesChange = this.onEntriesChange.bind(this);
+    this.onGroupNameChange = this.onGroupNameChange.bind(this);
+    this.onGroupChange = this.onGroupChange.bind(this);
+    this.removeGroup = this.removeGroup.bind(this);
+  }
+
+  onEntriesChange(entries) {
+    this.onGroupChange(this.groupName, entries);
+  }
+
+  onGroupNameChange() {
+    this.onGroupChange(this.groupName, this.entries);
+  }
+
+  onGroupChange(groupName, entries) {
+    if (!groupName) {
+      return;
+    }
+    const groupNameEntry = `cn=${groupName}`;
+    this.onChange(this.index, entries || this.suffix ? `${groupNameEntry},${entries || this.suffix}` : groupNameEntry);
+  }
+
+  removeGroup() {
+    this.onRemoveClick(this.index);
+  }
+
+  parseEntries(value, suffix) {
+    if (value === suffix) {
+      this.groupName = '';
+      this.entries = suffix;
+      return;
+    }
+
+    const [groupName, entries] = this.ngModel.split(/,(.+)/);
+    this.groupName = groupName.replace('cn=', '');
+    this.entries = entries || '';
+  }
+
+  $onChange({ ngModel, suffix }) {
+    if ((!suffix || suffix.isFirstChange()) && !ngModel) {
+      return;
+    }
+    this.parseEntries(ngModel.value, suffix.value);
+  }
+
+  $onInit() {
+    this.parseEntries(this.ngModel, this.suffix);
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html b/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html
new file mode 100644
index 000000000..b00f63c47
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html
@@ -0,0 +1,37 @@
+<div class="form-group">
+  <label for="group-name-input" class="col-sm-4 control-label text-left">
+    Group Name
+  </label>
+  <div class="col-sm-7" style="padding-left: 0;">
+    <input
+      type="text"
+      class="form-control"
+      id="group-name-input"
+      ng-model="$ctrl.groupName"
+      ng-change="$ctrl.onGroupNameChange()"
+      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+      limited-feature-tabindex="-1"
+    />
+  </div>
+  <div class="col-sm-1">
+    <button
+      type="button"
+      class="btn btn-danger btn-sm"
+      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>
+    </button>
+  </div>
+</div>
+
+<ldap-settings-dn-builder
+  ng-model="$ctrl.entries"
+  label="Path to group"
+  suffix="{{ $ctrl.suffix }}"
+  on-change="($ctrl.onEntriesChange)"
+  on-remove-click="($ctrl.removeGroup)"
+  limited-feature-id="$ctrl.limitedFeatureId"
+></ldap-settings-dn-builder>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/index.js b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/index.js
new file mode 100644
index 000000000..b88f8008c
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/index.js
@@ -0,0 +1,16 @@
+import controller from './ldap-settings-openldap.controller';
+
+export const ldapSettingsOpenLdap = {
+  templateUrl: './ldap-settings-openldap.html',
+  controller,
+  bindings: {
+    settings: '=',
+    tlscaCert: '=',
+    state: '=',
+    connectivityCheck: '<',
+
+    onTlscaCertChange: '<',
+    onSearchUsersClick: '<',
+    onSearchGroupsClick: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.controller.js b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.controller.js
new file mode 100644
index 000000000..5115548d1
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.controller.js
@@ -0,0 +1,45 @@
+import { EXTERNAL_AUTH_LDAP } from '@/portainer/feature-flags/feature-ids';
+
+export default class LdapSettingsOpenLDAPController {
+  /* @ngInject */
+  constructor() {
+    this.domainSuffix = '';
+    this.limitedFeatureId = EXTERNAL_AUTH_LDAP;
+
+    this.findDomainSuffix = this.findDomainSuffix.bind(this);
+    this.parseDomainSuffix = this.parseDomainSuffix.bind(this);
+    this.onAccountChange = this.onAccountChange.bind(this);
+  }
+
+  findDomainSuffix() {
+    const serviceAccount = this.settings.ReaderDN;
+    let domainSuffix = this.parseDomainSuffix(serviceAccount);
+    if (!domainSuffix && this.settings.SearchSettings.length > 0) {
+      const searchSettings = this.settings.SearchSettings[0];
+      domainSuffix = this.parseDomainSuffix(searchSettings.BaseDN);
+    }
+
+    this.domainSuffix = domainSuffix;
+  }
+
+  parseDomainSuffix(string = '') {
+    const index = string.toLowerCase().indexOf('dc=');
+    return index !== -1 ? string.substring(index) : '';
+  }
+
+  onAccountChange(serviceAccount) {
+    this.domainSuffix = this.parseDomainSuffix(serviceAccount);
+  }
+
+  addLDAPUrl() {
+    this.settings.URLs.push('');
+  }
+
+  removeLDAPUrl(index) {
+    this.settings.URLs.splice(index, 1);
+  }
+
+  $onInit() {
+    this.findDomainSuffix();
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
new file mode 100644
index 000000000..b6893961b
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
@@ -0,0 +1,187 @@
+<ng-form limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-class="limited-be" class="ldap-settings-openldap">
+  <be-feature-indicator feature="$ctrl.limitedFeatureId" class="my-8 block"></be-feature-indicator>
+
+  <div>
+    <div class="col-sm-12 form-section-title">
+      Information
+    </div>
+    <div class="form-group col-sm-12 text-muted small">
+      When using LDAP authentication, Portainer will delegate user authentication to a LDAP server and fallback to internal authentication if LDAP authentication fails.
+    </div>
+  </div>
+
+  <div class="col-sm-12 form-section-title">
+    LDAP configuration
+  </div>
+
+  <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>
+        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>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="ldap_url" class="col-sm-3 col-lg-2 control-label text-left" style="display: flex; flex-wrap: wrap;">
+      LDAP Server
+      <button
+        type="button"
+        class="label label-default interactive"
+        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
+      </button>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <div ng-repeat="url in $ctrl.settings.URLs track by $index" style="display: flex; margin-bottom: 10px;">
+        <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"
+          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+          limited-feature-tabindex="-1"
+        />
+        <button
+          ng-if="$index > 0"
+          class="btn btn-sm btn-danger"
+          type="button"
+          ng-click="$ctrl.removeLDAPUrl($index)"
+          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+          limited-feature-tabindex="-1"
+        >
+          <i class="fa fa-trash" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Anonymous mode-->
+  <div class="form-group">
+    <label for="anonymous_mode" class="control-label text-left col-sm-3" style="padding-top: 0;">
+      Anonymous mode
+      <portainer-tooltip position="bottom" message="Enable this option if the server is configured for Anonymous access."></portainer-tooltip>
+    </label>
+    <div class="col-sm-9">
+      <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>
+      </label>
+    </div>
+  </div>
+  <!-- !Anonymous mode-->
+
+  <div ng-if="!$ctrl.settings.AnonymousMode">
+    <div class="form-group">
+      <label for="ldap_username" class="col-sm-3 control-label text-left">
+        Reader DN
+        <portainer-tooltip position="bottom" message="Account that will be used to search for users."></portainer-tooltip>
+      </label>
+      <div class="col-sm-9">
+        <input
+          type="text"
+          class="form-control"
+          id="ldap_username"
+          ng-model="$ctrl.settings.ReaderDN"
+          placeholder="cn=user,dc=domain,dc=tld"
+          ng-change="$ctrl.onAccountChange($ctrl.settings.ReaderDN)"
+          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+          limited-feature-tabindex="-1"
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="ldap_password" class="col-sm-3 control-label text-left">
+        Password
+        <portainer-tooltip position="bottom" message="If you do not enter a password, Portainer will leave the current password unchanged."></portainer-tooltip>
+      </label>
+      <div class="col-sm-9">
+        <input
+          type="password"
+          class="form-control"
+          id="ldap_password"
+          ng-model="$ctrl.settings.Password"
+          placeholder="password"
+          autocomplete="new-password"
+          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+          limited-feature-tabindex="-1"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group" ng-if="$ctrl.settings.AnonymousMode">
+    <label for="ldap_domain_root" class="col-sm-3 control-label text-left">
+      Domain root
+    </label>
+    <div class="col-sm-9">
+      <input
+        type="text"
+        class="form-control"
+        id="ldap_domain_root"
+        ng-model="$ctrl.domainSuffix"
+        placeholder="dc=domain,dc=tld"
+        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+        limited-feature-tabindex="-1"
+      />
+    </div>
+  </div>
+
+  <ldap-connectivity-check
+    ng-if="!$ctrl.settings.TLSConfig.TLS && !$ctrl.settings.StartTLS"
+    settings="$ctrl.settings"
+    state="$ctrl.state"
+    connectivity-check="$ctrl.connectivityCheck"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-connectivity-check>
+
+  <ldap-settings-security
+    title="Connectivity Security"
+    settings="$ctrl.settings"
+    tlsca-cert="$ctrl.tlscaCert"
+    upload-in-progress="$ctrl.state.uploadInProgress"
+    on-tlsca-cert-change="($ctrl.onTlscaCertChange)"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-settings-security>
+
+  <ldap-connectivity-check
+    ng-if="$ctrl.settings.TLSConfig.TLS || $ctrl.settings.StartTLS"
+    settings="$ctrl.settings"
+    state="$ctrl.state"
+    connectivity-check="$ctrl.connectivityCheck"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-connectivity-check>
+
+  <ldap-user-search
+    style="margin-top: 5px;"
+    settings="$ctrl.settings.SearchSettings"
+    domain-suffix="{{ $ctrl.domainSuffix }}"
+    base-filter="(objectClass=inetOrgPerson)"
+    on-search-click="($ctrl.onSearchUsersClick)"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-user-search>
+
+  <ldap-group-search
+    style="margin-top: 5px;"
+    settings="$ctrl.settings.GroupSearchSettings"
+    domain-suffix="{{ $ctrl.domainSuffix }}"
+    base-filter="(objectClass=groupOfNames)"
+    on-search-click="($ctrl.onSearchGroupsClick)"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-group-search>
+
+  <ldap-settings-test-login settings="$ctrl.settings" limited-feature-id="$ctrl.limitedFeatureId"></ldap-settings-test-login>
+</ng-form>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-security/index.js b/app/portainer/settings/authentication/ldap/ldap-settings-security/index.js
new file mode 100644
index 000000000..75f9fce5e
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-security/index.js
@@ -0,0 +1,11 @@
+export const ldapSettingsSecurity = {
+  templateUrl: './ldap-settings-security.html',
+  bindings: {
+    settings: '=',
+    tlscaCert: '<',
+    onTlscaCertChange: '<',
+    uploadInProgress: '<',
+    title: '@',
+    limitedFeatureId: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html b/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
new file mode 100644
index 000000000..6bab54bff
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
@@ -0,0 +1,72 @@
+<div class="col-sm-12 form-section-title">
+  {{ $ctrl.title || 'LDAP security' }}
+</div>
+
+<!-- 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;">
+    Use StartTLS
+    <portainer-tooltip
+      position="bottom"
+      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">
+    <label class="switch">
+      <input type="checkbox" ng-model="$ctrl.settings.StartTLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+    </label>
+  </div>
+</div>
+<!-- !starttls -->
+
+<!-- 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;">
+    Use TLS
+    <portainer-tooltip position="bottom" 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">
+    <label class="switch">
+      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+    </label>
+  </div>
+</div>
+<!-- !tls-checkbox -->
+
+<!-- tls-skip-verify -->
+<div class="form-group">
+  <label for="tls" class="control-label col-sm-3 text-left" style="padding-top: 0;">
+    Skip verification of server certificate
+    <portainer-tooltip position="bottom" message="Skip the verification of the server TLS certificate. Not recommended on unsecured networks."></portainer-tooltip>
+  </label>
+  <div class="col-sm-9">
+    <label class="switch">
+      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLSSkipVerify" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+    </label>
+  </div>
+</div>
+<!-- !tls-skip-verify -->
+
+<!-- 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">
+    <button
+      type="button"
+      class="btn btn-sm btn-primary"
+      ngf-select="$ctrl.onTlscaCertChange($file)"
+      ng-model="$ctrl.tlscaCert"
+      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+      limited-feature-tabindex="-1"
+    >
+      Select file
+    </button>
+    <span style="margin-left: 5px;">
+      {{ $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>
+    </span>
+  </div>
+</div>
+<!-- !ca-input -->
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/index.js b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/index.js
new file mode 100644
index 000000000..b5298616c
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/index.js
@@ -0,0 +1,11 @@
+import controller from './ldap-settings-test-login.controller';
+
+export const ldapSettingsTestLogin = {
+  templateUrl: './ldap-settings-test-login.html',
+  controller,
+  bindings: {
+    settings: '=',
+    limitedFeatureId: '<',
+    showBeIndicatorIfNeeded: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.controller.js b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.controller.js
new file mode 100644
index 000000000..811f70aa9
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.controller.js
@@ -0,0 +1,31 @@
+const TEST_STATUS = {
+  LOADING: 'LOADING',
+  SUCCESS: 'SUCCESS',
+  FAILURE: 'FAILURE',
+};
+
+export default class LdapSettingsTestLogin {
+  /* @ngInject */
+  constructor($async, LDAPService, Notifications) {
+    Object.assign(this, { $async, LDAPService, Notifications });
+
+    this.TEST_STATUS = TEST_STATUS;
+
+    this.state = {
+      testStatus: '',
+    };
+  }
+
+  async testLogin(username, password) {
+    return this.$async(async () => {
+      this.state.testStatus = TEST_STATUS.LOADING;
+      try {
+        const response = await this.LDAPService.testLogin(this.settings, username, password);
+        this.state.testStatus = response.valid ? TEST_STATUS.SUCCESS : TEST_STATUS.FAILURE;
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to test login');
+        this.state.testStatus = TEST_STATUS.FAILURE;
+      }
+    });
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
new file mode 100644
index 000000000..5a0871a61
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
@@ -0,0 +1,45 @@
+<div class="col-sm-12 form-section-title">
+  Test login
+</div>
+<div class="form-inline">
+  <div class="form-group" style="margin: 0;">
+    <label for="ldap_test_username" style="font-size: 0.9em; margin-right: 5px;">
+      Username
+    </label>
+    <input type="text" class="form-control" id="ldap_test_username" ng-model="$ctrl.username" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+  </div>
+
+  <div class="form-group" style="margin: 0;">
+    <label for="ldap_test_password" style="font-size: 0.9em; margin-right: 5px;">
+      Password
+    </label>
+    <input
+      type="password"
+      class="form-control"
+      id="ldap_test_password"
+      ng-model="$ctrl.password"
+      autocomplete="new-password"
+      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+      limited-feature-tabindex="-1"
+    />
+  </div>
+
+  <div class="form-group" style="margin: 0;">
+    <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-disabled
+      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>
+
+  <be-feature-indicator ng-if="$ctrl.showBeIndicatorIfNeeded" feature="$ctrl.limitedFeatureId" class="space-left"></be-feature-indicator>
+</div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings.model.js b/app/portainer/settings/authentication/ldap/ldap-settings.model.js
new file mode 100644
index 000000000..d14711eec
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings.model.js
@@ -0,0 +1,54 @@
+export function buildLdapSettingsModel() {
+  return {
+    AnonymousMode: true,
+    ReaderDN: '',
+    URLs: [''],
+    ServerType: 0,
+    TLSConfig: {
+      TLS: false,
+      TLSSkipVerify: false,
+    },
+    StartTLS: false,
+    SearchSettings: [
+      {
+        BaseDN: '',
+        Filter: '',
+        UserNameAttribute: '',
+      },
+    ],
+    GroupSearchSettings: [
+      {
+        GroupBaseDN: '',
+        GroupFilter: '',
+        GroupAttribute: '',
+      },
+    ],
+    AutoCreateUsers: true,
+  };
+}
+
+export function buildAdSettingsModel() {
+  const settings = buildLdapSettingsModel();
+
+  settings.ServerType = 2;
+  settings.AnonymousMode = false;
+  settings.SearchSettings[0].UserNameAttribute = 'sAMAccountName';
+  settings.SearchSettings[0].Filter = '(objectClass=user)';
+  settings.GroupSearchSettings[0].GroupAttribute = 'member';
+  settings.GroupSearchSettings[0].GroupFilter = '(objectClass=group)';
+
+  return settings;
+}
+
+export function buildOpenLDAPSettingsModel() {
+  const settings = buildLdapSettingsModel();
+
+  settings.ServerType = 1;
+  settings.AnonymousMode = false;
+  settings.SearchSettings[0].UserNameAttribute = 'uid';
+  settings.SearchSettings[0].Filter = '(objectClass=inetOrgPerson)';
+  settings.GroupSearchSettings[0].GroupAttribute = 'member';
+  settings.GroupSearchSettings[0].GroupFilter = '(objectClass=groupOfNames)';
+
+  return settings;
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings/index.js b/app/portainer/settings/authentication/ldap/ldap-settings/index.js
new file mode 100644
index 000000000..90e86951e
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings/index.js
@@ -0,0 +1,11 @@
+import controller from './ldap-settings.controller';
+
+export const ldapSettings = {
+  templateUrl: './ldap-settings.html',
+  controller,
+  bindings: {
+    settings: '=',
+    state: '<',
+    connectivityCheck: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.controller.js b/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.controller.js
new file mode 100644
index 000000000..b989393ab
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.controller.js
@@ -0,0 +1,67 @@
+const SERVER_TYPES = {
+  CUSTOM: 0,
+  OPEN_LDAP: 1,
+  AD: 2,
+};
+
+import { buildOpenLDAPSettingsModel } from '@/portainer/settings/authentication/ldap/ldap-settings.model';
+import { EXTERNAL_AUTH_LDAP } from '@/portainer/feature-flags/feature-ids';
+
+const DEFAULT_GROUP_FILTER = '(objectClass=groupOfNames)';
+const DEFAULT_USER_FILTER = '(objectClass=inetOrgPerson)';
+
+export default class LdapSettingsController {
+  /* @ngInject */
+  constructor(LDAPService) {
+    Object.assign(this, { LDAPService, SERVER_TYPES });
+
+    this.tlscaCert = null;
+
+    this.boxSelectorOptions = [
+      { id: 'ldap_custom', value: SERVER_TYPES.CUSTOM, label: 'Custom', icon: 'fa fa-server' },
+      { id: 'ldap_openldap', value: SERVER_TYPES.OPEN_LDAP, label: 'OpenLDAP', icon: 'fa fa-server', feature: EXTERNAL_AUTH_LDAP },
+    ];
+
+    this.onTlscaCertChange = this.onTlscaCertChange.bind(this);
+    this.searchUsers = this.searchUsers.bind(this);
+    this.searchGroups = this.searchGroups.bind(this);
+    this.onChangeServerType = this.onChangeServerType.bind(this);
+  }
+
+  onTlscaCertChange(file) {
+    this.tlscaCert = file;
+  }
+
+  $onInit() {
+    this.tlscaCert = this.settings.TLSCACert;
+  }
+
+  onChangeServerType(serverType) {
+    switch (serverType) {
+      case SERVER_TYPES.OPEN_LDAP:
+        return this.onChangeToOpenLDAP();
+      default:
+        break;
+    }
+  }
+
+  onChangeToOpenLDAP() {
+    this.settings = buildOpenLDAPSettingsModel();
+  }
+
+  searchUsers() {
+    const settings = {
+      ...this.settings,
+      SearchSettings: this.settings.SearchSettings.map((search) => ({ ...search, Filter: search.Filter || DEFAULT_USER_FILTER })),
+    };
+    return this.LDAPService.users(settings);
+  }
+
+  searchGroups() {
+    const settings = {
+      ...this.settings,
+      GroupSearchSettings: this.settings.GroupSearchSettings.map((search) => ({ ...search, GroupFilter: search.GroupFilter || DEFAULT_GROUP_FILTER })),
+    };
+    return this.LDAPService.groups(settings);
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html b/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html
new file mode 100644
index 000000000..ccad9ca6b
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.html
@@ -0,0 +1,41 @@
+<div>
+  <auto-user-provision-toggle ng-model="$ctrl.settings.AutoCreateUsers">
+    <field-description>
+      With automatic user provisioning enabled, Portainer will create user(s) automatically with standard user role and assign them to team(s) which matches to LDAP group name(s).
+      If disabled, users must be created in Portainer beforehand.
+    </field-description>
+  </auto-user-provision-toggle>
+
+  <div class="col-sm-12 form-section-title">
+    Server Type
+  </div>
+
+  <box-selector
+    style="margin-bottom: 0;"
+    radio-name="ldap-server-type-selector"
+    ng-model="$ctrl.settings.ServerType"
+    options="$ctrl.boxSelectorOptions"
+    on-change="($ctrl.onChangeServerType)"
+  ></box-selector>
+
+  <ldap-settings-custom
+    ng-if="$ctrl.settings.ServerType === $ctrl.SERVER_TYPES.CUSTOM"
+    settings="$ctrl.settings"
+    tlsca-cert="$ctrl.tlscaCert"
+    state="$ctrl.state"
+    on-tlsca-cert-change="($ctrl.onTlscaCertChange)"
+    connectivity-check="$ctrl.connectivityCheck"
+    on-search-users-click="($ctrl.searchUsers)"
+    on-search-groups-click="($ctrl.searchGroups)"
+  ></ldap-settings-custom>
+  <ldap-settings-open-ldap
+    ng-if="$ctrl.settings.ServerType === $ctrl.SERVER_TYPES.OPEN_LDAP"
+    settings="$ctrl.settings"
+    tlsca-cert="$ctrl.tlscaCert"
+    state="$ctrl.state"
+    on-tlsca-cert-change="($ctrl.onTlscaCertChange)"
+    connectivity-check="$ctrl.connectivityCheck"
+    on-search-users-click="($ctrl.searchUsers)"
+    on-search-groups-click="($ctrl.searchGroups)"
+  ></ldap-settings-open-ldap>
+</div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search-item/index.js b/app/portainer/settings/authentication/ldap/ldap-user-search-item/index.js
new file mode 100644
index 000000000..32dd36786
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search-item/index.js
@@ -0,0 +1,15 @@
+import controller from './ldap-user-search-item.controller';
+
+export const ldapUserSearchItem = {
+  templateUrl: './ldap-user-search-item.html',
+  controller,
+  bindings: {
+    config: '=',
+    index: '<',
+    showUsernameFormat: '<',
+    domainSuffix: '@',
+    baseFilter: '@',
+    onRemoveClick: '<',
+    limitedFeatureId: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.controller.js b/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.controller.js
new file mode 100644
index 000000000..a42ffdc72
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.controller.js
@@ -0,0 +1,67 @@
+export default class LdapUserSearchItemController {
+  /* @ngInject */
+  constructor() {
+    this.groups = [];
+
+    this.onBaseDNChange = this.onBaseDNChange.bind(this);
+    this.onGroupChange = this.onGroupChange.bind(this);
+    this.onGroupsChange = this.onGroupsChange.bind(this);
+    this.removeGroup = this.removeGroup.bind(this);
+  }
+
+  onBaseDNChange(baseDN) {
+    this.config.BaseDN = baseDN;
+  }
+
+  onGroupChange(index, group) {
+    this.groups[index] = group;
+    this.onGroupsChange(this.groups);
+  }
+
+  onGroupsChange(groups) {
+    this.config.Filter = this.generateUserFilter(groups);
+  }
+
+  removeGroup(index) {
+    this.groups.splice(index, 1);
+    this.onGroupsChange(this.groups);
+  }
+
+  addGroup() {
+    this.groups.push(this.domainSuffix ? `cn=,${this.domainSuffix}` : 'cn=');
+  }
+
+  generateUserFilter(groups) {
+    const filteredGroups = groups.filter((group) => group !== this.domainSuffix);
+
+    if (!filteredGroups.length) {
+      return this.baseFilter;
+    }
+
+    const groupsFilter = filteredGroups.map((group) => `(memberOf=${group})`);
+
+    return `(&${this.baseFilter}${groupsFilter.length > 1 ? `(|${groupsFilter.join('')})` : groupsFilter[0]})`;
+  }
+
+  parseFilter() {
+    const filter = this.config.Filter;
+    if (filter === this.baseFilter) {
+      return;
+    }
+
+    if (!filter.includes('|')) {
+      const index = filter.indexOf('memberOf=');
+      if (index > -1) {
+        this.groups = [filter.slice(index + 9, -2)];
+      }
+      return;
+    }
+
+    const members = filter.slice(filter.indexOf('|') + 2, -3);
+    this.groups = members.split(')(').map((member) => member.replace('memberOf=', ''));
+  }
+
+  $onInit() {
+    this.parseFilter();
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html b/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html
new file mode 100644
index 000000000..4e75783ff
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html
@@ -0,0 +1,106 @@
+<rd-widget>
+  <rd-widget-body>
+    <div ng-if="$ctrl.index > 0" style="margin-bottom: 10px;">
+      <span class="text-muted small">
+        Extra search configuration
+      </span>
+      <button
+        ng-if="$ctrl.index > 0"
+        class="btn btn-sm btn-danger"
+        type="button"
+        ng-click="$ctrl.onRemoveClick($ctrl.index)"
+        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+        limited-feature-tabindex="-1"
+      >
+        <i class="fa fa-trash" aria-hidden="true"></i>
+      </button>
+    </div>
+
+    <div class="form-group" ng-if="$ctrl.showUsernameFormat">
+      <div class="col-sm-4" style="margin-bottom: 5px;">
+        <label class="control-label text-left">Username Format</label>
+      </div>
+      <div class="col-sm-8">
+        <div class="input-group">
+          <div class="input-group-btn">
+            <button
+              class="btn btn-primary"
+              ng-model="$ctrl.config.UserNameAttribute"
+              uib-btn-radio="'sAMAccountName'"
+              style="margin-left: 0px;"
+              limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+              limited-feature-tabindex="-1"
+              >username</button
+            >
+            <button
+              class="btn btn-primary"
+              ng-model="$ctrl.config.UserNameAttribute"
+              uib-btn-radio="'userPrincipalName'"
+              limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+              limited-feature-tabindex="-1"
+              >user@domainname</button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="col-sm-4 control-label text-left">
+        Root Domain
+      </label>
+      <div class="col-sm-8">
+        {{ $ctrl.config.BaseDN }}
+      </div>
+    </div>
+
+    <ldap-settings-dn-builder
+      ng-model="$ctrl.config.BaseDN"
+      label="User Search Path (optional)"
+      suffix="{{ $ctrl.domainSuffix }}"
+      on-change="($ctrl.onBaseDNChange)"
+      limited-feature-id="$ctrl.limitedFeatureId"
+    ></ldap-settings-dn-builder>
+
+    <div class="form-group no-margin-last-child">
+      <div class="col-sm-12" style="margin-bottom: 5px;">
+        <label class="control-label text-left">Allowed Groups (optional)</label>
+        <button
+          type="button"
+          class="label label-default interactive"
+          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
+        </button>
+      </div>
+      <div class="col-sm-12">
+        <div ng-repeat="group in $ctrl.groups track by $index" style="margin-bottom: 10px;">
+          <rd-widget>
+            <rd-widget-body>
+              <ldap-settings-group-dn-builder
+                ng-model="group"
+                index="$index"
+                suffix="{{ $ctrl.domainSuffix }}"
+                on-change="($ctrl.onGroupChange)"
+                on-remove-click="($ctrl.removeGroup)"
+                limited-feature-id="$ctrl.limitedFeatureId"
+              ></ldap-settings-group-dn-builder>
+            </rd-widget-body>
+          </rd-widget>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="col-sm-4 control-label text-left">
+        User Filter
+      </label>
+      <div class="col-sm-8">
+        {{ $ctrl.config.Filter }}
+      </div>
+    </div>
+  </rd-widget-body>
+</rd-widget>
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search/index.js b/app/portainer/settings/authentication/ldap/ldap-user-search/index.js
new file mode 100644
index 000000000..380ddcfd3
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search/index.js
@@ -0,0 +1,15 @@
+import controller from './ldap-user-search.controller';
+
+export const ldapUserSearch = {
+  templateUrl: './ldap-user-search.html',
+  controller,
+  bindings: {
+    settings: '=',
+    domainSuffix: '@',
+    showUsernameFormat: '<',
+    baseFilter: '@',
+    limitedFeatureId: '<',
+
+    onSearchClick: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.controller.js b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.controller.js
new file mode 100644
index 000000000..6d5ff11eb
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.controller.js
@@ -0,0 +1,38 @@
+import _ from 'lodash';
+
+export default class LdapUserSearchController {
+  /* @ngInject */
+  constructor($async, Notifications) {
+    Object.assign(this, { $async, Notifications });
+
+    this.users = null;
+    this.showTable = false;
+
+    this.onRemoveClick = this.onRemoveClick.bind(this);
+    this.onAddClick = this.onAddClick.bind(this);
+    this.search = this.search.bind(this);
+  }
+
+  onAddClick() {
+    const lastSetting = _.last(this.settings);
+    this.settings.push({ BaseDN: this.domainSuffix, UserNameAttribute: lastSetting.UserNameAttribute, Filter: this.baseFilter });
+  }
+
+  onRemoveClick(index) {
+    this.settings.splice(index, 1);
+  }
+
+  search() {
+    return this.$async(async () => {
+      try {
+        this.users = null;
+        this.showTable = true;
+        const users = await this.onSearchClick();
+        this.users = _.compact(users);
+      } catch (error) {
+        this.Notifications.error('Failure', error, 'Failed to search users');
+        this.showTable = false;
+      }
+    });
+  }
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
new file mode 100644
index 000000000..ae8741fce
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
@@ -0,0 +1,40 @@
+<div class="col-sm-12 form-section-title" style="float: initial;">
+  User search configurations
+</div>
+
+<div style="margin-top: 10px;" ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)">
+  <ldap-user-search-item
+    index="$index"
+    config="config"
+    domain-suffix="{{ $ctrl.domainSuffix }}"
+    show-username-format="$ctrl.showUsernameFormat"
+    base-filter="{{ $ctrl.baseFilter }}"
+    on-remove-click="($ctrl.onRemoveClick)"
+    limited-feature-id="$ctrl.limitedFeatureId"
+  ></ldap-user-search-item>
+</div>
+
+<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()"
+      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+      limited-feature-tabindex="-1"
+    >
+      <i class="fa fa-plus-circle" aria-hidden="true"></i> add user search configuration
+    </button>
+  </div>
+  <div class="col-sm-12" style="margin-top: 10px;">
+    <button class="btn btm-sm btn-primary" type="button" ng-click="$ctrl.search()" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1">
+      Display Users
+    </button>
+  </div>
+</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>
+</div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-users-datatable/index.js b/app/portainer/settings/authentication/ldap/ldap-users-datatable/index.js
new file mode 100644
index 000000000..4c80771d4
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-users-datatable/index.js
@@ -0,0 +1,12 @@
+export const ldapUsersDatatable = {
+  templateUrl: './ldap-users-datatable.html',
+  controller: 'GenericDatatableController',
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    dataset: '<',
+    tableKey: '@',
+    orderBy: '@',
+    reverseOrder: '<',
+  },
+};
diff --git a/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html b/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html
new file mode 100644
index 000000000..9817654f2
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html
@@ -0,0 +1,71 @@
+<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
+          ng-model-options="{ debounce: 300 }"
+        />
+      </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>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit)) track by $index"
+              ng-class="{ active: item.Checked }"
+            >
+              <td>
+                <a ui-sref="portainer.groups.group({id: item.Id})">{{ item }}</a>
+              </td>
+            </tr>
+            <tr ng-if="!$ctrl.dataset">
+              <td colspan="3" class="text-center text-muted">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+              <td colspan="5" class="text-center text-muted">No users found.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.dataset">
+        <div class="paginationControls">
+          <form class="form-inline">
+            <span class="limitSelector">
+              <span style="margin-right: 5px;">
+                Items per page
+              </span>
+              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()">
+                <option value="0">All</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+            </span>
+            <dir-pagination-controls max-size="5"></dir-pagination-controls>
+          </form>
+        </div>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>
diff --git a/app/portainer/settings/authentication/ldap/ldap.rest.js b/app/portainer/settings/authentication/ldap/ldap.rest.js
new file mode 100644
index 000000000..e93d5277c
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap.rest.js
@@ -0,0 +1,15 @@
+const API_ENDPOINT_LDAP = 'api/ldap';
+
+/* @ngInject */
+export function LDAP($resource) {
+  return $resource(
+    `${API_ENDPOINT_LDAP}/:action`,
+    {},
+    {
+      check: { method: 'POST', params: { action: 'check' } },
+      users: { method: 'POST', isArray: true, params: { action: 'users' } },
+      groups: { method: 'POST', isArray: true, params: { action: 'groups' } },
+      testLogin: { method: 'POST', params: { action: 'test' } },
+    }
+  );
+}
diff --git a/app/portainer/settings/authentication/ldap/ldap.service.js b/app/portainer/settings/authentication/ldap/ldap.service.js
new file mode 100644
index 000000000..875f83a02
--- /dev/null
+++ b/app/portainer/settings/authentication/ldap/ldap.service.js
@@ -0,0 +1,29 @@
+/* @ngInject */
+export function LDAPService(LDAP) {
+  return { users, groups, check, testLogin };
+
+  function users(ldapSettings) {
+    return LDAP.users({ ldapSettings }).$promise;
+  }
+
+  async function groups(ldapSettings) {
+    const userGroups = await LDAP.groups({ ldapSettings }).$promise;
+    return userGroups.map(({ Name, Groups }) => {
+      let name = Name;
+      if (Name.includes(',') && Name.includes('=')) {
+        const [cnName] = Name.split(',');
+        const split = cnName.split('=');
+        name = split[1];
+      }
+      return { Groups, Name: name };
+    });
+  }
+
+  function check(ldapSettings) {
+    return LDAP.check({ ldapSettings }).$promise;
+  }
+
+  function testLogin(ldapSettings, username, password) {
+    return LDAP.testLogin({ ldapSettings, username, password }).$promise;
+  }
+}
diff --git a/app/portainer/settings/index.js b/app/portainer/settings/index.js
index 42e4e25ac..629f9b5ed 100644
--- a/app/portainer/settings/index.js
+++ b/app/portainer/settings/index.js
@@ -1,5 +1,6 @@
 import angular from 'angular';
 
+import authenticationModule from './authentication';
 import generalModule from './general';
 
-export default angular.module('portainer.settings', [generalModule]).name;
+export default angular.module('portainer.settings', [authenticationModule, generalModule]).name;
diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.controller.js b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.controller.js
new file mode 100644
index 000000000..aa3f0c854
--- /dev/null
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.controller.js
@@ -0,0 +1,38 @@
+export default class ActivityLogsDatatableController {
+  /* @ngInject */
+  constructor($controller, $scope, PaginationService) {
+    this.PaginationService = PaginationService;
+
+    this.tableKey = 'authLogs';
+
+    const $onInit = this.$onInit;
+    angular.extend(this, $controller('GenericDatatableController', { $scope }));
+
+    this.changeSort = this.changeSort.bind(this);
+    this.handleChangeLimit = this.handleChangeLimit.bind(this);
+    this.$onInit = $onInit.bind(this);
+  }
+
+  changeSort(key) {
+    let desc = false;
+    if (key === this.sort.key) {
+      desc = !this.sort.desc;
+    }
+
+    this.onChangeSort({ key, desc });
+  }
+
+  handleChangeLimit(limit) {
+    this.PaginationService.setPaginationLimit(this.tableKey, limit);
+    this.onChangeLimit(limit);
+  }
+
+  $onInit() {
+    this.$onInitGeneric();
+
+    const limit = this.PaginationService.getPaginationLimit(this.tableKey);
+    if (limit) {
+      this.onChangeLimit(+limit);
+    }
+  }
+}
diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.css b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.css
new file mode 100644
index 000000000..42eb3b401
--- /dev/null
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.css
@@ -0,0 +1,3 @@
+.activity-logs-datatable .small-column {
+  width: 150px;
+}
diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
new file mode 100644
index 000000000..ac2f1bbaf
--- /dev/null
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
@@ -0,0 +1,66 @@
+<div class="datatable datatable-empty">
+  <rd-widget>
+    <rd-widget-body classes="no-padding">
+      <datatable-titlebar title="Activity Logs" icon="fa-history" feature="{{::$ctrl.feature}}"></datatable-titlebar>
+      <datatable-searchbar on-change="($ctrl.onChangeKeyword)" ng-model="$ctrl.keyword"></datatable-searchbar>
+      <div class="table-responsive">
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th class="small-column">
+                <a ng-click="$ctrl.changeSort('Timestamp')">
+                  Time
+                  <datatable-sort-icon key="Timestamp" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
+                </a>
+              </th>
+              <th class="small-column">
+                <a ng-click="$ctrl.changeSort('Username')">
+                  User
+                  <datatable-sort-icon key="Username" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
+                </a>
+              </th>
+              <th class="small-column">
+                <a ng-click="$ctrl.changeSort('Context')">
+                  Environment
+                  <datatable-sort-icon key="Context" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
+                </a>
+              </th>
+
+              <th>
+                Action
+              </th>
+              <th>
+                Payload
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate-start="item in $ctrl.logs | itemsPerPage: $ctrl.limit" total-items="$ctrl.totalItems" current-page="$ctrl.currentPage">
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr dir-paginate-end ng-show="item.Expanded">
+              <td colspan="5">
+                <json-tree object="item.payload" root-name="containerInfo.Id" start-expanded="true"></json-tree>
+              </td>
+            </tr>
+            <tr ng-if="!$ctrl.logs">
+              <td class="text-center text-muted" colspan="5">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.logs.length === 0">
+              <td class="text-center text-muted" colspan="8">
+                No logs available.
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.logs">
+        <datatable-pagination limit="$ctrl.limit" on-change-limit="($ctrl.handleChangeLimit)" on-change-page="($ctrl.onChangePage)"></datatable-pagination>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>
diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/index.js b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/index.js
new file mode 100644
index 000000000..9550fb36e
--- /dev/null
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-datatable/index.js
@@ -0,0 +1,24 @@
+import './activity-logs-datatable.css';
+
+import controller from './activity-logs-datatable.controller.js';
+
+export const activityLogsDatatable = {
+  templateUrl: './activity-logs-datatable.html',
+  controller,
+  bindings: {
+    logs: '<',
+    keyword: '<',
+    sort: '<',
+    limit: '<',
+    totalItems: '<',
+    currentPage: '<',
+    feature: '@',
+
+    onChangeContextFilter: '<',
+    onChangeKeyword: '<',
+    onChangeSort: '<',
+
+    onChangeLimit: '<',
+    onChangePage: '<',
+  },
+};
diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-view.controller.js b/app/portainer/user-activity/activity-logs-view/activity-logs-view.controller.js
new file mode 100644
index 000000000..77957cb59
--- /dev/null
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-view.controller.js
@@ -0,0 +1,93 @@
+import moment from 'moment';
+import { ACTIVITY_AUDIT } from '@/portainer/feature-flags/feature-ids';
+export default class ActivityLogsViewController {
+  /* @ngInject */
+  constructor($async, Notifications) {
+    this.$async = $async;
+    this.Notifications = Notifications;
+    this.limitedFeature = ACTIVITY_AUDIT;
+    this.state = {
+      keyword: '',
+      date: {
+        from: 0,
+        to: 0,
+      },
+      sort: {
+        key: 'Timestamp',
+        desc: true,
+      },
+      page: 1,
+      limit: 10,
+      totalItems: 0,
+      logs: null,
+    };
+
+    this.today = moment().endOf('day');
+    this.minValidDate = moment().subtract(7, 'd').startOf('day');
+
+    this.onChangeDate = this.onChangeDate.bind(this);
+    this.onChangeKeyword = this.onChangeKeyword.bind(this);
+    this.onChangeSort = this.onChangeSort.bind(this);
+    this.loadLogs = this.loadLogs.bind(this);
+    this.onChangePage = this.onChangePage.bind(this);
+    this.onChangeLimit = this.onChangeLimit.bind(this);
+  }
+
+  onChangePage(page) {
+    this.state.page = page;
+    this.loadLogs();
+  }
+
+  onChangeLimit(limit) {
+    this.state.page = 1;
+    this.state.limit = limit;
+    this.loadLogs();
+  }
+
+  onChangeSort(sort) {
+    this.state.page = 1;
+    this.state.sort = sort;
+    this.loadLogs();
+  }
+
+  onChangeKeyword(keyword) {
+    this.state.page = 1;
+    this.state.keyword = keyword;
+    this.loadLogs();
+  }
+
+  onChangeDate({ startDate, endDate }) {
+    this.state.page = 1;
+    this.state.date = { to: endDate, from: startDate };
+    this.loadLogs();
+  }
+
+  async export() {
+    return this.$async(async () => {
+      try {
+        await this.UserActivityService.saveLogsAsCSV(this.state.sort, this.state.keyword, this.state.date, this.state.contextFilter);
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Failed loading user activity logs csv');
+      }
+    });
+  }
+
+  async loadLogs() {
+    return this.$async(async () => {
+      this.state.logs = null;
+      try {
+        const { logs, totalCount } = { logs: [{}, {}, {}, {}, {}], totalCount: 5 };
+        this.state.logs = logs;
+        this.state.totalItems = totalCount;
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Failed loading user activity logs');
+      }
+    });
+  }
+
+  $onInit() {
+    return this.$async(async () => {
+      this.loadLogs();
+    });
+  }
+}
diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-view.html b/app/portainer/user-activity/activity-logs-view/activity-logs-view.html
new file mode 100644
index 000000000..b33b728e7
--- /dev/null
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-view.html
@@ -0,0 +1,48 @@
+<rd-header>
+  <rd-header-title title-text="User Activity">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="." ui-sref-opts="{reload: true}">
+      <i class="fa fa-sync" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>Activity Logs</rd-header-content>
+</rd-header>
+
+<div class="be-indicator-container">
+  <rd-widget>
+    <rd-widget-body>
+      <div class="form-horizontal">
+        <div class="form-group">
+          <label for="dateRangeInput" class="col-sm-2 control-label text-left">Date Range</label>
+          <div class="col-sm-6">
+            <input type="text" class="form-control" disabled />
+          </div>
+        </div>
+      </div>
+
+      <p class="text-muted small">
+        <i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
+        Portainer user activity logs have a maximum retention of 7 days.
+      </p>
+
+      <div>
+        <button type="button" class="btn btn-sm btn-primary" style="margin-right: 10px;"> <i class="fa fa-download space-right" aria-hidden="true"></i>Export as CSV </button>
+        <be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+
+  <activity-logs-datatable
+    logs="$ctrl.state.logs"
+    keyword="$ctrl.state.keyword"
+    sort="$ctrl.state.sort"
+    limit="$ctrl.state.limit"
+    context-filter="$ctrl.state.contextFilter"
+    total-items="$ctrl.state.totalItems"
+    current-page="$ctrl.state.currentPage"
+    feature="{{:: $ctrl.limitedFeature}}"
+    on-change-keyword="($ctrl.onChangeKeyword)"
+    on-change-sort="($ctrl.onChangeSort)"
+    on-change-limit="($ctrl.onChangeLimit)"
+    on-change-page="($ctrl.onChangePage)"
+  ></activity-logs-datatable>
+</div>
diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-view.js b/app/portainer/user-activity/activity-logs-view/activity-logs-view.js
new file mode 100644
index 000000000..52082d363
--- /dev/null
+++ b/app/portainer/user-activity/activity-logs-view/activity-logs-view.js
@@ -0,0 +1,6 @@
+import controller from './activity-logs-view.controller.js';
+
+export const activityLogsView = {
+  templateUrl: './activity-logs-view.html',
+  controller,
+};
diff --git a/app/portainer/user-activity/activity-logs-view/index.js b/app/portainer/user-activity/activity-logs-view/index.js
new file mode 100644
index 000000000..da8c69cb4
--- /dev/null
+++ b/app/portainer/user-activity/activity-logs-view/index.js
@@ -0,0 +1,9 @@
+import angular from 'angular';
+
+import { activityLogsView } from './activity-logs-view';
+import { activityLogsDatatable } from './activity-logs-datatable';
+
+export default angular
+  .module('portainer.app.user-activity.activity-logs-view', [])
+  .component('activityLogsDatatable', activityLogsDatatable)
+  .component('activityLogsView', activityLogsView).name;
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.controller.js b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.controller.js
new file mode 100644
index 000000000..cd053f5c7
--- /dev/null
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.controller.js
@@ -0,0 +1,68 @@
+import { authenticationMethodTypesMap, authenticationMethodTypesLabels } from '@/portainer/settings/authentication/auth-method-constants';
+import { authenticationActivityTypesMap, authenticationActivityTypesLabels } from '@/portainer/settings/authentication/auth-type-constants';
+
+class ActivityLogsDatatableController {
+  /* @ngInject */
+  constructor($controller, $scope, PaginationService) {
+    this.PaginationService = PaginationService;
+
+    this.tableKey = 'authLogs';
+
+    this.contextFilterLabels = Object.values(authenticationMethodTypesMap).map((value) => ({ value, label: authenticationMethodTypesLabels[value] }));
+    this.typeFilterLabels = Object.values(authenticationActivityTypesMap).map((value) => ({ value, label: authenticationActivityTypesLabels[value] }));
+
+    const $onInit = this.$onInit;
+    angular.extend(this, $controller('GenericDatatableController', { $scope }));
+    this.$onInit = $onInit.bind(this);
+
+    this.changeSort = this.changeSort.bind(this);
+    this.handleChangeLimit = this.handleChangeLimit.bind(this);
+  }
+
+  changeSort(key) {
+    let desc = false;
+    if (key === this.sort.key) {
+      desc = !this.sort.desc;
+    }
+
+    this.onChangeSort({ key, desc });
+  }
+
+  contextType(context) {
+    if (!(context in authenticationMethodTypesLabels)) {
+      return '';
+    }
+    return authenticationMethodTypesLabels[context];
+  }
+
+  activityType(type) {
+    if (!(type in authenticationActivityTypesLabels)) {
+      return '';
+    }
+    return authenticationActivityTypesLabels[type];
+  }
+
+  isAuthSuccess(type) {
+    return type === authenticationActivityTypesMap.AuthSuccess;
+  }
+
+  isAuthFailure(type) {
+    return type === authenticationActivityTypesMap.AuthFailure;
+  }
+
+  handleChangeLimit(limit) {
+    this.PaginationService.setPaginationLimit(this.tableKey, limit);
+    this.onChangeLimit(limit);
+  }
+
+  $onInit() {
+    this.$onInitGeneric();
+
+    const limit = this.PaginationService.getPaginationLimit(this.tableKey);
+    if (limit) {
+      this.handleChangeLimit(+limit);
+    }
+  }
+}
+
+export default ActivityLogsDatatableController;
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
new file mode 100644
index 000000000..07d687ee8
--- /dev/null
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
@@ -0,0 +1,64 @@
+<div class="datatable datatable-empty">
+  <rd-widget>
+    <rd-widget-body classes="no-padding">
+      <datatable-titlebar title="Authentication Events" icon="fa-history" feature="{{::$ctrl.feature}}"></datatable-titlebar>
+      <datatable-searchbar on-change="($ctrl.onChangeKeyword)" ng-model="$ctrl.keyword"></datatable-searchbar>
+      <div class="table-responsive">
+        <table class="table table-hover nowrap-cells">
+          <thead>
+            <tr>
+              <th>
+                <a>
+                  Time
+                  <datatable-sort-icon key="Timestamp" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
+                </a>
+              </th>
+              <th>
+                <a>
+                  Origin
+                  <datatable-sort-icon key="Origin" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
+                </a>
+              </th>
+              <th>
+                <a>
+                  Context
+                  <datatable-sort-icon key="Context" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
+                </a>
+                <datatable-filter labels="$ctrl.contextFilterLabels" filter-key="context" state="$ctrl.contextFilter" on-change="($ctrl.onChangeContextFilter)"> </datatable-filter>
+              </th>
+              <th>
+                <a>
+                  User
+                  <datatable-sort-icon key="Username" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon>
+                </a>
+              </th>
+              <th>
+                Result
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr dir-paginate="item in $ctrl.logs | itemsPerPage: $ctrl.limit" total-items="$ctrl.totalItems" current-page="$ctrl.currentPage">
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+            </tr>
+            <tr ng-if="!$ctrl.logs">
+              <td class="text-center text-muted" colspan="5">Loading...</td>
+            </tr>
+            <tr ng-if="$ctrl.state.logs.length === 0">
+              <td class="text-center text-muted" colspan="8">
+                No logs available.
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="footer" ng-if="$ctrl.logs">
+        <datatable-pagination limit="$ctrl.limit" on-change-limit="($ctrl.handleChangeLimit)" on-change-page="($ctrl.onChangePage)"></datatable-pagination>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+</div>
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/index.js b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/index.js
new file mode 100644
index 000000000..6488f3549
--- /dev/null
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/index.js
@@ -0,0 +1,25 @@
+import controller from './auth-logs-datatable.controller';
+
+export const authLogsDatatable = {
+  templateUrl: './auth-logs-datatable.html',
+  controller,
+  bindings: {
+    logs: '<',
+    keyword: '<',
+    sort: '<',
+    limit: '<',
+    totalItems: '<',
+    currentPage: '<',
+    contextFilter: '<',
+    typeFilter: '<',
+    feature: '@',
+
+    onChangeContextFilter: '<',
+    onChangeTypeFilter: '<',
+    onChangeKeyword: '<',
+    onChangeSort: '<',
+
+    onChangeLimit: '<',
+    onChangePage: '<',
+  },
+};
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-view.controller.js b/app/portainer/user-activity/auth-logs-view/auth-logs-view.controller.js
new file mode 100644
index 000000000..f4ddb81ff
--- /dev/null
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-view.controller.js
@@ -0,0 +1,103 @@
+import moment from 'moment';
+import { ACTIVITY_AUDIT } from '@/portainer/feature-flags/feature-ids';
+
+export default class AuthLogsViewController {
+  /* @ngInject */
+  constructor($async, Notifications) {
+    this.$async = $async;
+    this.Notifications = Notifications;
+
+    this.limitedFeature = ACTIVITY_AUDIT;
+    this.state = {
+      keyword: 'f',
+      date: {
+        from: 0,
+        to: 0,
+      },
+      sort: {
+        key: 'Timestamp',
+        desc: true,
+      },
+      contextFilter: [1, 2, 3],
+      typeFilter: [1, 2, 3],
+      page: 1,
+      limit: 10,
+      totalItems: 0,
+      logs: null,
+    };
+
+    this.today = moment().endOf('day');
+    this.minValidDate = moment().subtract(7, 'd').startOf('day');
+
+    this.onChangeDate = this.onChangeDate.bind(this);
+    this.onChangeKeyword = this.onChangeKeyword.bind(this);
+    this.onChangeSort = this.onChangeSort.bind(this);
+    this.onChangeContextFilter = this.onChangeContextFilter.bind(this);
+    this.onChangeTypeFilter = this.onChangeTypeFilter.bind(this);
+    this.loadLogs = this.loadLogs.bind(this);
+    this.onChangePage = this.onChangePage.bind(this);
+    this.onChangeLimit = this.onChangeLimit.bind(this);
+  }
+
+  onChangePage(page) {
+    this.state.page = page;
+    this.loadLogs();
+  }
+
+  onChangeLimit(limit) {
+    this.state.page = 1;
+    this.state.limit = limit;
+    this.loadLogs();
+  }
+
+  onChangeSort(sort) {
+    this.state.page = 1;
+    this.state.sort = sort;
+    this.loadLogs();
+  }
+
+  onChangeContextFilter(filterKey, filterState) {
+    this.state.contextFilter = filterState;
+    this.loadLogs();
+  }
+
+  onChangeTypeFilter(filterKey, filterState) {
+    this.state.typeFilter = filterState;
+    this.loadLogs();
+  }
+
+  onChangeKeyword(keyword) {
+    this.state.page = 1;
+    this.state.keyword = keyword;
+    this.loadLogs();
+  }
+
+  onChangeDate({ startDate, endDate }) {
+    this.state.page = 1;
+    this.state.date = { to: endDate, from: startDate };
+    this.loadLogs();
+  }
+
+  async loadLogs() {
+    return this.$async(async () => {
+      this.state.logs = null;
+      try {
+        const { logs, totalCount } = { logs: [{}, {}, {}, {}, {}], totalCount: 5 };
+        this.state.logs = decorateLogs(logs);
+        this.state.totalItems = totalCount;
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Failed loading auth activity logs');
+      }
+    });
+  }
+
+  $onInit() {
+    return this.$async(async () => {
+      this.loadLogs();
+    });
+  }
+}
+
+function decorateLogs(logs) {
+  return logs;
+}
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-view.html b/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
new file mode 100644
index 000000000..6bc1030b9
--- /dev/null
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-view.html
@@ -0,0 +1,51 @@
+<rd-header>
+  <rd-header-title title-text="User Activity">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.authLogs" ui-sref-opts="{reload: true}">
+      <i class="fa fa-sync" aria-hidden="true"></i>
+    </a>
+  </rd-header-title>
+  <rd-header-content>User authentication activity</rd-header-content>
+</rd-header>
+
+<div class="be-indicator-container">
+  <rd-widget>
+    <rd-widget-body>
+      <div class="form-horizontal">
+        <div class="form-group">
+          <label for="dateRangeInput" class="col-sm-2 control-label text-left">Date Range</label>
+          <div class="col-sm-6">
+            <input type="text" class="form-control" disabled />
+          </div>
+        </div>
+      </div>
+
+      <p class="text-muted small">
+        <i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
+        Portainer user authentication activity logs have a maximum retention of 7 days.
+      </p>
+
+      <div>
+        <button type="button" class="btn btn-sm btn-primary" style="margin-right: 10px;"><i class="fa fa-download space-right" aria-hidden="true"></i>Export as CSV </button>
+        <be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator>
+      </div>
+    </rd-widget-body>
+  </rd-widget>
+
+  <auth-logs-datatable
+    logs="$ctrl.state.logs"
+    keyword="$ctrl.state.keyword"
+    sort="$ctrl.state.sort"
+    limit="$ctrl.state.limit"
+    context-filter="$ctrl.state.contextFilter"
+    type-filter="$ctrl.state.typeFilter"
+    total-items="$ctrl.state.totalItems"
+    current-page="$ctrl.state.currentPage"
+    feature="{{:: $ctrl.limitedFeature}}"
+    on-change-context-filter="($ctrl.onChangeContextFilter)"
+    on-change-type-filter="($ctrl.onChangeTypeFilter)"
+    on-change-keyword="($ctrl.onChangeKeyword)"
+    on-change-sort="($ctrl.onChangeSort)"
+    on-change-limit="($ctrl.onChangeLimit)"
+    on-change-page="($ctrl.onChangePage)"
+  ></auth-logs-datatable>
+</div>
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-view.js b/app/portainer/user-activity/auth-logs-view/auth-logs-view.js
new file mode 100644
index 000000000..c5cd52bb7
--- /dev/null
+++ b/app/portainer/user-activity/auth-logs-view/auth-logs-view.js
@@ -0,0 +1,6 @@
+import controller from './auth-logs-view.controller.js';
+
+export const authLogsView = {
+  templateUrl: './auth-logs-view.html',
+  controller,
+};
diff --git a/app/portainer/user-activity/auth-logs-view/index.js b/app/portainer/user-activity/auth-logs-view/index.js
new file mode 100644
index 000000000..6aa7f7e85
--- /dev/null
+++ b/app/portainer/user-activity/auth-logs-view/index.js
@@ -0,0 +1,6 @@
+import angular from 'angular';
+
+import { authLogsView } from './auth-logs-view';
+import { authLogsDatatable } from './auth-logs-datatable';
+
+export default angular.module('portainer.app.user-activity.auth-logs-view', []).component('authLogsView', authLogsView).component('authLogsDatatable', authLogsDatatable).name;
diff --git a/app/portainer/user-activity/index.js b/app/portainer/user-activity/index.js
new file mode 100644
index 000000000..27056da2f
--- /dev/null
+++ b/app/portainer/user-activity/index.js
@@ -0,0 +1,29 @@
+import angular from 'angular';
+
+import authLogsViewModule from './auth-logs-view';
+import activityLogsViewModule from './activity-logs-view';
+
+export default angular.module('portainer.app.user-activity', [authLogsViewModule, activityLogsViewModule]).config(config).name;
+
+/* @ngInject */
+function config($stateRegistryProvider) {
+  $stateRegistryProvider.register({
+    name: 'portainer.authLogs',
+    url: '/auth-logs',
+    views: {
+      'content@': {
+        component: 'authLogsView',
+      },
+    },
+  });
+
+  $stateRegistryProvider.register({
+    name: 'portainer.activityLogs',
+    url: '/activity-logs',
+    views: {
+      'content@': {
+        component: 'activityLogsView',
+      },
+    },
+  });
+}
diff --git a/app/portainer/views/endpoints/access/endpointAccess.html b/app/portainer/views/endpoints/access/endpointAccess.html
index f0c96ea86..1021e3b63 100644
--- a/app/portainer/views/endpoints/access/endpointAccess.html
+++ b/app/portainer/views/endpoints/access/endpointAccess.html
@@ -44,5 +44,6 @@
   entity-type="endpoint"
   inherit-from="ctrl.group"
   update-access="ctrl.updateAccess"
+  limited-feature="ctrl.limitedFeature"
 >
 </por-access-management>
diff --git a/app/portainer/views/endpoints/access/endpointAccessController.js b/app/portainer/views/endpoints/access/endpointAccessController.js
index 77f414a31..4600c1977 100644
--- a/app/portainer/views/endpoints/access/endpointAccessController.js
+++ b/app/portainer/views/endpoints/access/endpointAccessController.js
@@ -1,5 +1,7 @@
 import angular from 'angular';
 
+import { RBAC_ROLES } from '@/portainer/feature-flags/feature-ids';
+
 class EndpointAccessController {
   /* @ngInject */
   constructor($state, $transition$, Notifications, EndpointService, GroupService, $async) {
@@ -10,6 +12,8 @@ class EndpointAccessController {
     this.GroupService = GroupService;
     this.$async = $async;
 
+    this.limitedFeature = RBAC_ROLES;
+
     this.updateAccess = this.updateAccess.bind(this);
     this.updateAccessAsync = this.updateAccessAsync.bind(this);
   }
diff --git a/app/portainer/views/groups/access/groupAccess.html b/app/portainer/views/groups/access/groupAccess.html
index 595d37e6f..d9404eb4e 100644
--- a/app/portainer/views/groups/access/groupAccess.html
+++ b/app/portainer/views/groups/access/groupAccess.html
@@ -31,4 +31,5 @@
   entity-type="group"
   action-in-progress="state.actionInProgress"
   update-access="updateAccess"
+  limited-feature="limitedFeature"
 ></por-access-management>
diff --git a/app/portainer/views/groups/access/groupAccessController.js b/app/portainer/views/groups/access/groupAccessController.js
index 5dff41065..e6112be28 100644
--- a/app/portainer/views/groups/access/groupAccessController.js
+++ b/app/portainer/views/groups/access/groupAccessController.js
@@ -1,3 +1,5 @@
+import { RBAC_ROLES } from '@/portainer/feature-flags/feature-ids';
+
 angular.module('portainer.app').controller('GroupAccessController', [
   '$scope',
   '$state',
@@ -5,6 +7,8 @@ angular.module('portainer.app').controller('GroupAccessController', [
   'GroupService',
   'Notifications',
   function ($scope, $state, $transition$, GroupService, Notifications) {
+    $scope.limitedFeature = RBAC_ROLES;
+
     $scope.updateAccess = function () {
       $scope.state.actionInProgress = true;
       GroupService.updateGroup($scope.group, $scope.group.AssociatedEndpoints)
diff --git a/app/portainer/views/roles/roles.html b/app/portainer/views/roles/roles.html
deleted file mode 100644
index 9d73e610a..000000000
--- a/app/portainer/views/roles/roles.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<rd-header>
-  <rd-header-title title-text="Roles">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.roles" ui-sref-opts="{reload: true}">
-      <i class="fa fa-sync" aria-hidden="true"></i>
-    </a>
-  </rd-header-title>
-  <rd-header-content>Role management</rd-header-content>
-</rd-header>
-
-<information-panel title-text="Information">
-  <span class="small">
-    <p class="text-muted">
-      <i class="fa fa-user" aria-hidden="true" style="margin-right: 2px;"></i>
-      This feature is available in <a href="https://www.portainer.io/business-upsell?from=k8s-rbac-roles" target="_blank">Portainer Business Edition</a>.
-    </p>
-  </span>
-</information-panel>
-
-<div class="row">
-  <div class="col-sm-12">
-    <roles-datatable title-text="Roles" title-icon="fa-file-code" table-key="roles" order-by="Name"></roles-datatable>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-sm-12" style="margin-bottom: 0px;">
-    <rd-widget>
-      <rd-widget-header icon="fa-user-lock" title-text="Effective access viewer"></rd-widget-header>
-      <rd-widget-body>
-        <form class="form-horizontal">
-          <div class="col-sm-12 form-section-title">
-            User
-          </div>
-          <div class="form-group">
-            <div class="col-sm-12">
-              <span class="small text-muted">
-                No user available
-              </span>
-            </div>
-          </div>
-
-          <div class="col-sm-12 form-section-title">
-            Access
-          </div>
-          <div>
-            <div class="small text-muted" style="margin-bottom: 15px;">
-              <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
-              Effective role for each environment will be displayed for the selected user
-            </div>
-          </div>
-          <access-viewer-datatable table-key="access_viewer" order-by="EndpointName"> </access-viewer-datatable>
-        </form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
diff --git a/app/portainer/views/settings/authentication/settingsAuthentication.html b/app/portainer/views/settings/authentication/settingsAuthentication.html
index 2d36bcd76..3520b5e2a 100644
--- a/app/portainer/views/settings/authentication/settingsAuthentication.html
+++ b/app/portainer/views/settings/authentication/settingsAuthentication.html
@@ -8,7 +8,7 @@
     <rd-widget>
       <rd-widget-header icon="fa-users" title-text="Authentication"></rd-widget-header>
       <rd-widget-body>
-        <form class="form-horizontal">
+        <form class="form-horizontal" name="authSettingsForm">
           <div class="col-sm-12 form-section-title">
             Configuration
           </div>
@@ -34,43 +34,10 @@
           <div class="col-sm-12 form-section-title">
             Authentication method
           </div>
-          <div class="form-group"></div>
-          <div class="form-group" style="margin-bottom: 0;">
-            <div class="boxselector_wrapper">
-              <div>
-                <input type="radio" id="registry_quay" ng-model="settings.AuthenticationMethod" ng-value="1" />
-                <label for="registry_quay">
-                  <div class="boxselector_header">
-                    <i class="fa fa-users" aria-hidden="true" style="margin-right: 2px;"></i>
-                    Internal
-                  </div>
-                  <p>Internal authentication mechanism</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="registry_custom" ng-model="settings.AuthenticationMethod" ng-value="2" />
-                <label for="registry_custom">
-                  <div class="boxselector_header">
-                    <i class="fa fa-users" aria-hidden="true" style="margin-right: 2px;"></i>
-                    LDAP
-                  </div>
-                  <p>LDAP authentication</p>
-                </label>
-              </div>
-              <div>
-                <input type="radio" id="registry_auth" ng-model="settings.AuthenticationMethod" ng-value="3" />
-                <label for="registry_auth">
-                  <div class="boxselector_header">
-                    <i class="fa fa-users" aria-hidden="true" style="margin-right: 2px;"></i>
-                    OAuth
-                  </div>
-                  <p>OAuth authentication</p>
-                </label>
-              </div>
-            </div>
-          </div>
 
-          <div ng-if="settings.AuthenticationMethod === 1">
+          <box-selector radio-name="authOptions" ng-model="authMethod" options="authOptions" on-change="(onChangeAuthMethod)"></box-selector>
+
+          <div ng-if="authenticationMethodSelected(1)">
             <div class="col-sm-12 form-section-title">
               Information
             </div>
@@ -79,345 +46,23 @@
             </div>
           </div>
 
-          <div ng-if="settings.AuthenticationMethod === 2">
-            <div>
-              <div class="col-sm-12 form-section-title">
-                Information
-              </div>
-              <div class="form-group col-sm-12 text-muted small">
-                When using LDAP authentication, Portainer will delegate user authentication to a LDAP server and fallback to internal authentication if LDAP authentication fails.
-              </div>
-            </div>
-
-            <div class="col-sm-12 form-section-title">
-              LDAP configuration
-            </div>
-
-            <div class="form-group">
-              <label for="ldap_url" class="col-sm-3 col-lg-2 control-label text-left">
-                LDAP Server
-                <portainer-tooltip position="bottom" message="URL or IP address of the LDAP server."></portainer-tooltip>
-              </label>
-              <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="ldap_url" ng-model="formValues.LDAPSettings.URL" placeholder="e.g. 10.0.0.10:389 or myldap.domain.tld:389" />
-              </div>
-            </div>
-
-            <!-- Anonymous mode-->
-            <div class="form-group">
-              <div class="col-sm-12">
-                <label for="anonymous_mode" class="control-label text-left">
-                  Anonymous mode
-                  <portainer-tooltip position="bottom" 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="formValues.LDAPSettings.AnonymousMode" /><i></i> </label>
-              </div>
-            </div>
-            <!-- !Anonymous mode-->
-
-            <div ng-if="!formValues.LDAPSettings.AnonymousMode">
-              <div class="form-group">
-                <label for="ldap_username" class="col-sm-3 col-lg-2 control-label text-left">
-                  Reader DN
-                  <portainer-tooltip position="bottom" message="Account that will be used to search for users."></portainer-tooltip>
-                </label>
-                <div class="col-sm-9 col-lg-10">
-                  <input
-                    type="text"
-                    class="form-control"
-                    id="ldap_username"
-                    ng-model="formValues.LDAPSettings.ReaderDN"
-                    placeholder="cn=readonly-account,dc=ldap,dc=domain,dc=tld"
-                  />
-                </div>
-              </div>
-
-              <div class="form-group">
-                <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
-                  Password
-                  <portainer-tooltip position="bottom" message="If you do not enter a password, Portainer will leave the current password unchanged."></portainer-tooltip>
-                </label>
-                <div class="col-sm-9 col-lg-10">
-                  <input type="password" class="form-control" id="ldap_password" ng-model="formValues.LDAPSettings.Password" placeholder="password" />
-                </div>
-              </div>
-            </div>
-
-            <div class="form-group" ng-if="!formValues.LDAPSettings.TLSConfig.TLS && !formValues.LDAPSettings.StartTLS">
-              <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
-                Connectivity check
-                <i class="fa fa-check green-icon" style="margin-left: 5px;" ng-if="state.successfulConnectivityCheck"></i>
-                <i class="fa fa-times red-icon" style="margin-left: 5px;" ng-if="state.failedConnectivityCheck"></i>
-              </label>
-              <div class="col-sm-9 col-lg-10">
-                <button
-                  type="button"
-                  class="btn btn-primary btn-sm"
-                  ng-disabled="(state.connectivityCheckInProgress) || (!formValues.LDAPSettings.URL) || ((!formValues.LDAPSettings.ReaderDN || !formValues.LDAPSettings.Password) && !formValues.LDAPSettings.AnonymousMode)"
-                  ng-click="LDAPConnectivityCheck()"
-                  button-spinner="state.connectivityCheckInProgress"
-                >
-                  <span ng-hide="state.connectivityCheckInProgress">Test connectivity</span>
-                  <span ng-show="state.connectivityCheckInProgress">Testing connectivity...</span>
-                </button>
-              </div>
-            </div>
-
-            <div class="col-sm-12 form-section-title">
-              LDAP security
-            </div>
-
-            <!-- starttls -->
-            <div class="form-group" ng-if="!formValues.LDAPSettings.TLSConfig.TLS">
-              <div class="col-sm-12">
-                <label for="tls" class="control-label text-left">
-                  Use StartTLS
-                  <portainer-tooltip
-                    position="bottom"
-                    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>
-                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="formValues.LDAPSettings.StartTLS" /><i></i> </label>
-              </div>
-            </div>
-            <!-- !starttls -->
-
-            <!-- tls-checkbox -->
-            <div class="form-group" ng-if="!formValues.LDAPSettings.StartTLS">
-              <div class="col-sm-12">
-                <label for="tls" class="control-label text-left">
-                  Use TLS
-                  <portainer-tooltip position="bottom" message="Enable this option if you need to specify TLS certificates to connect to the LDAP server."></portainer-tooltip>
-                </label>
-                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="formValues.LDAPSettings.TLSConfig.TLS" /><i></i> </label>
-              </div>
-            </div>
-            <!-- !tls-checkbox -->
-
-            <!-- tls-skip-verify -->
-            <div class="form-group">
-              <div class="col-sm-12">
-                <label for="tls" class="control-label text-left">
-                  Skip verification of server certificate
-                  <portainer-tooltip position="bottom" message="Skip the verification of the server TLS certificate. Not recommended on unsecured networks."></portainer-tooltip>
-                </label>
-                <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="formValues.LDAPSettings.TLSConfig.TLSSkipVerify" /><i></i> </label>
-              </div>
-            </div>
-            <!-- !tls-skip-verify -->
+          <ldap-settings
+            ng-if="authenticationMethodSelected(2)"
+            settings="formValues.ldap.ldapSettings"
+            tlsca-cert="formValues.TLSCACert"
+            state="state"
+            connectivity-check="LDAPConnectivityCheck"
+          ></ldap-settings>
 
-            <!-- tls-certs -->
-            <div ng-if="formValues.LDAPSettings.TLSConfig.TLS || formValues.LDAPSettings.StartTLS">
-              <!-- ca-input -->
-              <div class="form-group" ng-if="!formValues.LDAPSettings.TLSConfig.TLSSkipVerify">
-                <label class="col-sm-2 control-label text-left">TLS CA certificate</label>
-                <div class="col-sm-10">
-                  <button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="formValues.TLSCACert">Select file</button>
-                  <span style="margin-left: 5px;">
-                    {{ formValues.TLSCACert.name }}
-                    <i class="fa fa-check green-icon" ng-if="formValues.TLSCACert && formValues.TLSCACert === formValues.LDAPSettings.TLSConfig.TLSCACert" aria-hidden="true"></i>
-                    <i class="fa fa-times red-icon" ng-if="!formValues.TLSCACert" aria-hidden="true"></i>
-                    <i class="fa fa-circle-notch fa-spin" ng-if="state.uploadInProgress"></i>
-                  </span>
-                </div>
-              </div>
-              <!-- !ca-input -->
-            </div>
-            <!-- !tls-certs -->
-
-            <div class="form-group" ng-if="formValues.LDAPSettings.TLSConfig.TLS || formValues.LDAPSettings.StartTLS">
-              <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
-                Connectivity check
-                <i class="fa fa-check green-icon" style="margin-left: 5px;" ng-if="state.successfulConnectivityCheck"></i>
-                <i class="fa fa-times red-icon" style="margin-left: 5px;" ng-if="state.failedConnectivityCheck"></i>
-              </label>
-              <div class="col-sm-9 col-lg-10">
-                <button
-                  type="button"
-                  class="btn btn-primary btn-sm"
-                  ng-click="LDAPConnectivityCheck()"
-                  ng-disabled="(!formValues.LDAPSettings.URL) || (!formValues.TLSCACert && !formValues.LDAPSettings.TLSConfig.TLSSkipVerify) || ((!formValues.LDAPSettings.ReaderDN || !formValues.LDAPSettings.Password) && !formValues.LDAPSettings.AnonymousMode)"
-                  >Test connectivity</button
-                >
-                <i id="connectivityCheckSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
-              </div>
-            </div>
-
-            <div class="col-sm-12 form-section-title">
-              Automatic user provisioning
-            </div>
-            <div class="form-group">
-              <span class="col-sm-12 text-muted small">
-                With automatic user provisioning enabled, Portainer will create user(s) automatically with standard user role and assign them to team(s) which matches to LDAP group
-                name(s). If disabled, users must be created in Portainer beforehand.
-              </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="formValues.LDAPSettings.AutoCreateUsers" /><i></i> </label>
-              </div>
-            </div>
-
-            <div class="col-sm-12 form-section-title">
-              User search configurations
-            </div>
-
-            <!-- search-settings -->
-            <div ng-repeat="config in formValues.LDAPSettings.SearchSettings | limitTo: (1 - formValues.LDAPSettings.SearchSettings)" style="margin-top: 5px;">
-              <div class="form-group" ng-if="$index > 0">
-                <span class="col-sm-12 text-muted small">
-                  Extra search configuration
-                </span>
-              </div>
-
-              <div class="form-group">
-                <label for="ldap_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-                  Base DN
-                  <portainer-tooltip position="bottom" message="The distinguished name of the element from which the LDAP server will search for users."></portainer-tooltip>
-                </label>
-                <div class="col-sm-8 col-md-4">
-                  <input type="text" class="form-control" id="ldap_basedn_{{ $index }}" ng-model="config.BaseDN" placeholder="dc=ldap,dc=domain,dc=tld" />
-                </div>
-
-                <label for="ldap_username_att_{{ $index }}" class="col-sm-4 col-md-3 col-lg-2 margin-sm-top control-label text-left">
-                  Username attribute
-                  <portainer-tooltip position="bottom" message="LDAP attribute which denotes the username."></portainer-tooltip>
-                </label>
-                <div class="col-sm-8 col-md-3 col-lg-4 margin-sm-top">
-                  <input type="text" class="form-control" id="ldap_username_att_{{ $index }}" ng-model="config.UserNameAttribute" placeholder="uid" />
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="ldap_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-                  Filter
-                  <portainer-tooltip position="bottom" message="The LDAP search filter used to select user elements, optional."></portainer-tooltip>
-                </label>
-                <div class="col-sm-7 col-md-9">
-                  <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="removeSearchConfiguration($index)">
-                    <i class="fa fa-trash" aria-hidden="true"></i>
-                  </button>
-                </div>
-              </div>
-
-              <div class="form-group">
-                <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addSearchConfiguration()">
-                  <i class="fa fa-plus-circle" aria-hidden="true"></i> add user search configuration
-                </span>
-              </div>
-            </div>
-            <!-- !search-settings -->
-
-            <div class="col-sm-12 form-section-title">
-              Group search configurations
-            </div>
-
-            <!-- group-search-settings -->
-            <div ng-repeat="groupConfig in formValues.LDAPSettings.GroupSearchSettings | limitTo: (1 - formValues.LDAPSettings.GroupSearchSettings)" style="margin-top: 5px;">
-              <div class="form-group" ng-if="$index > 0">
-                <span class="col-sm-12 text-muted small">
-                  Extra search configuration
-                </span>
-              </div>
-
-              <div class="form-group">
-                <label for="ldap_group_basedn_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-                  Group Base DN
-                  <portainer-tooltip position="bottom" message="The distinguished name of the element from which the LDAP server will search for groups."></portainer-tooltip>
-                </label>
-                <div class="col-sm-8 col-md-4">
-                  <input type="text" class="form-control" id="ldap_group_basedn_{{ $index }}" ng-model="groupConfig.GroupBaseDN" placeholder="dc=ldap,dc=domain,dc=tld" />
-                </div>
-
-                <label for="ldap_group_att_{{ $index }}" class="col-sm-4 col-md-3 col-lg-2 margin-sm-top control-label text-left">
-                  Group Membership Attribute
-                  <portainer-tooltip position="bottom" message="LDAP attribute which denotes the group membership."></portainer-tooltip>
-                </label>
-                <div class="col-sm-8 col-md-3 col-lg-4 margin-sm-top">
-                  <input type="text" class="form-control" id="ldap_group_att_{{ $index }}" ng-model="groupConfig.GroupAttribute" placeholder="member" />
-                </div>
-              </div>
-              <div class="form-group">
-                <label for="ldap_group_filter_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
-                  Group Filter
-                  <portainer-tooltip position="bottom" message="The LDAP search filter used to select group elements, optional."></portainer-tooltip>
-                </label>
-                <div class="col-sm-7 col-md-9">
-                  <input type="text" class="form-control" id="ldap_group_filter_{{ $index }}" ng-model="groupConfig.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="removeGroupSearchConfiguration($index)">
-                    <i class="fa fa-trash" aria-hidden="true"></i>
-                  </button>
-                </div>
-              </div>
-
-              <div class="form-group">
-                <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addGroupSearchConfiguration()">
-                  <i class="fa fa-plus-circle" aria-hidden="true"></i> add group search configuration
-                </span>
-              </div>
-            </div>
-            <!-- !group-search-settings -->
-          </div>
-
-          <div ng-if="isOauthEnabled()">
-            <div class="col-sm-12 form-section-title">
-              Provider
-            </div>
-            <div class="form-group"></div>
-            <div class="form-group" style="margin-bottom: 0;">
-              <div class="boxselector_wrapper">
-                <div data-toggle="tooltip" title="This feature is available in Portainer Business Edition" style="color: #767676;">
-                  <input type="radio" id="microsoft" disabled />
-                  <label for="microsoft" style="cursor: pointer; border-color: #767676;">
-                    <div class="boxselector_header">
-                      <i class="fab fa-microsoft" aria-hidden="true" style="margin-right: 2px;"></i>
-                      Microsoft
-                    </div>
-                    <p>Microsoft OAuth provider</p>
-                  </label>
-                </div>
-                <div data-toggle="tooltip" title="This feature is available in Portainer Business Edition" style="color: #767676;">
-                  <input type="radio" id="google" disabled />
-                  <label for="google" style="cursor: pointer; border-color: #767676;">
-                    <div class="boxselector_header">
-                      <i class="fab fa-google" aria-hidden="true" style="margin-right: 2px;"></i>
-                      Google
-                    </div>
-                    <p>Google OAuth provider</p>
-                  </label>
-                </div>
-                <div data-toggle="tooltip" title="This feature is available in Portainer Business Edition" style="color: #767676;">
-                  <input type="radio" id="registry_auth" disabled />
-                  <label for="Github" style="cursor: pointer; border-color: #767676;">
-                    <div class="boxselector_header">
-                      <i class="fab fa-github" aria-hidden="true" style="margin-right: 2px;"></i>
-                      Github
-                    </div>
-                    <p>Github OAuth provider</p>
-                  </label>
-                </div>
-                <div>
-                  <input type="radio" id="custom" ng-model="settings.AuthenticationMethod" ng-value="3" />
-                  <label for="custom">
-                    <div class="boxselector_header">
-                      <i class="fa fa-user-check" aria-hidden="true" style="margin-right: 2px;"></i>
-                      Custom
-                    </div>
-                    <p>Custom OAuth provider</p>
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
+          <ad-settings
+            ng-if="authenticationMethodSelected(4)"
+            settings="formValues.ldap.adSettings"
+            tlsca-cert="formValues.TLSCACert"
+            state="state"
+            connectivity-check="LDAPConnectivityCheck"
+          ></ad-settings>
 
-          <oauth-settings ng-if="isOauthEnabled()" settings="OAuthSettings" teams="teams"></oauth-settings>
+          <oauth-settings ng-if="authenticationMethodSelected(3)" settings="OAuthSettings" teams="teams"></oauth-settings>
 
           <!-- actions -->
           <div class="col-sm-12 form-section-title">
@@ -425,7 +70,13 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-click="saveSettings()" ng-disabled="state.actionInProgress" button-spinner="state.actionInProgress">
+              <button
+                type="button"
+                class="btn btn-primary btn-sm"
+                ng-click="saveSettings()"
+                ng-disabled="state.actionInProgress || (settings.AuthenticationMethod === 2 && !isLDAPFormValid()) || (settings.AuthenticationMethod === 3 && !isOAuthTeamMembershipFormValid()) || authSettingsForm.$invalid"
+                button-spinner="state.actionInProgress"
+              >
                 <span ng-hide="state.actionInProgress">Save settings</span>
                 <span ng-show="state.actionInProgress">Saving...</span>
               </button>
diff --git a/app/portainer/views/settings/authentication/settingsAuthenticationController.js b/app/portainer/views/settings/authentication/settingsAuthenticationController.js
index f03b88f46..820dae8d3 100644
--- a/app/portainer/views/settings/authentication/settingsAuthenticationController.js
+++ b/app/portainer/views/settings/authentication/settingsAuthenticationController.js
@@ -1,181 +1,246 @@
-angular.module('portainer.app').controller('SettingsAuthenticationController', [
-  '$q',
-  '$scope',
-  '$state',
-  'Notifications',
-  'SettingsService',
-  'FileUploadService',
-  'TeamService',
-  function ($q, $scope, $state, Notifications, SettingsService, FileUploadService, TeamService) {
-    $scope.state = {
-      successfulConnectivityCheck: false,
-      failedConnectivityCheck: false,
-      uploadInProgress: false,
-      connectivityCheckInProgress: false,
-      actionInProgress: false,
-      availableUserSessionTimeoutOptions: [
-        {
-          key: '1 hour',
-          value: '1h',
-        },
-        {
-          key: '4 hours',
-          value: '4h',
-        },
-        {
-          key: '8 hours',
-          value: '8h',
-        },
-        {
-          key: '24 hours',
-          value: '24h',
-        },
-        { key: '1 week', value: `${24 * 7}h` },
-        { key: '1 month', value: `${24 * 30}h` },
-        { key: '6 months', value: `${24 * 30 * 6}h` },
-        { key: '1 year', value: `${24 * 30 * 12}h` },
-      ],
-    };
-
-    $scope.formValues = {
-      UserSessionTimeout: $scope.state.availableUserSessionTimeoutOptions[0],
-      TLSCACert: '',
-      LDAPSettings: {
-        AnonymousMode: true,
-        ReaderDN: '',
-        URL: '',
-        TLSConfig: {
-          TLS: false,
-          TLSSkipVerify: false,
-        },
-        StartTLS: false,
-        SearchSettings: [
-          {
-            BaseDN: '',
-            Filter: '',
-            UserNameAttribute: '',
-          },
-        ],
-        GroupSearchSettings: [
-          {
-            GroupBaseDN: '',
-            GroupFilter: '',
-            GroupAttribute: '',
-          },
-        ],
-        AutoCreateUsers: true,
+import angular from 'angular';
+import _ from 'lodash-es';
+
+import { HIDE_INTERNAL_AUTH } from '@/portainer/feature-flags/feature-ids';
+import { buildLdapSettingsModel, buildAdSettingsModel } from '@/portainer/settings/authentication/ldap/ldap-settings.model';
+
+angular.module('portainer.app').controller('SettingsAuthenticationController', SettingsAuthenticationController);
+
+function SettingsAuthenticationController($q, $scope, $state, Notifications, SettingsService, FileUploadService, TeamService, LDAPService) {
+  $scope.state = {
+    uploadInProgress: false,
+    actionInProgress: false,
+    availableUserSessionTimeoutOptions: [
+      {
+        key: '1 hour',
+        value: '1h',
       },
-    };
+      {
+        key: '4 hours',
+        value: '4h',
+      },
+      {
+        key: '8 hours',
+        value: '8h',
+      },
+      {
+        key: '24 hours',
+        value: '24h',
+      },
+      { key: '1 week', value: `${24 * 7}h` },
+      { key: '1 month', value: `${24 * 30}h` },
+      { key: '6 months', value: `${24 * 30 * 6}h` },
+      { key: '1 year', value: `${24 * 30 * 12}h` },
+    ],
+  };
+
+  $scope.formValues = {
+    UserSessionTimeout: $scope.state.availableUserSessionTimeoutOptions[0],
+    TLSCACert: '',
+    ldap: {
+      serverType: 0,
+      adSettings: buildAdSettingsModel(),
+      ldapSettings: buildLdapSettingsModel(),
+    },
+  };
+
+  $scope.authOptions = [
+    { id: 'auth_internal', icon: 'fa fa-users', label: 'Internal', description: 'Internal authentication mechanism', value: 1 },
+    { id: 'auth_ldap', icon: 'fa fa-users', label: 'LDAP', description: 'LDAP authentication', value: 2 },
+    { id: 'auth_ad', icon: 'fab fa-microsoft', label: 'Microsoft Active Directory', description: 'AD authentication', value: 4, feature: HIDE_INTERNAL_AUTH },
+    { id: 'auth_oauth', icon: 'fa fa-users', label: 'OAuth', description: 'OAuth authentication', value: 3 },
+  ];
+
+  $scope.onChangeAuthMethod = function onChangeAuthMethod(value) {
+    if (value === 4) {
+      $scope.settings.AuthenticationMethod = 2;
+      $scope.formValues.ldap.serverType = 2;
+      return;
+    }
+
+    if (value === 2) {
+      $scope.settings.AuthenticationMethod = 2;
+      $scope.formValues.ldap.serverType = $scope.formValues.ldap.ldapSettings.ServerType;
+      return;
+    }
+
+    $scope.settings.AuthenticationMethod = value;
+  };
+
+  $scope.authenticationMethodSelected = function authenticationMethodSelected(value) {
+    if (!$scope.settings) {
+      return false;
+    }
+
+    if (value === 4) {
+      return $scope.settings.AuthenticationMethod === 2 && $scope.formValues.ldap.serverType === 2;
+    }
+
+    if (value === 2) {
+      return $scope.settings.AuthenticationMethod === 2 && $scope.formValues.ldap.serverType !== 2;
+    }
+
+    return $scope.settings.AuthenticationMethod === value;
+  };
+
+  $scope.isOauthEnabled = function isOauthEnabled() {
+    return $scope.settings && $scope.settings.AuthenticationMethod === 3;
+  };
+
+  $scope.LDAPConnectivityCheck = LDAPConnectivityCheck;
+  function LDAPConnectivityCheck() {
+    const settings = angular.copy($scope.settings);
+
+    const { settings: ldapSettings, uploadRequired, tlscaFile } = prepareLDAPSettings();
+    settings.LDAPSettings = ldapSettings;
+    $scope.state.uploadInProgress = uploadRequired;
+
+    $scope.state.connectivityCheckInProgress = true;
+
+    $q.when(!uploadRequired || FileUploadService.uploadLDAPTLSFiles(tlscaFile, null, null))
+      .then(function success() {
+        return LDAPService.check(settings.LDAPSettings);
+      })
+      .then(function success() {
+        $scope.state.failedConnectivityCheck = false;
+        $scope.state.successfulConnectivityCheck = true;
+        Notifications.success('Connection to LDAP successful');
+      })
+      .catch(function error(err) {
+        $scope.state.failedConnectivityCheck = true;
+        $scope.state.successfulConnectivityCheck = false;
+        Notifications.error('Failure', err, 'Connection to LDAP failed');
+      })
+      .finally(function final() {
+        $scope.state.uploadInProgress = false;
+        $scope.state.connectivityCheckInProgress = false;
+      });
+  }
+
+  $scope.saveSettings = function () {
+    const settings = angular.copy($scope.settings);
+
+    const { settings: ldapSettings, uploadRequired, tlscaFile } = prepareLDAPSettings();
+    settings.LDAPSettings = ldapSettings;
+    $scope.state.uploadInProgress = uploadRequired;
 
-    $scope.isOauthEnabled = function isOauthEnabled() {
-      return $scope.settings && $scope.settings.AuthenticationMethod === 3;
-    };
+    $scope.state.actionInProgress = true;
 
-    $scope.addSearchConfiguration = function () {
-      $scope.formValues.LDAPSettings.SearchSettings.push({ BaseDN: '', UserNameAttribute: '', Filter: '' });
-    };
+    $q.when(!uploadRequired || FileUploadService.uploadLDAPTLSFiles(tlscaFile, null, null))
+      .then(function success() {
+        return SettingsService.update(settings);
+      })
+      .then(function success() {
+        Notifications.success('Authentication settings updated');
+      })
+      .catch(function error(err) {
+        Notifications.error('Failure', err, 'Unable to update authentication settings');
+      })
+      .finally(function final() {
+        $scope.state.uploadInProgress = false;
+        $scope.state.actionInProgress = false;
+      });
+  };
 
-    $scope.removeSearchConfiguration = function (index) {
-      $scope.formValues.LDAPSettings.SearchSettings.splice(index, 1);
-    };
+  function prepareLDAPSettings() {
+    const tlscaCert = $scope.formValues.TLSCACert;
 
-    $scope.addGroupSearchConfiguration = function () {
-      $scope.formValues.LDAPSettings.GroupSearchSettings.push({ GroupBaseDN: '', GroupAttribute: '', GroupFilter: '' });
-    };
+    const tlscaFile = tlscaCert !== $scope.settings.LDAPSettings.TLSConfig.TLSCACert ? tlscaCert : null;
 
-    $scope.removeGroupSearchConfiguration = function (index) {
-      $scope.formValues.LDAPSettings.GroupSearchSettings.splice(index, 1);
-    };
+    const isADServer = $scope.formValues.ldap.serverType === 2;
 
-    $scope.LDAPConnectivityCheck = function () {
-      var settings = angular.copy($scope.settings);
-      var TLSCAFile = $scope.formValues.TLSCACert !== settings.LDAPSettings.TLSConfig.TLSCACert ? $scope.formValues.TLSCACert : null;
+    const settings = isADServer ? $scope.formValues.ldap.adSettings : $scope.formValues.ldap.ldapSettings;
+
+    if (settings.AnonymousMode && !isADServer) {
+      settings.ReaderDN = '';
+      settings.Password = '';
+    }
 
-      if ($scope.formValues.LDAPSettings.AnonymousMode) {
-        settings.LDAPSettings['ReaderDN'] = '';
-        settings.LDAPSettings['Password'] = '';
+    if (isADServer) {
+      settings.AnonymousMode = false;
+    }
+
+    settings.URLs = settings.URLs.map((url) => {
+      if (url.includes(':')) {
+        return url;
       }
+      return url + (settings.TLSConfig.TLS ? ':636' : ':389');
+    });
+
+    const uploadRequired = (settings.TLSConfig.TLS || settings.StartTLS) && !settings.TLSConfig.TLSSkipVerify;
+
+    settings.URL = settings.URLs[0];
+
+    return { settings, uploadRequired, tlscaFile };
+  }
 
-      var uploadRequired = ($scope.formValues.LDAPSettings.TLSConfig.TLS || $scope.formValues.LDAPSettings.StartTLS) && !$scope.formValues.LDAPSettings.TLSConfig.TLSSkipVerify;
-      $scope.state.uploadInProgress = uploadRequired;
-
-      $scope.state.connectivityCheckInProgress = true;
-      $q.when(!uploadRequired || FileUploadService.uploadLDAPTLSFiles(TLSCAFile, null, null))
-        .then(function success() {
-          addLDAPDefaultPort(settings, $scope.formValues.LDAPSettings.TLSConfig.TLS);
-          return SettingsService.checkLDAPConnectivity(settings);
-        })
-        .then(function success() {
-          $scope.state.failedConnectivityCheck = false;
-          $scope.state.successfulConnectivityCheck = true;
-          Notifications.success('Connection to LDAP successful');
-        })
-        .catch(function error(err) {
-          $scope.state.failedConnectivityCheck = true;
-          $scope.state.successfulConnectivityCheck = false;
-          Notifications.error('Failure', err, 'Connection to LDAP failed');
-        })
-        .finally(function final() {
-          $scope.state.uploadInProgress = false;
-          $scope.state.connectivityCheckInProgress = false;
-        });
-    };
-
-    $scope.saveSettings = function () {
-      var settings = angular.copy($scope.settings);
-      var TLSCAFile = $scope.formValues.TLSCACert !== settings.LDAPSettings.TLSConfig.TLSCACert ? $scope.formValues.TLSCACert : null;
-
-      if ($scope.formValues.LDAPSettings.AnonymousMode) {
-        settings.LDAPSettings['ReaderDN'] = '';
-        settings.LDAPSettings['Password'] = '';
+  $scope.isLDAPFormValid = isLDAPFormValid;
+  function isLDAPFormValid() {
+    const ldapSettings = $scope.formValues.ldap.serverType === 2 ? $scope.formValues.ldap.adSettings : $scope.formValues.ldap.ldapSettings;
+    const isTLSMode = ldapSettings.TLSConfig.TLS || ldapSettings.StartTLS;
+
+    return (
+      _.compact(ldapSettings.URLs).length &&
+      (ldapSettings.AnonymousMode || (ldapSettings.ReaderDN && ldapSettings.Password)) &&
+      (!isTLSMode || $scope.formValues.TLSCACert || ldapSettings.TLSConfig.TLSSkipVerify)
+    );
+  }
+
+  $scope.isOAuthTeamMembershipFormValid = isOAuthTeamMembershipFormValid;
+  function isOAuthTeamMembershipFormValid() {
+    if ($scope.settings && $scope.settings.OAuthSettings.OAuthAutoMapTeamMemberships && $scope.settings.OAuthSettings.TeamMemberships) {
+      if (!$scope.settings.OAuthSettings.TeamMemberships.OAuthClaimName) {
+        return false;
       }
 
-      var uploadRequired = ($scope.formValues.LDAPSettings.TLSConfig.TLS || $scope.formValues.LDAPSettings.StartTLS) && !$scope.formValues.LDAPSettings.TLSConfig.TLSSkipVerify;
-      $scope.state.uploadInProgress = uploadRequired;
-
-      $scope.state.actionInProgress = true;
-      $q.when(!uploadRequired || FileUploadService.uploadLDAPTLSFiles(TLSCAFile, null, null))
-        .then(function success() {
-          addLDAPDefaultPort(settings, $scope.formValues.LDAPSettings.TLSConfig.TLS);
-          return SettingsService.update(settings);
-        })
-        .then(function success() {
-          Notifications.success('Authentication settings updated');
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to update authentication settings');
-        })
-        .finally(function final() {
-          $scope.state.uploadInProgress = false;
-          $scope.state.actionInProgress = false;
-        });
-    };
-
-    // Add default port if :port is not defined in URL
-    function addLDAPDefaultPort(settings, tlsEnabled) {
-      if (settings.LDAPSettings.URL.indexOf(':') === -1) {
-        settings.LDAPSettings.URL += tlsEnabled ? ':636' : ':389';
+      const hasInvalidMapping = $scope.settings.OAuthSettings.TeamMemberships.OAuthClaimMappings.some((m) => !(m.ClaimValRegex && m.Team));
+      if (hasInvalidMapping) {
+        return false;
       }
     }
-
-    function initView() {
-      $q.all({
-        settings: SettingsService.settings(),
-        teams: TeamService.teams(),
+    return true;
+  }
+
+  function initView() {
+    $q.all({
+      settings: SettingsService.settings(),
+      teams: TeamService.teams(),
+    })
+      .then(function success(data) {
+        var settings = data.settings;
+        $scope.teams = data.teams;
+        $scope.settings = settings;
+
+        $scope.OAuthSettings = settings.OAuthSettings;
+        $scope.authMethod = settings.AuthenticationMethod;
+        if (settings.AuthenticationMethod === 2 && settings.LDAPSettings.ServerType === 2) {
+          $scope.authMethod = 4;
+        }
+
+        $scope.formValues.ldap.serverType = settings.LDAPSettings.ServerType;
+        if (settings.LDAPSettings.ServerType === 2) {
+          $scope.formValues.ldap.adSettings = settings.LDAPSettings;
+        } else {
+          $scope.formValues.ldap.ldapSettings = settings.LDAPSettings;
+        }
+
+        if (settings.LDAPSettings.URL) {
+          settings.LDAPSettings.URLs = [settings.LDAPSettings.URL];
+        }
+        if (!settings.LDAPSettings.URLs) {
+          settings.LDAPSettings.URLs = [];
+        }
+        if (!settings.LDAPSettings.URLs.length) {
+          settings.LDAPSettings.URLs.push('');
+        }
+        if (!settings.LDAPSettings.ServerType) {
+          settings.LDAPSettings.ServerType = 0;
+        }
       })
-        .then(function success(data) {
-          var settings = data.settings;
-          $scope.teams = data.teams;
-          $scope.settings = settings;
-          $scope.formValues.LDAPSettings = settings.LDAPSettings;
-          $scope.OAuthSettings = settings.OAuthSettings;
-          $scope.formValues.TLSCACert = settings.LDAPSettings.TLSConfig.TLSCACert;
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to retrieve application settings');
-        });
-    }
+      .catch(function error(err) {
+        Notifications.error('Failure', err, 'Unable to retrieve application settings');
+      });
+  }
 
-    initView();
-  },
-]);
+  initView();
+}
diff --git a/app/portainer/views/settings/settings.html b/app/portainer/views/settings/settings.html
index b9a083450..c6e13d2b6 100644
--- a/app/portainer/views/settings/settings.html
+++ b/app/portainer/views/settings/settings.html
@@ -252,72 +252,217 @@
           <div class="col-sm-12 form-section-title">
             Backup configuration
           </div>
-          <div class="form-group"></div>
-          <div class="form-group">
-            <div class="boxselector_wrapper">
-              <div>
-                <input type="radio" id="backup_file" checked="checked" />
-                <label for="backup_file" style="padding-bottom: 20px;">
-                  <div class="boxselector_header">
-                    <i class="fa fa-download" aria-hidden="true" style="margin-right: 2px;"></i>
-                    Download backup file
-                  </div>
-                  <p></p>
-                </label>
+          <box-selector options="backupOptions" ng-model="formValues.backupFormType" on-change="(onBackupOptionsChange)"></box-selector>
+          <div ng-if="formValues.backupFormType === BACKUP_FORM_TYPES.S3">
+            <!-- Schedule automatic backups -->
+            <div class="form-group">
+              <div class="col-sm-12">
+                <por-switch-field
+                  label="Schedule automatic backups"
+                  name="s3-backup-setting"
+                  feature="s3BackupFeatureId"
+                  ng-model="formValues.scheduleAutomaticBackups"
+                  label-class="col-sm-2"
+                ></por-switch-field>
+              </div>
+            </div>
+            <!-- !Schedule automatic backups -->
+            <!-- Cron rule  -->
+            <div class="form-group" ng-if="formValues.scheduleAutomaticBackups">
+              <label for="cron_rule" class="col-sm-2 col-lg-2 control-label text-left">Cron rule</label>
+              <div class="col-sm-10 col-lg-10">
+                <input
+                  type="text"
+                  class="form-control"
+                  placeholder="0 2 * * *"
+                  id="cron_rule"
+                  name="cron_rule"
+                  ng-model="formValues.cronRule"
+                  limited-feature-dir="{{::s3BackupFeatureId}}"
+                  limited-feature-disabled
+                  limited-feature-class="limited-be"
+                  required
+                  cronRule
+                />
+              </div>
+            </div>
+            <!-- !Cron rule  -->
+            <!-- Access key id  -->
+            <div class="form-group">
+              <label for="access_key_id" class="col-sm-2 col-lg-2 control-label text-left">Access Key ID</label>
+              <div class="col-sm-9 col-lg-10">
+                <input
+                  type="text"
+                  class="form-control"
+                  id="access_key_id"
+                  name="access_key_id"
+                  ng-model="formValues.accessKeyId"
+                  ng-required="formValues.scheduleAutomaticBackups"
+                  limited-feature-dir="{{::s3BackupFeatureId}}"
+                  limited-feature-disabled
+                  limited-feature-class="limited-be"
+                />
+              </div>
+            </div>
+            <!-- !Access key id  -->
+            <!-- Secret access key -->
+            <div class="form-group">
+              <label for="secret_access_key" class="col-sm-3 col-lg-2 control-label text-left">Secret Access Key</label>
+              <div class="col-sm-9 col-lg-10">
+                <input
+                  type="password"
+                  class="form-control"
+                  id="secret_access_key"
+                  name="secret_access_key"
+                  ng-model="formValues.secretAccessKey"
+                  ng-required="formValues.scheduleAutomaticBackups"
+                  limited-feature-dir="{{::s3BackupFeatureId}}"
+                  limited-feature-disabled
+                  limited-feature-class="limited-be"
+                />
+              </div>
+            </div>
+            <!-- !Secret access key -->
+            <!-- Region -->
+            <div class="form-group">
+              <label for="region" class="col-sm-3 col-lg-2 control-label text-left">Region</label>
+              <div class="col-sm-9 col-lg-10">
+                <input
+                  type="text"
+                  class="form-control"
+                  placeholder="us-west-1"
+                  id="region"
+                  name="region"
+                  ng-model="formValues.region"
+                  ng-required="formValues.scheduleAutomaticBackups"
+                  limited-feature-dir="{{::s3BackupFeatureId}}"
+                  limited-feature-disabled
+                  limited-feature-class="limited-be"
+                />
+              </div>
+            </div>
+            <!-- !Region -->
+            <!-- Bucket name -->
+            <div class="form-group">
+              <label for="bucket_name" class="col-sm-3 col-lg-2 control-label text-left">Bucket name</label>
+              <div class="col-sm-9 col-lg-10">
+                <input
+                  type="text"
+                  class="form-control"
+                  id="bucket_name"
+                  name="bucket_name"
+                  ng-model="formValues.bucketName"
+                  ng-required="formValues.scheduleAutomaticBackups"
+                  limited-feature-dir="{{::s3BackupFeatureId}}"
+                  limited-feature-disabled
+                  limited-feature-class="limited-be"
+                />
               </div>
-              <div>
-                <input type="radio" id="backup_s3" disabled />
-                <label for="backup_s3" class="boxselector_disabled" style="background-color: #ffffff;">
-                  <div class="boxselector_header">
-                    <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
-                    Store in S3
-                  </div>
-                  <p>This feature is available in <a href="https://www.portainer.io/business-upsell?from=s3-backup-setting" target="_blank"> Portainer Business Edition</a></p>
+            </div>
+            <!-- !Bucket name -->
+            <div class="col-sm-12 form-section-title">
+              Security settings
+            </div>
+            <!-- Password protect S3 -->
+            <div class="form-group">
+              <label for="password_protect" class="col-sm-1 control-label text-left">Password protect</label>
+              <div class="col-sm-1">
+                <label class="switch">
+                  <input type="checkbox" id="password_protect_s3" name="password_protect_s3" ng-model="formValues.passwordProtectS3" disabled /><i></i>
                 </label>
               </div>
             </div>
-          </div>
-          <div class="col-sm-12 form-section-title">
-            Security settings
-          </div>
-          <!-- Password protect -->
-          <div class="form-group">
-            <label for="password_protect" class="col-sm-1 control-label text-left">Password protect</label>
-            <div class="col-sm-1">
-              <label class="switch"> <input type="checkbox" id="password_protect" name="password_protect" ng-model="formValues.passwordProtect" /><i></i> </label>
+            <!-- !Password protect S3 -->
+            <!-- Password S3 -->
+            <div class="form-group" ng-if="formValues.passwordProtectS3">
+              <label for="password" class="col-sm-1 control-label text-left">Password</label>
+              <div class="col-sm-3">
+                <input type="password" class="form-control" ng-model="formValues.passwordS3" id="password_S3" name="password_S3" required />
+              </div>
+            </div>
+            <div class="form-group col-md-12" ng-show="backupPortainerForm.password_S3.$invalid">
+              <div class="small text-warning">
+                <div ng-messages="backupPortainerForm.password_S3.$error">
+                  <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+                </div>
+              </div>
+            </div>
+            <!-- !Password S3 -->
+            <div class="form-group">
+              <div class="col-sm-12">
+                <button
+                  type="button"
+                  class="btn btn-primary btn-sm"
+                  ng-disabled="backupPortainerForm.$invalid"
+                  ng-click="exportBackup()"
+                  limited-feature-dir="{{::s3BackupFeatureId}}"
+                  limited-feature-disabled
+                  limited-feature-class="limited-be"
+                >
+                  <span><i class="fa fa-upload" aria-hidden="true"></i> Export backup</span>
+                </button>
+              </div>
+            </div>
+            <div class="form-group">
+              <hr />
+              <div class="col-sm-12">
+                <button
+                  type="submit"
+                  class="btn btn-primary btn-sm"
+                  ng-disabled="backupPortainerForm.$invalid ||state.backupInProgress"
+                  ng-click="saveS3BackupSettings()"
+                  limited-feature-dir="{{::s3BackupFeatureId}}"
+                  limited-feature-disabled
+                  limited-feature-class="limited-be"
+                >
+                  <span>Save backup settings</span>
+                </button>
+              </div>
             </div>
           </div>
-          <!-- !Password protect -->
+          <div ng-if="formValues.backupFormType === BACKUP_FORM_TYPES.FILE">
+            <div class="col-sm-12 form-section-title">
+              Security settings
+            </div>
+            <!-- Password protect -->
+            <div class="form-group">
+              <label for="password_protect" class="col-sm-1 control-label text-left">Password protect</label>
+              <div class="col-sm-1">
+                <label class="switch"> <input type="checkbox" id="password_protect" name="password_protect" ng-model="formValues.passwordProtect" /><i></i> </label>
+              </div>
+            </div>
+            <!-- !Password protect -->
 
-          <!-- Password -->
-          <div class="form-group" ng-if="formValues.passwordProtect">
-            <label for="password" class="col-sm-1 control-label text-left">Password</label>
-            <div class="col-sm-3">
-              <input type="password" class="form-control" ng-model="formValues.password" id="password" name="password" required />
+            <!-- Password -->
+            <div class="form-group" ng-if="formValues.passwordProtect">
+              <label for="password" class="col-sm-1 control-label text-left">Password</label>
+              <div class="col-sm-3">
+                <input type="password" class="form-control" ng-model="formValues.password" id="password" name="password" required />
+              </div>
             </div>
-          </div>
-          <div class="form-group col-md-12" ng-show="backupPortainerForm.password.$invalid">
-            <div class="small text-warning">
-              <div ng-messages="backupPortainerForm.password.$error">
-                <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+            <div class="form-group col-md-12" ng-show="backupPortainerForm.password.$invalid">
+              <div class="small text-warning">
+                <div ng-messages="backupPortainerForm.password.$error">
+                  <p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+                </div>
               </div>
             </div>
-          </div>
-          <!-- !Password -->
+            <!-- !Password -->
 
-          <!-- actions -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <button
-                type="button"
-                class="btn btn-primary btn-sm"
-                ng-click="downloadBackup()"
-                ng-disabled="backupPortainerForm.$invalid || state.backupInProgress"
-                button-spinner="state.backupInProgress"
-              >
-                <span ng-hide="state.backupInProgress">Download backup</span>
-                <span ng-show="state.backupInProgress">Downloading backup</span>
-              </button>
+            <!-- actions -->
+            <div class="form-group">
+              <div class="col-sm-12">
+                <button
+                  type="button"
+                  class="btn btn-primary btn-sm"
+                  ng-click="downloadBackup()"
+                  ng-disabled="backupPortainerForm.$invalid || state.backupInProgress || state.featureLimited"
+                  button-spinner="state.backupInProgress"
+                >
+                  <span ng-hide="state.backupInProgress">Download backup</span>
+                  <span ng-show="state.backupInProgress">Downloading backup</span>
+                </button>
+              </div>
             </div>
           </div>
           <!-- !actions -->
diff --git a/app/portainer/views/settings/settingsController.js b/app/portainer/views/settings/settingsController.js
index 8d7c48b3b..c7861e74e 100644
--- a/app/portainer/views/settings/settingsController.js
+++ b/app/portainer/views/settings/settingsController.js
@@ -1,3 +1,8 @@
+import angular from 'angular';
+
+import { buildOption } from '@/portainer/components/box-selector';
+import { S3_BACKUP_SETTING } from '@/portainer/feature-flags/feature-ids';
+
 angular.module('portainer.app').controller('SettingsController', [
   '$scope',
   '$state',
@@ -8,6 +13,12 @@ angular.module('portainer.app').controller('SettingsController', [
   'FileSaver',
   'Blob',
   function ($scope, $state, Notifications, SettingsService, StateManager, BackupService, FileSaver) {
+    $scope.s3BackupFeatureId = S3_BACKUP_SETTING;
+    $scope.backupOptions = [
+      buildOption('backup_file', 'fa fa-download', 'Download backup file', '', 'file'),
+      buildOption('backup_s3', 'fa fa-upload', 'Store in S3', 'Define a cron schedule', 's3', S3_BACKUP_SETTING),
+    ];
+
     $scope.state = {
       actionInProgress: false,
       availableEdgeAgentCheckinOptions: [
@@ -47,8 +58,11 @@ angular.module('portainer.app').controller('SettingsController', [
         },
       ],
       backupInProgress: false,
+      featureLimited: false,
     };
 
+    $scope.BACKUP_FORM_TYPES = { S3: 's3', FILE: 'file' };
+
     $scope.formValues = {
       customLogo: false,
       labelName: '',
@@ -57,6 +71,12 @@ angular.module('portainer.app').controller('SettingsController', [
       enableTelemetry: false,
       passwordProtect: false,
       password: '',
+      backupFormType: $scope.BACKUP_FORM_TYPES.FILE,
+    };
+
+    $scope.onBackupOptionsChange = function (type, limited) {
+      $scope.formValues.backupFormType = type;
+      $scope.state.featureLimited = limited;
     };
 
     $scope.removeFilteredContainerLabel = function (index) {
diff --git a/app/portainer/views/sidebar/sidebar.html b/app/portainer/views/sidebar/sidebar.html
index fe83ac39b..3ed7eb3ff 100644
--- a/app/portainer/views/sidebar/sidebar.html
+++ b/app/portainer/views/sidebar/sidebar.html
@@ -93,6 +93,10 @@
             Registries</sidebar-menu-item
           >
 
+          <sidebar-menu label="Authentication logs" icon-class="fa-history fa-fw" path="portainer.authLogs" is-sidebar-open="toggle" children-paths="['portainer.activityLogs']">
+            <sidebar-menu-item path="portainer.activityLogs" class-name="sidebar-sublist" data-cy="portainerSidebar-activityLogs">Activity Logs</sidebar-menu-item>
+          </sidebar-menu>
+
           <sidebar-menu label="Settings" icon-class="fa-cogs fa-fw" path="portainer.settings" is-sidebar-open="toggle" children-paths="['portainer.settings.authentication']">
             <sidebar-menu-item path="portainer.settings.authentication" class-name="sidebar-sublist" data-cy="portainerSidebar-authentication">Authentication</sidebar-menu-item>
 
diff --git a/package.json b/package.json
index dd095ea7a..4e93f797c 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,7 @@
     "jquery": "^3.5.1",
     "js-base64": "^3.6.0",
     "js-yaml": "^3.14.0",
-    "lodash-es": "^4.17.15",
+    "lodash-es": "^4.17.21",
     "moment": "^2.21.0",
     "ng-file-upload": "~12.2.13",
     "parse-duration": "^1.0.0",
@@ -162,7 +162,7 @@
   "resolutions": {
     "jquery": "^3.5.1",
     "decompress": "^4.2.1",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "js-yaml": "^3.14.0",
     "minimist": "^1.2.5",
     "http-proxy": "^1.18.1"
diff --git a/yarn.lock b/yarn.lock
index 6af13cde5..6141c7c5c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3222,7 +3222,7 @@ cssnano-util-same-parent@^4.0.0:
   resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
   integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
 
-cssnano@4:
+cssnano@^4.1.10:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.11.tgz#c7b5f5b81da269cb1fd982cb960c1200910c9a99"
   integrity sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==
@@ -6994,6 +6994,11 @@ lodash-es@^4.17.15:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
   integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash-webpack-plugin@^0.11.5:
   version "0.11.5"
   resolved "https://registry.yarnpkg.com/lodash-webpack-plugin/-/lodash-webpack-plugin-0.11.5.tgz#c4bd064b4f561c3f823fa5982bdeb12c475390b9"
@@ -7042,9 +7047,9 @@ lodash.uniq@^4.5.0:
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
 lodash@^3.10.0, lodash@^3.6.0, lodash@^4.0.0, lodash@^4.11.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.7.0, lodash@~2.4.1, lodash@~4.17.10, lodash@~4.17.15, lodash@~4.17.5:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 log-symbols@^1.0.2:
   version "1.0.2"

From c93ec8d08cd90579bd55fe475f762f7cdc63ac02 Mon Sep 17 00:00:00 2001
From: zees-dev <63374656+zees-dev@users.noreply.github.com>
Date: Thu, 7 Oct 2021 15:32:07 +1300
Subject: [PATCH 05/18] added swagger docs to websocketShellPodExec (#5840)

---
 api/http/handler/websocket/shell_pod.go | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/api/http/handler/websocket/shell_pod.go b/api/http/handler/websocket/shell_pod.go
index 3aa5c2463..4249a350d 100644
--- a/api/http/handler/websocket/shell_pod.go
+++ b/api/http/handler/websocket/shell_pod.go
@@ -10,13 +10,21 @@ import (
 	"github.com/portainer/portainer/api/http/security"
 )
 
-// websocketShellPodExec handles GET requests on /websocket/pod?token=<token>&endpointId=<endpointID>
-// The request will be upgraded to the websocket protocol.
-// Authentication and access is controlled via the mandatory token query parameter.
-// The request will proxy input from the client to the pod via long-lived websocket connection.
-// The following query parameters are mandatory:
-// * token: JWT token used for authentication against this environment(endpoint)
-// * endpointId: environment(endpoint) ID of the environment(endpoint) where the resource is located
+// @summary Execute a websocket on kubectl shell pod
+// @description The request will be upgraded to the websocket protocol. The request will proxy input from the client to the pod via long-lived websocket connection.
+// @description **Access policy**: authenticated
+// @security jwt
+// @tags websocket
+// @accept json
+// @produce json
+// @param endpointId query int true "environment(endpoint) ID of the environment(endpoint) where the resource is located"
+// @param token query string true "JWT token used for authentication against this environment(endpoint)"
+// @success 200
+// @failure 400
+// @failure 403
+// @failure 404
+// @failure 500
+// @router /websocket/kubernetes-shell [get]
 func (handler *Handler) websocketShellPodExec(w http.ResponseWriter, r *http.Request) *httperror.HandlerError {
 	endpointID, err := request.RetrieveNumericQueryParameter(r, "endpointId", false)
 	if err != nil {

From dcd1e902cd000a4f6a3b037c644f57338abefb73 Mon Sep 17 00:00:00 2001
From: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Date: Fri, 8 Oct 2021 11:39:16 +1300
Subject: [PATCH 06/18] fix(ldap): enable user/group setting in custom ldap
 (#5858)

---
 .../ldap-custom-group-search.html             | 54 ++-----------------
 .../ldap-custom-user-search.html              | 54 ++-----------------
 2 files changed, 10 insertions(+), 98 deletions(-)

diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
index e7db2ed5b..66ec9b640 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
@@ -16,17 +16,7 @@
         <portainer-tooltip position="bottom" message="The distinguished name of the element from which the LDAP server will search for groups."></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
-        <input
-          type="text"
-          class="form-control"
-          id="ldap_group_basedn_{{ $index }}"
-          ng-model="config.GroupBaseDN"
-          placeholder="dc=ldap,dc=domain,dc=tld"
-          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-          limited-feature-class="limited-be no-border"
-          limited-feature-disabled
-          limited-feature-tabindex="-1"
-        />
+        <input type="text" class="form-control" id="ldap_group_basedn_{{ $index }}" ng-model="config.GroupBaseDN" placeholder="dc=ldap,dc=domain,dc=tld" />
       </div>
 
       <label for="ldap_group_att_{{ $index }}" class="col-sm-4 col-md-2 control-label text-left">
@@ -34,17 +24,7 @@
         <portainer-tooltip position="bottom" message="LDAP attribute which denotes the group membership."></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
-        <input
-          type="text"
-          class="form-control"
-          id="ldap_group_att_{{ $index }}"
-          ng-model="config.GroupAttribute"
-          placeholder="member"
-          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-          limited-feature-class="limited-be no-border"
-          limited-feature-disabled
-          limited-feature-tabindex="-1"
-        />
+        <input type="text" class="form-control" id="ldap_group_att_{{ $index }}" ng-model="config.GroupAttribute" placeholder="member" />
       </div>
     </div>
     <div class="form-group">
@@ -53,27 +33,10 @@
         <portainer-tooltip position="bottom" 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 }">
-        <input
-          type="text"
-          class="form-control"
-          id="ldap_group_filter_{{ $index }}"
-          ng-model="config.GroupFilter"
-          placeholder="(objectClass=account)"
-          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-          limited-feature-class="limited-be no-border"
-          limited-feature-disabled
-          limited-feature-tabindex="-1"
-        />
+        <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)"
-          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-          limited-feature-disabled
-          limited-feature-tabindex="-1"
-        >
+        <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)">
           <i class="fa fa-trash" aria-hidden="true"></i>
         </button>
       </div>
@@ -83,14 +46,7 @@
 
 <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()"
-      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-      limited-feature-tabindex="-1"
-      limited-feature-disabled
-    >
+    <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>
   </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
index 331d8e8ab..fe41906ca 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
@@ -16,17 +16,7 @@
         <portainer-tooltip position="bottom" message="The distinguished name of the element from which the LDAP server will search for users."></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-4">
-        <input
-          type="text"
-          class="form-control"
-          id="ldap_basedn_{{ $index }}"
-          ng-model="config.BaseDN"
-          placeholder="dc=ldap,dc=domain,dc=tld"
-          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-          limited-feature-class="limited-be no-border"
-          limited-feature-tabindex="-1"
-          limited-feature-disabled
-        />
+        <input type="text" class="form-control" id="ldap_basedn_{{ $index }}" ng-model="config.BaseDN" placeholder="dc=ldap,dc=domain,dc=tld" />
       </div>
 
       <label for="ldap_username_att_{{ $index }}" class="col-sm-4 col-md-3 col-lg-2 control-label text-left">
@@ -34,17 +24,7 @@
         <portainer-tooltip position="bottom" message="LDAP attribute which denotes the username."></portainer-tooltip>
       </label>
       <div class="col-sm-8 col-md-3 col-lg-4">
-        <input
-          type="text"
-          class="form-control"
-          id="ldap_username_att_{{ $index }}"
-          ng-model="config.UserNameAttribute"
-          placeholder="uid"
-          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-          limited-feature-class="limited-be no-border"
-          limited-feature-tabindex="-1"
-          limited-feature-disabled
-        />
+        <input type="text" class="form-control" id="ldap_username_att_{{ $index }}" ng-model="config.UserNameAttribute" placeholder="uid" />
       </div>
     </div>
     <div class="form-group">
@@ -53,27 +33,10 @@
         <portainer-tooltip position="bottom" 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 }">
-        <input
-          type="text"
-          class="form-control"
-          id="ldap_filter_{{ $index }}"
-          ng-model="config.Filter"
-          placeholder="(objectClass=account)"
-          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-          limited-feature-class="limited-be no-border"
-          limited-feature-tabindex="-1"
-          limited-feature-disabled
-        />
+        <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)"
-          limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-          limited-feature-tabindex="-1"
-          limited-feature-disabled
-        >
+        <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)">
           <i class="fa fa-trash" aria-hidden="true"></i>
         </button>
       </div>
@@ -83,14 +46,7 @@
 
 <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()"
-      limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
-      limited-feature-tabindex="-1"
-      limited-feature-disabled
-    >
+    <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>
   </div>

From 0200a668dffdfe23a4809ccbd17dd4cc5193769a Mon Sep 17 00:00:00 2001
From: wheresolivia <78844659+wheresolivia@users.noreply.github.com>
Date: Fri, 8 Oct 2021 12:01:10 +1300
Subject: [PATCH 07/18] fix(ui): ldap group search config labelclose EE-1846
 (#5850)

Co-authored-by: olivia.wang <olivia.wang@wherescape.com>
---
 .../ldap/ldap-custom-group-search/ldap-custom-group-search.html | 2 +-
 .../ldap/ldap-group-search/ldap-group-search.html               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
index 66ec9b640..7ae2ff302 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
@@ -1,5 +1,5 @@
 <div class="col-sm-12 form-section-title" style="float: initial;">
-  Teams auto-population configurations
+  Group search configurations
 </div>
 
 <rd-widget ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)" style="display: block; margin-bottom: 10px;">
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
index 473aade4b..7b50f27e0 100644
--- a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
@@ -1,5 +1,5 @@
 <div class="col-sm-12 form-section-title" style="float: initial;">
-  Teams auto-population configurations
+  Group search configurations
 </div>
 
 <div style="margin-top: 10px;" ng-repeat="config in $ctrl.settings | limitTo: (1 - $ctrl.settings)">

From 8383bc05c5bea8938c4a5f9f85ce2a8388b1c21a Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Fri, 8 Oct 2021 01:59:50 +0300
Subject: [PATCH 08/18] fix(compose): use tcp for agent proxy EE-1807 (#5854)

---
 api/exec/compose_stack.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/exec/compose_stack.go b/api/exec/compose_stack.go
index a30314ca6..3bdb43430 100644
--- a/api/exec/compose_stack.go
+++ b/api/exec/compose_stack.go
@@ -93,7 +93,7 @@ func (manager *ComposeStackManager) fetchEndpointProxy(endpoint *portainer.Endpo
 		return "", nil, err
 	}
 
-	return fmt.Sprintf("http://127.0.0.1:%d", proxy.Port), proxy, nil
+	return fmt.Sprintf("tcp://127.0.0.1:%d", proxy.Port), proxy, nil
 }
 
 func createEnvFile(stack *portainer.Stack) (string, error) {

From f544d4447c74474370a916ca038d9dc7e1b39984 Mon Sep 17 00:00:00 2001
From: cong meng <mcpacino@gmail.com>
Date: Thu, 14 Oct 2021 17:00:31 +1300
Subject: [PATCH 09/18] fix(rbac) EE-1867 regular user unable to access pod and
 node stats view (#5886)

Co-authored-by: Simon Meng <simon.meng@portainer.io>
---
 api/kubernetes/cli/role.go | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/api/kubernetes/cli/role.go b/api/kubernetes/cli/role.go
index 7c22f1b32..4087a8fde 100644
--- a/api/kubernetes/cli/role.go
+++ b/api/kubernetes/cli/role.go
@@ -18,6 +18,11 @@ func getPortainerUserDefaultPolicies() []rbacv1.PolicyRule {
 			Resources: []string{"storageclasses"},
 			APIGroups: []string{"storage.k8s.io"},
 		},
+		{
+			Verbs:     []string{"list", "get"},
+			Resources: []string{"namespaces", "pods", "nodes"},
+			APIGroups: []string{"metrics.k8s.io"},
+		},
 	}
 }
 

From dfe0b3f69d37cf2ee441d871ab2bc08801333e1a Mon Sep 17 00:00:00 2001
From: andres-portainer <91705312+andres-portainer@users.noreply.github.com>
Date: Thu, 14 Oct 2021 19:15:04 -0300
Subject: [PATCH 10/18] fix(namespaces): remove the stacks from the data store
 when deleting their corresponding Kubernetes namespace EE-1872 (#5885)

* fix(namespaces): remove the stacks from the data store when deleting their corresponding Kubernetes namespace EE-1872

* add endpoint ID checking

Co-authored-by: andres-portainer <andres-portainer@users.noreply.github.com>
Co-authored-by: ArrisLee <arris_li@hotmail.com>
---
 api/http/proxy/factory/kubernetes/namespaces.go | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/api/http/proxy/factory/kubernetes/namespaces.go b/api/http/proxy/factory/kubernetes/namespaces.go
index daa71749f..c501f7cc7 100644
--- a/api/http/proxy/factory/kubernetes/namespaces.go
+++ b/api/http/proxy/factory/kubernetes/namespaces.go
@@ -46,5 +46,19 @@ func (transport *baseTransport) proxyNamespaceDeleteOperation(request *http.Requ
 			}
 		}
 	}
+
+	stacks, err := transport.dataStore.Stack().Stacks()
+	if err != nil {
+		return nil, err
+	}
+
+	for _, s := range stacks {
+		if s.Namespace == namespace && s.EndpointID == transport.endpoint.ID {
+			if err := transport.dataStore.Stack().DeleteStack(s.ID); err != nil {
+				return nil, err
+			}
+		}
+	}
+
 	return transport.executeKubernetesRequest(request)
 }

From 9dcd5651e8074ea7cb2bd3aa3efa5036bb5e2542 Mon Sep 17 00:00:00 2001
From: cong meng <mcpacino@gmail.com>
Date: Fri, 15 Oct 2021 21:42:46 +1300
Subject: [PATCH 11/18] fix(registry) EE-1861 improve registry selection
 (#5899)

* fix(registry) EE-1861 hide anonymous dockerhub registry if user has an authenticated one

* fix(registry) EE-1861 pick up a best match dockerhub registry

* fix(registry) EE-1861 set the anonymous registry as default if it is shown

* fix(registry) EE-1861 refactor how to match registry

Co-authored-by: Simon Meng <simon.meng@portainer.io>
---
 .../por-image-registry.controller.js          | 12 +++--
 app/portainer/services/api/registryService.js | 46 +++++++++++++++----
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/app/docker/components/imageRegistry/por-image-registry.controller.js b/app/docker/components/imageRegistry/por-image-registry.controller.js
index 5cf3fc709..a62eb7bff 100644
--- a/app/docker/components/imageRegistry/por-image-registry.controller.js
+++ b/app/docker/components/imageRegistry/por-image-registry.controller.js
@@ -69,13 +69,19 @@ class porImageRegistryController {
   async reloadRegistries() {
     return this.$async(async () => {
       try {
-        const registries = await this.EndpointService.registries(this.endpoint.Id, this.namespace);
-        this.registries = _.concat(this.defaultRegistry, registries);
+        let showDefaultRegistry = false;
+        this.registries = await this.EndpointService.registries(this.endpoint.Id, this.namespace);
+
+        // hide default(anonymous) dockerhub registry if user has an authenticated one
+        if (!this.registries.some((registry) => registry.Type === RegistryTypes.DOCKERHUB)) {
+          showDefaultRegistry = true;
+          this.registries.push(this.defaultRegistry);
+        }
 
         const id = this.model.Registry.Id;
         const registry = _.find(this.registries, { Id: id });
         if (!registry) {
-          this.model.Registry = this.defaultRegistry;
+          this.model.Registry = showDefaultRegistry ? this.defaultRegistry : this.registries[0];
         }
       } catch (err) {
         this.Notifications.error('Failure', err, 'Unable to retrieve registries');
diff --git a/app/portainer/services/api/registryService.js b/app/portainer/services/api/registryService.js
index 34b8e882f..a398f70bf 100644
--- a/app/portainer/services/api/registryService.js
+++ b/app/portainer/services/api/registryService.js
@@ -107,17 +107,45 @@ angular.module('portainer.app').factory('RegistryService', [
       return url;
     }
 
-    function retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries, registryId) {
-      const model = new PorImageRegistryModel();
-      const registry = registries.find((reg) => {
-        if (registryId) {
-          return reg.Id === registryId;
+    // findBestMatchRegistry finds out the best match registry for repository
+    // matching precedence:
+    // 1. registryId matched
+    // 2. both domain name and username matched (for dockerhub only)
+    // 3. only URL matched
+    // 4. pick up the first dockerhub registry
+    function findBestMatchRegistry(repository, registries, registryId) {
+      let highMatch, lowMatch;
+
+      for (const registry of registries) {
+        if (registry.Id == registryId) {
+          return registry;
+        }
+
+        if (registry.Type === RegistryTypes.DOCKERHUB) {
+          // try to match repository examples:
+          //   <USERNAME>/nginx:latest
+          //   docker.io/<USERNAME>/nginx:latest
+          if (repository.startsWith(registry.Username + '/') || repository.startsWith(getURL(registry) + '/' + registry.Username + '/')) {
+            highMatch = registry;
+          }
+
+          // try to match repository examples:
+          //   portainer/portainer-ee:latest
+          //   <NON-USERNAME>/portainer-ee:latest
+          lowMatch = lowMatch || registry;
         }
-        if (reg.Type === RegistryTypes.DOCKERHUB) {
-          return _.includes(repository, reg.Username);
+
+        if (_.includes(repository, getURL(registry))) {
+          lowMatch = registry;
         }
-        return _.includes(repository, getURL(reg));
-      });
+      }
+
+      return highMatch || lowMatch;
+    }
+
+    function retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries, registryId) {
+      const model = new PorImageRegistryModel();
+      const registry = findBestMatchRegistry(repository, registries, registryId);
       if (registry) {
         const url = getURL(registry);
         let lastIndex = repository.lastIndexOf(url);

From 006634e007f45e362db8119570c4a554ff04de98 Mon Sep 17 00:00:00 2001
From: Matt Hook <hookenz@gmail.com>
Date: Mon, 18 Oct 2021 15:08:38 +1300
Subject: [PATCH 12/18] fix(helm): allow settings to be saved offline EE-1907
 (#5908)

* skip validating default helm repo to allow offline saving of settings. Default repo is hardcoded and correct.

* dont validate the helm repo if the repo hasn't changed or is the default

* fix logic
---
 api/http/handler/settings/settings_update.go | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/api/http/handler/settings/settings_update.go b/api/http/handler/settings/settings_update.go
index 476b2d70b..0a64e7d33 100644
--- a/api/http/handler/settings/settings_update.go
+++ b/api/http/handler/settings/settings_update.go
@@ -54,11 +54,8 @@ func (payload *settingsUpdatePayload) Validate(r *http.Request) error {
 	if payload.TemplatesURL != nil && *payload.TemplatesURL != "" && !govalidator.IsURL(*payload.TemplatesURL) {
 		return errors.New("Invalid external templates URL. Must correspond to a valid URL format")
 	}
-	if payload.HelmRepositoryURL != nil && *payload.HelmRepositoryURL != "" {
-		err := libhelm.ValidateHelmRepositoryURL(*payload.HelmRepositoryURL)
-		if err != nil {
-			return errors.Wrap(err, "Invalid Helm repository URL. Must correspond to a valid URL format")
-		}
+	if payload.HelmRepositoryURL != nil && *payload.HelmRepositoryURL != "" && !govalidator.IsURL(*payload.HelmRepositoryURL) {
+		return errors.New("Invalid Helm repository URL. Must correspond to a valid URL format")
 	}
 	if payload.UserSessionTimeout != nil {
 		_, err := time.ParseDuration(*payload.UserSessionTimeout)
@@ -114,7 +111,16 @@ func (handler *Handler) settingsUpdate(w http.ResponseWriter, r *http.Request) *
 	}
 
 	if payload.HelmRepositoryURL != nil {
-		settings.HelmRepositoryURL = strings.TrimSuffix(strings.ToLower(*payload.HelmRepositoryURL), "/")
+		newHelmRepo := strings.TrimSuffix(strings.ToLower(*payload.HelmRepositoryURL), "/")
+
+		if newHelmRepo != settings.HelmRepositoryURL && newHelmRepo != portainer.DefaultHelmRepositoryURL {
+			err := libhelm.ValidateHelmRepositoryURL(*payload.HelmRepositoryURL)
+			if err != nil {
+				return &httperror.HandlerError{http.StatusBadRequest, "Invalid Helm repository URL. Must correspond to a valid URL format", err}
+			}
+		}
+
+		settings.HelmRepositoryURL = newHelmRepo
 	}
 
 	if payload.BlackListedLabels != nil {

From 1ff5f25e40c26c1e9ef8cea0a1451e92455bb859 Mon Sep 17 00:00:00 2001
From: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Date: Tue, 19 Oct 2021 13:21:57 +1300
Subject: [PATCH 13/18] fix(registry): ignore pull limit in non-docker hub
 registry. (#5917)

---
 .../views/applications/create/createApplication.html         | 2 +-
 .../views/applications/create/createApplicationController.js | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index d590c6c38..c7d635213 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -1771,7 +1771,7 @@
                   ng-if="ctrl.state.appType === ctrl.KubernetesDeploymentTypes.APPLICATION_FORM"
                   type="button"
                   class="btn btn-primary btn-sm"
-                  ng-disabled="!kubernetesApplicationCreationForm.$valid || ctrl.isDeployUpdateButtonDisabled() || !ctrl.state.pullImageValidity"
+                  ng-disabled="!kubernetesApplicationCreationForm.$valid || ctrl.isDeployUpdateButtonDisabled() || !ctrl.imageValidityIsValid()"
                   ng-click="ctrl.deployApplication()"
                   button-spinner="ctrl.state.actionInProgress"
                   data-cy="k8sAppCreate-deployButton"
diff --git a/app/kubernetes/views/applications/create/createApplicationController.js b/app/kubernetes/views/applications/create/createApplicationController.js
index 24578a374..a11218673 100644
--- a/app/kubernetes/views/applications/create/createApplicationController.js
+++ b/app/kubernetes/views/applications/create/createApplicationController.js
@@ -2,6 +2,7 @@ import angular from 'angular';
 import _ from 'lodash-es';
 import filesizeParser from 'filesize-parser';
 import * as JsonPatch from 'fast-json-patch';
+import { RegistryTypes } from '@/portainer/models/registryTypes';
 
 import {
   KubernetesApplicationDataAccessPolicies,
@@ -193,6 +194,10 @@ class KubernetesCreateApplicationController {
     this.state.pullImageValidity = validity;
   }
 
+  imageValidityIsValid() {
+    return this.state.pullImageValidity || this.formValues.ImageModel.Registry.Type !== RegistryTypes.DOCKERHUB;
+  }
+
   onChangeName() {
     const existingApplication = _.find(this.applications, { Name: this.formValues.Name });
     this.state.alreadyExists = (this.state.isEdit && existingApplication && this.application.Id !== existingApplication.Id) || (!this.state.isEdit && existingApplication);

From 4f350ab6f5b5123db6322c829d50086fcbf29162 Mon Sep 17 00:00:00 2001
From: cong meng <mcpacino@gmail.com>
Date: Tue, 19 Oct 2021 14:54:44 +1300
Subject: [PATCH 14/18] fix(registry) EE-1861 improve registry selection
 (#5921)

* fix(registry) EE-1861 fail to select registry with same name

* fix(registry) EE-1861 show registry modal when pull and push image

* fix(registry) EE-1861 cleanup code

Co-authored-by: Simon Meng <simon.meng@portainer.io>
---
 .../imageRegistry/por-image-registry.html     |  2 +-
 .../views/images/edit/imageController.js      | 35 ++++++++++++-----
 app/portainer/services/api/registryService.js | 29 +++++++++++---
 app/portainer/services/modalService.js        | 11 ++++++
 .../services/registryModalService.js          | 39 +++++++++++++++++++
 5 files changed, 100 insertions(+), 16 deletions(-)
 create mode 100644 app/portainer/services/registryModalService.js

diff --git a/app/docker/components/imageRegistry/por-image-registry.html b/app/docker/components/imageRegistry/por-image-registry.html
index 375582a66..c89d17da5 100644
--- a/app/docker/components/imageRegistry/por-image-registry.html
+++ b/app/docker/components/imageRegistry/por-image-registry.html
@@ -6,7 +6,7 @@
     </label>
     <div ng-class="$ctrl.inputClass">
       <select
-        ng-options="registry as registry.Name for registry in $ctrl.registries track by registry.Name"
+        ng-options="registry as registry.Name for registry in $ctrl.registries track by registry.Id"
         ng-model="$ctrl.model.Registry"
         id="image_registry"
         class="form-control"
diff --git a/app/docker/views/images/edit/imageController.js b/app/docker/views/images/edit/imageController.js
index e4ae295d6..8d7a467a6 100644
--- a/app/docker/views/images/edit/imageController.js
+++ b/app/docker/views/images/edit/imageController.js
@@ -17,6 +17,8 @@ angular.module('portainer.docker').controller('ImageController', [
   'FileSaver',
   'Blob',
   'endpoint',
+  'EndpointService',
+  'RegistryModalService',
   function (
     $async,
     $q,
@@ -32,7 +34,9 @@ angular.module('portainer.docker').controller('ImageController', [
     ModalService,
     FileSaver,
     Blob,
-    endpoint
+    endpoint,
+    EndpointService,
+    RegistryModalService
   ) {
     $scope.endpoint = endpoint;
     $scope.isAdmin = Authentication.isAdmin();
@@ -84,11 +88,13 @@ angular.module('portainer.docker').controller('ImageController', [
 
     async function pushTag(repository) {
       return $async(async () => {
-        $('#uploadResourceHint').show();
         try {
-          const registryModel = await RegistryService.retrievePorRegistryModelFromRepository(repository, endpoint.Id);
-          await ImageService.pushImage(registryModel);
-          Notifications.success('Image successfully pushed', repository);
+          const registryModel = await RegistryModalService.registryModal(repository, $scope.registries);
+          if (registryModel) {
+            $('#uploadResourceHint').show();
+            await ImageService.pushImage(registryModel);
+            Notifications.success('Image successfully pushed', repository);
+          }
         } catch (err) {
           Notifications.error('Failure', err, 'Unable to push image to repository');
         } finally {
@@ -100,11 +106,13 @@ angular.module('portainer.docker').controller('ImageController', [
     $scope.pullTag = pullTag;
     async function pullTag(repository) {
       return $async(async () => {
-        $('#downloadResourceHint').show();
         try {
-          const registryModel = await RegistryService.retrievePorRegistryModelFromRepository(repository, endpoint.Id);
-          await ImageService.pullImage(registryModel);
-          Notifications.success('Image successfully pulled', repository);
+          const registryModel = await RegistryModalService.registryModal(repository, $scope.registries);
+          if (registryModel) {
+            $('#downloadResourceHint').show();
+            await ImageService.pullImage(registryModel);
+            Notifications.success('Image successfully pulled', repository);
+          }
         } catch (err) {
           Notifications.error('Failure', err, 'Unable to pull image from repository');
         } finally {
@@ -171,8 +179,15 @@ angular.module('portainer.docker').controller('ImageController', [
       });
     };
 
-    function initView() {
+    async function initView() {
       HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
+
+      try {
+        $scope.registries = await RegistryService.loadRegistriesForDropdown(endpoint.Id);
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to load registries');
+      }
+
       $q.all({
         image: ImageService.image($transition$.params().id),
         history: ImageService.history($transition$.params().id),
diff --git a/app/portainer/services/api/registryService.js b/app/portainer/services/api/registryService.js
index a398f70bf..a68bf2555 100644
--- a/app/portainer/services/api/registryService.js
+++ b/app/portainer/services/api/registryService.js
@@ -22,6 +22,8 @@ angular.module('portainer.app').factory('RegistryService', [
       createRegistry,
       createGitlabRegistries,
       retrievePorRegistryModelFromRepository,
+      retrievePorRegistryModelFromRepositoryWithRegistries,
+      loadRegistriesForDropdown,
     };
 
     function registries() {
@@ -114,7 +116,7 @@ angular.module('portainer.app').factory('RegistryService', [
     // 3. only URL matched
     // 4. pick up the first dockerhub registry
     function findBestMatchRegistry(repository, registries, registryId) {
-      let highMatch, lowMatch;
+      let match2, match3, match4;
 
       for (const registry of registries) {
         if (registry.Id == registryId) {
@@ -126,21 +128,21 @@ angular.module('portainer.app').factory('RegistryService', [
           //   <USERNAME>/nginx:latest
           //   docker.io/<USERNAME>/nginx:latest
           if (repository.startsWith(registry.Username + '/') || repository.startsWith(getURL(registry) + '/' + registry.Username + '/')) {
-            highMatch = registry;
+            match2 = registry;
           }
 
           // try to match repository examples:
           //   portainer/portainer-ee:latest
           //   <NON-USERNAME>/portainer-ee:latest
-          lowMatch = lowMatch || registry;
+          match4 = match4 || registry;
         }
 
         if (_.includes(repository, getURL(registry))) {
-          lowMatch = registry;
+          match3 = registry;
         }
       }
 
-      return highMatch || lowMatch;
+      return match2 || match3 || match4;
     }
 
     function retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries, registryId) {
@@ -176,5 +178,22 @@ angular.module('portainer.app').factory('RegistryService', [
         }
       });
     }
+
+    function loadRegistriesForDropdown(endpointId, namespace) {
+      return $async(async () => {
+        try {
+          const registries = await EndpointService.registries(endpointId, namespace);
+
+          // hide default(anonymous) dockerhub registry if user has an authenticated one
+          if (!registries.some((registry) => registry.Type === RegistryTypes.DOCKERHUB)) {
+            registries.push(new DockerHubViewModel());
+          }
+
+          return registries;
+        } catch (err) {
+          throw { msg: 'Unable to retrieve the registries', err: err };
+        }
+      });
+    }
   },
 ]);
diff --git a/app/portainer/services/modalService.js b/app/portainer/services/modalService.js
index 9203d6248..e7d24ec38 100644
--- a/app/portainer/services/modalService.js
+++ b/app/portainer/services/modalService.js
@@ -308,6 +308,17 @@ angular.module('portainer.app').factory('ModalService', [
       );
     };
 
+    service.selectRegistry = function (options) {
+      var box = bootbox.prompt({
+        title: 'Which registry do you want to use?',
+        inputType: 'select',
+        value: options.defaultValue,
+        inputOptions: options.options,
+        callback: options.callback,
+      });
+      applyBoxCSS(box);
+    };
+
     return service;
   },
 ]);
diff --git a/app/portainer/services/registryModalService.js b/app/portainer/services/registryModalService.js
new file mode 100644
index 000000000..6690cb771
--- /dev/null
+++ b/app/portainer/services/registryModalService.js
@@ -0,0 +1,39 @@
+import _ from 'lodash';
+
+angular.module('portainer.app').factory('RegistryModalService', ModalServiceFactory);
+
+function ModalServiceFactory($q, ModalService, RegistryService) {
+  const service = {};
+
+  function registries2Options(registries) {
+    return registries.map((r) => ({
+      text: r.Name,
+      value: String(r.Id),
+    }));
+  }
+
+  service.registryModal = async function (repository, registries) {
+    const deferred = $q.defer();
+
+    const options = registries2Options(registries);
+    const registryModel = RegistryService.retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries);
+    const defaultValue = String(_.get(registryModel, 'Registry.Id', '0'));
+
+    ModalService.selectRegistry({
+      options,
+      defaultValue,
+      callback: (registryId) => {
+        if (registryId) {
+          const registryModel = RegistryService.retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries, registryId);
+          deferred.resolve(registryModel);
+        } else {
+          deferred.resolve(null);
+        }
+      },
+    });
+
+    return deferred.promise;
+  };
+
+  return service;
+}

From f0efc4f9048d5f61e3a259e0e1d4f0229985109e Mon Sep 17 00:00:00 2001
From: Matt Hook <hookenz@gmail.com>
Date: Tue, 19 Oct 2021 15:51:16 +1300
Subject: [PATCH 15/18] bump to 2.9.2

---
 api/http/handler/handler.go | 2 +-
 api/portainer.go            | 2 +-
 package.json                | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/api/http/handler/handler.go b/api/http/handler/handler.go
index df6333f6a..62c43e66c 100644
--- a/api/http/handler/handler.go
+++ b/api/http/handler/handler.go
@@ -74,7 +74,7 @@ type Handler struct {
 }
 
 // @title PortainerCE API
-// @version 2.9.1
+// @version 2.9.2
 // @description.markdown api-description.md
 // @termsOfService
 
diff --git a/api/portainer.go b/api/portainer.go
index 50f2d1ac0..1051511b0 100644
--- a/api/portainer.go
+++ b/api/portainer.go
@@ -1470,7 +1470,7 @@ type (
 
 const (
 	// APIVersion is the version number of the Portainer API
-	APIVersion = "2.9.1"
+	APIVersion = "2.9.2"
 	// DBVersion is the version number of the Portainer database
 	DBVersion = 32
 	// ComposeSyntaxMaxVersion is a maximum supported version of the docker compose syntax
diff --git a/package.json b/package.json
index 4e93f797c..2afa0cbd2 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "author": "Portainer.io",
   "name": "portainer",
   "homepage": "http://portainer.io",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "repository": {
     "type": "git",
     "url": "git@github.com:portainer/portainer.git"
@@ -176,4 +176,4 @@
     "*.js": "eslint --cache --fix",
     "*.{js,css,md,html}": "prettier --write"
   }
-}
\ No newline at end of file
+}

From d17e7c81607e33d1bc5c9d04dfd1d5031fdbccba Mon Sep 17 00:00:00 2001
From: Hui <arris_li@hotmail.com>
Date: Wed, 20 Oct 2021 16:00:40 +1300
Subject: [PATCH 16/18] fix(stack): auto update breaks after restarting
 Portainer EE-1915

---
 api/bolt/stack/stack.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/bolt/stack/stack.go b/api/bolt/stack/stack.go
index b6839493f..a2af7e1f9 100644
--- a/api/bolt/stack/stack.go
+++ b/api/bolt/stack/stack.go
@@ -192,8 +192,8 @@ func (service *Service) RefreshableStacks() ([]portainer.Stack, error) {
 		bucket := tx.Bucket([]byte(BucketName))
 		cursor := bucket.Cursor()
 
-		var stack portainer.Stack
 		for k, v := cursor.First(); k != nil; k, v = cursor.Next() {
+			stack := portainer.Stack{}
 			err := internal.UnmarshalObject(v, &stack)
 			if err != nil {
 				return err

From 90a18b5deda19f139f7aeffa10d6f3b1bb1e4523 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20Busso?= <stephane.busso@gmail.com>
Date: Wed, 20 Oct 2021 20:35:18 +1300
Subject: [PATCH 17/18] Bump dbversion

---
 api/portainer.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/portainer.go b/api/portainer.go
index 1051511b0..92ee25f8e 100644
--- a/api/portainer.go
+++ b/api/portainer.go
@@ -1472,7 +1472,7 @@ const (
 	// APIVersion is the version number of the Portainer API
 	APIVersion = "2.9.2"
 	// DBVersion is the version number of the Portainer database
-	DBVersion = 32
+	DBVersion = 33
 	// ComposeSyntaxMaxVersion is a maximum supported version of the docker compose syntax
 	ComposeSyntaxMaxVersion = "3.9"
 	// AssetsServerURL represents the URL of the Portainer asset server

From 40a6645e2304c0e285a85bf7275726b38b517bef Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Thu, 21 Oct 2021 11:55:37 +1300
Subject: [PATCH 18/18] fix user not able to get nodes (#5950)

---
 api/kubernetes/cli/role.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/kubernetes/cli/role.go b/api/kubernetes/cli/role.go
index 4087a8fde..264e97e36 100644
--- a/api/kubernetes/cli/role.go
+++ b/api/kubernetes/cli/role.go
@@ -9,7 +9,7 @@ import (
 func getPortainerUserDefaultPolicies() []rbacv1.PolicyRule {
 	return []rbacv1.PolicyRule{
 		{
-			Verbs:     []string{"list"},
+			Verbs:     []string{"list", "get"},
 			Resources: []string{"namespaces", "nodes"},
 			APIGroups: []string{""},
 		},