Kamixitong/app/web/templates/login.html

{% extends "base.html" %}

{% block title %}登录 - 软件授权管理系统{% endblock %}

{% block login_content %}
<div class="text-center mb-4">
    <h4>软件授权管理系统</h4>
    <p class="text-muted">请登录您的管理员账号</p>
</div>

<form id="login-form" method="POST">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="mb-3">
        <label for="username" class="form-label">用户名</label>
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-user"></i>
            </span>
            <input type="text" class="form-control" id="username" name="username" required>
        </div>
    </div>

    <div class="mb-3">
        <label for="password" class="form-label">密码</label>
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-lock"></i>
            </span>
            <input type="password" class="form-control" id="password" name="password" required>
        </div>
    </div>

    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="remember" name="remember">
        <label class="form-check-label" for="remember">
            记住我
        </label>
    </div>

    <button type="submit" class="btn btn-primary w-100" id="login-btn">
        <i class="fas fa-sign-in-alt me-2"></i>
        <span id="login-btn-text">登录</span>
    </button>
</form>

<div class="text-center mt-3">
    <small class="text-muted">
        默认账号: admin / admin123
    </small>
</div>

<script>
// 自动聚焦到用户名输入框
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('username').focus();
});

// 登录表单提交处理
document.getElementById('login-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const loginBtn = document.getElementById('login-btn');
    const loginBtnText = document.getElementById('login-btn-text');
    const username = document.getElementById('username').value.trim();
    const password = document.getElementById('password').value;
    const remember = document.getElementById('remember').checked;

    // 基础验证
    if (!username || !password) {
        showNotification('请填写用户名和密码', 'warning');
        return;
    }

    // 显示加载状态
    loginBtn.disabled = true;
    loginBtnText.textContent = '登录中...';

    try {
        console.log('尝试登录:', username);

        // 尝试使用Web表单登录（传统Flask登录）
        const formData = new FormData();
        formData.append('username', username);
        formData.append('password', password);
        formData.append('remember', remember);
        
        // 获取CSRF令牌
        try {
            const csrfToken = document.querySelector('input[name="csrf_token"]').value;
            formData.append('csrf_token', csrfToken);
        } catch (e) {
            console.error('获取CSRF令牌失败:', e);
        }

        const response = await fetch('/login', {
            method: 'POST',
            body: formData,
            credentials: 'same-origin' // 重要：发送cookies
        });

        console.log('登录响应状态:', response.status);
        console.log('登录响应URL:', response.url);

        // 检查响应状态码
        if (response.status === 200) {
            // 检查是否真正登录成功（重定向到dashboard）
            if (response.url && response.url.includes('/dashboard')) {
                // 登录成功，重定向到dashboard
                window.location.href = '/dashboard';
            } else {
                // 尝试解析响应内容
                const responseData = await response.text();
                // 检查响应内容中是否包含成功信息
                if (responseData.includes('dashboard') || responseData.includes('仪表板')) {
                    // 登录成功
                    window.location.href = '/dashboard';
                } else if (responseData.includes('用户名或密码错误')) {
                    showNotification('用户名或密码错误，请重试', 'error');
                } else {
                    // 尝试解析为JSON
                    try {
                        const jsonData = JSON.parse(responseData);
                        if (jsonData.success) {
                            window.location.href = jsonData.redirect || '/dashboard';
                        } else {
                            showNotification(jsonData.message || '登录失败，请检查用户名和密码', 'error');
                        }
                    } catch (e) {
                        showNotification('登录失败，请检查用户名和密码', 'error');
                    }
                }
            }
        } else if (response.status === 400) {
            // CSRF错误或其他客户端错误
            const errorData = await response.text();
            if (errorData.includes('CSRF')) {
                showNotification('CSRF令牌验证失败，请刷新页面后重试', 'error');
            } else {
                showNotification('请求参数错误，请刷新页面后重试', 'error');
            }
        } else {
            showNotification('登录失败，请检查用户名和密码', 'error');
        }

    } catch (error) {
        console.error('登录请求失败:', error);
        showNotification('网络错误，请检查网络连接后重试', 'error');
    } finally {
        // 恢复按钮状态
        loginBtn.disabled = false;
        loginBtnText.textContent = '登录';
    }
});
</script>
{% endblock %}