collabdocchat 1.0.0

package/src/pages/login.js

@@ -0,0 +1,101 @@
+import { AuthService } from '../services/auth.js';
+
+export function renderLoginPage(onSuccess) {
+  const app = document.getElementById('app');
+  const authService = new AuthService();
+
+  app.innerHTML = `
+    <div class="login-container">
+      <div class="login-card">
+        <div class="login-header">
+          <h1 class="logo">CollabDocChat</h1>
+          <p class="tagline">实时协作 · 智能沟通</p>
+        </div>
+
+        <div id="loginSection">
+          <form id="loginForm" class="auth-form">
+            <div class="form-group">
+              <label>用户名</label>
+              <input type="text" name="username" required placeholder="请输入用户名">
+            </div>
+            <div class="form-group">
+              <label>密码</label>
+              <input type="password" name="password" required placeholder="••••••••">
+            </div>
+            <button type="submit" class="btn-primary">登录</button>
+            <div class="error-message" id="loginError"></div>
+          </form>
+
+          <div class="auth-switch">
+            <p class="switch-text">还没有账号？<button class="link-btn" id="showRegister">立即注册</button></p>
+          </div>
+        </div>
+
+        <div id="registerSection" class="hidden">
+          <form id="registerForm" class="auth-form">
+            <div class="form-group">
+              <label>用户名</label>
+              <input type="text" name="username" required placeholder="请输入用户名">
+            </div>
+            <div class="form-group">
+              <label>密码</label>
+              <input type="password" name="password" required placeholder="••••••••">
+            </div>
+            <div class="register-note">
+              <p>注册后将自动分配为普通用户</p>
+            </div>
+            <button type="submit" class="btn-primary">注册</button>
+            <div class="error-message" id="registerError"></div>
+          </form>
+
+          <div class="auth-switch">
+            <p class="switch-text">已有账号？<button class="link-btn" id="showLogin">返回登录</button></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  // 登录/注册切换
+  document.getElementById('showRegister').addEventListener('click', () => {
+    document.getElementById('loginSection').classList.add('hidden');
+    document.getElementById('registerSection').classList.remove('hidden');
+  });
+
+  document.getElementById('showLogin').addEventListener('click', () => {
+    document.getElementById('registerSection').classList.add('hidden');
+    document.getElementById('loginSection').classList.remove('hidden');
+  });
+
+  // 登录表单
+  document.getElementById('loginForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const username = formData.get('username');
+    const password = formData.get('password');
+
+    try {
+      const result = await authService.login(username, password);
+      onSuccess(result.user, result.token);
+    } catch (error) {
+      document.getElementById('loginError').textContent = error.message;
+    }
+  });
+
+  // 注册表单
+  document.getElementById('registerForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const username = formData.get('username');
+    const password = formData.get('password');
+
+    try {
+      const result = await authService.register(username, password);
+      onSuccess(result.user, result.token);
+    } catch (error) {
+      document.getElementById('registerError').textContent = error.message;
+    }
+  });
+}
+
+