diff --git a/apps/proxy-auth/src/app/otp/component/login/login.component.html b/apps/proxy-auth/src/app/otp/component/login/login.component.html index 0862177c..b723da77 100644 --- a/apps/proxy-auth/src/app/otp/component/login/login.component.html +++ b/apps/proxy-auth/src/app/otp/component/login/login.component.html @@ -1,4 +1,4 @@ -
+
-
+
Login
Email or Mobile @@ -52,7 +59,7 @@ (verify)="onHCaptchaVerify($event)" (expired)="onHCaptchaExpired()" (error)="onHCaptchaError($event)" - theme="light" + [theme]="theme === 'dark' ? 'dark' : 'light'" size="normal" > @@ -72,7 +79,14 @@
-
+
Reset Password
Change Password
diff --git a/apps/proxy-auth/src/app/otp/component/login/login.component.scss b/apps/proxy-auth/src/app/otp/component/login/login.component.scss index cba8f3f8..63cea40e 100644 --- a/apps/proxy-auth/src/app/otp/component/login/login.component.scss +++ b/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; + } +} diff --git a/apps/proxy-auth/src/app/otp/component/login/login.component.ts b/apps/proxy-auth/src/app/otp/component/login/login.component.ts index 7d154538..3ad8a054 100644 --- a/apps/proxy-auth/src/app/otp/component/login/login.component.ts +++ b/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 = new EventEmitter(); @Output() public closePopUp: EventEmitter = new EventEmitter(); @Output() public openPopUp: EventEmitter = new EventEmitter(); diff --git a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.html b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.html index 85201ef4..fa2ef0aa 100644 --- a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.html +++ b/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" > 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 index 5a7ccdf7..30251e04 100644 --- 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 @@ -68,6 +68,7 @@ (togglePopUp)="toggleSendOtp()" (closePopUp)="setShowLogin(false)" [loginServiceData]="loginWidgetData" + [theme]="theme" (openPopUp)="setShowRegistrationFromLogin($event)" (failureReturn)="returnFailureObj($event)" >