P0066 test

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

@@ -1,4 +1,5 @@
 <button (click)="initOtpProvider()">Login with otp</button>
 <!-- <button (click)="initOtpProvider()">Login with otp</button> -->
 <!-- <div id="SEFVbXNhWnEzQSttZFhNaWpxYVIrWFlETWk4djk0clV6NUJwNzBtYmZVM0xPYXFBL2ZQaXJtU2hxZVNBd054TWJMOFJpWFA3UkZRbzgyeVVNY1dYMmRiNXc4aVhlUU1YSkVEaDZxeFhiaXh5bXMwYlZZRE9VVTVtTTU5cGRzSmQ5NVdFM3VFS3ZDMXFwbHQrbGozSDlhRU9CcUptcnllZUtWYzVqclhHbGw0PQ=="></div> -->
-<div id="4512365m176216342869087ae458e09"></div>
+<!-- <div id="4512365m176216342869087ae458e09"></div> -->
+<div id="userProxyContainer"></div>

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"

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">

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

apps/proxy-auth/src/app/otp/user-profile/user-profile.component.ts

@@ -30,6 +30,8 @@ import { UPDATE_REGEX } from '@proxy/regex';
 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);

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">

apps/proxy/src/app/auth/auth.component.scss

@@ -55,6 +55,43 @@ $accent-dark: #14b8a6;
     overflow-x: hidden;
 }
 
+.landing-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 16px 72px;
+
+    @include media-breakpoint-down('tablet') {
+        padding: 16px 32px;
+    }
+
+    @include media-breakpoint-down('phone') {
+        padding: 12px 20px;
+    }
+}
+
+.header-login-btn {
+    padding: 10px 24px;
+    background: transparent;
+    color: $accent;
+    border: 1px solid $accent;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba($accent, 0.1);
+        transform: translateY(-1px);
+    }
+}
+
 .hero {
     position: relative;
     z-index: 1;