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

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

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

        if (response.ok) {
            // 登录成功，重定向到dashboard
            window.location.href = '/dashboard';
        } else {
            // 登录失败，尝试通过API获取更多信息
            try {
                const errorData = await response.json();
                showNotification(errorData.message || '登录失败，请检查用户名和密码', 'error');
            } catch (e) {
                showNotification('登录失败，请检查用户名和密码', 'error');
            }
        }

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