signer-test-sdk-react 0.0.12 → 0.0.13

package/dist/src/components/OnboardingUI/OnboardingUIWeb.js

@@ -590,6 +590,46 @@ const ONBOARDING_UI_STYLES = `
   width: 100%;
 }
 
+/* Hide social buttons when OTP screen is visible - using class for better browser support */
+.onboarding-card.onboarding-otp-active .onboarding-button-google,
+.onboarding-card.onboarding-otp-active .onboarding-button-social,
+.onboarding-card.onboarding-otp-active .onboarding-social-grid,
+.onboarding-card.onboarding-otp-active .onboarding-divider:not(.onboarding-otp-divider),
+.onboarding-card.onboarding-otp-active .onboarding-button-passkey,
+.onboarding-card.onboarding-otp-active .onboarding-passkey-signup-link,
+.onboarding-card.onboarding-otp-active .onboarding-passkey-divider,
+.onboarding-card.onboarding-otp-active .onboarding-form:not(.onboarding-otp-form),
+.onboarding-card.onboarding-otp-active .onboarding-input-group:not(.onboarding-otp-inputs-container) {
+  display: none !important;
+  visibility: hidden !important;
+  opacity: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Fallback using :has() for modern browsers */
+@supports selector(:has(*)) {
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-button-google,
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-button-social,
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-social-grid,
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-divider:not(.onboarding-otp-divider),
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-button-passkey,
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-passkey-signup-link,
+  .onboarding-card:has(.onboarding-otp-verification) .onboarding-passkey-divider {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    pointer-events: none !important;
+  }
+}
+
 .onboarding-social-icon {
   width: 20px;
   height: 20px;
@@ -856,13 +896,17 @@ const ONBOARDING_UI_STYLES = `
   color: #b91c1c;
 }
 
-.onboarding-otp-resend-link:disabled {
+.onboarding-otp-resend-link:disabled,
+.onboarding-otp-resend-link-disabled {
   color: #9ca3af;
   cursor: not-allowed;
   text-decoration: none;
+  pointer-events: none;
+  opacity: 0.6;
 }
 
-.onboarding-theme-dark .onboarding-otp-resend-link:disabled {
+.onboarding-theme-dark .onboarding-otp-resend-link:disabled,
+.onboarding-theme-dark .onboarding-otp-resend-link-disabled {
   color: #6b7280;
 }
 
@@ -972,6 +1016,7 @@ export class OnboardingUIWeb {
     loading = false;
     activeButton = null;
     resendCooldown = 0;
+    resendCooldownTimer = null;
     externalWalletsEnabled = false;
     constructor(config, externalWalletsEnabled = false) {
         this.externalWalletsEnabled = externalWalletsEnabled;
@@ -2478,12 +2523,11 @@ export class OnboardingUIWeb {
         }
     }
     /**
-     * Show OTP verification screen
+     * Hide all login-related elements (social buttons, passkey, etc.)
+     * This ensures they stay hidden on the OTP screen
+     * Made public so it can be called from AbstraxnProvider
      */
-    showOtpInput() {
-        if (!this.rootElement)
-            return;
-        // Hide the email form and all login-related elements
+    hideLoginElements() {
         if (this.emailForm) {
             this.emailForm.style.display = 'none';
         }
@@ -2526,6 +2570,15 @@ export class OnboardingUIWeb {
         if (this.footer) {
             this.footer.style.display = 'none';
         }
+    }
+    /**
+     * Show OTP verification screen
+     */
+    showOtpInput() {
+        if (!this.rootElement)
+            return;
+        // Hide the email form and all login-related elements
+        this.hideLoginElements();
         // Create OTP verification screen
         this.createOtpVerificationScreen();
     }
@@ -2544,6 +2597,8 @@ export class OnboardingUIWeb {
         const card = this.rootElement.querySelector('.onboarding-card');
         if (!card)
             return;
+        // Add class to card to indicate OTP screen is active (for CSS targeting)
+        card.classList.add('onboarding-otp-active');
         // Create OTP verification container
         this.otpVerificationScreen = this.createElement('div', {
             className: 'onboarding-otp-verification',
@@ -2629,7 +2684,15 @@ export class OnboardingUIWeb {
         const resendLink = resendSection.querySelector('#otp-resend-link');
         if (resendLink) {
             this.resendButton = resendLink;
-            resendLink.addEventListener('click', () => this.handleResendOtp());
+            resendLink.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // Prevent click if cooldown is active
+                if (this.resendCooldown > 0) {
+                    return;
+                }
+                this.handleResendOtp();
+            });
         }
         // Footer (add to OTP screen as well)
         if (this.config.showFooter) {
@@ -2687,11 +2750,24 @@ export class OnboardingUIWeb {
         }
         // Append to card
         card.appendChild(this.otpVerificationScreen);
+        // Ensure login elements are hidden when OTP screen is created
+        // This is critical to prevent social buttons from showing
+        this.hideLoginElements();
+        // Also ensure they stay hidden after DOM updates
+        setTimeout(() => {
+            if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                this.hideLoginElements();
+            }
+        }, 0);
         // Focus first input
         setTimeout(() => {
             if (this.otpInputs[0]) {
                 this.otpInputs[0].focus();
             }
+            // Final check to ensure social buttons are hidden
+            if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                this.hideLoginElements();
+            }
         }, 100);
         // Start resend cooldown
         this.startResendCooldown();
@@ -2839,6 +2915,24 @@ export class OnboardingUIWeb {
             this.config.onLoginError?.(err instanceof Error ? err : new Error(errorMessage));
             // Disable auto-submit after failed attempt
             this.autoSubmitEnabled = false;
+            // Ensure social buttons and login elements remain hidden on OTP screen when error occurs
+            // This prevents them from appearing when an OTP error is shown
+            if (this.otpVerificationScreen) {
+                // Immediately hide login elements
+                this.hideLoginElements();
+                // Also use setTimeout to ensure they stay hidden after any potential re-renders
+                setTimeout(() => {
+                    if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                        this.hideLoginElements();
+                    }
+                }, 0);
+                // Additional check after a short delay to catch any late re-renders
+                setTimeout(() => {
+                    if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                        this.hideLoginElements();
+                    }
+                }, 100);
+            }
             // Clear OTP inputs on error
             this.otpInputs.forEach(input => {
                 input.value = '';
@@ -2905,20 +2999,42 @@ export class OnboardingUIWeb {
      * Start resend cooldown timer
      */
     startResendCooldown() {
+        // Clear any existing cooldown timer
+        if (this.resendCooldownTimer) {
+            clearInterval(this.resendCooldownTimer);
+        }
         this.resendCooldown = 60; // 60 seconds cooldown
-        const updateCooldown = () => {
-            if (this.resendCooldown > 0 && this.resendButton) {
-                this.resendButton.textContent = `Resend (${this.resendCooldown}s)`;
-                this.resendButton.setAttribute('disabled', 'true');
+        // Update UI immediately
+        if (this.resendButton) {
+            this.resendButton.textContent = `Resend (${this.resendCooldown}s)`;
+            this.resendButton.classList.add('onboarding-otp-resend-link-disabled');
+            this.resendButton.style.pointerEvents = 'none';
+            this.resendButton.style.cursor = 'not-allowed';
+            this.resendButton.style.opacity = '0.6';
+        }
+        // Start countdown timer
+        this.resendCooldownTimer = setInterval(() => {
+            if (this.resendCooldown > 0) {
                 this.resendCooldown--;
-                setTimeout(updateCooldown, 1000);
+                if (this.resendButton) {
+                    this.resendButton.textContent = `Resend (${this.resendCooldown}s)`;
+                }
             }
-            else if (this.resendButton) {
-                this.resendButton.textContent = 'Resend';
-                this.resendButton.removeAttribute('disabled');
+            else {
+                // Cooldown complete, enable resend
+                if (this.resendCooldownTimer) {
+                    clearInterval(this.resendCooldownTimer);
+                    this.resendCooldownTimer = null;
+                }
+                if (this.resendButton) {
+                    this.resendButton.textContent = 'Resend';
+                    this.resendButton.classList.remove('onboarding-otp-resend-link-disabled');
+                    this.resendButton.style.pointerEvents = 'auto';
+                    this.resendButton.style.cursor = 'pointer';
+                    this.resendButton.style.opacity = '1';
+                }
             }
-        };
-        updateCooldown();
+        }, 1000);
     }
     /**
      * Set error message
@@ -2935,6 +3051,24 @@ export class OnboardingUIWeb {
                 else {
                     otpErrorElement.style.display = 'none';
                 }
+                // Ensure social buttons remain hidden when showing error on OTP screen
+                // Call immediately and also with delays to catch any re-renders
+                this.hideLoginElements();
+                setTimeout(() => {
+                    if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                        this.hideLoginElements();
+                    }
+                }, 0);
+                setTimeout(() => {
+                    if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                        this.hideLoginElements();
+                    }
+                }, 50);
+                setTimeout(() => {
+                    if (this.otpVerificationScreen && this.otpVerificationScreen.parentElement) {
+                        this.hideLoginElements();
+                    }
+                }, 150);
                 return;
             }
         }
@@ -3090,16 +3224,23 @@ export class OnboardingUIWeb {
      * Reset OTP screen and show initial login form
      */
     resetToLoginForm() {
+        // Clear resend cooldown timer
+        if (this.resendCooldownTimer) {
+            clearInterval(this.resendCooldownTimer);
+            this.resendCooldownTimer = null;
+        }
+        this.resendCooldown = 0;
         // Clear OTP verification screen
         if (this.otpVerificationScreen) {
             this.otpVerificationScreen.remove();
             this.otpVerificationScreen = null;
         }
-        // Remove loading/error mode classes
+        // Remove loading/error mode classes and OTP active class
         const card = this.rootElement?.querySelector('.onboarding-card');
         if (card) {
             card.classList.remove('onboarding-mode-loading');
             card.classList.remove('onboarding-mode-error');
+            card.classList.remove('onboarding-otp-active');
         }
         // Hide loading modal if exists (for inline components)
         this.hideLoadingModal();
@@ -3118,10 +3259,18 @@ export class OnboardingUIWeb {
         this.otpSent = false;
         this.loading = false;
         // Clear timer
+        // Clear resend cooldown timer
+        if (this.resendCooldownTimer) {
+            clearInterval(this.resendCooldownTimer);
+            this.resendCooldownTimer = null;
+        }
         this.resendCooldown = 0;
         if (this.resendButton) {
             this.resendButton.textContent = 'Resend';
-            this.resendButton.removeAttribute('disabled');
+            this.resendButton.classList.remove('onboarding-otp-resend-link-disabled');
+            this.resendButton.style.pointerEvents = 'auto';
+            this.resendButton.style.cursor = 'pointer';
+            this.resendButton.style.opacity = '1';
         }
         // Get auth methods
         const authMethods = this.config.authMethods || ['otp', 'google'];