LdapExplorer front end #7683

VakarisZ · 2023-05-31T14:50:34Z

Description

Changes the "Authentication rules" in "Authentication Sources" UI page to utilize the LDAPExplorer. This allows fetching LDAP parameters dynamically, without the need to manually verify their existence.
(In-progress) Fetches ldap parameters to be used as filters

Impacts

Look at "Authentication rule" "Conditions".

Code / PR Dependencies

Depends on #7634

NEW Package(s) required

Added packages related to the new webpack version not supporting polyfill

Issue

? internal ?

Delete branch after merge

YES

Checklist

(REQUIRED) - [yes, no or n/a]

Document the feature
Add unit tests
Add acceptance tests (TestLink)

After merge

Create an issue for replacing these UI inputs with ldap attribute selector:

Also, point out that we need to remove

VakarisZ · 2023-06-28T13:44:06Z

html/pfappserver/root/src/views/Configuration/sources/_components/BaseRule.vue

@@ -80,6 +81,7 @@ const props = {
 }

 const setup = (props, context) => {
+  const conditionsComponent = inject(ProvidedKeys.conditionsComponent, components.FormGroupConditions)


Is there a better way to pass the different conditions component?

VakarisZ · 2023-06-28T13:51:24Z

html/pfappserver/root/src/views/Configuration/sources/_store.js

+        const item = await Promise.resolve(state.cache[id]).then(cache => _.cloneDeep(cache))
+        return filterOutLdapOptions(response, item.type)
+      } else {
+        const item = await api.item(id).then(item => {
+          commit('ITEM_REPLACED', item)
+          return _.cloneDeep(item)
+        }).catch((err) => {
+          commit('ITEM_ERROR', err.response)
+          throw err
+        })


This is basically getAuthenticationSource, but I couldn't find a way to reuse it. We should be able to just do this.getAuthenticationSource if we use defineStore from pinia

satkunas

I think we should disable the "Add LDAP Condition" button if any of host, port, bind dn or password is empty.

We should also add :text to all the above inputs to indicate something like "This field is required for LDAP conditions".

satkunas · 2023-06-22T17:31:30Z

html/pfappserver/root/src/views/Configuration/sources/_components/LdapRuleCondition.vue

+  BaseInput,
+  BaseInputChosenMultiple,
+  BaseInputChosenOne,
+  BaseInputGroupMultiplier,
+  BaseInputNumber,
+  BaseInputPassword,
+  BaseInputRange


None of these except BaseInputChosenOne are returned in valueComponent, so the imports are not needed

satkunas · 2023-06-22T17:36:03Z

html/pfappserver/root/src/views/Configuration/sources/_components/LdapRuleCondition.vue

+    pfComponentType() {
+      return pfComponentType
+    },
+  },


computed declaration is using Vue2 pattern, can pfComponentType() be moved to setup?

satkunas · 2023-06-22T17:38:17Z

...ver/root/src/views/Configuration/sources/_components/ldapCondition/LdapAttributeSelector.vue

+    default: () => {
+    },


Remove the \n in the middle of {}

More cases below. Please change all instances.

satkunas · 2023-06-22T17:40:31Z

...appserver/root/src/views/Configuration/sources/_components/ldapCondition/LdapSearchInput.vue

+  let parsedEntries = new Set()
+  for (let i = 0; i < ldapEntries.length; i++) {
+    let value = ldapEntries[i][ldapAttribute]
+    if (_.isArray(value)){


Array.isArray() is good enough here, no need to create deps on lodash where they're not needed

satkunas · 2023-06-22T17:42:22Z

...appserver/root/src/views/Configuration/sources/_components/ldapCondition/LdapSearchInput.vue

+  const searchInput = ref("")
+  const localValidator = inject('schema')


Use single quotes

More cases below. Instead of cluttering the review, update all JS files to single quotes where possible.

satkunas · 2023-06-29T13:11:56Z

The (+) icon-button should be re-added to each row of a condition (either PF or LDAP), and re-add support for CTRL+click to clone the row.

satkunas · 2023-06-29T13:20:24Z

We need some kind of indicator on each row to quickly distinguish between pf and ldap conditions.

IMO a <b-badge> with either "pf" or "ldap" in the left-most column (w/ index) would be simplest.

VakarisZ · 2023-06-30T10:08:45Z

I think we should disable the "Add LDAP Condition" button if any of host, port, bind dn or password is empty.

I don't see what we gain by disabling the button. If we want a form where the workflow is 1. configure ldap connection 2. check connection 3. if connected proceed, we should make this a multipart form (gray out whole rules section or hide it). If we gray out a button we have to explain why it's grayed out. The dropdown select already has a good place to do it.
Also, bind dn and password can be empty if the ldap server is configured to accept anonymous bind?

We should also add :text to all the above inputs to indicate something like "This field is required for LDAP conditions".

The fields are required anyways. The users should go down filling out the required fields. Ideally, the bind dn and password should be up the list, right after the required values.

satkunas · 2023-06-30T12:24:24Z

Also, bind dn and password can be empty if the ldap server is configured to accept anonymous bind?

I didn't realize these could be empty. Disregard my comments for the required fields.

By default the values are ints, but they get converted to string upon save/modification. This creates inconsistency to what the back end receives

satkunas · 2023-07-06T20:27:01Z

@VakarisZ

I was able to rebase w/ devel (inc ldapexplorer_back_end) to get the backend service running, but the httpd.admin_dispatcher is not proxying /api/v1/ldap/search and instead returns a 404

Unless I'm mistaken, there appears to be a missing directive in conf/caddy-services/api.conf, this was likely missed in the backend PR, and it needs to copied to conf/caddy-services/api.conf.example (.example are renamed w/ fresh install)

I tried the following, but wasn't able to verify that it works

diff --git a/caddy-services/api.conf b/caddy-services/api.conf
index 6f0f543..3b70c71 100644
--- a/caddy-services/api.conf
+++ b/caddy-services/api.conf
@@ -49,6 +49,11 @@
     transparent
   }

+  # proxy LDAP explorer
+  proxy /api/v1/ldap/ {$PF_SERVICES_URL_PFLDAPEXPLORER} {
+    transparent
+  }
+

Please adjust devel so the endpoint works and rebase this PR. I'll try this PR again after it's updated.

* Core changes to implement LdapExplorer UI input * fix validation * Fix validation of search input * Fix ldap search input states * Extract multiselect style to a separate file * Move and cleanup ldap search UI files * Fix linting errors * Remove trailing ; in LdapSearchInput.vue * Add npm requirements for latest node and webpack-dev-server * Core changes to fetch attributes from an ldap server * Add lodash javascript package for convenience functions it offers * Extract value to select value conversion function * Add a draggable component that has static buttons * Differentiate ldap attribute fetching based on server type * Revert changes to BaseRuleCondition.vue related to ldap * Implement the core UI for ldap conditions * Add UI for ldap attribute selector * Debounce ldap search input * Add loading prop to multiselectFacade.vue * Fix minor issues with ldap condition UI * Add error feature to ldap attribute selector UI * Make LDAP attribute selector check connection based on form * Use quiet requests in background ldap searches * Add infrastructure to test the OpenLdap * Add openLdap server attribute extraction logic * Fix server parameter in LdapSearchInput.vue * Fix initial value bug in the LdapSearchInput.vue * Add not connected error to ldap value search * Improve ldapMultiselectFacade to ignore options when no connection * Adjust ldap search to parse array values * Extract common ldap request function between ldap server clients * Rename some ldap UI files and variables * Fix eslint errors in ldap code * Extract useLdapAttributes into composable * Inject ldap condition only in ldap authentication sources * Remove ldap condition from GoogleWorkspaceLDAP * Add ldap selector to Edir conditions * Fix a bug that sends form with int values if they are unmodified By default the values are ints, but they get converted to string upon save/modification. This creates inconsistency to what the back end receives * Add a common array for supported form types by ldap explorer * Fix a bug where unsupported forms were trying to use ldap explorer * Add a key for provided conditions component * Filter out ldap options in packetfence conditions * Add missing translations related to ldap explorer * Add clone condition button in ldap conditions * Change the ldap condition to be able to clone and append conditions * Add badges to differentiate conditions by type * Reformat and improve style of ldap explorer UI * Extract ldap error to a separate component * Show ldap error in all cases when connection fails * force update semver to address syyk vulnerability --------- Co-authored-by: Darren Satkunas <dsatkuna@akamai.com>

VakarisZ force-pushed the Feature/ldapexplorer_front_end branch from 8cd05ee to 603ce03 Compare June 5, 2023 13:01

VakarisZ force-pushed the Feature/ldapexplorer_front_end branch from 97a68a1 to 0eccb89 Compare June 22, 2023 14:34

VakarisZ marked this pull request as ready for review June 22, 2023 14:55

extrafu assigned satkunas Jun 27, 2023

extrafu added this to the PacketFence-13.0 milestone Jun 27, 2023

VakarisZ commented Jun 28, 2023

View reviewed changes

VakarisZ force-pushed the Feature/ldapexplorer_front_end branch from f2ecbfe to 1f3dd90 Compare June 29, 2023 11:30

satkunas reviewed Jun 29, 2023

View reviewed changes

VakarisZ and others added 17 commits July 6, 2023 12:23

Core changes to implement LdapExplorer UI input

a9ae2d7

fix validation

1259c2c

Fix validation of search input

7297aae

Fix ldap search input states

065ced6

Extract multiselect style to a separate file

8c5db94

Move and cleanup ldap search UI files

2dc2157

Fix linting errors

d0a5404

Remove trailing ; in LdapSearchInput.vue

27dcc4d

Add npm requirements for latest node and webpack-dev-server

249b34c

Core changes to fetch attributes from an ldap server

e06899d

Add lodash javascript package for convenience functions it offers

7770874

Extract value to select value conversion function

4b854ba

Add a draggable component that has static buttons

9138226

Differentiate ldap attribute fetching based on server type

21c748c

Revert changes to BaseRuleCondition.vue related to ldap

822f2db

Implement the core UI for ldap conditions

5435098

Add UI for ldap attribute selector

b5546f0

VakarisZ added 25 commits July 6, 2023 12:25

Add openLdap server attribute extraction logic

b45b2c1

Fix server parameter in LdapSearchInput.vue

55872b7

Fix initial value bug in the LdapSearchInput.vue

b6edc73

Add not connected error to ldap value search

522b1f3

Improve ldapMultiselectFacade to ignore options when no connection

ae9533f

Adjust ldap search to parse array values

12c77c2

Extract common ldap request function between ldap server clients

0423f6f

Rename some ldap UI files and variables

f7d5fa5

Fix eslint errors in ldap code

acfd5d3

Extract useLdapAttributes into composable

e9f403d

Inject ldap condition only in ldap authentication sources

dffc45d

Remove ldap condition from GoogleWorkspaceLDAP

c51bc21

Add ldap selector to Edir conditions

962a1f2

Fix a bug that sends form with int values if they are unmodified

e8ad342

By default the values are ints, but they get converted to string upon save/modification. This creates inconsistency to what the back end receives

Add a common array for supported form types by ldap explorer

a5e66d1

Fix a bug where unsupported forms were trying to use ldap explorer

d7b226e

Add a key for provided conditions component

ebf2353

Filter out ldap options in packetfence conditions

7ad5f72

Add missing translations related to ldap explorer

a0128ac

Add clone condition button in ldap conditions

d35b2df

Change the ldap condition to be able to clone and append conditions

6ce29b4

Add badges to differentiate conditions by type

f418098

Reformat and improve style of ldap explorer UI

d5526c3

Extract ldap error to a separate component

69ad213

Show ldap error in all cases when connection fails

0087957

satkunas force-pushed the Feature/ldapexplorer_front_end branch from 811931d to 0087957 Compare July 6, 2023 19:29

force update semver to address syyk vulnerability

8f24d51

satkunas merged commit c484f98 into inverse-inc:devel Jul 7, 2023
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LdapExplorer front end #7683

LdapExplorer front end #7683

VakarisZ commented May 31, 2023 •

edited

VakarisZ Jun 28, 2023

VakarisZ Jun 28, 2023

satkunas left a comment •

edited

satkunas Jun 22, 2023

satkunas Jun 22, 2023

satkunas Jun 22, 2023

satkunas Jun 22, 2023

satkunas Jun 22, 2023

satkunas Jun 22, 2023

satkunas Jun 22, 2023

satkunas commented Jun 29, 2023 •

edited

satkunas commented Jun 29, 2023

VakarisZ commented Jun 30, 2023

satkunas commented Jun 30, 2023

satkunas commented Jul 6, 2023

		const searchInput = ref("")
		const localValidator = inject('schema')

LdapExplorer front end #7683

LdapExplorer front end #7683

Conversation

VakarisZ commented May 31, 2023 • edited

Description

Impacts

Code / PR Dependencies

NEW Package(s) required

Issue

Delete branch after merge

Checklist

After merge

Choose a reason for hiding this comment

Choose a reason for hiding this comment

satkunas left a comment • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

satkunas commented Jun 29, 2023 • edited

satkunas commented Jun 29, 2023

VakarisZ commented Jun 30, 2023

satkunas commented Jun 30, 2023

satkunas commented Jul 6, 2023

VakarisZ commented May 31, 2023 •

edited

satkunas left a comment •

edited

satkunas commented Jun 29, 2023 •

edited