From fb9b3c0f34a972712fb95ba4ef0d9102c1ef0f34 Mon Sep 17 00:00:00 2001
From: Chocobo1 <Chocobo1@users.noreply.github.com>
Date: Sat, 9 Nov 2024 14:08:03 +0800
Subject: [PATCH] WebUI: use Fetch API to login

Fetch API is the modern replacement for XMLHttpRequest.
Also show more detailed error messages.

Closes #21739.
PR #21744.
---
 src/webui/www/public/css/login.css    |  1 +
 src/webui/www/public/scripts/login.js | 45 ++++++++++++++-------------
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/webui/www/public/css/login.css b/src/webui/www/public/css/login.css
index fd72f94fb..0b7efe890 100644
--- a/src/webui/www/public/css/login.css
+++ b/src/webui/www/public/css/login.css
@@ -29,6 +29,7 @@ body {
 
 #error_msg {
     color: #f00;
+    white-space: pre;
 }
 
 #loginButton {
diff --git a/src/webui/www/public/scripts/login.js b/src/webui/www/public/scripts/login.js
index 278561ce6..545e641db 100644
--- a/src/webui/www/public/scripts/login.js
+++ b/src/webui/www/public/scripts/login.js
@@ -30,32 +30,35 @@
 
 const submitLoginForm = (event) => {
     event.preventDefault();
-    const errorMsgElement = document.getElementById("error_msg");
 
-    const xhr = new XMLHttpRequest();
-    xhr.open("POST", "api/v2/auth/login", true);
-    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
-    xhr.addEventListener("readystatechange", () => {
-        if (xhr.readyState === 4) { // DONE state
-            if ((xhr.status === 200) && (xhr.responseText === "Ok."))
-                location.replace(location);
-            else
-                errorMsgElement.textContent = "QBT_TR(Invalid Username or Password.)QBT_TR[CONTEXT=Login]";
-        }
-    });
-    xhr.addEventListener("error", () => {
-        errorMsgElement.textContent = (xhr.responseText !== "")
-            ? xhr.responseText
-            : "QBT_TR(Unable to log in, server is probably unreachable.)QBT_TR[CONTEXT=Login]";
-    });
+    const errorMsgElement = document.getElementById("error_msg");
+    errorMsgElement.textContent = ""; // clear previous error
 
     const usernameElement = document.getElementById("username");
     const passwordElement = document.getElementById("password");
-    const queryString = "username=" + encodeURIComponent(usernameElement.value) + "&password=" + encodeURIComponent(passwordElement.value);
-    xhr.send(queryString);
 
-    // clear the field
-    passwordElement.value = "";
+    const query = new URLSearchParams();
+    query.set("username", usernameElement.value);
+    query.set("password", passwordElement.value);
+    passwordElement.value = ""; // clear previous value
+
+    fetch("api/v2/auth/login", {
+            method: "POST",
+            headers: {
+                "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
+            },
+            body: query.toString()
+        })
+        .then(async (response) => {
+                const responseText = await response.text();
+                if (response.ok && (responseText === "Ok."))
+                    location.replace(location); // redirect
+                else
+                    errorMsgElement.textContent = `QBT_TR(Invalid Username or Password.)QBT_TR[CONTEXT=Login]\nQBT_TR(Server response:)QBT_TR[CONTEXT=Login] ${responseText}`;
+            },
+            (error) => {
+                errorMsgElement.textContent = `QBT_TR(Unable to log in, server is probably unreachable.)QBT_TR[CONTEXT=Login]\n${error}`;
+            });
 };
 
 document.addEventListener("DOMContentLoaded", () => {