@seaverse/auth-sdk 0.4.5 → 0.4.7

package/README.md

@@ -1817,7 +1817,13 @@ MIT © [SeaVerse Team](mailto:support@seaverse.com)
 
 ## Changelog
 
-### v0.4.4 (Current Version)
+### v0.4.6 (Current Version)
+- 🐛 **Bug Fix**: Fix OAuth buttons not responding in email login view
+  - Fixed HTML element ID conflict between new style and old style login views
+  - Old style login view OAuth buttons now have unique IDs with 'old' prefix
+  - Properly bind click events to all OAuth buttons in both views
+
+### v0.4.4
 - 🎨 **Login UI Redesign**: Dual-view login system with progressive disclosure
   - **New Style View (Default)**: Modern OAuth-first interface with brand color #00E599
     - Google as primary button, GitHub/Discord as secondary options

package/dist/index.cjs

@@ -2969,11 +2969,11 @@ class AuthModal {
             const socialGrid = document.createElement('div');
             socialGrid.className = 'social-buttons-grid';
             if (this.options.enableOAuth?.google) {
-                const googleBtn = this.createSocialButton('google', 'Google', 'login');
+                const googleBtn = this.createSocialButton('google', 'Google', 'login', false, 'old');
                 socialGrid.appendChild(googleBtn);
             }
             if (this.options.enableOAuth?.github) {
-                const githubBtn = this.createSocialButton('github', 'Github', 'login');
+                const githubBtn = this.createSocialButton('github', 'Github', 'login', false, 'old');
                 socialGrid.appendChild(githubBtn);
             }
             if (socialGrid.children.length > 0) {
@@ -2981,7 +2981,7 @@ class AuthModal {
             }
             // Discord button (full width)
             if (this.options.enableOAuth?.discord) {
-                const discordBtn = this.createSocialButton('discord', 'Discord', 'login', true);
+                const discordBtn = this.createSocialButton('discord', 'Discord', 'login', true, 'old');
                 form.appendChild(discordBtn);
             }
         }
@@ -3446,11 +3446,11 @@ class AuthModal {
         wrapper.appendChild(toggleBtn);
         return wrapper;
     }
-    createSocialButton(provider, label, mode, fullWidth = false) {
+    createSocialButton(provider, label, mode, fullWidth = false, idPrefix = '') {
         const button = document.createElement('button');
         button.type = 'button';
         button.className = fullWidth ? 'btn-social btn-social-full' : 'btn-social';
-        button.id = `${provider}${mode === 'login' ? 'SignIn' : 'SignUp'}Modal`;
+        button.id = `${idPrefix}${provider}${mode === 'login' ? 'SignIn' : 'SignUp'}Modal`;
         // SVG icons for each provider
         const icons = {
             google: `<svg width="20" height="20" viewBox="0 0 24 24">
@@ -3738,7 +3738,7 @@ class AuthModal {
     bindSocialLoginButtons() {
         if (!this.modal)
             return;
-        // Google login buttons
+        // New style login view - Google login buttons
         const googleSignInBtn = this.modal.querySelector('#googleSignInModal');
         googleSignInBtn?.addEventListener('click', (e) => {
             e.preventDefault();
@@ -3749,7 +3749,7 @@ class AuthModal {
             e.preventDefault();
             this.startOAuthFlow('google');
         });
-        // Discord login buttons
+        // New style login view - Discord login buttons
         const discordSignInBtn = this.modal.querySelector('#discordSignInModal');
         discordSignInBtn?.addEventListener('click', (e) => {
             e.preventDefault();
@@ -3760,7 +3760,7 @@ class AuthModal {
             e.preventDefault();
             this.startOAuthFlow('discord');
         });
-        // GitHub login buttons
+        // New style login view - GitHub login buttons
         const githubSignInBtn = this.modal.querySelector('#githubSignInModal');
         githubSignInBtn?.addEventListener('click', (e) => {
             e.preventDefault();
@@ -3771,6 +3771,24 @@ class AuthModal {
             e.preventDefault();
             this.startOAuthFlow('github');
         });
+        // Old style login view - Google login button
+        const oldGoogleSignInBtn = this.modal.querySelector('#oldgoogleSignInModal');
+        oldGoogleSignInBtn?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.startOAuthFlow('google');
+        });
+        // Old style login view - Discord login button
+        const oldDiscordSignInBtn = this.modal.querySelector('#olddiscordSignInModal');
+        oldDiscordSignInBtn?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.startOAuthFlow('discord');
+        });
+        // Old style login view - GitHub login button
+        const oldGithubSignInBtn = this.modal.querySelector('#oldgithubSignInModal');
+        oldGithubSignInBtn?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.startOAuthFlow('github');
+        });
     }
     switchView(view) {
         if (!this.modal)
@@ -4324,11 +4342,373 @@ function createAuthModal(options) {
     return new AuthModal(options);
 }
 
+/**
+ * Google One-Tap Sign-In SDK
+ *
+ * 用于在用户未登录 SeaVerse 但已登录 Google 的情况下，
+ * 自动显示 Google One-Tap 快速登录界面
+ */
+/**
+ * Google One-Tap 快速登录
+ *
+ * 用法示例：
+ * ```typescript
+ * const googleLogin = new GoogleOneTap({
+ *   clientId: 'YOUR_GOOGLE_CLIENT_ID',
+ *   isLoggedIn: () => !!localStorage.getItem('token'),
+ *   onCredentialReceived: async (credential) => {
+ *     // 调用后端验证
+ *     const res = await fetch('/api/auth/google', {
+ *       method: 'POST',
+ *       body: JSON.stringify({ credential })
+ *     });
+ *     const data = await res.json();
+ *     localStorage.setItem('token', data.token);
+ *     window.location.reload();
+ *   }
+ * });
+ * ```
+ */
+class GoogleOneTap {
+    constructor(options) {
+        this.isInitialized = false;
+        this.scriptLoaded = false;
+        this.options = options;
+        this.log('GoogleOneTap initialized with options:', options);
+        // 立即检查登录状态并初始化
+        this.checkAndInit();
+    }
+    /**
+     * 检查登录状态并初始化
+     */
+    checkAndInit() {
+        // 检查用户是否已登录 SeaVerse
+        if (this.options.isLoggedIn()) {
+            this.log('User already logged in, skipping Google One-Tap initialization');
+            return;
+        }
+        this.log('User not logged in, initializing Google One-Tap');
+        // 未登录，加载并初始化 Google One-Tap
+        this.loadGoogleScript()
+            .then(() => {
+            this.init();
+        })
+            .catch((error) => {
+            this.handleError(new Error(`Failed to load Google One-Tap script: ${error.message}`));
+        });
+    }
+    /**
+     * 初始化 Google One-Tap API
+     */
+    init() {
+        if (!window.google?.accounts?.id) {
+            this.handleError(new Error('Google One-Tap API not available'));
+            return;
+        }
+        try {
+            // 初始化 Google One-Tap
+            window.google.accounts.id.initialize({
+                client_id: this.options.clientId,
+                callback: (response) => {
+                    this.handleCredentialResponse(response);
+                },
+                auto_select: false,
+                cancel_on_tap_outside: this.options.cancelOnTapOutside ?? true,
+                context: this.options.context || 'signin',
+                use_fedcm_for_prompt: this.options.useFedcmForPrompt ?? false
+            });
+            this.isInitialized = true;
+            this.log('Google One-Tap initialized successfully');
+            // 如果启用自动提示，显示 One-Tap
+            if (this.options.autoPrompt !== false) {
+                this.prompt();
+            }
+        }
+        catch (error) {
+            this.handleError(new Error(`Failed to initialize Google One-Tap: ${error.message}`));
+        }
+    }
+    /**
+     * 处理 Google 返回的 credential
+     */
+    async handleCredentialResponse(response) {
+        this.log('Received credential from Google', {
+            select_by: response.select_by,
+            credential_length: response.credential?.length
+        });
+        // 验证 credential 是否存在
+        if (!response.credential) {
+            const error = new Error('No credential received from Google');
+            this.log('Error: No credential in response', response);
+            this.handleError(error);
+            return;
+        }
+        try {
+            await this.options.onCredentialReceived(response.credential);
+            this.log('Credential processed successfully');
+        }
+        catch (error) {
+            this.log('Error processing credential:', error);
+            this.handleError(error);
+        }
+    }
+    /**
+     * 显示 Google One-Tap 提示
+     * 会先检查登录状态
+     */
+    prompt() {
+        // 再次检查登录状态（可能在初始化后用户已登录）
+        if (this.options.isLoggedIn()) {
+            this.log('User already logged in, skipping prompt');
+            return;
+        }
+        if (!this.isInitialized) {
+            this.log('Google One-Tap not initialized yet, skipping prompt');
+            return;
+        }
+        if (!window.google?.accounts?.id) {
+            this.handleError(new Error('Google One-Tap API not available'));
+            return;
+        }
+        try {
+            this.log('Displaying Google One-Tap prompt');
+            window.google.accounts.id.prompt((notification) => {
+                if (notification.isNotDisplayed()) {
+                    const reason = notification.getNotDisplayedReason();
+                    this.log('One-Tap not displayed:', reason);
+                }
+                else if (notification.isSkippedMoment()) {
+                    const reason = notification.getSkippedReason();
+                    this.log('One-Tap skipped:', reason);
+                }
+                else if (notification.isDismissedMoment()) {
+                    const reason = notification.getDismissedReason();
+                    this.log('One-Tap dismissed:', reason);
+                }
+                else if (notification.isDisplayed()) {
+                    this.log('One-Tap displayed successfully');
+                }
+            });
+        }
+        catch (error) {
+            this.handleError(new Error(`Failed to show Google One-Tap: ${error.message}`));
+        }
+    }
+    /**
+     * 取消 Google One-Tap 提示
+     */
+    cancel() {
+        if (!this.isInitialized) {
+            this.log('Google One-Tap not initialized, nothing to cancel');
+            return;
+        }
+        if (!window.google?.accounts?.id) {
+            return;
+        }
+        try {
+            window.google.accounts.id.cancel();
+            this.log('Google One-Tap canceled');
+        }
+        catch (error) {
+            this.log('Error canceling Google One-Tap:', error);
+        }
+    }
+    /**
+     * 渲染 Google 登录按钮到指定元素
+     *
+     * @param element - 要渲染按钮的 HTML 元素
+     *
+     * @example
+     * const container = document.getElementById('google-btn');
+     * googleLogin.renderButton(container);
+     */
+    renderButton(element) {
+        // 检查登录状态
+        if (this.options.isLoggedIn()) {
+            this.log('User already logged in, not rendering button');
+            return;
+        }
+        if (!this.isInitialized) {
+            this.log('Google One-Tap not initialized yet, waiting...');
+            // 等待初始化完成后再渲染
+            setTimeout(() => this.renderButton(element), 100);
+            return;
+        }
+        if (!window.google?.accounts?.id) {
+            this.handleError(new Error('Google One-Tap API not available'));
+            return;
+        }
+        try {
+            const buttonConfig = {
+                type: this.options.button?.type || 'standard',
+                theme: this.options.button?.theme || 'outline',
+                size: this.options.button?.size || 'large',
+                text: this.options.button?.text || 'signin_with',
+                shape: this.options.button?.shape || 'rectangular',
+                logo_alignment: this.options.button?.logoAlignment || 'left',
+                width: this.options.button?.width,
+                locale: this.options.button?.locale
+            };
+            window.google.accounts.id.renderButton(element, buttonConfig);
+            this.log('Google login button rendered', buttonConfig);
+        }
+        catch (error) {
+            this.handleError(new Error(`Failed to render Google button: ${error.message}`));
+        }
+    }
+    /**
+     * 禁用自动选择
+     * 用户关闭 One-Tap 后，下次不会自动选择账号
+     */
+    disableAutoSelect() {
+        if (!window.google?.accounts?.id) {
+            return;
+        }
+        try {
+            window.google.accounts.id.disableAutoSelect();
+            this.log('Auto select disabled');
+        }
+        catch (error) {
+            this.log('Error disabling auto select:', error);
+        }
+    }
+    /**
+     * 等待 Google API 完全就绪
+     */
+    waitForGoogleAPI(maxAttempts = 50, interval = 100) {
+        return new Promise((resolve, reject) => {
+            let attempts = 0;
+            const checkAPI = () => {
+                if (window.google?.accounts?.id) {
+                    resolve();
+                    return;
+                }
+                attempts++;
+                if (attempts >= maxAttempts) {
+                    reject(new Error('Google One-Tap API not available after timeout'));
+                    return;
+                }
+                setTimeout(checkAPI, interval);
+            };
+            checkAPI();
+        });
+    }
+    /**
+     * 加载 Google One-Tap 脚本
+     */
+    loadGoogleScript() {
+        // 如果已经有加载中的 Promise，直接返回
+        if (GoogleOneTap.scriptLoadPromise) {
+            return GoogleOneTap.scriptLoadPromise;
+        }
+        // 如果脚本已加载完成且 API 可用，创建已 resolve 的 Promise
+        if (this.scriptLoaded && window.google?.accounts?.id) {
+            return Promise.resolve();
+        }
+        // 检查脚本标签是否已存在
+        const existingScript = document.getElementById('google-one-tap-script');
+        if (existingScript) {
+            // 如果脚本标签存在，等待其加载完成
+            GoogleOneTap.scriptLoadPromise = new Promise((resolve, reject) => {
+                if (window.google?.accounts?.id) {
+                    this.scriptLoaded = true;
+                    resolve();
+                    return;
+                }
+                // 等待脚本加载
+                const onLoad = () => {
+                    // 等待 Google API 就绪
+                    this.waitForGoogleAPI()
+                        .then(() => {
+                        this.scriptLoaded = true;
+                        resolve();
+                    })
+                        .catch(reject);
+                };
+                // 检查脚本是否已经加载完成（通过检查 API 是否可用）
+                // 如果 API 已经可用，直接调用 onLoad
+                if (window.google?.accounts?.id) {
+                    onLoad();
+                }
+                else {
+                    // 否则等待脚本加载事件
+                    existingScript.addEventListener('load', onLoad);
+                    existingScript.addEventListener('error', () => {
+                        GoogleOneTap.scriptLoadPromise = null;
+                        reject(new Error('Failed to load Google One-Tap script'));
+                    });
+                }
+            });
+            return GoogleOneTap.scriptLoadPromise;
+        }
+        // 创建新的脚本加载 Promise
+        GoogleOneTap.scriptLoadPromise = new Promise((resolve, reject) => {
+            this.log('Loading Google One-Tap script');
+            const script = document.createElement('script');
+            script.id = 'google-one-tap-script';
+            script.src = 'https://accounts.google.com/gsi/client';
+            script.async = true;
+            script.defer = true;
+            script.onload = () => {
+                this.log('Google One-Tap script loaded successfully');
+                // 等待 Google API 完全就绪
+                this.waitForGoogleAPI()
+                    .then(() => {
+                    this.scriptLoaded = true;
+                    resolve();
+                })
+                    .catch((error) => {
+                    GoogleOneTap.scriptLoadPromise = null;
+                    reject(error);
+                });
+            };
+            script.onerror = (error) => {
+                this.log('Failed to load Google One-Tap script:', error);
+                GoogleOneTap.scriptLoadPromise = null;
+                reject(new Error('Failed to load Google One-Tap script'));
+            };
+            document.head.appendChild(script);
+        });
+        return GoogleOneTap.scriptLoadPromise;
+    }
+    /**
+     * 处理错误
+     */
+    handleError(error) {
+        this.log('Error:', error);
+        if (this.options.onError) {
+            try {
+                this.options.onError(error);
+            }
+            catch (callbackError) {
+                console.error('[GoogleOneTap] Error in onError callback:', callbackError);
+            }
+        }
+    }
+    /**
+     * 调试日志
+     */
+    log(message, ...args) {
+        if (this.options.debug) {
+            console.log(`[GoogleOneTap] ${message}`, ...args);
+        }
+    }
+    /**
+     * 检查 Google One-Tap 是否可用
+     */
+    static isAvailable() {
+        return typeof window !== 'undefined' && 'google' in window;
+    }
+}
+// 静态 Promise，用于避免多个实例重复加载脚本
+GoogleOneTap.scriptLoadPromise = null;
+
 exports.AuthFactory = AuthFactory;
 exports.AuthModal = AuthModal;
 exports.AuthProvider = AuthProvider;
 exports.BuiltInHooks = BuiltInHooks;
 exports.ENVIRONMENT_CONFIGS = ENVIRONMENT_CONFIGS;
+exports.GoogleOneTap = GoogleOneTap;
 exports.SeaVerseBackendAPIClient = SeaVerseBackendAPIClient;
 exports.Toast = Toast;
 exports.createAuthModal = createAuthModal;