Conservancy/reimbursinator
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #15 from danieldupriest/LoginScript

Browse source 
Add login script to login page
This commit is contained in:
hui2018 2019-01-17 12:02:42 -08:00 committed by GitHub
commit f02420e210
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
front/static/login.html
View file

@ -11,11 +11,12 @@
</head>
<body>
<h1>Login Page</h1>
<form>
<form method="POST">
username: <input type="text" name="username" required><br>
password: <input type="password" name="password" required><br>
<input type="submit" name="submit" value="submit">
</form>
<!-- TODO: add script link here -->
<p id="errorReport"><p>
<script src="login.js"></script>
</body>
</html>

45
front/static/login.js Normal file
View file

@ -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);