46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
|
function displayErrorMessage(errorMessage) {
|
||
|
|
const errorReport = document.querySelector("#errorReport");
|
||
|
|
errorReport.innerHTML = JSON.parse(errorMessage).error;
|
||
|
|
}
|
||
|
|
|
||
|
|
function postToLoginEndpoint(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
const credentials = {
|
||
|
|
"username" : this.elements.username.value,
|
||
|
|
"password" : this.elements.password.value
|
||
|
|
}
|
||
|
|
const url = "https://reqres.in/api/login" // mock api service
|
||
|
|
const xhr = new XMLHttpRequest();
|
||
|
|
|
||
|
|
console.log(`User credentials:\n${JSON.stringify(credentials)}`);
|
||
|
|
|
||
|
|
xhr.open("POST", url, true);
|
||
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
||
|
|
xhr.onreadystatechange = function() {
|
||
|
|
if (this.readyState === 4) {
|
||
|
|
if (this.status === 200) {
|
||
|
|
console.log("LOGIN SUCCESS!");
|
||
|
|
console.log(`Server response:\n${this.response}`);
|
||
|
|
token = JSON.parse(this.response).token;
|
||
|
|
localStorage.setItem("token", token);
|
||
|
|
window.location.replace("dashboard.html");
|
||
|
|
} else {
|
||
|
|
console.log("LOGIN FAILURE!");
|
||
|
|
console.log(`Server status: ${this.status}`);
|
||
|
|
console.log(`Server response:\n${this.response}`);
|
||
|
|
displayErrorMessage(this.response);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
xhr.onerror = function() {
|
||
|
|
alert("Error connecting to the authentication server!");
|
||
|
|
};
|
||
|
|
|
||
|
|
xhr.send(JSON.stringify(credentials));
|
||
|
|
}
|
||
|
|
|
||
|
|
const form = document.querySelector("form");
|
||
|
|
form.addEventListener("submit", postToLoginEndpoint);
|