用户登录功能

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();