用户登录功能

frontend/js/api.js

@@ -8,6 +8,7 @@ class WorkListAPI {
     async request(endpoint, options = {}) {
         const url = `${this.baseURL}${endpoint}`;
         const config = {
+            credentials: 'same-origin', // 包含cookies以支持session
             headers: {
                 'Content-Type': 'application/json',
                 ...options.headers
@@ -17,7 +18,7 @@ class WorkListAPI {
 
         try {
             const response = await fetch(url, config);
-            
+
             if (!response.ok) {
                 const errorData = await response.json().catch(() => ({}));
                 throw new Error(errorData.error || `HTTP错误: ${response.status}`);
@@ -30,6 +31,31 @@ class WorkListAPI {
         }
     }
 
+    // 认证API
+    async login(username, password) {
+        return this.request('/auth/login', {
+            method: 'POST',
+            body: JSON.stringify({ username, password })
+        });
+    }
+
+    async logout() {
+        return this.request('/auth/logout', {
+            method: 'POST'
+        });
+    }
+
+    async checkAuth() {
+        return this.request('/auth/check');
+    }
+
+    async register(username, password) {
+        return this.request('/auth/register', {
+            method: 'POST',
+            body: JSON.stringify({ username, password })
+        });
+    }
+
     // 任务管理API
     async getTasks() {
         return this.request('/tasks');

frontend/js/app.js

@@ -5,18 +5,111 @@ class WorkListApp {
         this.currentEditingTask = null;
         this.currentFilter = 'all';
         this.excludedStatuses = new Set();
+        this.currentUser = null;
         this.init();
     }
 
     // 初始化应用
-    init() {
-        this.bindEvents();
-        this.loadTasks();
-        this.setupDatePicker();
+    async init() {
+        // 先检查登录状态
+        await this.checkAuthStatus();
+
+        // 如果已登录,绑定事件并加载任务
+        if (this.currentUser) {
+            this.bindEvents();
+            this.loadTasks();
+            this.setupDatePicker();
+        }
+    }
+
+    // 检查认证状态
+    async checkAuthStatus() {
+        try {
+            const response = await api.checkAuth();
+            if (response.authenticated) {
+                this.currentUser = response.user;
+                this.showMainApp();
+            } else {
+                this.showLoginPage();
+            }
+        } catch (error) {
+            console.log('未登录:', error);
+            this.showLoginPage();
+        }
+    }
+
+    // 显示登录页面
+    showLoginPage() {
+        document.getElementById('loginPage').style.display = 'flex';
+        document.getElementById('mainApp').style.display = 'none';
+
+        // 绑定登录表单事件
+        const loginForm = document.getElementById('loginForm');
+        loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            await this.handleLogin();
+        });
+    }
+
+    // 显示主应用页面
+    showMainApp() {
+        document.getElementById('loginPage').style.display = 'none';
+        document.getElementById('mainApp').style.display = 'block';
+
+        // 显示用户名
+        if (this.currentUser) {
+            document.getElementById('currentUsername').textContent = this.currentUser.username;
+        }
+    }
+
+    // 处理登录
+    async handleLogin() {
+        const username = document.getElementById('loginUsername').value;
+        const password = document.getElementById('loginPassword').value;
+        const errorDiv = document.getElementById('loginError');
+
+        try {
+            errorDiv.style.display = 'none';
+            const response = await api.login(username, password);
+
+            if (response.user) {
+                this.currentUser = response.user;
+                this.showMainApp();
+
+                // 绑定事件并加载任务
+                this.bindEvents();
+                this.loadTasks();
+                this.setupDatePicker();
+            }
+        } catch (error) {
+            errorDiv.textContent = error.message || '登录失败,请检查用户名和密码';
+            errorDiv.style.display = 'block';
+        }
+    }
+
+    // 处理登出
+    async handleLogout() {
+        try {
+            await api.logout();
+            this.currentUser = null;
+            this.tasks = [];
+            this.showLoginPage();
+        } catch (error) {
+            console.error('登出失败:', error);
+            alert('登出失败: ' + error.message);
+        }
     }
 
     // 绑定事件
     bindEvents() {
+        // 登出按钮
+        const logoutBtn = document.getElementById('logoutBtn');
+        if (logoutBtn && !logoutBtn.hasAttribute('data-bound')) {
+            logoutBtn.addEventListener('click', () => {
+                this.handleLogout();
+            });
+            logoutBtn.setAttribute('data-bound', 'true');
+        }
         // 添加任务按钮
         document.getElementById('addTaskBtn').addEventListener('click', () => {
             this.showTaskModal();