增加用户名

manual_trading_hub/static/login.html

@@ -21,50 +21,57 @@
     </div>
     <form id="login-form" class="login-form" autocomplete="on">
       <label class="field">
-        <span>访问密码</span>
-        <input type="password" name="password" id="login-password" required autofocus placeholder="HUB_PASSWORD" />
+        <span>用户名</span>
+        <input type="text" name="username" id="login-username" required autocomplete="username" placeholder="HUB_USERNAME" />
+      </label>
+      <label class="field">
+        <span>密码</span>
+        <input type="password" name="password" id="login-password" required autocomplete="current-password" placeholder="HUB_PASSWORD" />
       </label>
       <button type="submit" class="primary login-submit">进入系统</button>
       <p id="login-err" class="login-err" hidden></p>
     </form>
-    <p class="login-foot">反代暴露公网时请在 hub <code>.env</code> 设置 <code>HUB_PASSWORD</code></p>
+    <p class="login-foot">在 hub <code>.env</code> 设置 <code>HUB_USERNAME</code> 与 <code>HUB_PASSWORD</code>（未设用户名时默认为 <code>admin</code>）</p>
   </div>
   <script>
     (function () {
       const form = document.getElementById("login-form");
       const err = document.getElementById("login-err");
+      const userInput = document.getElementById("login-username");
       const params = new URLSearchParams(location.search);
       const next = params.get("next") || "/monitor";
 
+      fetch("/api/auth/status")
+        .then((r) => r.json())
+        .then((s) => {
+          if (!s.required || s.logged_in) location.href = next;
+          if (s.username_hint && !userInput.value) userInput.value = s.username_hint;
+        })
+        .catch(() => {});
+
       form.onsubmit = async (e) => {
         e.preventDefault();
         err.hidden = true;
-        const pwd = document.getElementById("login-password").value;
+        const username = userInput.value.trim();
+        const password = document.getElementById("login-password").value;
         try {
           const r = await fetch("/api/auth/login", {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ password: pwd }),
+            body: JSON.stringify({ username, password }),
           });
-          const j = await r.json();
-          if (j.ok) {
+          const j = await r.json().catch(() => ({}));
+          if (r.ok && j.ok) {
             location.href = next.startsWith("/") ? next : "/monitor";
             return;
           }
-          err.textContent = j.detail || j.msg || "密码错误";
+          err.textContent = j.detail || j.msg || "用户名或密码错误";
           err.hidden = false;
         } catch (ex) {
           err.textContent = String(ex);
           err.hidden = false;
         }
       };
-
-      fetch("/api/auth/status")
-        .then((r) => r.json())
-        .then((s) => {
-          if (!s.required || s.logged_in) location.href = next;
-        })
-        .catch(() => {});
     })();
   </script>
 </body>