@proveanything/smartlinks-auth-ui 0.3.10 → 0.3.12

package/dist/index.js

@@ -10869,7 +10869,7 @@ class AuthAPI {
         });
         // Exchange authorization code for tokens via backend
         // Use direct HTTP call since SDK may not have this method in authKit namespace yet
-        return http.post(`/api/v1/authkit/${this.clientId}/google-code`, {
+        return http.post(`/authkit/${this.clientId}/google-code`, {
             code,
             redirectUri,
         });
@@ -11550,21 +11550,48 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
             return null;
         }
     }, [collectionId, shouldSyncContacts, proxyMode, token, accountData, accountInfo, isVerified, notifyAuthStateChange]);
+    // Detect legacy vs new interactionConfig shape
+    const isLegacyConfig = interactionConfig && !('interactionId' in interactionConfig) && ('login' in interactionConfig || 'logout' in interactionConfig || 'signup' in interactionConfig);
+    if (isLegacyConfig) {
+        console.warn('[AuthContext] Deprecated: interactionConfig uses legacy per-event-type IDs. Migrate to { interactionId, scopes? } shape. Legacy support will be removed in a future release.');
+    }
     // Track interaction event (non-blocking)
-    // IMPORTANT: Only tracks if an explicit interaction ID is configured for the event type.
-    // Interaction IDs must be pre-created in SmartLinks - you cannot use arbitrary IDs.
+    // Uses scope-based architecture: single interactionId + scope field to differentiate events.
     const trackInteraction = React.useCallback(async (eventType, userId, currentContactId, metadata) => {
         if (!collectionId || !shouldTrackInteractions)
             return;
-        const interactionIdMap = {
-            login: interactionConfig?.login,
-            logout: interactionConfig?.logout,
-            signup: interactionConfig?.signup,
-            session_restore: interactionConfig?.sessionRestore,
-        };
-        const interactionId = interactionIdMap[eventType];
-        if (!interactionId)
+        let interactionId;
+        let scope;
+        if (isLegacyConfig) {
+            // Legacy: per-event-type IDs (deprecated)
+            const legacyConfig = interactionConfig;
+            const legacyMap = {
+                login: legacyConfig?.login,
+                logout: legacyConfig?.logout,
+                signup: legacyConfig?.signup,
+                session_restore: legacyConfig?.sessionRestore,
+            };
+            interactionId = legacyMap[eventType];
+            if (!interactionId)
+                return;
+        }
+        else if (interactionConfig && 'interactionId' in interactionConfig) {
+            // New: single ID + scope
+            interactionId = interactionConfig.interactionId;
+            if (!interactionId)
+                return;
+            const defaultScopes = {
+                login: 'login',
+                logout: 'logout',
+                signup: 'signup',
+                session_restore: 'session_restore',
+            };
+            const customScopes = interactionConfig.scopes || {};
+            scope = customScopes[eventType === 'session_restore' ? 'sessionRestore' : eventType] || defaultScopes[eventType];
+        }
+        else {
             return;
+        }
         try {
             await smartlinks__namespace.interactions.submitPublicEvent(collectionId, {
                 collectionId,
@@ -11572,7 +11599,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
                 userId,
                 contactId: currentContactId || undefined,
                 appId: interactionAppId,
-                eventType,
+                scope,
                 outcome: 'completed',
                 metadata: {
                     ...metadata,
@@ -11585,7 +11612,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
         catch (err) {
             // Non-blocking
         }
-    }, [collectionId, shouldTrackInteractions, interactionAppId, interactionConfig, user, token, accountData, accountInfo, isVerified, contact, contactId, notifyAuthStateChange]);
+    }, [collectionId, shouldTrackInteractions, interactionAppId, interactionConfig, isLegacyConfig, user, token, accountData, accountInfo, isVerified, contact, contactId, notifyAuthStateChange]);
     // Keep refs in sync with latest callbacks (avoids stale closures)
     React.useEffect(() => {
         syncContactRef.current = syncContact;
@@ -11633,32 +11660,42 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
         const initializeAuth = async () => {
             try {
                 if (proxyMode) {
-                    try {
-                        const accountResponse = await smartlinks__namespace.auth.getAccount();
-                        const accountAny = accountResponse;
-                        const hasValidSession = accountAny?.uid && accountAny.uid.length > 0;
-                        if (hasValidSession && isMounted) {
-                            const userFromAccount = {
-                                uid: accountAny.uid,
-                                email: accountAny?.email,
-                                displayName: accountAny?.displayName || accountAny?.name,
-                                phoneNumber: accountAny?.phoneNumber,
-                            };
-                            setUser(userFromAccount);
-                            setAccountData(accountResponse);
-                            setAccountInfo(accountResponse);
-                            setIsVerified(true);
-                            notifyAuthStateChange('LOGIN', userFromAccount, null, accountResponse, accountResponse, true);
-                            // Sync contact in background (proxy mode) - use ref for stable dependency
-                            syncContactRef.current?.(userFromAccount, accountResponse);
+                    // Check if credentials exist before making the API call
+                    const headers = http.getApiHeaders();
+                    const hasBearer = !!headers['Authorization'];
+                    const hasSdkProxy = http.isProxyEnabled();
+                    if (!hasBearer && !hasSdkProxy) {
+                        console.debug('[AuthContext] Skipping getAccount - no credentials available');
+                        // Fall through to "no valid session" state
+                    }
+                    else {
+                        try {
+                            const accountResponse = await smartlinks__namespace.auth.getAccount();
+                            const accountAny = accountResponse;
+                            const hasValidSession = accountAny?.uid && accountAny.uid.length > 0;
+                            if (hasValidSession && isMounted) {
+                                const userFromAccount = {
+                                    uid: accountAny.uid,
+                                    email: accountAny?.email,
+                                    displayName: accountAny?.displayName || accountAny?.name,
+                                    phoneNumber: accountAny?.phoneNumber,
+                                };
+                                setUser(userFromAccount);
+                                setAccountData(accountResponse);
+                                setAccountInfo(accountResponse);
+                                setIsVerified(true);
+                                notifyAuthStateChange('LOGIN', userFromAccount, null, accountResponse, accountResponse, true);
+                                // Sync contact in background (proxy mode) - use ref for stable dependency
+                                syncContactRef.current?.(userFromAccount, accountResponse);
+                            }
+                            else if (isMounted) {
+                                // No valid session, awaiting login
+                            }
                         }
-                        else if (isMounted) {
-                            // No valid session, awaiting login
+                        catch (error) {
+                            // auth.getAccount() failed, awaiting login
                         }
-                    }
-                    catch (error) {
-                        // auth.getAccount() failed, awaiting login
-                    }
+                    } // end else (has credentials)
                     if (isMounted) {
                         setIsLoading(false);
                         initializingRef.current = false;
@@ -11690,7 +11727,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
                             pendingVerificationRef.current = false;
                             notifyAuthStateChange('SESSION_VERIFIED', storedUser, storedToken.token, storedAccountData || null, null, true, null, storedContactId);
                             // Track session restore interaction (optional) - use ref for stable dependency
-                            if (interactionConfig?.sessionRestore) {
+                            if (interactionConfig && ('interactionId' in interactionConfig || interactionConfig?.sessionRestore)) {
                                 trackInteractionRef.current?.('session_restore', storedUser.uid, storedContactId);
                             }
                         }
@@ -11736,7 +11773,7 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
         return () => {
             isMounted = false;
         };
-    }, [proxyMode, notifyAuthStateChange, isNetworkError, interactionConfig?.sessionRestore]);
+    }, [proxyMode, notifyAuthStateChange, isNetworkError, interactionConfig]);
     // Listen for parent auth state changes (proxy mode only)
     React.useEffect(() => {
         if (!proxyMode)
@@ -12105,9 +12142,9 @@ collectionId, enableContactSync, enableInteractionTracking, interactionAppId, in
                 if (!storedToken?.expiresAt)
                     return;
                 const now = Date.now();
-                const tokenLifetime = storedToken.expiresAt - (storedToken.expiresAt - (7 * 24 * 60 * 60 * 1000));
-                const tokenAge = now - (storedToken.expiresAt - (7 * 24 * 60 * 60 * 1000));
-                const percentUsed = (tokenAge / tokenLifetime) * 100;
+                const remainingMs = storedToken.expiresAt - now;
+                const totalLifetimeMs = 7 * 24 * 60 * 60 * 1000;
+                const percentUsed = totalLifetimeMs > 0 ? ((totalLifetimeMs - remainingMs) / totalLifetimeMs) * 100 : 100;
                 if (percentUsed >= refreshThresholdPercent) {
                     try {
                         await refreshToken();
@@ -12303,6 +12340,25 @@ const getExpirationFromResponse = (response) => {
 };
 // Default Smartlinks Google OAuth Client ID (public - safe to expose)
 const DEFAULT_GOOGLE_CLIENT_ID = '696509063554-jdlbjl8vsjt7cr0vgkjkjf3ffnvi3a70.apps.googleusercontent.com';
+// Default Google OAuth proxy URL (hosted on our whitelisted domain)
+const DEFAULT_GOOGLE_PROXY_URL = 'https://smartlinks-auth-kit.lovable.app/google-proxy.html';
+// Exact hostnames where Google OAuth is registered and inline/OneTap flow works directly.
+// Only specific registered origins — NOT broad wildcards like *.lovable.app
+const WHITELISTED_GOOGLE_OAUTH_HOSTS = [
+    'smartlinks-auth-kit.lovable.app', // This app's dev/preview domain (registered in Google Console)
+    'smartlinks.app', // Production root
+    'localhost', // Local dev
+    '127.0.0.1', // Local dev
+];
+/**
+ * Check if the current domain is whitelisted for direct Google OAuth.
+ * Uses exact hostname match (plus subdomain match for smartlinks.app production).
+ * Returns true if OneTap/inline flow can work without a proxy.
+ */
+const isWhitelistedGoogleDomain = () => {
+    const hostname = window.location.hostname;
+    return WHITELISTED_GOOGLE_OAUTH_HOSTS.some(domain => hostname === domain || hostname.endsWith(`.${domain}`));
+};
 // Default auth UI configuration when no clientId is provided
 const DEFAULT_AUTH_CONFIG = {
     branding: {
@@ -13071,16 +13127,29 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         }
     };
     const handleGoogleLogin = async () => {
+        const hasCustomGoogleClientId = !!config?.googleClientId;
         const googleClientId = config?.googleClientId || DEFAULT_GOOGLE_CLIENT_ID;
         const configuredFlow = config?.googleOAuthFlow || 'oneTap';
         const isWebView = detectWebView();
         const nativeBridge = getNativeBridge();
         const oauthFlow = (configuredFlow === 'oneTap' && isWebView && !nativeBridge) ? 'redirect' : configuredFlow;
+        // Auto-detect proxy need:
+        // - If explicitly configured, use that URL
+        // - If user has their own Google Client ID, they've registered their domains — no proxy needed
+        // - If on a whitelisted SmartLinks domain, inline flow works directly
+        // - Otherwise, auto-use the default proxy URL
+        const isWhitelisted = isWhitelistedGoogleDomain();
+        const googleProxyUrl = config?.googleOAuthProxyUrl
+            || (!hasCustomGoogleClientId && !isWhitelisted ? DEFAULT_GOOGLE_PROXY_URL : undefined);
         log.log('Google Auth initiated:', {
             configuredFlow,
             effectiveFlow: oauthFlow,
             isWebView,
             hasNativeBridge: !!nativeBridge,
+            hasCustomGoogleClientId,
+            isWhitelistedDomain: isWhitelisted,
+            usingProxy: !!googleProxyUrl,
+            proxyUrl: googleProxyUrl,
         });
         setLoading(true);
         setError(undefined);
@@ -13155,6 +13224,70 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                 setLoading(false);
                 return;
             }
+            // Priority 3: Google OAuth Proxy popup (for custom domains not registered in Google Console)
+            if (googleProxyUrl) {
+                log.log('Using Google OAuth proxy popup:', googleProxyUrl);
+                const proxyParams = new URLSearchParams({
+                    clientId,
+                    returnOrigin: window.location.origin,
+                    ...(apiEndpoint ? { apiEndpoint } : {}),
+                });
+                const popupUrl = `${googleProxyUrl}?${proxyParams.toString()}`;
+                const popup = window.open(popupUrl, 'google-oauth-proxy', 'width=500,height=600,menubar=no,toolbar=no,location=yes');
+                if (!popup) {
+                    setError('Popup blocked. Please allow popups for this site and try again.');
+                    setLoading(false);
+                    return;
+                }
+                // Listen for result from proxy popup
+                const handleProxyMessage = async (event) => {
+                    // Validate origin matches proxy URL
+                    try {
+                        const proxyOrigin = new URL(googleProxyUrl).origin;
+                        if (event.origin !== proxyOrigin)
+                            return;
+                    }
+                    catch {
+                        return;
+                    }
+                    if (event.data?.type !== 'smartlinks:google-proxy:result')
+                        return;
+                    window.removeEventListener('message', handleProxyMessage);
+                    clearInterval(checkClosed);
+                    try {
+                        if (event.data.success && event.data.token) {
+                            const { token, user, accountData, isNewUser, expiresAt, expiresIn } = event.data;
+                            const expiration = expiresAt || (expiresIn ? Date.now() + expiresIn : undefined);
+                            await auth.login(token, user, accountData, isNewUser, expiration);
+                            setAuthSuccess(true);
+                            setSuccessMessage('Google login successful!');
+                            onAuthSuccess(token, user, accountData);
+                        }
+                        else {
+                            const errorMsg = event.data.error || 'Google login failed';
+                            setError(getFriendlyErrorMessage(errorMsg));
+                            onAuthError?.(new Error(errorMsg));
+                        }
+                    }
+                    catch (err) {
+                        setError(getFriendlyErrorMessage(err));
+                        onAuthError?.(err instanceof Error ? err : new Error(getFriendlyErrorMessage(err)));
+                    }
+                    finally {
+                        setLoading(false);
+                    }
+                };
+                window.addEventListener('message', handleProxyMessage);
+                // Monitor popup close without result (user closed it)
+                const checkClosed = setInterval(() => {
+                    if (popup.closed) {
+                        clearInterval(checkClosed);
+                        window.removeEventListener('message', handleProxyMessage);
+                        setLoading(false);
+                    }
+                }, 500);
+                return; // Don't set loading to false - waiting for popup
+            }
             log.log('Using web-based OAuth flow:', oauthFlow);
             // Priority 3: Web-based flows (redirect, popup, oneTap)
             // Dynamically load Google Identity Services if not already loaded
@@ -13388,7 +13521,6 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             if (resetToken && confirmPassword) {
                 // Complete password reset with token
                 await api.completePasswordReset(resetToken, emailOrPassword);
-                await api.completePasswordReset(resetToken, emailOrPassword);
                 // Auto-login with the new password if we have the email
                 if (resetEmail) {
                     try {
@@ -13713,6 +13845,12 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
     const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
     const { showProfileSection = true, showEmailSection = true, showPasswordSection = true, showPhoneSection = true, showDeleteAccount = false, showCustomFields = true, // New: show schema-driven custom fields
      } = customization;
+    // Provider awareness helpers
+    // If providers is undefined (backend not updated yet), fall back to showing everything
+    const providers = profile?.providers;
+    const hasPassword = profile?.hasPassword ?? (providers === undefined ? undefined : providers?.includes('password'));
+    const isGoogleOnly = providers !== undefined && providers.includes('google.com') && !providers.includes('password');
+    const isPhoneOnly = providers !== undefined && providers.includes('phone') && providers.length === 1;
     // Reinitialize Smartlinks SDK when apiEndpoint changes
     React.useEffect(() => {
         if (apiEndpoint) {
@@ -13730,13 +13868,11 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
         const loadSchema = async () => {
             setSchemaLoading(true);
             try {
-                console.log('[AccountManagement] Loading schema for collection:', collectionId);
                 const schemaResult = await smartlinks__namespace.contact.publicGetSchema(collectionId);
-                console.log('[AccountManagement] Schema loaded:', schemaResult);
                 setSchema(schemaResult);
             }
             catch (err) {
-                console.warn('[AccountManagement] Failed to load schema:', err);
+                // Non-fatal - component works without schema
                 // Non-fatal - component works without schema
             }
             finally {
@@ -13751,7 +13887,6 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
     // where getContact() is called before the server knows about the user.
     React.useEffect(() => {
         if (!auth.isAuthenticated || !auth.isVerified) {
-            console.log('[AccountManagement] Waiting for verified authentication before loading profile...');
             return;
         }
         loadProfile();
@@ -13852,7 +13987,7 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
         setError(undefined);
         setSuccess(undefined);
         try {
-            console.log('[AccountManagement] Updating custom fields:', customFieldValues);
+            await auth.updateContactCustomFields?.(customFieldValues);
             await auth.updateContactCustomFields?.(customFieldValues);
             setSuccess('Profile updated successfully!');
             setEditingSection(null);
@@ -13978,7 +14113,8 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
             setError('Please type DELETE to confirm account deletion');
             return;
         }
-        if (!deletePassword) {
+        // Only require password for users who have one
+        if (hasPassword !== false && !deletePassword) {
             setError('Password is required');
             return;
         }
@@ -14008,7 +14144,7 @@ const AccountManagement = ({ apiEndpoint, clientId, collectionId, onError, class
     }
     return (jsxRuntime.jsxs("div", { className: `account-management ${className}`, style: { maxWidth: '600px' }, children: [error && (jsxRuntime.jsx("div", { className: "auth-error", role: "alert", children: error })), success && (jsxRuntime.jsx("div", { className: "auth-success", role: "alert", children: success })), showProfileSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Display Name" }), jsxRuntime.jsx("div", { className: "field-value", children: profile?.displayName || 'Not set' })] }), editingSection !== 'profile' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('profile'), className: "auth-button button-secondary", children: "Change" }))] }), editingSection === 'profile' && (jsxRuntime.jsxs("form", { onSubmit: handleUpdateProfile, className: "edit-form", children: [jsxRuntime.jsx("div", { className: "form-group", children: jsxRuntime.jsx("input", { id: "displayName", type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: "Your display name", className: "auth-input" }) }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showCustomFields && collectionId && editableCustomFields.length > 0 && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsx("h3", { className: "section-title", style: { fontSize: '0.9rem', fontWeight: 600, marginBottom: '12px' }, children: "Additional Information" }), editingSection !== 'customFields' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [editableCustomFields.map((field) => (jsxRuntime.jsx("div", { className: "account-field", children: jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: field.label }), jsxRuntime.jsx("div", { className: "field-value", children: customFieldValues[field.key] !== undefined && customFieldValues[field.key] !== ''
                                                 ? String(customFieldValues[field.key])
-                                                : 'Not set' })] }) }, field.key))), jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('customFields'), className: "auth-button button-secondary", style: { marginTop: '8px' }, children: "Edit Information" })] })) : (jsxRuntime.jsxs("form", { onSubmit: handleUpdateCustomFields, className: "edit-form", children: [editableCustomFields.map((field) => (jsxRuntime.jsx(SchemaFieldRenderer, { field: field, value: customFieldValues[field.key], onChange: handleCustomFieldChange, disabled: loading }, field.key))), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showEmailSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Email Address" }), jsxRuntime.jsxs("div", { className: "field-value", children: [profile?.email || 'Not set', profile?.emailVerified && (jsxRuntime.jsx("span", { className: "verification-badge verified", children: "Verified" })), profile?.email && !profile?.emailVerified && (jsxRuntime.jsx("span", { className: "verification-badge unverified", children: "Unverified" }))] })] }), editingSection !== 'email' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('email'), className: "auth-button button-secondary", children: "Change Email" }))] }), editingSection === 'email' && (jsxRuntime.jsxs("form", { onSubmit: handleChangeEmail, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newEmail", children: "New Email" }), jsxRuntime.jsx("input", { id: "newEmail", type: "email", value: newEmail, onChange: (e) => setNewEmail(e.target.value), placeholder: "new.email@example.com", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "emailPassword", children: "Confirm Password" }), jsxRuntime.jsx("input", { id: "emailPassword", type: "password", value: emailPassword, onChange: (e) => setEmailPassword(e.target.value), placeholder: "Enter your password", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Email' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPasswordSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Password" }), jsxRuntime.jsx("div", { className: "field-value", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), editingSection !== 'password' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('password'), className: "auth-button button-secondary", children: "Change Password" }))] }), editingSection === 'password' && (jsxRuntime.jsxs("form", { onSubmit: handleChangePassword, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "currentPassword", children: "Current Password" }), jsxRuntime.jsx("input", { id: "currentPassword", type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), placeholder: "Enter current password", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newPassword", children: "New Password" }), jsxRuntime.jsx("input", { id: "newPassword", type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), placeholder: "Enter new password", className: "auth-input", required: true, minLength: 6 })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "confirmPassword", children: "Confirm New Password" }), jsxRuntime.jsx("input", { id: "confirmPassword", type: "password", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), placeholder: "Confirm new password", className: "auth-input", required: true, minLength: 6 })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Password' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPhoneSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Phone Number" }), jsxRuntime.jsx("div", { className: "field-value", children: profile?.phoneNumber || 'Not set' })] }), editingSection !== 'phone' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('phone'), className: "auth-button button-secondary", children: "Change Phone" }))] }), editingSection === 'phone' && (jsxRuntime.jsxs("form", { onSubmit: handleUpdatePhone, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newPhone", children: "New Phone Number" }), jsxRuntime.jsx("input", { id: "newPhone", type: "tel", value: newPhone, onChange: (e) => setNewPhone(e.target.value), placeholder: "+1234567890", className: "auth-input", required: true })] }), !phoneCodeSent ? (jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "button", onClick: handleSendPhoneCode, className: "auth-button", disabled: loading || !newPhone, children: loading ? 'Sending...' : 'Send Code' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "phoneCode", children: "Verification Code" }), jsxRuntime.jsx("input", { id: "phoneCode", type: "text", value: phoneCode, onChange: (e) => setPhoneCode(e.target.value), placeholder: "Enter 6-digit code", className: "auth-input", required: true, maxLength: 6 })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Verifying...' : 'Verify & Save' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] })), showDeleteAccount && (jsxRuntime.jsxs("section", { className: "account-section danger-zone", children: [jsxRuntime.jsx("h3", { className: "section-title text-danger", children: "Danger Zone" }), !showDeleteConfirm ? (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowDeleteConfirm(true), className: "auth-button button-danger", children: "Delete Account" })) : (jsxRuntime.jsxs("div", { className: "delete-confirm", children: [jsxRuntime.jsx("p", { className: "warning-text", children: "\u26A0\uFE0F This action cannot be undone. This will permanently delete your account and all associated data." }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "deletePassword", children: "Confirm Password" }), jsxRuntime.jsx("input", { id: "deletePassword", type: "password", value: deletePassword, onChange: (e) => setDeletePassword(e.target.value), placeholder: "Enter your password", className: "auth-input" })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "deleteConfirm", children: "Type DELETE to confirm" }), jsxRuntime.jsx("input", { id: "deleteConfirm", type: "text", value: deleteConfirmText, onChange: (e) => setDeleteConfirmText(e.target.value), placeholder: "DELETE", className: "auth-input" })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "button", onClick: handleDeleteAccount, className: "auth-button button-danger", disabled: loading, children: loading ? 'Deleting...' : 'Permanently Delete Account' }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                                : 'Not set' })] }) }, field.key))), jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('customFields'), className: "auth-button button-secondary", style: { marginTop: '8px' }, children: "Edit Information" })] })) : (jsxRuntime.jsxs("form", { onSubmit: handleUpdateCustomFields, className: "edit-form", children: [editableCustomFields.map((field) => (jsxRuntime.jsx(SchemaFieldRenderer, { field: field, value: customFieldValues[field.key], onChange: handleCustomFieldChange, disabled: loading }, field.key))), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Saving...' : 'Save' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showEmailSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Email Address" }), jsxRuntime.jsxs("div", { className: "field-value", children: [profile?.email || 'Not set', profile?.emailVerified && (jsxRuntime.jsx("span", { className: "verification-badge verified", children: "Verified" })), profile?.email && !profile?.emailVerified && (jsxRuntime.jsx("span", { className: "verification-badge unverified", children: "Unverified" }))] }), isGoogleOnly && (jsxRuntime.jsx("div", { className: "field-hint", style: { fontSize: '0.8rem', color: 'var(--color-muted-foreground, #888)', marginTop: '4px' }, children: "This email is managed by your Google account" }))] }), editingSection !== 'email' && !isGoogleOnly && !isPhoneOnly && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('email'), className: "auth-button button-secondary", children: "Change Email" }))] }), editingSection === 'email' && !isGoogleOnly && !isPhoneOnly && (jsxRuntime.jsxs("form", { onSubmit: handleChangeEmail, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newEmail", children: "New Email" }), jsxRuntime.jsx("input", { id: "newEmail", type: "email", value: newEmail, onChange: (e) => setNewEmail(e.target.value), placeholder: "new.email@example.com", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "emailPassword", children: "Confirm Password" }), jsxRuntime.jsx("input", { id: "emailPassword", type: "password", value: emailPassword, onChange: (e) => setEmailPassword(e.target.value), placeholder: "Enter your password", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Email' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPasswordSection && !isGoogleOnly && !isPhoneOnly && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Password" }), jsxRuntime.jsx("div", { className: "field-value", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), editingSection !== 'password' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('password'), className: "auth-button button-secondary", children: "Change Password" }))] }), editingSection === 'password' && (jsxRuntime.jsxs("form", { onSubmit: handleChangePassword, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "currentPassword", children: "Current Password" }), jsxRuntime.jsx("input", { id: "currentPassword", type: "password", value: currentPassword, onChange: (e) => setCurrentPassword(e.target.value), placeholder: "Enter current password", className: "auth-input", required: true })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newPassword", children: "New Password" }), jsxRuntime.jsx("input", { id: "newPassword", type: "password", value: newPassword, onChange: (e) => setNewPassword(e.target.value), placeholder: "Enter new password", className: "auth-input", required: true, minLength: 6 })] }), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "confirmPassword", children: "Confirm New Password" }), jsxRuntime.jsx("input", { id: "confirmPassword", type: "password", value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), placeholder: "Confirm new password", className: "auth-input", required: true, minLength: 6 })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Changing...' : 'Change Password' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] })), showPhoneSection && (jsxRuntime.jsxs("section", { className: "account-section", children: [jsxRuntime.jsxs("div", { className: "account-field", children: [jsxRuntime.jsxs("div", { className: "field-info", children: [jsxRuntime.jsx("label", { className: "field-label", children: "Phone Number" }), jsxRuntime.jsx("div", { className: "field-value", children: profile?.phoneNumber || 'Not set' })] }), editingSection !== 'phone' && (jsxRuntime.jsx("button", { type: "button", onClick: () => setEditingSection('phone'), className: "auth-button button-secondary", children: "Change Phone" }))] }), editingSection === 'phone' && (jsxRuntime.jsxs("form", { onSubmit: handleUpdatePhone, className: "edit-form", children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "newPhone", children: "New Phone Number" }), jsxRuntime.jsx("input", { id: "newPhone", type: "tel", value: newPhone, onChange: (e) => setNewPhone(e.target.value), placeholder: "+1234567890", className: "auth-input", required: true })] }), !phoneCodeSent ? (jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "button", onClick: handleSendPhoneCode, className: "auth-button", disabled: loading || !newPhone, children: loading ? 'Sending...' : 'Send Code' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "phoneCode", children: "Verification Code" }), jsxRuntime.jsx("input", { id: "phoneCode", type: "text", value: phoneCode, onChange: (e) => setPhoneCode(e.target.value), placeholder: "Enter 6-digit code", className: "auth-input", required: true, maxLength: 6 })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "submit", className: "auth-button", disabled: loading, children: loading ? 'Verifying...' : 'Verify & Save' }), jsxRuntime.jsx("button", { type: "button", onClick: cancelEdit, className: "auth-button button-secondary", children: "Cancel" })] })] }))] }))] })), showDeleteAccount && (jsxRuntime.jsxs("section", { className: "account-section danger-zone", children: [jsxRuntime.jsx("h3", { className: "section-title text-danger", children: "Danger Zone" }), !showDeleteConfirm ? (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowDeleteConfirm(true), className: "auth-button button-danger", children: "Delete Account" })) : (jsxRuntime.jsxs("div", { className: "delete-confirm", children: [jsxRuntime.jsx("p", { className: "warning-text", children: "\u26A0\uFE0F This action cannot be undone. This will permanently delete your account and all associated data." }), hasPassword !== false && (jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "deletePassword", children: "Confirm Password" }), jsxRuntime.jsx("input", { id: "deletePassword", type: "password", value: deletePassword, onChange: (e) => setDeletePassword(e.target.value), placeholder: "Enter your password", className: "auth-input" })] })), jsxRuntime.jsxs("div", { className: "form-group", children: [jsxRuntime.jsx("label", { htmlFor: "deleteConfirm", children: "Type DELETE to confirm" }), jsxRuntime.jsx("input", { id: "deleteConfirm", type: "text", value: deleteConfirmText, onChange: (e) => setDeleteConfirmText(e.target.value), placeholder: "DELETE", className: "auth-input" })] }), jsxRuntime.jsxs("div", { className: "button-group", children: [jsxRuntime.jsx("button", { type: "button", onClick: handleDeleteAccount, className: "auth-button button-danger", disabled: loading, children: loading ? 'Deleting...' : 'Permanently Delete Account' }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
                                             setShowDeleteConfirm(false);
                                             setDeletePassword('');
                                             setDeleteConfirmText('');