Browse Source

给登录页面在低网速登录时添加状态提示

niujiuru 4 days ago
parent
commit
55c53d00c4
2 changed files with 25 additions and 13 deletions
  1. 1 1
      web-ui.service/web/login.html
  2. 24 12
      web-ui.service/web/static/js/login.js

+ 1 - 1
web-ui.service/web/login.html

@@ -27,7 +27,7 @@
             type="password"
             placeholder="密码"
             required>
-        <button type="submit" class="btn btn-blue">
+        <button id="loginBtn" type="submit" class="btn btn-blue">
             登录
         </button>
     </form>

+ 24 - 12
web-ui.service/web/static/js/login.js

@@ -10,27 +10,39 @@ function showMsg(text, isError = true) {
 }
 
 async function loginHandler(e) {
-    e.preventDefault();
+  e.preventDefault();
 
-    const username = document.getElementById("username")?.value || "";
-    const password = document.getElementById("password")?.value || "";
+  const username = document.getElementById("username")?.value || "";
+  const password = document.getElementById("password")?.value || "";
+  const btn = document.getElementById("loginBtn");
 
+  btn.disabled = true;
+  btn.innerText = "登录中...";
+
+  try {
     const res = await fetch("/api/auth/login", {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json"
-        },
-        credentials: "include",
-        body: JSON.stringify({ username, password })
+      method:"POST",
+      headers:{
+        "Content-Type":"application/json"
+      },
+      credentials:"include",
+      body:JSON.stringify({username,password})
     });
 
     const data = await res.json();
 
     if (data.success) {
-        window.location.href = "/";
-    } else {
-        showMsg("用户名或密码错误");
+      window.location.href = "/";
+      return;
     }
+
+    showMsg("用户名或密码错误");
+  } catch (err) {
+    showMsg("登录请求失败,请检查网络");
+  } finally {
+    btn.disabled = false;
+    btn.innerText = "登录";
+  }
 }
 
 initLogin();