P0054 test

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

@@ -4,7 +4,7 @@
             <path d="M400-80 0-480l400-400 71 71-329 329 329 329-71 71Z" />
         </svg>
     </button>
-    <button mat-icon-button mat-dialog-close class="close-dialog close-button" (click)="close(true)">
+    <button mat-icon-button class="close-dialog close-button" (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"

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

@@ -1,7 +1,7 @@
 <ng-container>
     <div class="dialog-header">
         <div class="heading">Register</div>
-        <button mat-icon-button mat-dialog-close class="close-dialog" (click)="close(true)">
+        <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"

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

@@ -14,7 +14,7 @@ import {
     ViewChild,
     ElementRef,
 } from '@angular/core';
-import { resetAll, sendOtpAction, verifyOtpAction } from '../../store/actions/otp.action';
+import { resetAnyState, sendOtpAction, verifyOtpAction } from '../../store/actions/otp.action';
 import { BaseComponent } from '@proxy/ui/base-component';
 import { select, Store } from '@ngrx/store';
 import { IAppState } from '../../store/app.state';
@@ -317,7 +317,8 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
     public close(closeByUser: boolean = false): void {
         // Reset all form and OTP states
         this.resetFormState();
-        this.resetStore();
+        // Reset only OTP-specific store states, preserving widgetData
+        this.resetOtpStoreState();
 
         this.togglePopUp.emit();
         if (closeByUser) {
@@ -348,8 +349,30 @@ export class RegisterComponent extends BaseComponent implements AfterViewInit, O
         this.apiError.next(null);
     }
 
-    public resetStore(): void {
-        this.store.dispatch(resetAll());
+    /**
+     * Reset only OTP-specific store states, preserving widgetData and other non-OTP states
+     */
+    private resetOtpStoreState(): void {
+        this.store.dispatch(
+            resetAnyState({
+                request: {
+                    otpGenerateData: null,
+                    getOtpInProcess: false,
+                    getOtpSuccess: false,
+                    verifyOtpV2Data: null,
+                    verifyOtpV2InProcess: false,
+                    verifyOtpV2Success: false,
+                    resendOtpInProcess: false,
+                    resendOtpSuccess: false,
+                    verifyOtpData: null,
+                    verifyOtpInProcess: false,
+                    verifyOtpSuccess: false,
+                    resendCount: 0,
+                    apiErrorResponse: null,
+                    errors: null,
+                },
+            })
+        );
     }
 
     public returnSuccess(successResponse: any) {

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

@@ -1,5 +1,5 @@
 <ng-container>
-    <button mat-icon-button mat-dialog-close class="close-dialog" (click)="close(true)">
+    <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"
@@ -315,18 +315,19 @@
                                 widgetData?.service_id !== featureServiceIds.Msg91OtpService ||
                                 !(otpScriptLoading | async)
                             "
-                            mat-raised-button
+                            mat-stroked-button
                             (click)="onVerificationBtnClick(widgetData)"
-                            style="padding: 10px 50px !important"
-                            class="mat-elevation-z2"
+                            class="auth-option-btn"
                         >
-                            <img
-                                [src]="widgetData.icon"
-                                [alt]="widgetData.text"
-                                style="margin-right: 20px"
-                                loading="lazy"
-                            />
-                            <span class="mat-subheading-2">{{ widgetData.text }}</span>
+                            <div class="auth-option-content">
+                                <img
+                                    [src]="widgetData.icon"
+                                    [alt]="widgetData.text"
+                                    class="auth-option-icon"
+                                    loading="lazy"
+                                />
+                                <span class="auth-option-text">{{ widgetData.text }}</span>
+                            </div>
                         </button>
                     </ng-container>
                 </ng-container>

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

@@ -209,3 +209,35 @@ p {
         }
     }
 }
+
+// Auth option buttons (Continue with Google, etc.)
+.auth-option-btn {
+    width: 100%;
+    height: 44px;
+    border: 1px solid #7d7c7c !important;
+    border-radius: 8px !important;
+    font-size: 14px;
+    font-weight: 600;
+    background-color: #fff !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.auth-option-content {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 180px;
+}
+
+.auth-option-icon {
+    height: 20px;
+    width: 20px;
+    min-width: 20px;
+    margin-right: 12px;
+}
+
+.auth-option-text {
+    white-space: nowrap;
+}

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

@@ -1200,16 +1200,18 @@ export class SendOtpComponent extends BaseComponent implements OnInit, OnDestroy
                     this.show$ = of(true);
                 } else {
                     // When closing registration, go back to where user came from
-                    this.setShowLogin(false);
                     if (this.cameFromLogin) {
                         // If user came from login, go back to login
                         this.setShowLogin(true);
                         this.show$ = of(true);
                     } else if (this.cameFromSendOtpCenter) {
                         // If user came from send-otp-center, go back to send-otp-center
+                        // Only close login without affecting show$ - avoid race condition
+                        this.otpWidgetService.openLogin(false);
                         this.show$ = of(true);
                     } else {
                         // If user came from dynamically appended buttons, just close without opening anything
+                        this.setShowLogin(false);
                         this.show$ = of(false);
                     }
                     // Reset the flags

apps/proxy-auth/src/otp-global.scss

@@ -1,7 +1,7 @@
 .otp-verification-dialog {
     width: 380px;
     min-height: 350px;
-    font-size: 20px;
+    font-size: 15px;
     color: #ffffff;
     text-align: center;
     display: inherit;