From b4a849aa62bf58364285948bc80d71c6220e0121 Mon Sep 17 00:00:00 2001
From: Chandan-walker <chandan@whozzat.com>
Date: Thu, 5 Mar 2026 19:43:45 +0530
Subject: [PATCH] authentication version 2 bug fixes

---
 .../otp/component/register/register.component.html  |  4 ++++
 .../otp/component/register/register.component.scss  | 11 +++++++++++
 .../otp/component/register/register.component.ts    |  5 +++++
 .../send-otp-center/send-otp-center.component.html  | 10 ++++++++--
 .../send-otp-center/send-otp-center.component.scss  | 13 +++++++++++++
 .../send-otp-center/send-otp-center.component.ts    |  4 ++++
 .../src/app/otp/send-otp/send-otp.component.ts      |  2 +-
 7 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/apps/proxy-auth/src/app/otp/component/register/register.component.html b/apps/proxy-auth/src/app/otp/component/register/register.component.html
index 77950335..99a926ef 100644
--- a/apps/proxy-auth/src/app/otp/component/register/register.component.html
+++ b/apps/proxy-auth/src/app/otp/component/register/register.component.html
@@ -64,6 +64,8 @@
                         mat-flat-button
                         [color]="buttonColor ? null : 'primary'"
                         [disabled]="(selectGetOtpInProcess$ | async) || (isOtpSent && !canResendOtp)"
+                        [class.has-hover-color]="!!buttonHoverColor"
+                        [style.--btn-hover-color]="buttonHoverColor"
                         [ngStyle]="
                             buttonColor
                                 ? {
@@ -236,6 +238,8 @@
                         #submitBtn
                         mat-flat-button
                         [color]="buttonColor ? null : 'primary'"
+                        [class.has-hover-color]="!!buttonHoverColor"
+                        [style.--btn-hover-color]="buttonHoverColor"
                         [ngStyle]="
                             buttonColor
                                 ? {
diff --git a/apps/proxy-auth/src/app/otp/component/register/register.component.scss b/apps/proxy-auth/src/app/otp/component/register/register.component.scss
index 6e2e8013..7d5833f4 100644
--- a/apps/proxy-auth/src/app/otp/component/register/register.component.scss
+++ b/apps/proxy-auth/src/app/otp/component/register/register.component.scss
@@ -415,3 +415,14 @@ input[matinput]::-webkit-inner-spin-button {
         }
     }
 }
+
+// Custom button hover color applied via --btn-hover-color CSS property.
+// .has-hover-color is only added when buttonHoverColor is truthy.
+.has-hover-color:hover:not([disabled]) {
+    background-color: var(--btn-hover-color) !important;
+
+    .mdc-button__ripple::before,
+    .mat-mdc-button-ripple::before {
+        opacity: 0 !important;
+    }
+}
diff --git a/apps/proxy-auth/src/app/otp/component/register/register.component.ts b/apps/proxy-auth/src/app/otp/component/register/register.component.ts
index 54e01c6e..2d2217e2 100644
--- a/apps/proxy-auth/src/app/otp/component/register/register.component.ts
+++ b/apps/proxy-auth/src/app/otp/component/register/register.component.ts
@@ -649,6 +649,11 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
         return this.uiPreferences?.button_color || null;
     }
 
+    public get buttonHoverColor(): string | null {
+        if (this.version !== 'v2') return null;
+        return this.uiPreferences?.button_hover_color || null;
+    }
+
     public get buttonTextColor(): string | null {
         if (this.version !== 'v2') return null;
         return this.uiPreferences?.button_text_color || null;
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 25169fc6..d5d7f1cb 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
@@ -72,7 +72,7 @@
             <ng-container *ngIf="loginStep === 1 && widgetDataArray?.length && isCreateAccountLink">
                 <p class="create-account" [ngStyle]="primaryColor ? { color: primaryColor } : {}">
                     Are you a new User?
-                    <a href="javascript:void(0)" (click)="showRegistration()"> Create an account</a>
+                    <a href="javascript:void(0)" (click)="showRegistration()">{{ signUpButtonText }}</a>
                 </p>
             </ng-container>
 
@@ -221,6 +221,8 @@
                             (click)="login()"
                             [disabled]="isLoginLoading$ | async"
                             class="w-100"
+                            [class.has-hover-color]="!!buttonHoverColor"
+                            [style.--btn-hover-color]="buttonHoverColor"
                             [ngStyle]="
                                 buttonColor
                                     ? {
@@ -235,7 +237,7 @@
                         >
                             <div class="loader">
                                 <mat-spinner matPrefix diameter="20" *ngIf="isLoginLoading$ | async"></mat-spinner>
-                                Login
+                                Sign in
                             </div>
                         </button>
                     </div>
@@ -287,6 +289,8 @@
                         (click)="sendResetPasswordOtp()"
                         [disabled]="isLoginLoading$ | async"
                         class="w-100"
+                        [class.has-hover-color]="!!buttonHoverColor"
+                        [style.--btn-hover-color]="buttonHoverColor"
                         [ngStyle]="
                             buttonColor
                                 ? {
@@ -423,6 +427,8 @@
                         (click)="verifyResetPasswordOtp()"
                         [disabled]="isLoginLoading$ | async"
                         class="w-100"
+                        [class.has-hover-color]="!!buttonHoverColor"
+                        [style.--btn-hover-color]="buttonHoverColor"
                         [ngStyle]="
                             buttonColor
                                 ? {
diff --git a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.scss b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.scss
index 7c03a515..48487d67 100644
--- a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.scss
+++ b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.scss
@@ -424,3 +424,16 @@ p {
     background-color: transparent !important;
     border-color: #ffffff !important;
 }
+
+// Custom button hover color applied via --btn-hover-color CSS property.
+// The .has-hover-color class is only added when buttonHoverColor is truthy,
+// so this rule is a no-op when the preference is not configured.
+.has-hover-color:hover:not([disabled]) {
+    background-color: var(--btn-hover-color) !important;
+
+    // Suppress Material's default state-layer ripple so it doesn't wash over the custom color
+    .mdc-button__ripple::before,
+    .mat-mdc-button-ripple::before {
+        opacity: 0 !important;
+    }
+}
diff --git a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.ts b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.ts
index 5a5cc265..ea0481df 100644
--- a/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.ts
+++ b/apps/proxy-auth/src/app/otp/component/send-otp-center/send-otp-center.component.ts
@@ -688,6 +688,10 @@ export class SendOtpCenterComponent extends BaseComponent implements OnInit, OnD
         return this.theme === 'dark';
     }
 
+    public get signUpButtonText(): string {
+        return this.uiPreferences?.sign_up_button_text || 'Create an account';
+    }
+
     private startResetPasswordTimer(): void {
         this.remainingSeconds = 15;
         this.resetPasswordTimerSubscription = interval(1000).subscribe(() => {
diff --git a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts
index d44c8014..af6c70c7 100644
--- a/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts
+++ b/apps/proxy-auth/src/app/otp/send-otp/send-otp.component.ts
@@ -2568,7 +2568,7 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
 
         // Set the text content
         paragraph.innerHTML = 'Are you a new user? ';
-        link.textContent = 'Create an account';
+        link.textContent = selectWidgetTheme?.ui_preferences?.sign_up_button_text || 'Create an account';
 
         // Add click event to the link
         link.addEventListener('click', (event) => {