{% extends "base.html" %}
{% block title %}PulseMQ - Login{% endblock %}
{% block body %}
<div style="display:flex;align-items:center;justify-content:center;min-height:100vh;">
    <div class="card" style="width:400px;">
        <h2 style="margin-bottom:1.5rem;text-align:center;">PulseMQ Admin</h2>
        <form id="login-form" onsubmit="handleLogin(event)">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div id="error-msg" style="color:var(--danger);margin-bottom:1rem;display:none;"></div>
            <button type="submit" class="btn btn-primary" style="width:100%;">登录</button>
        </form>
    </div>
</div>
<script>
async function handleLogin(e) {
    e.preventDefault();
    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) {
        const data = await resp.json();
        localStorage.setItem('token', data.token);
        window.location.href = '/';
    } else {
        document.getElementById('error-msg').textContent = '用户名或密码错误';
        document.getElementById('error-msg').style.display = 'block';
    }
}
</script>
{% endblock %}