<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>TK发布助手 · 登录</title>
<link rel="stylesheet" href="/static/app.css">
<style>
  body { background: #f6f7f9; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
  .login-card {
    background: #fff; padding: 32px; border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08); width: 360px;
  }
  .login-card h2 { margin: 0 0 16px; font-size: 18px; color: #1f2937; }
  .login-card .muted { font-size: 12px; color: #6b7280; margin-bottom: 16px; }
  .login-card label { display: block; font-size: 13px; color: #374151; margin-top: 10px; }
  .login-card input {
    width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #d1d5db;
    border-radius: 4px; font-size: 14px; box-sizing: border-box;
  }
  .login-card button {
    width: 100%; margin-top: 16px; padding: 10px; font-size: 14px;
    background: #2563eb; color: #fff; border: 0; border-radius: 4px; cursor: pointer;
  }
  .login-card button:hover { background: #1d4ed8; }
  .login-err { color: #b91c1c; font-size: 13px; margin-top: 10px; min-height: 18px; }
</style>
</head>
<body>
<div class="login-card">
  <h2>TK发布助手</h2>
  <div class="muted">使用你的 AuthGate 账号登录（与其他本地套件共用）</div>
  <form id="login-form" onsubmit="doLogin(event)">
    <label>用户名<input id="u" type="text" autocomplete="username" autofocus /></label>
    <label>密码<input id="p" type="password" autocomplete="current-password" /></label>
    <button type="submit">登录</button>
  </form>
  <div id="err" class="login-err"></div>
</div>
<script>
async function doLogin(e) {
  e.preventDefault();
  const u = document.getElementById("u").value.trim();
  const p = document.getElementById("p").value;
  const err = document.getElementById("err");
  err.textContent = "登录中…";
  try {
    const r = await fetch("/api/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username: u, password: p }),
    });
    const data = await r.json().catch(() => ({}));
    if (!r.ok) { err.textContent = data.detail || "登录失败"; return; }
    location.href = "/";
  } catch (e) {
    err.textContent = "网络错误：" + e.message;
  }
}
</script>
</body>
</html>
