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() {
    const usernameInput = document.getElementById('username');
    if (usernameInput) {
        usernameInput.focus();
    }
});

// 登录表单提交处理
document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('login-form');
    if (loginForm) {
        loginForm.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函数
                showNotification('请填写用户名和密码', 'warning');
                return;
            }

            // 显示加载状态
            if (loginBtn) loginBtn.disabled = true;
            if (loginBtnText) 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 csrfTokenInput = document.querySelector('input[name="csrf_token"]');
                    if (csrfTokenInput) {
                        formData.append('csrf_token', csrfTokenInput.value);
                    }
                } 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 {
                // 恢复按钮状态
                if (loginBtn) loginBtn.disabled = false;
                if (loginBtnText) loginBtnText.textContent = '登录';
            }
        });
    }
});
</script>
{% endblock %}