P0073 | Authorization script version 2 changes

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>
+        <div class="heading" [ngStyle]="primaryColor ? { color: primaryColor } : {}">Register</div>
         <button mat-icon-button class="close-dialog" (click)="close(true)" type="button">
             <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,19 @@
                     <button
                         (click)="isOtpSent ? resendOtp() : getOtp()"
                         mat-flat-button
-                        color="primary"
+                        [color]="buttonColor ? null : 'primary'"
                         [disabled]="(selectGetOtpInProcess$ | async) || (isOtpSent && !canResendOtp)"
+                        [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 +184,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 +232,24 @@
                     </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'"
+                        [ngStyle]="
+                            buttonColor
+                                ? {
+                                      'background-color': buttonColor,
+                                      color: buttonTextColor || '#ffffff',
+                                      'border-radius': borderRadiusValue || '4px'
+                                  }
+                                : borderRadiusValue
+                                ? { 'border-radius': borderRadiusValue }
+                                : {}
+                        "
+                    >
+                        Submit
+                    </button>
                 </div>
             </div>
         </div>

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

@@ -263,3 +263,155 @@ input[matinput]::-webkit-inner-spin-button {
 .verify-otp-link {
     font-size: 12px;
 }
+
+.form-wrapper.custom-radius {
+    --mdc-outlined-text-field-container-shape: var(--field-border-radius, 4px);
+    --mdc-filled-text-field-container-shape: var(--field-border-radius, 4px);
+    --mat-form-field-container-shape: var(--field-border-radius, 4px);
+    --mdc-shape-small: var(--field-border-radius, 4px);
+}
+
+:host ::ng-deep .form-wrapper.custom-radius {
+    .mat-mdc-text-field-wrapper,
+    .mdc-text-field--outlined {
+        border-radius: var(--field-border-radius, 4px) !important;
+    }
+
+    .mdc-notched-outline__leading {
+        border-radius: var(--field-border-radius, 4px) 0 0 var(--field-border-radius, 4px) !important;
+        width: var(--field-border-radius, 4px) !important;
+    }
+
+    .mdc-notched-outline__trailing {
+        border-radius: 0 var(--field-border-radius, 4px) var(--field-border-radius, 4px) 0 !important;
+    }
+
+    .mat-form-field-outline-start {
+        border-radius: var(--field-border-radius, 4px) 0 0 var(--field-border-radius, 4px) !important;
+        width: var(--field-border-radius, 4px) !important;
+    }
+
+    .mat-form-field-outline-end {
+        border-radius: 0 var(--field-border-radius, 4px) var(--field-border-radius, 4px) 0 !important;
+    }
+
+    .mat-form-field-wrapper,
+    .mat-form-field-flex,
+    .mat-mdc-form-field-flex {
+        border-radius: var(--field-border-radius, 4px) !important;
+    }
+
+    .mat-mdc-raised-button,
+    .mat-mdc-flat-button,
+    .mat-mdc-unelevated-button,
+    .mat-raised-button,
+    .mat-flat-button {
+        border-radius: var(--field-border-radius, 4px) !important;
+    }
+
+    .register-user-details {
+        .iti {
+            border-radius: var(--field-border-radius, 4px) !important;
+        }
+
+        input[type='tel'] {
+            border-radius: var(--field-border-radius, 4px) !important;
+        }
+    }
+}
+.register-user-details {
+    border-radius: var(--field-border-radius, 4px) !important;
+}
+
+// Dark theme styles
+.dark-text {
+    color: #ffffff !important;
+
+    a {
+        color: #ffffff !important;
+    }
+}
+
+.dark-divider {
+    border-top-color: #ffffff !important;
+}
+
+:host ::ng-deep .form-wrapper.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 — use `color` on outline containers so children
+    // inherit via `currentColor`, preserving the gap's transparent top border
+    .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;
+    }
+
+    .register-user-details {
+        input[type='tel'],
+        [id^='init-contact'] {
+            border-color: #ffffff !important;
+            color: #ffffff !important;
+            background-color: #616161 !important;
+
+            &::placeholder {
+                color: rgba(255, 255, 255, 0.7) !important;
+            }
+        }
+
+        .iti__selected-flag {
+            background-color: #616161 !important;
+        }
+
+        .iti__arrow {
+            border-top-color: #ffffff;
+        }
+
+        .iti__dial-code {
+            color: #ffffff !important;
+        }
+    }
+}

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

@@ -34,6 +34,7 @@ import {
     selectVerifyOtpV2InProcess,
     selectVerifyOtpV2Success,
     selectApiErrorResponse,
+    selectWidgetTheme,
 } from '../../store/selectors';
 import { IGetOtpRes } from '../../model/otp';
 
@@ -49,6 +50,8 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
     @Input() public registrationViaLogin: boolean;
     @Input() public prefillDetails;
     @Input() public showCompanyDetails: boolean = true;
+    @Input() public version: string = 'v1';
+    @Input() public theme: string;
     public showPassword: boolean = false;
     public showConfirmPassword: boolean = false;
     @Output() public togglePopUp: EventEmitter<any> = new EventEmitter();
@@ -121,6 +124,9 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
     public lastSentMobileNumber: string = '';
     private timerSubscription: Subscription;
 
+    public selectWidgetTheme$: Observable<any>;
+    public uiPreferences: any = {};
+
     @ViewChild('otp1', { static: false }) otp1Ref: ElementRef;
     @ViewChild('otp2', { static: false }) otp2Ref: ElementRef;
     @ViewChild('otp3', { static: false }) otp3Ref: ElementRef;
@@ -168,9 +174,17 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
             distinctUntilChanged(_.isEqual),
             takeUntil(this.destroy$)
         );
+        this.selectWidgetTheme$ = this.store.pipe(
+            select(selectWidgetTheme),
+            distinctUntilChanged(_.isEqual),
+            takeUntil(this.destroy$)
+        );
     }
 
     ngOnInit(): void {
+        this.selectWidgetTheme$.pipe(takeUntil(this.destroy$)).subscribe((theme) => {
+            this.uiPreferences = theme?.ui_preferences || {};
+        });
         this.registrationForm
             .get('user.mobile')
             .valueChanges.pipe(takeUntil(this.destroy$))
@@ -601,4 +615,46 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
         this.otpForm.reset();
         this.cdr.detectChanges();
     }
+
+    public get primaryColor(): string | null {
+        if (this.version !== 'v2') {
+            return null;
+        }
+        const isDark = this.theme === 'dark';
+        return isDark
+            ? this.uiPreferences?.dark_theme_primary_color || null
+            : this.uiPreferences?.light_theme_primary_color || null;
+    }
+
+    public get borderRadiusValue(): string | null {
+        if (this.version !== 'v2') {
+            return null;
+        }
+        switch (this.uiPreferences?.border_radius) {
+            case 'none':
+                return '0';
+            case 'small':
+                return '4px';
+            case 'medium':
+                return '8px';
+            case 'large':
+                return '12px';
+            default:
+                return null;
+        }
+    }
+
+    public get buttonColor(): string | null {
+        if (this.version !== 'v2') return null;
+        return this.uiPreferences?.button_color || null;
+    }
+
+    public get buttonTextColor(): string | null {
+        if (this.version !== 'v2') return null;
+        return this.uiPreferences?.button_text_color || null;
+    }
+
+    public get isDarkTheme(): boolean {
+        return this.theme === 'dark';
+    }
 }