@seaverse/auth-sdk 0.2.3 → 0.2.4

package/README.md

@@ -94,6 +94,7 @@ const registerResult = await client.register({
   password: 'SecurePassword123',
   username: 'johndoe',              // 可选，未提供则从邮箱自动生成
   invitation_code: 'INVITE123',     // 可选
+  frontend_url: 'https://mygame.com/verify',  // 可选，邮箱验证链接的前端URL，默认为 window.location.origin
 });
 
 // 检查注册结果
@@ -125,6 +126,7 @@ await client.logout();
 // 忘记密码
 await client.forgotPassword({
   email: 'user@example.com',
+  frontend_url: 'https://mygame.com/',  // 可选，默认为 window.location.origin
 });
 
 // 重置密码
@@ -270,6 +272,34 @@ authModal.hide();
 authModal.destroy();
 ```
 
+#### 重置密码流程
+
+AuthModal 支持完整的密码重置流程：
+
+1. **用户触发忘记密码**：在登录界面点击 "Forgot Password?" 链接
+2. **发送重置邮件**：输入邮箱后，系统发送带有 `verify_token` 的重置链接
+3. **自动唤起重置弹窗**：用户点击邮件中的链接返回网站时，AuthModal 会自动检测 URL 中的 `verify_token` 参数并显示重置密码表单
+4. **设置新密码**：用户输入并确认新密码后提交
+5. **自动清理 URL**：重置成功后自动清除 URL 中的 `verify_token` 参数
+
+整个流程无需额外代码，AuthModal 会自动处理：
+
+```typescript
+// 1. 初始化 AuthModal（只需一次）
+const authModal = new AuthModal({
+  client,
+  // ... 其他配置
+});
+
+// 2. 用户点击邮件中的重置链接后，AuthModal 会自动：
+//    - 检测 URL 中的 ?verify_token=xxx 参数
+//    - 显示重置密码表单
+//    - 用户提交新密码
+//    - 调用 client.resetPassword() API
+//    - 清理 URL 中的 verify_token 参数
+//    - 显示成功消息
+```
+
 #### OAuth 配置说明
 
 `enableOAuth` 参数是**完全可选的**：
@@ -519,11 +549,11 @@ SDK支持以下环境：
 
 | 方法 | 参数 | 返回值 | 说明 |
 |------|------|--------|------|
-| `register()` | `{ email, password, username?, invitation_code? }` | `RegisterResponse` | 注册新用户 |
+| `register()` | `{ email, password, username?, invitation_code?, frontend_url? }` | `RegisterResponse` | 注册新用户，frontend_url 为邮箱验证链接的前端URL，默认为 window.location.origin |
 | `login()` | `{ email, password }` | `LoginResponse` | 用户登录 |
 | `getCurrentUser()` | - | `User` | 获取当前用户 |
 | `logout()` | - | `SuccessResponse` | 登出 |
-| `forgotPassword()` | `{ email }` | `SuccessResponse` | 忘记密码 |
+| `forgotPassword()` | `{ email, frontend_url? }` | `SuccessResponse` | 忘记密码，frontend_url 默认为 window.location.origin |
 | `resetPassword()` | `{ token, new_password }` | `SuccessResponse` | 重置密码 |
 | `setToken()` | `token: string` | `void` | 设置认证 token（OAuth 登录后使用） |
 | `getApiServiceToken()` | - | `ApiServiceTokenResponse` | 获取API Token |

package/dist/index.cjs

@@ -1304,10 +1304,12 @@ class SeaVerseBackendAPIClient {
      * Register a new user with email verification
      */
     async register(data, options) {
+        // 如果没有传 frontend_url，使用当前页面地址
+        const frontend_url = data.frontend_url || (typeof window !== 'undefined' ? window.location.origin : '');
         const config = {
             method: 'POST',
             url: `/sdk/v1/auth/register`,
-            data,
+            data: { ...data, frontend_url },
             headers: {
                 'X-Operation-Id': 'register',
                 ...options?.headers,
@@ -1374,10 +1376,12 @@ class SeaVerseBackendAPIClient {
      * Send password reset email
      */
     async forgotPassword(data, options) {
+        // 如果没有传 frontend_url，使用当前页面地址
+        const frontend_url = data.frontend_url || (typeof window !== 'undefined' ? window.location.origin : '');
         const config = {
             method: 'POST',
             url: `/sdk/v1/auth/forgot-password`,
-            data,
+            data: { ...data, frontend_url },
             headers: {
                 'X-Operation-Id': 'forgotPassword',
                 ...options?.headers,
@@ -1814,8 +1818,11 @@ class AuthModal {
     constructor(options) {
         this.modal = null;
         this.currentView = 'login';
+        this.resetToken = null;
         this.client = options.client;
         this.options = options;
+        // Auto-detect reset token in URL
+        this.checkForResetToken();
     }
     /**
      * Show the authentication modal
@@ -1923,6 +1930,9 @@ class AuthModal {
         // Forgot password form
         const forgotForm = this.createForgotPasswordForm();
         rightPanel.appendChild(forgotForm);
+        // Reset password form
+        const resetForm = this.createResetPasswordForm();
+        rightPanel.appendChild(resetForm);
         // Success message
         const successMessage = this.createSuccessMessage();
         rightPanel.appendChild(successMessage);
@@ -2176,6 +2186,86 @@ class AuthModal {
         container.appendChild(footer);
         return container;
     }
+    createResetPasswordForm() {
+        const container = document.createElement('div');
+        container.id = 'resetPasswordForm';
+        container.className = 'auth-form-view hidden';
+        // Icon
+        const icon = document.createElement('div');
+        icon.className = 'forgot-password-icon';
+        const iconContent = '<div class="icon-glow"></div><svg class="icon-lock" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path class="lock-shackle" d="M7 11V7a5 5 0 0 1 10 0v4"/><circle class="lock-keyhole" cx="12" cy="16" r="1.5"/></svg>';
+        icon.innerHTML = iconContent;
+        container.appendChild(icon);
+        // Header
+        const header = document.createElement('div');
+        header.className = 'auth-form-header';
+        const title = document.createElement('h2');
+        title.className = 'auth-form-title';
+        title.textContent = 'Set New Password';
+        const subtitle = document.createElement('p');
+        subtitle.className = 'auth-form-subtitle';
+        subtitle.textContent = 'Enter your new password below';
+        header.appendChild(title);
+        header.appendChild(subtitle);
+        container.appendChild(header);
+        // Form
+        const form = document.createElement('form');
+        form.id = 'resetPasswordFormElement';
+        form.className = 'auth-form';
+        // New password field
+        const passwordGroup = document.createElement('div');
+        passwordGroup.className = 'form-group';
+        const passwordLabel = document.createElement('label');
+        passwordLabel.htmlFor = 'newPassword';
+        passwordLabel.className = 'form-label';
+        passwordLabel.textContent = 'New Password';
+        passwordGroup.appendChild(passwordLabel);
+        const passwordInputWrapper = this.createPasswordInput('newPassword', 'Enter new password');
+        passwordGroup.appendChild(passwordInputWrapper);
+        const strengthText = document.createElement('p');
+        strengthText.className = 'strength-text';
+        strengthText.textContent = 'Use 8+ characters with mix of letters, numbers & symbols';
+        passwordGroup.appendChild(strengthText);
+        form.appendChild(passwordGroup);
+        // Confirm password field
+        const confirmGroup = document.createElement('div');
+        confirmGroup.className = 'form-group';
+        const confirmLabel = document.createElement('label');
+        confirmLabel.htmlFor = 'newPasswordConfirm';
+        confirmLabel.className = 'form-label';
+        confirmLabel.textContent = 'Confirm New Password';
+        confirmGroup.appendChild(confirmLabel);
+        const confirmInputWrapper = this.createPasswordInput('newPasswordConfirm', 'Confirm new password');
+        confirmGroup.appendChild(confirmInputWrapper);
+        form.appendChild(confirmGroup);
+        const submitBtn = document.createElement('button');
+        submitBtn.type = 'submit';
+        submitBtn.id = 'resetPasswordButton';
+        submitBtn.className = 'btn-auth-primary btn-forgot-password';
+        const btnText = document.createElement('span');
+        btnText.className = 'btn-text';
+        btnText.textContent = 'Reset Password';
+        const btnLoader = document.createElement('span');
+        btnLoader.className = 'btn-loader hidden';
+        const spinnerSVG = '<svg class="spinner" viewBox="0 0 24 24"><circle class="spinner-track" cx="12" cy="12" r="10"></circle><circle class="spinner-circle" cx="12" cy="12" r="10"></circle></svg>';
+        btnLoader.innerHTML = spinnerSVG;
+        submitBtn.appendChild(btnText);
+        submitBtn.appendChild(btnLoader);
+        form.appendChild(submitBtn);
+        container.appendChild(form);
+        // Footer
+        const footer = document.createElement('div');
+        footer.className = 'auth-footer forgot-footer';
+        const backLink = document.createElement('a');
+        backLink.href = '#';
+        backLink.id = 'backToLoginFromReset';
+        backLink.className = 'back-to-login';
+        const backLinkHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg><span>Back to Sign In</span>';
+        backLink.innerHTML = backLinkHTML;
+        footer.appendChild(backLink);
+        container.appendChild(footer);
+        return container;
+    }
     createSuccessMessage() {
         const container = document.createElement('div');
         container.id = 'authMessage';
@@ -2265,6 +2355,20 @@ class AuthModal {
         button.appendChild(span);
         return button;
     }
+    /**
+     * Check if URL contains reset token and auto-show reset password form
+     */
+    checkForResetToken() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const verifyToken = urlParams.get('verify_token');
+        if (verifyToken) {
+            this.resetToken = verifyToken;
+            // Auto-show modal with reset password form
+            setTimeout(() => {
+                this.show('reset-password');
+            }, 100);
+        }
+    }
     bindEventListeners() {
         if (!this.modal)
             return;
@@ -2295,6 +2399,11 @@ class AuthModal {
             e.preventDefault();
             this.switchView('login');
         });
+        const backToLoginFromReset = this.modal.querySelector('#backToLoginFromReset');
+        backToLoginFromReset?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.switchView('login');
+        });
         // Password toggle
         const passwordToggles = this.modal.querySelectorAll('.toggle-password');
         passwordToggles.forEach((toggle) => {
@@ -2325,6 +2434,8 @@ class AuthModal {
         signupForm?.addEventListener('submit', (e) => this.handleSignup(e));
         const forgotForm = this.modal.querySelector('#forgotPasswordFormElement');
         forgotForm?.addEventListener('submit', (e) => this.handleForgotPassword(e));
+        const resetPasswordForm = this.modal.querySelector('#resetPasswordFormElement');
+        resetPasswordForm?.addEventListener('submit', (e) => this.handleResetPassword(e));
         // OAuth social login buttons
         this.bindSocialLoginButtons();
     }
@@ -2371,7 +2482,7 @@ class AuthModal {
     switchView(view) {
         if (!this.modal)
             return;
-        const views = ['loginForm', 'signupForm', 'forgotPasswordForm', 'authMessage'];
+        const views = ['loginForm', 'signupForm', 'forgotPasswordForm', 'resetPasswordForm', 'authMessage'];
         views.forEach((viewId) => {
             const element = this.modal.querySelector(`#${viewId}`);
             element?.classList.add('hidden');
@@ -2380,6 +2491,7 @@ class AuthModal {
             login: 'loginForm',
             signup: 'signupForm',
             forgot: 'forgotPasswordForm',
+            'reset-password': 'resetPasswordForm',
             message: 'authMessage',
         };
         const targetView = this.modal.querySelector(`#${viewMap[view]}`);
@@ -2528,6 +2640,61 @@ class AuthModal {
             submitBtn.disabled = false;
         }
     }
+    async handleResetPassword(e) {
+        e.preventDefault();
+        const passwordInput = this.modal?.querySelector('#newPassword');
+        const passwordConfirmInput = this.modal?.querySelector('#newPasswordConfirm');
+        const submitBtn = this.modal?.querySelector('#resetPasswordButton');
+        const btnText = submitBtn?.querySelector('.btn-text');
+        const btnLoader = submitBtn?.querySelector('.btn-loader');
+        if (!passwordInput || !passwordConfirmInput || !submitBtn)
+            return;
+        const newPassword = passwordInput.value;
+        const confirmPassword = passwordConfirmInput.value;
+        // Validate passwords match
+        if (newPassword !== confirmPassword) {
+            this.showError('Passwords do not match');
+            return;
+        }
+        // Validate token exists
+        if (!this.resetToken) {
+            this.showError('Reset token is missing. Please use the link from your email.');
+            return;
+        }
+        try {
+            // Show loading state
+            submitBtn.disabled = true;
+            btnText?.classList.add('hidden');
+            btnLoader?.classList.remove('hidden');
+            // Call reset password API
+            await this.client.resetPassword({
+                token: this.resetToken,
+                new_password: newPassword,
+            });
+            // Clean up URL (remove verify_token from query string)
+            const url = new URL(window.location.href);
+            url.searchParams.delete('verify_token');
+            window.history.replaceState({}, document.title, url.toString());
+            // Clear reset token
+            this.resetToken = null;
+            // Show success message
+            this.showMessage('Password Reset Successful', 'Your password has been updated successfully. You can now log in with your new password.');
+        }
+        catch (error) {
+            // Handle error
+            const errorMessage = error instanceof Error ? error.message : 'Failed to reset password';
+            this.showError(errorMessage);
+            if (this.options.onError) {
+                this.options.onError(error);
+            }
+        }
+        finally {
+            // Reset loading state
+            submitBtn.disabled = false;
+            btnText?.classList.remove('hidden');
+            btnLoader?.classList.add('hidden');
+        }
+    }
     showMessage(title, message) {
         if (!this.modal)
             return;