signer-test-sdk-react 0.0.11 → 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;
 }
 
@@ -905,7 +949,8 @@ const ONBOARDING_UI_STYLES = `
   font-size: 14px;
   font-weight: 500;
   margin-top: 12px;
-  display: inline-block;
+  display: block;
+  text-align: center;
   transition: color 0.15s ease;
 }
 
@@ -943,6 +988,7 @@ export class OnboardingUIWeb {
     emailInput = null;
     otpInput = null;
     otpInputs = [];
+    autoSubmitEnabled = true; // Flag to control auto-submit after failed attempts
     emailForm = null;
     continueButton = null;
     emailArrowButton = null;
@@ -970,6 +1016,7 @@ export class OnboardingUIWeb {
     loading = false;
     activeButton = null;
     resendCooldown = 0;
+    resendCooldownTimer = null;
     externalWalletsEnabled = false;
     constructor(config, externalWalletsEnabled = false) {
         this.externalWalletsEnabled = externalWalletsEnabled;
@@ -1019,16 +1066,40 @@ export class OnboardingUIWeb {
         const params = new URLSearchParams(window.location.search);
         const success = params.get('success');
         const error = params.get('error');
-        // If success=true, always show loading (less restrictive)
-        if (success === 'true') {
-            // Ensure modal is open if in modal mode
-            if (this.config.modal && this.modalOverlay) {
-                this.modalOverlay.classList.remove('onboarding-modal-closing');
-                this.modalOverlay.classList.add('onboarding-modal-open');
-                this.modalOverlay.style.display = 'flex';
-                document.body.style.overflow = 'hidden';
+        const accessToken = params.get('accessToken');
+        const provider = params.get('provider') || params.get('authProvider');
+        // Helper to extract provider from accessToken JWT
+        const getAuthProviderFromToken = (token) => {
+            try {
+                const base64Url = token.split('.')[1];
+                const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+                const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function (c) {
+                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+                }).join(''));
+                const payload = JSON.parse(jsonPayload);
+                return (payload.authProvider || payload.provider || '').toLowerCase();
             }
-            this.showLoadingScreen();
+            catch (e) {
+                return null;
+            }
+        };
+        // Detect OAuth callback: check for provider in URL or extract from accessToken
+        let detectedProvider = provider;
+        if (!detectedProvider && accessToken) {
+            detectedProvider = getAuthProviderFromToken(accessToken);
+        }
+        const isOAuthCallback = detectedProvider && (detectedProvider === 'google' || detectedProvider === 'discord' || detectedProvider === 'twitter' || detectedProvider === 'x');
+        const hasOAuthParams = isOAuthCallback || (success === 'true' && !!accessToken);
+        // If success=true and it's an OAuth callback (Google, Discord, Twitter), show loading modal with header and footer
+        if (success === 'true' && hasOAuthParams) {
+            // Show loading modal immediately - it creates its own overlay
+            // Use requestAnimationFrame + setTimeout to ensure DOM is ready
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    // Directly show loading modal - it will create its own overlay with header and footer
+                    this.showLoadingModal();
+                }, 100);
+            });
             return;
         }
         // Check login source to decide if we should handle this (for errors)
@@ -1187,6 +1258,7 @@ export class OnboardingUIWeb {
     }
     /**
      * Show loading screen as a modal overlay (for inline components)
+     * Public method to allow external access
      */
     showLoadingModal() {
         // Hide any other modals that might be showing (wallet selection, etc.)
@@ -1233,10 +1305,10 @@ export class OnboardingUIWeb {
           box-sizing: border-box;
         `,
             });
-            // Header with logo
+            // Header with logo and title
             const header = this.createElement('div', {
                 className: 'onboarding-header',
-                style: 'display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%;',
+                style: 'display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-bottom: 32px;',
             });
             const logoSection = this.createElement('div', { className: 'onboarding-logo-section' });
             if (this.config.logo) {
@@ -1250,6 +1322,22 @@ export class OnboardingUIWeb {
                 logoSection.appendChild(logoContainer);
             }
             header.appendChild(logoSection);
+            // Add title
+            const title = this.createElement('h1', {
+                className: 'onboarding-title',
+                textContent: this.config.onboardTitle || 'Sign in',
+                style: `
+          font-size: 24px;
+          font-weight: 600;
+          margin: 0;
+          color: ${this.config.theme === 'dark' ? '#ffffff' : '#111827'};
+          text-align: center;
+          margin-bottom: 0;
+          letter-spacing: -0.01em;
+          line-height: 1.4;
+        `,
+            });
+            header.appendChild(title);
             loadingCard.appendChild(header);
             // Spinner
             const spinnerColor = this.config.theme === 'dark' ? '#9ca3af' : '#111827';
@@ -1342,10 +1430,21 @@ export class OnboardingUIWeb {
             document.body.appendChild(loadingModalOverlay);
         }
         else {
+            // Ensure modal is visible
             loadingModalOverlay.style.display = 'flex';
+            loadingModalOverlay.style.visibility = 'visible';
+            loadingModalOverlay.style.opacity = '1';
+            loadingModalOverlay.style.zIndex = '9999999';
         }
         // Prevent body scroll
         document.body.style.overflow = 'hidden';
+        // Force visibility (defensive check)
+        if (loadingModalOverlay) {
+            loadingModalOverlay.style.display = 'flex';
+            loadingModalOverlay.style.visibility = 'visible';
+            loadingModalOverlay.style.opacity = '1';
+            loadingModalOverlay.style.zIndex = '9999999';
+        }
     }
     /**
      * Hide loading modal overlay
@@ -1354,6 +1453,8 @@ export class OnboardingUIWeb {
         const loadingModalOverlay = document.getElementById('onboarding-loading-modal-overlay');
         if (loadingModalOverlay) {
             loadingModalOverlay.style.display = 'none';
+            loadingModalOverlay.style.visibility = 'hidden';
+            loadingModalOverlay.style.opacity = '0';
             document.body.style.overflow = '';
         }
     }
@@ -2422,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';
         }
@@ -2470,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();
     }
@@ -2488,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',
@@ -2573,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) {
@@ -2631,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();
@@ -2672,12 +2804,23 @@ export class OnboardingUIWeb {
             if (index < 5 && this.otpInputs[index + 1]) {
                 this.otpInputs[index + 1].focus();
             }
-            // Don't auto-verify, wait for user to click Verify button
+            // Re-enable auto-submit when user starts typing (clears previous error state)
+            if (!this.autoSubmitEnabled) {
+                this.autoSubmitEnabled = true;
+                this.setError(null); // Clear any previous error
+            }
         }
         else {
             input.value = '';
         }
         this.updateOtpValue();
+        // Auto-submit when 6 digits are entered (only if auto-submit is enabled)
+        if (this.otp.length === 6 && this.autoSubmitEnabled && !this.loading) {
+            // Small delay to ensure the last digit is properly set
+            setTimeout(() => {
+                this.handleOtpVerify();
+            }, 100);
+        }
     }
     /**
      * Handle OTP keydown - backspace to go to previous field
@@ -2706,7 +2849,13 @@ export class OnboardingUIWeb {
             this.otpInputs[lastFilledIndex].focus();
         }
         this.updateOtpValue();
-        // Don't auto-verify, wait for user to click Verify button
+        // Auto-submit when 6 digits are pasted (only if auto-submit is enabled)
+        if (this.otp.length === 6 && this.autoSubmitEnabled && !this.loading) {
+            // Small delay to ensure all digits are properly set
+            setTimeout(() => {
+                this.handleOtpVerify();
+            }, 100);
+        }
     }
     /**
      * Update OTP value from input fields
@@ -2736,7 +2885,9 @@ export class OnboardingUIWeb {
                     this.config.onLoginSuccess?.(result);
                 }
                 else {
-                    throw new Error(result.error || 'Invalid verification code');
+                    // Use the error message from the API response, fallback to generic message only if not provided
+                    const errorMessage = result.error || 'Invalid verification code';
+                    throw new Error(errorMessage);
                 }
             }
             else if (this.config.emailOtpEndpoint) {
@@ -2752,7 +2903,9 @@ export class OnboardingUIWeb {
                     this.config.onLoginSuccess?.({ token: data.token });
                 }
                 else {
-                    throw new Error(data.message || 'Invalid verification code');
+                    // Use the error message from the API response, fallback to generic message only if not provided
+                    const errorMessage = data.message || data.error || 'Invalid verification code';
+                    throw new Error(errorMessage);
                 }
             }
         }
@@ -2760,6 +2913,26 @@ export class OnboardingUIWeb {
             const errorMessage = err instanceof Error ? err.message : 'An error occurred';
             this.setError(errorMessage);
             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 = '';
@@ -2781,6 +2954,8 @@ export class OnboardingUIWeb {
         if (this.resendCooldown > 0) {
             return;
         }
+        // Re-enable auto-submit when resending OTP
+        this.autoSubmitEnabled = true;
         this.setError(null);
         this.setLoading(true, 'email');
         try {
@@ -2824,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
@@ -2854,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;
             }
         }
@@ -3009,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();
@@ -3037,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'];