iot-dboard/frontend/templates/register_request.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>申请账号 - Cal Display</title>
<style>
  :root {
    --bg: #0f1117;
    --card-bg: #1a1d2e;
    --text: #e0e0e0;
    --text-dim: #888;
    --accent: #4A90D9;
    --accent-green: #4CAF50;
    --accent-red: #E05555;
    --radius: 12px;
    --input-bg: #242838;
    --input-border: rgba(255,255,255,0.14);
    --divider: rgba(255,255,255,0.16);
    --card-border: rgba(255,255,255,0.10);
    --soft-bg: rgba(255,255,255,0.06);
    --shadow: 0 4px 24px rgba(0,0,0,0.30);
  }
  /* 浅色主题覆盖 */
  .theme-light {
    --bg: #e8edf4;
    --card-bg: #ffffff;
    --text: #1c2333;
    --text-dim: #5b6a7e;
    --accent: #2f6fb2;
    --accent-green: #3a9450;
    --accent-red: #c74545;
    --radius: 12px;
    --input-bg: #fafafa;
    --input-border: #d7dfe8;
    --divider: #d7dfe8;
    --card-border: transparent;
    --soft-bg: #eef2f7;
    --shadow: 0 2px 12px rgba(30,40,60,0.08);
  }
  /* 主题切换动画 */
  html.theme-anim, html.theme-anim * {
    transition: background-color 0.55s ease, color 0.55s ease,
                border-color 0.55s ease, box-shadow 0.55s ease !important;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    min-height: 100vh;
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
  }
  .box {
    width: min(92vw, 420px);
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    text-align: center;
  }
  .box h1 { font-size: 22px; margin-bottom: 8px; font-weight: 600; }
  .box .subtitle { font-size: 14px; color: var(--text-dim); margin-bottom: 24px; line-height: 1.6; }
  input[type="text"] {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fafafa;
    margin-bottom: 14px;
  }
  button {
    width: 100%;
    padding: 13px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
  }
  button:hover { opacity: 0.9; }
  button:disabled { opacity: 0.5; cursor: not-allowed; }
  .msg { min-height: 22px; font-size: 14px; margin-top: 12px; }
  .msg.ok { color: var(--accent-green); }
  .msg.err { color: var(--accent-red); }
  .back { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--accent); text-decoration: none; }

  /* ═══ 主题适配（注册申请页）═══ */
  body { background: var(--bg); }
  .box { background: var(--card-bg); box-shadow: var(--shadow); border: 1px solid var(--card-border); }
  .box input[type="text"] { background: var(--input-bg); border-color: var(--input-border); color: var(--text); }
</style>
<script src="/static/js/theme.js"></script>
</head>
<body>

<div class="box">
  <h1>📋 申请账号</h1>
  <p class="subtitle">填写你的称呼，提交后等待管理员确认。管理员确认后你会收到一个临时验证码，用它登录并配置你自己的登录方式（Passkey 或 TOTP）。</p>
  <input type="text" id="remark-input" placeholder="你的称呼 / 备注" maxlength="64" autocomplete="off">
  <button id="submit-btn">提交申请</button>
  <div class="msg" id="msg"></div>
  <a class="back" href="/login">← 返回登录</a>
</div>

<script>
(function () {
  'use strict';
  var btn = document.getElementById('submit-btn');
  var input = document.getElementById('remark-input');
  var msg = document.getElementById('msg');

  function submit() {
    var remark = input.value.trim();
    if (!remark) { msg.className = 'msg err'; msg.textContent = '请填写你的称呼'; return; }
    btn.disabled = true;
    msg.textContent = '提交中...';
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/auth/register-request');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function () {
      var res = JSON.parse(xhr.responseText || '{}');
      if (xhr.status === 200 || xhr.status === 201) {
        msg.className = 'msg ok';
        msg.textContent = res.message || '✅ 已提交申请，请等待管理员确认';
        input.disabled = true;
        btn.disabled = true;
        btn.textContent = '已提交';
      } else {
        msg.className = 'msg err';
        msg.textContent = res.error || '提交失败，请稍后再试';
        btn.disabled = false;
      }
    };
    xhr.onerror = function () {
      msg.className = 'msg err';
      msg.textContent = '网络错误，请重试';
      btn.disabled = false;
    };
    xhr.send(JSON.stringify({ remark: remark }));
  }

  btn.addEventListener('click', submit);
  input.addEventListener('keydown', function (e) { if (e.key === 'Enter') submit(); });
})();
</script>
</body>
</html>