From 170f1458433be774170024bb18a5ec4c85fd39a7 Mon Sep 17 00:00:00 2001 From: Nitzperetz Date: Sun, 10 Nov 2024 14:46:36 +0200 Subject: [PATCH] Support custom fields in user-profile-widget --- packages/sdks/react-sdk/tsconfig.json | 2 +- .../initUserCustomAttributesMixin.ts | 41 +++++++++++++++++++ .../lib/widget/mixins/initMixin/initMixin.ts | 8 ++-- .../src/lib/widget/state/selectors.ts | 5 +++ ...et.test.ts => user-profile-widget.test.ts} | 0 5 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initComponentsMixins/initUserCustomAttributesMixin.ts rename packages/widgets/user-profile-widget/test/{user-management-widget.test.ts => user-profile-widget.test.ts} (100%) diff --git a/packages/sdks/react-sdk/tsconfig.json b/packages/sdks/react-sdk/tsconfig.json index c5e28cb56..c5ac8fe24 100644 --- a/packages/sdks/react-sdk/tsconfig.json +++ b/packages/sdks/react-sdk/tsconfig.json @@ -18,5 +18,5 @@ "typeRoots": ["./node_modules/@types", "./node_modules/@types/react"] }, "include": ["**/*.ts", "**/*.tsx"], - "exclude": ["node_modules", "build", "dist", "test", "examples"] + "exclude": ["node_modules", "build", "dist", "test"] } diff --git a/packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initComponentsMixins/initUserCustomAttributesMixin.ts b/packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initComponentsMixins/initUserCustomAttributesMixin.ts new file mode 100644 index 000000000..4b5264081 --- /dev/null +++ b/packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initComponentsMixins/initUserCustomAttributesMixin.ts @@ -0,0 +1,41 @@ +import { UserAttributeDriver } from '@descope/sdk-component-drivers'; +import { compose, createSingletonMixin } from '@descope/sdk-helpers'; +import { loggerMixin } from '@descope/sdk-mixins'; +import { getUserCustomAttrs } from '../../../state/selectors'; +import { stateManagementMixin } from '../../stateManagementMixin'; +import { initWidgetRootMixin } from './initWidgetRootMixin'; + +export const initUserCustomAttributesMixin = createSingletonMixin( + (superclass: T) => + class UserCustomAttributesMixinClass extends compose( + stateManagementMixin, + loggerMixin, + initWidgetRootMixin, + )(superclass) { + customValueUserAttr: UserAttributeDriver; + + #initCustomValueUserAttrs() { + const allCustomAttributesComponents = this.shadowRoot?.querySelectorAll( + 'descope-user-attribute[data-id^="customAttributes."]', + ); + + Array.from(allCustomAttributesComponents).forEach((nodeEle) => { + const attrName = nodeEle.getAttribute('data-id'); + const customAttrName = attrName.replace('customAttributes.', ''); + + const compInstance = new UserAttributeDriver(nodeEle, { + logger: this.logger, + }); + + const userCustomAttributesData = getUserCustomAttrs(this.state); + compInstance.value = userCustomAttributesData[customAttrName]; + }); + } + + async onWidgetRootReady() { + await super.onWidgetRootReady?.(); + + this.#initCustomValueUserAttrs(); + } + }, +); diff --git a/packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initMixin.ts b/packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initMixin.ts index fd4adcfbb..55f74d65e 100644 --- a/packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initMixin.ts +++ b/packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initMixin.ts @@ -1,13 +1,14 @@ import { compose, createSingletonMixin } from '@descope/sdk-helpers'; import { debuggerMixin, themeMixin } from '@descope/sdk-mixins'; +import { flowRedirectUrlMixin } from '../flowRedirectUrlMixin'; import { initAvatarMixin } from './initComponentsMixins/initAvatarMixin'; import { initEmailUserAttrMixin } from './initComponentsMixins/initEmailUserAttrMixin'; +import { initLogoutMixin } from './initComponentsMixins/initLogoutMixin'; import { initNameUserAttrMixin } from './initComponentsMixins/initNameUserAttrMixin'; -import { initPhoneUserAttrMixin } from './initComponentsMixins/initPhoneUserAttrMixin'; import { initPasskeyUserAuthMethodMixin } from './initComponentsMixins/initPasskeyUserAuthMethodMixin'; import { initPasswordUserAuthMethodMixin } from './initComponentsMixins/initPasswordUserAuthMethodMixin'; -import { initLogoutMixin } from './initComponentsMixins/initLogoutMixin'; -import { flowRedirectUrlMixin } from '../flowRedirectUrlMixin'; +import { initPhoneUserAttrMixin } from './initComponentsMixins/initPhoneUserAttrMixin'; +import { initUserCustomAttributesMixin } from './initComponentsMixins/initUserCustomAttributesMixin'; export const initMixin = createSingletonMixin( (superclass: T) => @@ -16,6 +17,7 @@ export const initMixin = createSingletonMixin( debuggerMixin, themeMixin, flowRedirectUrlMixin, // This mixin must be before all other mixins that loads flows + initUserCustomAttributesMixin, initEmailUserAttrMixin, initAvatarMixin, initNameUserAttrMixin, diff --git a/packages/widgets/user-profile-widget/src/lib/widget/state/selectors.ts b/packages/widgets/user-profile-widget/src/lib/widget/state/selectors.ts index 1cd8c16aa..ae96b2170 100644 --- a/packages/widgets/user-profile-widget/src/lib/widget/state/selectors.ts +++ b/packages/widgets/user-profile-widget/src/lib/widget/state/selectors.ts @@ -17,3 +17,8 @@ export const getIsPhoneVerified = createSelector( ); export const getHasPasskey = createSelector(getMe, (me) => me.webauthn); export const getHasPassword = createSelector(getMe, (me) => me.password); + +export const getUserCustomAttrs = createSelector( + getMe, + (me) => me.customAttributes, +); diff --git a/packages/widgets/user-profile-widget/test/user-management-widget.test.ts b/packages/widgets/user-profile-widget/test/user-profile-widget.test.ts similarity index 100% rename from packages/widgets/user-profile-widget/test/user-management-widget.test.ts rename to packages/widgets/user-profile-widget/test/user-profile-widget.test.ts