diff --git a/front/static/login.html b/front/static/login.html index f9387dc..3784525 100644 --- a/front/static/login.html +++ b/front/static/login.html @@ -11,11 +11,11 @@
Login Page

- - + diff --git a/front/static/login.js b/front/static/login.js new file mode 100644 index 0000000..20217d3 --- /dev/null +++ b/front/static/login.js @@ -0,0 +1,45 @@ +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);