Walkover-Web-Solution · prakharlowanshi11 · Jan 15, 2026 · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026
diff --git a/apps/proxy-auth/src/app/app.component.html b/apps/proxy-auth/src/app/app.component.html
@@ -1,3 +1,4 @@
 <!-- <button (click)="initOtpProvider()">Login with otp</button> -->
 <!-- <div id="SEFVbXNhWnEzQSttZFhNaWpxYVIrWFlETWk4djk0clV6NUJwNzBtYmZVM0xPYXFBL2ZQaXJtU2hxZVNBd054TWJMOFJpWFA3UkZRbzgyeVVNY1dYMmRiNXc4aVhlUU1YSkVEaDZxeFhiaXh5bXMwYlZZRE9VVTVtTTU5cGRzSmQ5NVdFM3VFS3ZDMXFwbHQrbGozSDlhRU9CcUptcnllZUtWYzVqclhHbGw0PQ=="></div> -->
-<div id="4512365m176216342869087ae458e09"></div>
+<!-- <div id="4512365m176216342869087ae458e09"></div> -->
+<div id="userProxyContainer"></div>
diff --git a/apps/proxy-auth/src/app/app.component.ts b/apps/proxy-auth/src/app/app.component.ts
@@ -30,11 +30,10 @@ export class AppComponent extends BaseComponent implements OnInit, OnDestroy {
                 type: 'authorization',
                 // loginRedirectUrl: 'https://www.google.com',
                 // showCompanyDetails: false,
-                // authToken:
-                //     'clV0YUt4UURVbzJYZTRwMHdBNkZ6QjZoay9qMmRRcjZhMGVXMGtCT1ZtdGNaelFxMmlNaGdNcEJuRy9UWmFSZHQvMHc0YnJYUHExakh5NDNGVjZMOEdXVmg3OG82R094Yk5tdE9XckxjUTV1dlNzUERXRWxaOWIwWm5JRmlMVHl5UmpZUHVDK2piOURJUi9IdytncFZBRWc5QnRyRDRVeUFOZlBCY1FST0FOZStISUVtK055VWNxaGduZWpGeUZxVWxYWjd6YXI2YTF0aGxHZTNka1BlQT09',
+                authToken:
+                    'clV0YUt4UURVbzJYZTRwMHdBNkZ6QjZoay9qMmRRcjZhMGVXMGtCT1ZtdGNaelFxMmlNaGdNcEJuRy9UWmFSZHQvMHc0YnJYUHExakh5NDNGVjZMOEdXVmg3OG82R094Yk5tdE9XckxjUTV1dlNzUERXRWxaOWIwWm5JRmlMVHl5UmpZUHVDK2piOURJUi9IdytncFZBRWc5QnRyRDRVeUFOZlBCY1FST0FOZStISUVtK055VWNxaGduZWpGeUZxVWxYWjd6YXI2YTF0aGxHZTNka1BlQT09',
                 // type: 'user-management',
-                exclude_role_ids: [2],
-                include_role_ids: [1],
+                isHidden: true,
                 theme: 'light',
                 // isPreview: true,
                 isLogin: 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
@@ -4,7 +4,7 @@
     [ngClass]="{
         'with-reference-id': referenceId,
         'without-reference-id': authToken,
-        'dark-theme': theme === 'dark' && type === 'user-management'
+        'dark-theme': theme === 'dark' && (type === 'user-management' || authToken)
     }"
 >
     <div
@@ -79,6 +79,7 @@
     <proxy-user-profile
         *ngIf="authToken && type !== 'user-management' && type !== 'subscription'"
         [authToken]="authToken"
+        [theme]="theme"
     ></proxy-user-profile>
     <div
         class="otp-verification-footer"

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
@@ -155,6 +155,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
             if (theme?.theme !== Theme.SYSTEM) {
                 this.theme = theme?.theme || theme;
             }
+            this.loginWidgetData = theme?.registerState;
             this.version = theme?.version || 'v1';
             this.input_fields = theme?.input_fields || 'top';
             this.show_social_login_icons = theme?.icons || false;
@@ -202,11 +203,10 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
                 );
                 this.otpWidgetService.loadScript();
             }
-            this.loginWidgetData = widgetData?.find(
-                (widget) => widget?.service_id === FeatureServiceIds.PasswordAuthentication
-            );
             if (!this.loginWidgetData) {
-                this.loginWidgetData = widgetData[0];
+                this.loginWidgetData = widgetData?.find(
+                    (widget) => widget?.service_id === FeatureServiceIds.PasswordAuthentication
+                );
             }
         });
         this.otpWidgetService.otpWidgetToken.pipe(filter(Boolean), takeUntil(this.destroy$)).subscribe((token) => {

diff --git a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.html b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container" [ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'">
     <h2>Client Details</h2>
     <form [formGroup]="clientForm" class="form">
         <mat-form-field appearance="outline" class="full-width w-100">

diff --git a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.scss b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.scss
@@ -13,6 +13,264 @@ body {
     min-height: 600px;
     height: 100%;
     z-index: 10;
+
+    // Dark theme styles
+    &.dark-theme {
+        background: transparent;
+        color: #e0e0e0;
+
+        h2,
+        h3 {
+            color: #ffffff;
+        }
+
+        .mat-mdc-form-field {
+            .mat-mdc-text-field-wrapper {
+                background-color: transparent;
+            }
+
+            .mat-mdc-input-element {
+                color: #e0e0e0 !important;
+            }
+
+            .mat-mdc-floating-label {
+                color: #a0a0a0 !important;
+            }
+
+            // Label styling for dark theme
+            .mdc-floating-label {
+                color: #a0a0a0 !important;
+            }
+
+            mat-label {
+                color: #a0a0a0 !important;
+            }
+        }
+
+        // Force label color in all states
+        ::ng-deep .mat-mdc-form-field-flex .mdc-floating-label {
+            color: #a0a0a0 !important;
+        }
+
+        ::ng-deep .mat-mdc-form-field .mat-mdc-floating-label {
+            color: #a0a0a0 !important;
+        }
+
+        ::ng-deep .mdc-text-field--outlined .mdc-floating-label {
+            color: #a0a0a0 !important;
+        }
+
+        ::ng-deep .mat-form-field-label {
+            color: #a0a0a0 !important;
+        }
+
+        // Force white border on outlined form fields
+        ::ng-deep .mat-mdc-form-field-flex {
+            .mdc-notched-outline__leading,
+            .mdc-notched-outline__notch,
+            .mdc-notched-outline__trailing {
+                border-color: #ffffff !important;
+            }
+        }
+
+        ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,
+        ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,
+        ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
+            border-color: #ffffff !important;
+        }
+
+        ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
+            color: #ffffff !important;
+        }
+
+        ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-thick {
+            color: #ffffff !important;
+        }
+
+        .input-field {
+            color: #e0e0e0 !important;
+        }
+
+        table {
+            background-color: transparent;
+            box-shadow: none;
+            border: 1px solid #e0e0e0;
+
+            th {
+                background-color: transparent;
+                color: #e0e0e0;
+                border-color: #e0e0e0;
+                font-weight: bold;
+            }
+
+            td {
+                color: #c0c0c0;
+                border-color: #e0e0e0;
+            }
+
+            tr:hover {
+                background-color: rgba(255, 255, 255, 0.05);
+            }
+        }
+
+        .status-active {
+            color: #4caf50;
+        }
+
+        .success-message {
+            color: #4caf50;
+        }
+
+        .error-message {
+            color: #ff6b6b;
+        }
+
+        .no-data {
+            color: #a0a0a0;
+        }
+
+        button[mat-flat-button] {
+            background-color: #000000;
+            color: #ffffff;
+            border: 1px solid #ffffff;
+
+            &:hover {
+                background-color: #222222;
+            }
+
+            &[color='warn'] {
+                background-color: #000000;
+                color: #ffffff;
+                border: 1px solid #ffffff;
+            }
+        }
+    }
+
+    // Light theme (default)
+    &.light-theme {
+        color: #333333;
+
+        h2,
+        h3 {
+            color: #1a1a1a;
+        }
+
+        .mat-mdc-form-field {
+            .mat-mdc-text-field-wrapper {
+                background-color: #ffffff;
+            }
+
+            .mat-mdc-input-element {
+                color: #333333 !important;
+            }
+
+            .mat-mdc-floating-label {
+                color: #555555 !important;
+            }
+        }
+
+        // Form field outline styling for light theme
+        ::ng-deep .mat-mdc-form-field-flex {
+            .mdc-notched-outline__leading,
+            .mdc-notched-outline__notch,
+            .mdc-notched-outline__trailing {
+                border-color: #cccccc !important;
+            }
+        }
+
+        ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,
+        ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,
+        ::ng-deep .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
+            border-color: #cccccc !important;
+        }
+
+        ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
+            color: #cccccc !important;
+        }
+
+        ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-thick {
+            color: #1976d2 !important;
+        }
+
+        .input-field {
+            color: #333333 !important;
+        }
+
+        table {
+            background-color: #ffffff;
+            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e0e0e0;
+
+            th {
+                background-color: #f5f5f5;
+                color: #333333;
+                border-color: #e0e0e0;
+                font-weight: bold;
+            }
+
+            td {
+                color: #434242;
+                border-color: #e0e0e0;
+            }
+
+            tr:hover {
+                background-color: rgba(0, 0, 0, 0.04);
+            }
+        }
+
+        .status-active {
+            color: #2e7d32;
+        }
+
+        .success-message {
+            color: #2e7d32;
+        }
+
+        .error-message {
+            color: #d32f2f;
+        }
+
+        .no-data {
+            color: #757575;
+        }
+
+        button[mat-flat-button] {
+            background-color: #1976d2;
+            color: #ffffff;
+            border: none;
+
+            &:hover {
+                background-color: #1565c0;
+            }
+
+            &[color='warn'] {
+                background-color: #d32f2f;
+                color: #ffffff;
+                border: none;
+            }
+        }
+
+        .dropdown-btn {
+            background: #ffffff;
+            border-color: #cccccc;
+            color: #333333;
+        }
+
+        .dropdown-content {
+            background: #ffffff;
+            border-color: #cccccc;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        .modal-content {
+            background-color: #ffffff;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+        }
+
+        .input-label {
+            color: #404040;
+        }
+    }
 }
 .full-width {
     max-width: 300px;
@@ -80,6 +338,7 @@ td.mat-cell {
 th {
     background-color: #f4f4f4;
     font-size: small;
+    font-weight: bold;
     height: 22px;
     padding-left: 24px !important;
 }

diff --git a/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts b/apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts
@@ -31,6 +31,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit {
     @Input() public authToken: string;
     @Input() public target: string;
     @Input() public showCard: boolean;
+    @Input() public theme: string;
     @Input()
     set css(type: NgStyle['ngStyle']) {
         this.cssSubject$.next(type);

diff --git a/apps/proxy/src/app/auth/auth.component.html b/apps/proxy/src/app/auth/auth.component.html
@@ -1,4 +1,8 @@
 <div class="auth-landing">
+    <header class="landing-header">
+        <button class="header-login-btn" (click)="login()">Login</button>
+    </header>
+
     <main class="hero">
         <div class="hero-copy">
             <div class="badge-pill">