document.addEventListener('DOMContentLoaded', function() {
    // 获取登录表单及按钮
    const loginForm = document.querySelector('.login-form');
    const loginButton = document.querySelector('.login-btn');
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    
    // 在点击登录按钮时提交表单
    loginButton.addEventListener('click', function(event) {
        event.preventDefault();  // 防止表单的默认提交行为
        
        // 获取输入框的值
        const username = usernameInput.value.trim();
        const password = passwordInput.value.trim();
        
        // 检查输入框是否为空
        if (!username || !password) {
            alert('用户名和密码不能为空');
            return;
        }

        // 显示加载提示
        loginButton.innerHTML = '登录中...';
        loginButton.disabled = true;
        
        // 创建一个请求对象
        const data = {
            username: username,
            password: password
        };
        
        // 使用 Fetch API 发送 POST 请求到 Flask 后端
        fetch('/login_post', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)  // 将数据转换为 JSON 格式发送
        })
        .then(response => response.json())  // 解析响应数据
        .then(data => {
            if (data.success) {
                // 登录成功，跳转到主页
                window.location.href = '/dashboard';  // 根据需要修改跳转的路径
            } else {
                // 登录失败，提示错误信息
                alert('登录失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('登录请求失败，请稍后重试');
        })
        .finally(() => {
            // 恢复按钮状态
            loginButton.innerHTML = '登录';
            loginButton.disabled = false;
        });
    });
});