P0074 | Preview script, create account and forget password - dark theme

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

@@ -1,4 +1,4 @@
-<div class="dialog-header">
+<div class="dialog-header" [ngClass]="{ 'dark-theme': theme === 'dark' }">
     <button mat-icon-button class="back-button close-dialog" (click)="changeStep(step - 1)">
         <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="#5f6368">
             <path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z" />
@@ -13,7 +13,14 @@
         </svg>
     </button>
 </div>
-<div *ngIf="step === 1" [formGroup]="loginForm" proxyMarkAllAsTouched [buttonRef]="loginBtn" (valid)="login()">
+<div
+    *ngIf="step === 1"
+    [formGroup]="loginForm"
+    proxyMarkAllAsTouched
+    [buttonRef]="loginBtn"
+    (valid)="login()"
+    [class.dark-theme-login]="theme === 'dark'"
+>
     <div class="heading">Login</div>
     <mat-form-field appearance="outline" class="input-width" *ngIf="loginForm.get('username') as userNameControl">
         <mat-label>Email or Mobile</mat-label>
@@ -52,7 +59,7 @@
             (verify)="onHCaptchaVerify($event)"
             (expired)="onHCaptchaExpired()"
             (error)="onHCaptchaError($event)"
-            theme="light"
+            [theme]="theme === 'dark' ? 'dark' : 'light'"
             size="normal"
         >
         </ng-hcaptcha>
@@ -72,7 +79,14 @@
     </div>
 </div>
 
-<div *ngIf="step === 2" [formGroup]="sendOtpForm" [buttonRef]="sendOtpBtn" (valid)="sendOtp()" proxyMarkAllAsTouched>
+<div
+    *ngIf="step === 2"
+    [formGroup]="sendOtpForm"
+    [buttonRef]="sendOtpBtn"
+    (valid)="sendOtp()"
+    proxyMarkAllAsTouched
+    [class.dark-theme-login]="theme === 'dark'"
+>
     <div class="heading">Reset Password</div>
     <ng-container
         [ngTemplateOutlet]="formField"
@@ -99,6 +113,7 @@
     proxyMarkAllAsTouched
     [buttonRef]="verifyOtpBtn"
     (valid)="verfiyOtp()"
+    [class.dark-theme-login]="theme === 'dark'"
 >
     <div class="heading">Change Password</div>
 

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

@@ -47,6 +47,15 @@ p {
 .close-button {
     right: 16px;
 }
+
+.dark-theme {
+    .back-button svg {
+        fill: #ffffff;
+    }
+    .close-button svg path {
+        fill: #ffffff;
+    }
+}
 .heading {
     font-size: 16px;
     line-height: 20px;
@@ -91,3 +100,70 @@ p {
     justify-content: center;
     padding: 8px 0;
 }
+
+// Dark theme — mat-form-field overrides (mirrors register.component.scss pattern)
+:host ::ng-deep .dark-theme-login {
+    .mat-mdc-text-field-wrapper,
+    .mdc-text-field--outlined {
+        background-color: transparent !important;
+    }
+
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__notch,
+    .mdc-notched-outline__trailing {
+        border-color: #ffffff !important;
+    }
+
+    .mat-mdc-form-field-flex {
+        background-color: transparent !important;
+    }
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label,
+    .mat-mdc-form-field .mdc-floating-label {
+        color: #ffffff !important;
+    }
+
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input,
+    .mat-mdc-input-element {
+        color: #ffffff !important;
+    }
+
+    // Legacy Material outline fields
+    .mat-form-field-appearance-outline {
+        .mat-form-field-outline,
+        .mat-form-field-outline-thick {
+            color: #ffffff !important;
+        }
+
+        &.mat-form-field-invalid {
+            .mat-form-field-outline,
+            .mat-form-field-outline-thick {
+                color: red !important;
+            }
+        }
+    }
+
+    .mat-form-field-flex {
+        background-color: transparent !important;
+    }
+
+    .mat-input-element {
+        color: #ffffff !important;
+    }
+
+    .mat-form-field-label {
+        color: #ffffff !important;
+    }
+
+    // Hint text
+    .mat-hint,
+    .mat-mdc-form-field-hint,
+    .mat-mdc-form-field-hint-wrapper {
+        color: rgba(255, 255, 255, 0.7) !important;
+    }
+
+    // Suffix icon (password toggle)
+    .mat-icon-button svg path {
+        fill: #ffffff;
+    }
+}

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

@@ -23,6 +23,7 @@ import { NgHcaptchaComponent } from 'ng-hcaptcha';
 })
 export class LoginComponent extends BaseComponent implements OnInit, OnDestroy {
     @Input() public loginServiceData: any;
+    @Input() public theme: string;
     @Output() public togglePopUp: EventEmitter<any> = new EventEmitter();
     @Output() public closePopUp: EventEmitter<any> = new EventEmitter();
     @Output() public openPopUp: EventEmitter<any> = new EventEmitter();

apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.html

@@ -203,7 +203,7 @@
                             (verify)="onHCaptchaVerify($event)"
                             (expired)="onHCaptchaExpired()"
                             (error)="onHCaptchaError($event)"
-                            theme="light"
+                            [theme]="theme === 'dark' ? 'dark' : 'light'"
                             size="normal"
                         >
                         </ng-hcaptcha>

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

@@ -68,6 +68,7 @@
             (togglePopUp)="toggleSendOtp()"
             (closePopUp)="setShowLogin(false)"
             [loginServiceData]="loginWidgetData"
+            [theme]="theme"
             (openPopUp)="setShowRegistrationFromLogin($event)"
             (failureReturn)="returnFailureObj($event)"
         >