P0064 | want to create the global event so that user can open the invite dailog and show and hide the member page

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',

apps/proxy-auth/src/app/element.module.ts

@@ -7,16 +7,30 @@ 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 { distinctUntilChanged, map } from 'rxjs/operators';
 
 export const RESERVED_KEYS = ['referenceId', 'target', 'style', 'success', 'failure'];
 
 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,8 +75,59 @@ 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') {
+                // Master element always stays in body (hidden) for window events
+                sendOtpElement.style.display = 'none';
+                sendOtpElement.setAttribute('data-master', 'true');
+                document.body.append(sendOtpElement);
+
+                // Helper to create a fresh configured element for the container
+                const createContainerElement = () => {
+                    const el = document.createElement('proxy-auth') as NgElement & WithProperties<SendOtpComponent>;
+                    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 - create fresh element and append
+                        targetContainer.append(createContainerElement());
+                    }
+                });
             } else if (document.getElementById('userProxyContainer')) {
                 document.getElementById('userProxyContainer').append(sendOtpElement);
             } else {

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"
     ></proxy-user-management>

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']) {

apps/proxy-auth/src/app/otp/user-management/user-management.component.html

@@ -1,4 +1,9 @@
-<div #container class="container" [ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'">
+<div
+    #container
+    class="container"
+    [ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'"
+    [ngStyle]="isHidden ? { display: 'none' } : { display: 'block' }"
+>
     <div class="members-container">
         <h2>Invite Members</h2>
 

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<any>;
     @ViewChild('editPermissionDialog') editPermissionDialog!: TemplateRef<any>;
     @ViewChild('addPermissionDialog') addPermissionDialog!: TemplateRef<any>;
@@ -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<IAppState>) {
         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;

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);