WebUI: use Fetch API to login

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

Closes #21739.
PR #21744.
This commit is contained in:
Chocobo1 2024-11-09 14:08:03 +08:00 committed by GitHub
parent 33e3fb2f46
commit fb9b3c0f34
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 21 deletions

View file

@ -29,6 +29,7 @@ body {
#error_msg {
color: #f00;
white-space: pre;
}
#loginButton {

View file

@ -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", () => {