feat: MC Report System - MySQL + Express + Vanilla JS SPA

public/js/pages/login.js

@@ -0,0 +1,41 @@
+const LoginPage = {
+  render() {
+    return `
+      <div class="pub-card" style="background:white;border-radius:16px;padding:36px 32px;width:420px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.35)">
+        <div class="logo"><i class="fas fa-shield-halved"></i><h2>MC举报系统</h2><p>登录账号</p></div>
+        <form id="login-form">
+          <div class="form-group"><input id="lu" placeholder="用户名" required autofocus></div>
+          <div class="form-group"><input type="password" id="lp" placeholder="密码" required></div>
+          <div id="le" class="alert alert-e hidden"></div>
+          <button type="submit" class="btn btn-p btn-lg w-full"><i class="fas fa-sign-in-alt"></i> 登录</button>
+        </form>
+        <div style="margin-top:16px;text-align:center;font-size:13px">
+          <a href="#/register" style="color:var(--p);text-decoration:none">还没有账号？立即注册</a>
+          <span style="color:var(--g300);margin:0 8px">|</span>
+          <a href="#/home" style="color:var(--g500);text-decoration:none">匿名提交</a>
+        </div>
+        <div style="margin-top:14px;padding-top:12px;border-top:1px solid var(--g200);font-size:11px;color:var(--g400);text-align:center">
+          演示: owner/admin123 &nbsp; admin/admin123 &nbsp; player1/player123
+        </div>
+      </div>`;
+  },
+
+  mount() {
+    document.getElementById('login-form').addEventListener('submit', async e => {
+      e.preventDefault();
+      const btn = e.target.querySelector('button');
+      btn.disabled = true;
+      btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
+      try {
+        await Auth.login(document.getElementById('lu').value.trim(), document.getElementById('lp').value.trim());
+        App.afterLogin();
+      } catch (err) {
+        const el = document.getElementById('le');
+        el.textContent = err.message;
+        el.classList.remove('hidden');
+        btn.disabled = false;
+        btn.innerHTML = '<i class="fas fa-sign-in-alt"></i> 登录';
+      }
+    });
+  }
+};