{% extends "base.html" %}
{% block title %}PulseMQ - Login{% endblock %}
{% block body %}
<div class="login-page">
    <div class="login-card">
        <h2>PulseMQ</h2>
        <p>管理后台登录</p>
        <form id="login-form" onsubmit="handleLogin(event)">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" id="username" name="username" placeholder="admin" required autocomplete="username">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" id="password" name="password" placeholder="••••••••" required autocomplete="current-password">
            </div>
            <div id="error-msg" style="color:var(--danger);font-size:13px;margin-bottom:12px;display:none;"></div>
            <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;padding:10px;">登录</button>
        </form>
    </div>
</div>
<script>
async function handleLogin(e) {
    e.preventDefault();
    const errEl = document.getElementById('error-msg');
    errEl.style.display = 'none';
    const resp = await fetch('/api/auth/login', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            username: document.getElementById('username').value,
            password: document.getElementById('password').value,
        }),
    });
    if (resp.ok) {
        window.location.href = '/';
    } else {
        errEl.textContent = '用户名或密码错误';
        errEl.style.display = 'block';
    }
}
</script>
{% endblock %}