Production pr

apps/proxy-auth/src/app/element.module.ts

@@ -43,6 +43,14 @@ function documentReady(fn: any) {
 
 window['initVerification'] = (config: any) => {
     documentReady(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const isRegisterFormOnlyFromParams = urlParams.get('isRegisterFormOnly') === 'true';
+        const paramsData = {
+            ...(urlParams.get('first_name') && { firstName: urlParams.get('first_name') }),
+            ...(urlParams.get('last_name') && { lastName: urlParams.get('last_name') }),
+            ...(urlParams.get('email') && { email: urlParams.get('email') }),
+            ...(urlParams.get('signup_service_id') && { signupServiceId: urlParams.get('signup_service_id') }),
+        };
         if (config?.referenceId || config?.authToken || config?.showCompanyDetails) {
             const findOtpProvider = document.querySelector('proxy-auth');
             if (findOtpProvider) {
@@ -65,6 +73,7 @@ window['initVerification'] = (config: any) => {
             sendOtpElement.exclude_role_ids = config?.exclude_role_ids;
             sendOtpElement.include_role_ids = config?.include_role_ids;
             sendOtpElement.isHidden = config?.isHidden;
+            sendOtpElement.isRegisterFormOnly = config?.isRegisterFormOnly || isRegisterFormOnlyFromParams;
             sendOtpElement.target = config?.target ?? '_self';
             sendOtpElement.css = config.style;
             if (!config.success || typeof config.success !== 'function') {
@@ -73,8 +82,8 @@ window['initVerification'] = (config: any) => {
             sendOtpElement.successReturn = config.success;
             sendOtpElement.failureReturn = config.failure;
 
-            // omitting keys which are not required in API payload
-            sendOtpElement.otherData = omit(config, RESERVED_KEYS);
+            // omitting keys which are not required in API payload; query params fill in missing values
+            sendOtpElement.otherData = { ...paramsData, ...omit(config, RESERVED_KEYS) };
             if (document.getElementById('proxyContainer') && config?.type !== 'user-management') {
                 document.getElementById('proxyContainer').append(sendOtpElement);
             } else if (config?.type === 'user-management') {

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>
@@ -47,15 +54,29 @@
 
     <!-- hCaptcha Component -->
     <div class="hcaptcha-container">
-        <ng-hcaptcha
-            #hCaptcha
-            (verify)="onHCaptchaVerify($event)"
-            (expired)="onHCaptchaExpired()"
-            (error)="onHCaptchaError($event)"
-            theme="light"
-            size="normal"
-        >
-        </ng-hcaptcha>
+        <!-- hCaptcha is in 2.6 version but angular is in 14, due to this incompatibility, we are using ng-container to wrap the hCaptcha component instead of using [theme]="theme === 'dark' ? 'dark' : 'light'"-->
+        <ng-container *ngIf="theme === 'dark'">
+            <ng-hcaptcha
+                #hCaptcha
+                (verify)="onHCaptchaVerify($event)"
+                (expired)="onHCaptchaExpired()"
+                (error)="onHCaptchaError($event)"
+                theme="dark"
+                size="normal"
+            >
+            </ng-hcaptcha>
+        </ng-container>
+        <ng-container *ngIf="theme === 'light'">
+            <ng-hcaptcha
+                #hCaptcha
+                (verify)="onHCaptchaVerify($event)"
+                (expired)="onHCaptchaExpired()"
+                (error)="onHCaptchaError($event)"
+                theme="light"
+                size="normal"
+            >
+            </ng-hcaptcha>
+        </ng-container>
     </div>
 
     <div class="error-message" *ngIf="apiError | async">
@@ -72,7 +93,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 +127,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/register/register.component.html

@@ -1,11 +1,11 @@
 <ng-container>
     <div class="dialog-header">
-        <div class="heading">Register</div>
-        <button mat-icon-button class="close-dialog" (click)="close(true)" type="button">
+        <div class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">Register</div>
+        <button mat-icon-button class="close-dialog" (click)="close(true)" type="button" *ngIf="!isRegisterFormOnly">
             <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M11.8334 1.34163L10.6584 0.166626L6.00008 4.82496L1.34175 0.166626L0.166748 1.34163L4.82508 5.99996L0.166748 10.6583L1.34175 11.8333L6.00008 7.17496L10.6584 11.8333L11.8334 10.6583L7.17508 5.99996L11.8334 1.34163Z"
-                    fill="#5D6164"
+                    [attr.fill]="isDarkTheme ? '#ffffff' : '#5D6164'"
                 />
             </svg>
         </button>
@@ -17,8 +17,11 @@
             proxyMarkAllAsTouched
             [buttonRef]="submitBtn"
             (valid)="submit()"
+            [class.custom-radius]="!!borderRadiusValue"
+            [style.--field-border-radius]="borderRadiusValue || '4px'"
+            [class.dark-theme-login]="isDarkTheme"
         >
-            <p class="heading">User Details</p>
+            <p class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">User Details</p>
             <div class="one-line">
                 <ng-container
                     [ngTemplateOutlet]="formField"
@@ -59,8 +62,21 @@
                     <button
                         (click)="isOtpSent ? resendOtp() : getOtp()"
                         mat-flat-button
-                        color="primary"
+                        [color]="buttonColor ? null : 'primary'"
                         [disabled]="(selectGetOtpInProcess$ | async) || (isOtpSent && !canResendOtp)"
+                        [class.has-hover-color]="!!buttonHoverColor"
+                        [style.--btn-hover-color]="buttonHoverColor"
+                        [ngStyle]="
+                            buttonColor
+                                ? {
+                                      'background-color': buttonColor,
+                                      color: buttonTextColor || '#ffffff',
+                                      'border-radius': borderRadiusValue || '4px'
+                                  }
+                                : borderRadiusValue
+                                ? { 'border-radius': borderRadiusValue }
+                                : {}
+                        "
                     >
                         <span *ngIf="!isOtpSent">
                             {{ (selectGetOtpInProcess$ | async) ? 'Sending...' : 'Get OTP' }}
@@ -170,12 +186,18 @@
                     }"
                 ></ng-container>
             </div>
-            <div class="note">
+            <div class="note" [ngStyle]="primaryColor ? { color: primaryColor } : {}">
                 <span class="subheading">Note: </span>
                 Password should contain atleast one Capital Letter, one Small Letter, one Digit and one Symbol
             </div>
-            <mat-divider *ngIf="showCompanyDetail" class="company-details"></mat-divider>
-            <div *ngIf="showCompanyDetail" class="heading">Company Details (Optional)</div>
+            <mat-divider
+                *ngIf="showCompanyDetail"
+                class="company-details"
+                [class.dark-divider]="isDarkTheme"
+            ></mat-divider>
+            <div *ngIf="showCompanyDetail" class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">
+                Company Details (Optional)
+            </div>
             <ng-container
                 *ngIf="showCompanyDetail"
                 [ngTemplateOutlet]="formField"
@@ -212,7 +234,26 @@
                     </ng-container>
                 </div>
                 <div class="submit-btn">
-                    <button #submitBtn mat-flat-button color="primary">Submit</button>
+                    <button
+                        #submitBtn
+                        mat-flat-button
+                        [color]="buttonColor ? null : 'primary'"
+                        [class.has-hover-color]="!!buttonHoverColor"
+                        [style.--btn-hover-color]="buttonHoverColor"
+                        [ngStyle]="
+                            buttonColor
+                                ? {
+                                      'background-color': buttonColor,
+                                      color: buttonTextColor || '#ffffff',
+                                      'border-radius': borderRadiusValue || '4px'
+                                  }
+                                : borderRadiusValue
+                                ? { 'border-radius': borderRadiusValue }
+                                : {}
+                        "
+                    >
+                        Submit
+                    </button>
                 </div>
             </div>
         </div>