From c3be287a1a1bd39074b00c140b90c2d383b1fe55 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Mon, 19 Jan 2026 14:32:20 +0530 Subject: [PATCH 1/8] fix the ui changes --- apps/proxy-auth/src/app/app.component.ts | 10 +++++----- .../app/otp/component/register/register.component.ts | 2 ++ .../create-feature/create-feature.component.ts | 3 ++- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/apps/proxy-auth/src/app/app.component.ts b/apps/proxy-auth/src/app/app.component.ts index 916668d9..c1ef93c6 100644 --- a/apps/proxy-auth/src/app/app.component.ts +++ b/apps/proxy-auth/src/app/app.component.ts @@ -26,13 +26,13 @@ export class AppComponent extends BaseComponent implements OnInit, OnDestroy { public initOtpProvider() { if (!environment.production) { const sendOTPConfig = { - // referenceId: '4512365m176216342869087ae458e09', - // type: 'authorization', + referenceId: '4512365m176216342869087ae458e09', + type: 'authorization', // loginRedirectUrl: 'https://www.google.com', // showCompanyDetails: false, - authToken: - 'clV0YUt4UURVbzJYZTRwMHdBNkZ6QjZoay9qMmRRcjZhMGVXMGtCT1ZtdGNaelFxMmlNaGdNcEJuRy9UWmFSZHQvMHc0YnJYUHExakh5NDNGVjZMOEdXVmg3OG82R094Yk5tdE9XckxjUTV1dlNzUERXRWxaOWIwWm5JRmlMVHl5UmpZUHVDK2piOURJUi9IdytncFZBRWc5QnRyRDRVeUFOZlBCY1FST0FOZStISUVtK055VWNxaGduZWpGeUZxVWxYWjd6YXI2YTF0aGxHZTNka1BlQT09', - type: 'user-management', + // authToken: + // 'clV0YUt4UURVbzJYZTRwMHdBNkZ6QjZoay9qMmRRcjZhMGVXMGtCT1ZtdGNaelFxMmlNaGdNcEJuRy9UWmFSZHQvMHc0YnJYUHExakh5NDNGVjZMOEdXVmg3OG82R094Yk5tdE9XckxjUTV1dlNzUERXRWxaOWIwWm5JRmlMVHl5UmpZUHVDK2piOURJUi9IdytncFZBRWc5QnRyRDRVeUFOZlBCY1FST0FOZStISUVtK055VWNxaGduZWpGeUZxVWxYWjd6YXI2YTF0aGxHZTNka1BlQT09', + // type: 'user-management', exclude_role_ids: [2], include_role_ids: [1], theme: 'light', diff --git a/apps/proxy-auth/src/app/otp/component/register/register.component.ts b/apps/proxy-auth/src/app/otp/component/register/register.component.ts index 72831308..dc1211d7 100644 --- a/apps/proxy-auth/src/app/otp/component/register/register.component.ts +++ b/apps/proxy-auth/src/app/otp/component/register/register.component.ts @@ -171,6 +171,7 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O } ngOnInit(): void { + console.log('loginServiceData', this.loginServiceData); this.registrationForm .get('user.mobile') .valueChanges.pipe(takeUntil(this.destroy$)) @@ -401,6 +402,7 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O } public submit(): void { + debugger; this.apiError.next(null); if (!this.isOtpVerified) { this.registrationForm.get('user.mobile').setErrors({ otpVerificationFailed: true }); diff --git a/apps/proxy/src/app/features/create-feature/create-feature.component.ts b/apps/proxy/src/app/features/create-feature/create-feature.component.ts index 2ef5502f..95bb7b8f 100644 --- a/apps/proxy/src/app/features/create-feature/create-feature.component.ts +++ b/apps/proxy/src/app/features/create-feature/create-feature.component.ts @@ -629,8 +629,9 @@ export class CreateFeatureComponent extends BaseComponent implements OnDestroy, private getServicePayload(selectedMethod: IMethod): IMethodService[] { const services = []; + this.featureForm.controls.serviceDetails.controls.forEach((formGroup, index) => { - if (formGroup.dirty && formGroup.value.is_enable) { + if (formGroup.dirty && (formGroup.value.is_enable || this.isEditMode)) { const service = selectedMethod.method_services[index]; const formData = formGroup.value; this.setFormDataInPayload(service?.requirements, formData.requirements, index); From 1266efab206a943d6ac64d081833f408973df485 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Mon, 19 Jan 2026 17:08:00 +0530 Subject: [PATCH 2/8] fix the container issue --- apps/proxy-auth/src/app/element.module.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/proxy-auth/src/app/element.module.ts b/apps/proxy-auth/src/app/element.module.ts index fd28d85b..4ab897fa 100644 --- a/apps/proxy-auth/src/app/element.module.ts +++ b/apps/proxy-auth/src/app/element.module.ts @@ -65,7 +65,9 @@ window['initVerification'] = (config: any) => { } else if (document.getElementById('userProxyContainer')) { document.getElementById('userProxyContainer').append(sendOtpElement); } else { - document.getElementsByTagName('body')[0].append(sendOtpElement); + if (config?.type !== 'user-management') { + document.getElementsByTagName('body')[0].append(sendOtpElement); + } } window['libLoaded'] = true; From 59d6f65191cf7b085ae766cf1ac73bf6b8c54274 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Mon, 19 Jan 2026 17:09:33 +0530 Subject: [PATCH 3/8] remove debugger --- .../src/app/otp/component/register/register.component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/proxy-auth/src/app/otp/component/register/register.component.ts b/apps/proxy-auth/src/app/otp/component/register/register.component.ts index dc1211d7..72831308 100644 --- a/apps/proxy-auth/src/app/otp/component/register/register.component.ts +++ b/apps/proxy-auth/src/app/otp/component/register/register.component.ts @@ -171,7 +171,6 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O } ngOnInit(): void { - console.log('loginServiceData', this.loginServiceData); this.registrationForm .get('user.mobile') .valueChanges.pipe(takeUntil(this.destroy$)) @@ -402,7 +401,6 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O } public submit(): void { - debugger; this.apiError.next(null); if (!this.isOtpVerified) { this.registrationForm.get('user.mobile').setErrors({ otpVerificationFailed: true }); From 0fde2d6a4ccfb8eb5dfeabb94c79a86546929716 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Mon, 19 Jan 2026 18:58:15 +0530 Subject: [PATCH 4/8] fix the user management --- apps/proxy-auth/src/app/element.module.ts | 46 +++++++++++++++++-- .../app/otp/send-otp/send-otp.component.html | 1 + .../app/otp/send-otp/send-otp.component.ts | 1 + .../user-management.component.html | 7 ++- .../user-management.component.ts | 19 +++++++- 5 files changed, 68 insertions(+), 6 deletions(-) diff --git a/apps/proxy-auth/src/app/element.module.ts b/apps/proxy-auth/src/app/element.module.ts index 4ab897fa..dd456ee0 100644 --- a/apps/proxy-auth/src/app/element.module.ts +++ b/apps/proxy-auth/src/app/element.module.ts @@ -7,6 +7,8 @@ import { SendOtpComponent } from './otp/send-otp/send-otp.component'; import { omit } from 'lodash-es'; import { UserProfileComponent } from './otp/user-profile/user-profile.component'; import { ConfirmationDialogComponent } from './otp/user-profile/user-dialog/user-dialog.component'; +import { interval } from 'rxjs'; +import { filter, take } from 'rxjs/operators'; export const RESERVED_KEYS = ['referenceId', 'target', 'style', 'success', 'failure']; @@ -14,9 +16,21 @@ declare global { interface Window { initVerification: any; intlTelInput: any; + showUserManagement: any; + hideUserManagement: any; } } +// Global function to show user management component (sets isHidden to false) +window['showUserManagement'] = () => { + window.dispatchEvent(new CustomEvent('showUserManagement')); +}; + +// Global function to hide user management component (sets isHidden to true) +window['hideUserManagement'] = () => { + window.dispatchEvent(new CustomEvent('hideUserManagement')); +}; + function documentReady(fn: any) { // see if DOM is already available if (document.readyState === 'complete' || document.readyState === 'interactive') { @@ -50,6 +64,7 @@ window['initVerification'] = (config: any) => { sendOtpElement.show_social_login_icons = config?.show_social_login_icons; sendOtpElement.exclude_role_ids = config?.exclude_role_ids; sendOtpElement.include_role_ids = config?.include_role_ids; + sendOtpElement.isHidden = config?.isHidden; sendOtpElement.target = config?.target ?? '_self'; sendOtpElement.css = config.style; if (!config.success || typeof config.success !== 'function') { @@ -60,14 +75,37 @@ window['initVerification'] = (config: any) => { // omitting keys which are not required in API payload sendOtpElement.otherData = omit(config, RESERVED_KEYS); - if (document.getElementById('proxyContainer')) { + if (document.getElementById('proxyContainer') && config?.type !== 'user-management') { document.getElementById('proxyContainer').append(sendOtpElement); + } else if (config?.type === 'user-management') { + const container = document.getElementById('userProxyContainer'); + if (container) { + // Container exists, append directly + container.append(sendOtpElement); + } else { + // Container not found - mount to body with display:none + sendOtpElement.style.display = 'none'; + document.body.append(sendOtpElement); + + // Observable to wait for userProxyContainer to appear in the DOM + const containerCheck$ = interval(100).pipe( + filter(() => !!document.getElementById('userProxyContainer')), + take(1) + ); + + containerCheck$.subscribe(() => { + const targetContainer = document.getElementById('userProxyContainer'); + if (targetContainer) { + // Move element from body to the container and show it + sendOtpElement.style.display = ''; + targetContainer.append(sendOtpElement); + } + }); + } } else if (document.getElementById('userProxyContainer')) { document.getElementById('userProxyContainer').append(sendOtpElement); } else { - if (config?.type !== 'user-management') { - document.getElementsByTagName('body')[0].append(sendOtpElement); - } + document.getElementsByTagName('body')[0].append(sendOtpElement); } window['libLoaded'] = true; diff --git a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html index e1003946..98e319da 100644 --- a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html +++ b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.html @@ -63,6 +63,7 @@ [userToken]="authToken" [pass]="isRolePermission" [theme]="theme" + [isHidden]="isHidden" [exclude_role_ids]="exclude_role_ids" [include_role_ids]="include_role_ids" > diff --git a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts index 75120168..ff357703 100644 --- a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts +++ b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts @@ -62,6 +62,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy @Input() public version: string = SendOtpCenterVersion.V1; @Input() public exclude_role_ids: any[] = []; @Input() public include_role_ids: any[] = []; + @Input() public isHidden: boolean = false; @Input() public input_fields: string = InputFields.TOP; @Input() public show_social_login_icons: boolean = false; set css(type: NgStyle['ngStyle']) { diff --git a/apps/proxy-auth/src/app/otp/user-management/user-management.component.html b/apps/proxy-auth/src/app/otp/user-management/user-management.component.html index 15b97399..00a80bfa 100644 --- a/apps/proxy-auth/src/app/otp/user-management/user-management.component.html +++ b/apps/proxy-auth/src/app/otp/user-management/user-management.component.html @@ -1,4 +1,9 @@ -
+

Invite Members

diff --git a/apps/proxy-auth/src/app/otp/user-management/user-management.component.ts b/apps/proxy-auth/src/app/otp/user-management/user-management.component.ts index 01048e6b..ec1980cc 100644 --- a/apps/proxy-auth/src/app/otp/user-management/user-management.component.ts +++ b/apps/proxy-auth/src/app/otp/user-management/user-management.component.ts @@ -48,6 +48,7 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af @Input() public theme: string; @Input() public exclude_role_ids: any[] = []; @Input() public include_role_ids: any[] = []; + @Input() public isHidden: boolean = false; @ViewChild('addUserDialog') addUserDialog!: TemplateRef; @ViewChild('editPermissionDialog') editPermissionDialog!: TemplateRef; @ViewChild('addPermissionDialog') addPermissionDialog!: TemplateRef; @@ -111,6 +112,8 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af public currentPageSize: number = 50; public isUsersLoading: boolean = true; private openAddUserDialogHandler = this.addUser.bind(this); + private showUserManagementHandler = this.showUserManagement.bind(this); + private hideUserManagementHandler = this.hideUserManagement.bind(this); constructor(private fb: FormBuilder, private dialog: MatDialog, private store: Store) { super(); this.getRoles$ = this.store.pipe(select(rolesData), distinctUntilChanged(isEqual), takeUntil(this.destroy$)); @@ -213,6 +216,10 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af } ngOnInit(): void { + // Add event listeners for show/hide user management + window.addEventListener('showUserManagement', this.showUserManagementHandler); + window.addEventListener('hideUserManagement', this.hideUserManagementHandler); + this.searchSubject .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$)) .subscribe((searchTerm) => { @@ -355,8 +362,10 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af } ngOnDestroy(): void { - // Remove window event listener + // Remove window event listeners window.removeEventListener('openAddUserDialog', this.openAddUserDialogHandler); + window.removeEventListener('showUserManagement', this.showUserManagementHandler); + window.removeEventListener('hideUserManagement', this.hideUserManagementHandler); // Close all open dialogs when navigating away if (this.addUserDialogRef) { @@ -380,6 +389,14 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af super.ngOnDestroy(); } + public showUserManagement(): void { + this.isHidden = false; + } + + public hideUserManagement(): void { + this.isHidden = true; + } + public editUser(user: UserData, index: number): void { this.isEditUser = true; this.isEditRole = false; From 8ecaa9816591b43c152dd1dd85ff533b064d1274 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Tue, 20 Jan 2026 11:57:19 +0530 Subject: [PATCH 5/8] fix the obserable --- apps/proxy-auth/src/app/element.module.ts | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/apps/proxy-auth/src/app/element.module.ts b/apps/proxy-auth/src/app/element.module.ts index dd456ee0..d7be3a14 100644 --- a/apps/proxy-auth/src/app/element.module.ts +++ b/apps/proxy-auth/src/app/element.module.ts @@ -8,7 +8,7 @@ import { omit } from 'lodash-es'; import { UserProfileComponent } from './otp/user-profile/user-profile.component'; import { ConfirmationDialogComponent } from './otp/user-profile/user-dialog/user-dialog.component'; import { interval } from 'rxjs'; -import { filter, take } from 'rxjs/operators'; +import { distinctUntilChanged, filter, map } from 'rxjs/operators'; export const RESERVED_KEYS = ['referenceId', 'target', 'style', 'success', 'failure']; @@ -87,19 +87,17 @@ window['initVerification'] = (config: any) => { sendOtpElement.style.display = 'none'; document.body.append(sendOtpElement); - // Observable to wait for userProxyContainer to appear in the DOM + // Observable to watch for userProxyContainer to appear/reappear in the DOM const containerCheck$ = interval(100).pipe( - filter(() => !!document.getElementById('userProxyContainer')), - take(1) + map(() => document.getElementById('userProxyContainer')), + filter((container) => !!container), + distinctUntilChanged() // Only emit when container reference changes (new container after navigation) ); - containerCheck$.subscribe(() => { - const targetContainer = document.getElementById('userProxyContainer'); - if (targetContainer) { - // Move element from body to the container and show it - sendOtpElement.style.display = ''; - targetContainer.append(sendOtpElement); - } + containerCheck$.subscribe((targetContainer) => { + // Move element from body to the container and show it + sendOtpElement.style.display = ''; + targetContainer.append(sendOtpElement); }); } } else if (document.getElementById('userProxyContainer')) { From 4353486922daae13f62a54078751a1ac7e854758 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Tue, 20 Jan 2026 13:09:41 +0530 Subject: [PATCH 6/8] add back to the body --- apps/proxy-auth/src/app/element.module.ts | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/apps/proxy-auth/src/app/element.module.ts b/apps/proxy-auth/src/app/element.module.ts index d7be3a14..c33025aa 100644 --- a/apps/proxy-auth/src/app/element.module.ts +++ b/apps/proxy-auth/src/app/element.module.ts @@ -8,7 +8,7 @@ import { omit } from 'lodash-es'; import { UserProfileComponent } from './otp/user-profile/user-profile.component'; import { ConfirmationDialogComponent } from './otp/user-profile/user-dialog/user-dialog.component'; import { interval } from 'rxjs'; -import { distinctUntilChanged, filter, map } from 'rxjs/operators'; +import { distinctUntilChanged, map } from 'rxjs/operators'; export const RESERVED_KEYS = ['referenceId', 'target', 'style', 'success', 'failure']; @@ -87,17 +87,22 @@ window['initVerification'] = (config: any) => { sendOtpElement.style.display = 'none'; document.body.append(sendOtpElement); - // Observable to watch for userProxyContainer to appear/reappear in the DOM + // Observable to watch for userProxyContainer to appear/disappear in the DOM const containerCheck$ = interval(100).pipe( map(() => document.getElementById('userProxyContainer')), - filter((container) => !!container), - distinctUntilChanged() // Only emit when container reference changes (new container after navigation) + distinctUntilChanged() // Emit when container reference changes (including null) ); containerCheck$.subscribe((targetContainer) => { - // Move element from body to the container and show it - sendOtpElement.style.display = ''; - targetContainer.append(sendOtpElement); + if (targetContainer) { + // Container exists - move element there and show it + sendOtpElement.style.display = ''; + targetContainer.append(sendOtpElement); + } else { + // Container doesn't exist - move element back to body and hide it + sendOtpElement.style.display = 'none'; + document.body.append(sendOtpElement); + } }); } } else if (document.getElementById('userProxyContainer')) { From ef478c3109a78c0bd2fbce384500a9c0500c6320 Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Tue, 20 Jan 2026 14:23:02 +0530 Subject: [PATCH 7/8] always stay in the body --- apps/proxy-auth/src/app/element.module.ts | 47 ++++++++++------------- 1 file changed, 20 insertions(+), 27 deletions(-) diff --git a/apps/proxy-auth/src/app/element.module.ts b/apps/proxy-auth/src/app/element.module.ts index c33025aa..f0778bcf 100644 --- a/apps/proxy-auth/src/app/element.module.ts +++ b/apps/proxy-auth/src/app/element.module.ts @@ -78,33 +78,26 @@ window['initVerification'] = (config: any) => { if (document.getElementById('proxyContainer') && config?.type !== 'user-management') { document.getElementById('proxyContainer').append(sendOtpElement); } else if (config?.type === 'user-management') { - const container = document.getElementById('userProxyContainer'); - if (container) { - // Container exists, append directly - container.append(sendOtpElement); - } else { - // Container not found - mount to body with display:none - sendOtpElement.style.display = 'none'; - document.body.append(sendOtpElement); - - // Observable to watch for userProxyContainer to appear/disappear in the DOM - const containerCheck$ = interval(100).pipe( - map(() => document.getElementById('userProxyContainer')), - distinctUntilChanged() // Emit when container reference changes (including null) - ); - - containerCheck$.subscribe((targetContainer) => { - if (targetContainer) { - // Container exists - move element there and show it - sendOtpElement.style.display = ''; - targetContainer.append(sendOtpElement); - } else { - // Container doesn't exist - move element back to body and hide it - sendOtpElement.style.display = 'none'; - document.body.append(sendOtpElement); - } - }); - } + // For user-management, element always stays in body + // This ensures it can always receive window events (showUserManagement, hideUserManagement) + sendOtpElement.style.display = 'none'; + document.body.append(sendOtpElement); + + // Watch for container to control visibility + const containerCheck$ = interval(100).pipe( + map(() => document.getElementById('userProxyContainer')), + distinctUntilChanged() + ); + + containerCheck$.subscribe((targetContainer) => { + if (targetContainer) { + // Container exists - show the element + sendOtpElement.style.display = ''; + } else { + // Container doesn't exist - hide the element + sendOtpElement.style.display = 'none'; + } + }); } else if (document.getElementById('userProxyContainer')) { document.getElementById('userProxyContainer').append(sendOtpElement); } else { From 31469585e020bcd1eacf141206c0ce3615f8744e Mon Sep 17 00:00:00 2001 From: prakharlowanshi Date: Tue, 20 Jan 2026 15:46:37 +0530 Subject: [PATCH 8/8] create the copy of send otp element --- apps/proxy-auth/src/app/element.module.ts | 46 +++++++++++++++++++---- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/apps/proxy-auth/src/app/element.module.ts b/apps/proxy-auth/src/app/element.module.ts index f0778bcf..4f1d4515 100644 --- a/apps/proxy-auth/src/app/element.module.ts +++ b/apps/proxy-auth/src/app/element.module.ts @@ -78,24 +78,54 @@ window['initVerification'] = (config: any) => { if (document.getElementById('proxyContainer') && config?.type !== 'user-management') { document.getElementById('proxyContainer').append(sendOtpElement); } else if (config?.type === 'user-management') { - // For user-management, element always stays in body - // This ensures it can always receive window events (showUserManagement, hideUserManagement) + // Master element always stays in body (hidden) for window events sendOtpElement.style.display = 'none'; + sendOtpElement.setAttribute('data-master', 'true'); document.body.append(sendOtpElement); - // Watch for container to control visibility + // Helper to create a fresh configured element for the container + const createContainerElement = () => { + const el = document.createElement('proxy-auth') as NgElement & WithProperties; + el.referenceId = config?.referenceId; + el.type = config?.type; + el.authToken = config?.authToken; + el.showCompanyDetails = config?.showCompanyDetails; + el.userToken = config?.userToken; + el.isRolePermission = config?.isRolePermission; + el.isPreview = config?.isPreview; + el.isLogin = config?.isLogin; + el.loginRedirectUrl = config?.loginRedirectUrl; + el.theme = config?.theme; + el.version = config?.version; + el.input_fields = config?.input_fields; + el.show_social_login_icons = config?.show_social_login_icons; + el.exclude_role_ids = config?.exclude_role_ids; + el.include_role_ids = config?.include_role_ids; + el.isHidden = config?.isHidden; + el.target = config?.target ?? '_self'; + el.css = config.style; + el.successReturn = config.success; + el.failureReturn = config.failure; + el.otherData = omit(config, RESERVED_KEYS); + return el; + }; + + // Watch for container to appear/disappear const containerCheck$ = interval(100).pipe( map(() => document.getElementById('userProxyContainer')), distinctUntilChanged() ); containerCheck$.subscribe((targetContainer) => { + // Remove any existing container element (not the master) + const existingContainerElement = document.querySelector('proxy-auth:not([data-master])'); + if (existingContainerElement) { + existingContainerElement.remove(); + } + if (targetContainer) { - // Container exists - show the element - sendOtpElement.style.display = ''; - } else { - // Container doesn't exist - hide the element - sendOtpElement.style.display = 'none'; + // Container exists - create fresh element and append + targetContainer.append(createContainerElement()); } }); } else if (document.getElementById('userProxyContainer')) {