P0069 | Enhance UI implemented on end user panel. Where logged in user details are visible along with list of company associated. | Proxy

apps/proxy-auth/src/app/app.component.ts

@@ -26,17 +26,17 @@ export class AppComponent extends BaseComponent implements OnInit, OnDestroy {
     public initOtpProvider() {
         if (!environment.production) {
             const sendOTPConfig = {
-                referenceId: '4512365f177271329169a9754b71d4a',
+                // referenceId: '4512365m176216342869087ae458e09',
                 // type: 'organization-details',
                 // loginRedirectUrl: 'https://www.google.com',
                 // showCompanyDetails: false,
                 authToken:
-                    'UCtyL0ZtR3lWUUlqdWxzNC9ZWFpjNmlxdWZ0elBtb3ErUWc4UzJwNCt0TEg2djBGOTJWTENKSGRRbVNFU1pvZk1xU3dRZlZnY3R6T2p3Tlp2ZHRTSVY0WDR1S1ZZQVJzTlk1b1dGbS9Cano0THdOaldMejZqT05WQ3M4eXVVRG1pZ1NJOVB6QVNLYW9GdWlkTGxFczd0WnJuaW11MkpRMDBqZjBqRGQ0NEp6S0pvTG1WcEtPM3RrWVZ2Q2Y4UGlTT3hKaUlnNkplSEhrSGpyRWpGeU1DZz09',
+                    'ZGlYV0Z4ekRleUQwZEhXR2JvRllKaWh6cmhhb2hhTnhTMGdDdHlpa2ZaOU9LcGh5M3puLzZ6QTVRb3pGdGNPU0xlSC9SQjI3ckNweWk5cWg1aytpOVRTVmtUWXFRQW5rWEZ0c21KeEN6c0FmK1d5bWQxUk9lZHM4anlHSDI5Q3dxL0o3V0h6Yk9kMDBSVE5pc1FPekJkQVg3QXZ4K2xFbUViUGdhQ0Z6d3hGNXQreEN2dytUQW9GOEdseFFBU3FaNXYzbFVUalJDRitqc0EvQVduQUkrUT09',
                 // type: 'user-management',
                 // isHidden: true,
-                theme: 'dark',
+                // theme: 'dark',
                 // isPreview: true,
-                isLogin: true,
+                // isLogin: true,
                 target: '_self',
                 success: (data) => {
                     console.log('success response', data);

apps/proxy-auth/src/app/otp/send-otp/send-otp.component.scss

@@ -26,7 +26,7 @@
 .light-theme {
     background: rgb(33 37 40 / 95%);
 }
-.user-profile-mode {
+.user-profile-mode:not(.dark-theme) {
     background: #ffffff !important;
 }
 

apps/proxy-auth/src/app/shadow-dom-overlay-container.ts

@@ -4,14 +4,21 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
 
 const CONTAINER_CLASS = 'cdk-overlay-container';
-/** Full-viewport overlay container style so positioning is viewport-based when in shadow root */
+/**
+ * Full-viewport overlay container style so positioning is viewport-based when in shadow root.
+ * z-index is set to 9999 — well above the content z-indices used inside the shadow root
+ * (send-otp .container = 1000, user-profile/user-management .container = 10).  The container
+ * is also appended as the LAST child of the shadow root so that, even when a content element
+ * ends up with an equal z-index via the CSS cascade, DOM-order tie-breaking still favours the
+ * overlay.
+ */
 const OVERLAY_CONTAINER_STYLE =
-    'position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;pointer-events:none!important;z-index:1000!important;';
+    'position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;pointer-events:none!important;z-index:9999!important;';
 /**
  * OverlayContainer that:
  * - When proxy-auth with shadow root exists (script load): attaches the overlay as the
- *   **first** child of the shadow root with full-viewport fixed style, so it is NOT
- *   inside the fixed .container and positioning is correct (dropdown below the right field).
+ *   **last** child of the shadow root with full-viewport fixed style and a high z-index,
+ *   ensuring MatDialog / MatSnackBar / dropdowns always render above the component content.
  * - Otherwise: attaches to document.body (default behaviour).
  */
 @Injectable()
@@ -20,6 +27,24 @@ export class ShadowDomOverlayContainer extends OverlayContainer {
         super(document, _platform);
     }
 
+    /**
+     * Before returning the cached container, check whether it is still
+     * connected to the live document.  This can become false when the client
+     * application does a SPA navigation that removes the <proxy-auth> custom
+     * element (and therefore its shadow root) from the DOM.  A new
+     * <proxy-auth> element is created by initVerification() on the next
+     * navigation, but the CDK base class would keep returning the old,
+     * detached container — causing MatDialog / MatSnackBar to render into an
+     * invisible node.  Clearing _containerElement forces _createContainer()
+     * to run again and attach the overlay to the new shadow root.
+     */
+    override getContainerElement(): HTMLElement {
+        if (this._containerElement && !this._containerElement.isConnected) {
+            this._containerElement = null;
+        }
+        return super.getContainerElement();
+    }
+
     protected override _createContainer(): void {
         if (!this._platform.isBrowser) {
             return;
@@ -31,15 +56,8 @@ export class ShadowDomOverlayContainer extends OverlayContainer {
         const parent = this._getOverlayParent();
         if (parent !== this._document.body) {
             container.setAttribute('style', OVERLAY_CONTAINER_STYLE);
-            const first = parent.firstChild;
-            if (first) {
-                parent.insertBefore(container, first);
-            } else {
-                parent.appendChild(container);
-            }
-        } else {
-            parent.appendChild(container);
         }
+        parent.appendChild(container);
         this._containerElement = container;
     }