Merge pull request #56 from danieldupriest/fix-login-logout

Fix login logout
This commit is contained in:
hui2018 2019-02-05 14:46:25 -08:00 committed by GitHub
commit eee1c11541
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 13 additions and 14 deletions

View file

@ -139,6 +139,7 @@ def reports(request):
queryset = Report.objects.all() queryset = Report.objects.all()
for i in queryset: for i in queryset:
data = { data = {
"report_pk": i.id,
"title": i.title, "title": i.title,
"date_created": i.date_created, "date_created": i.date_created,
"submitted": i.submitted, "submitted": i.submitted,

Binary file not shown.

View file

@ -1,8 +1,3 @@
function displayErrorMessage(errorMessage) {
const errorReport = document.querySelector("#errorReport");
errorReport.innerHTML = JSON.parse(errorMessage).error;
}
function postToLoginEndpoint(event) { function postToLoginEndpoint(event) {
event.preventDefault(); event.preventDefault();
@ -10,9 +5,10 @@ function postToLoginEndpoint(event) {
"username" : this.elements.username.value, "username" : this.elements.username.value,
"password" : this.elements.password.value "password" : this.elements.password.value
} }
const url = "https://reqres.in/api/login" // mock api service const url = "https://" + window.location.hostname + ":8444/api/v1/account/login/";
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
console.log("Attempting a connection to the following endpoint: " + url);
console.log("User credentials:\n" + JSON.stringify(credentials)); console.log("User credentials:\n" + JSON.stringify(credentials));
xhr.open("POST", url, true); xhr.open("POST", url, true);
@ -22,14 +18,14 @@ function postToLoginEndpoint(event) {
if (this.status === 200) { if (this.status === 200) {
console.log("LOGIN SUCCESS!"); console.log("LOGIN SUCCESS!");
console.log("Server response:\n" + this.response); console.log("Server response:\n" + this.response);
token = JSON.parse(this.response).token; token = JSON.parse(this.response).key;
localStorage.setItem("token", token); localStorage.setItem("token", token);
window.location.replace("home.html"); window.location.replace("home.html");
} else { } else {
document.getElementById("errorLogin").innerHTML = "Incorrect user name or password";
console.error("LOGIN FAILURE!"); console.error("LOGIN FAILURE!");
console.error("Server status: " + this.status); console.error("Server status: " + this.status);
console.error("Server response:\n" + this.response); console.error("Server response:\n" + this.response);
displayErrorMessage(this.response);
} }
} }
}; };

View file

@ -2,18 +2,18 @@ function postToLogoutEndpoint(event) {
event.preventDefault(); event.preventDefault();
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
const url = "https://reqres.in/api/logout" // mock api service const url = "https://" + window.location.hostname + ":8444/api/v1/account/logout/";
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open("POST", url, true); xhr.open("POST", url, true);
xhr.setRequestHeader("Authorization", "Token " + token); xhr.setRequestHeader("Authorization", "Bearer " + token);
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
if (this.readyState === 4) { if (this.readyState === 4) {
if (this.status === 200) { if (this.status === 200) {
console.log("LOGOUT SUCCESS!"); console.log("LOGOUT SUCCESS!");
console.log("Server response:\n" + this.response); console.log("Server response:\n" + this.response);
localStorage.removeItem("token"); localStorage.removeItem("token");
window.location.replace("index.html"); window.location.replace("/");
} else { } else {
console.error("LOGOUT FAILURE!"); console.error("LOGOUT FAILURE!");
console.error("Server status: " + this.status); console.error("Server status: " + this.status);

View file

@ -10,7 +10,9 @@ function getDataFromEndpoint(url, callback) {
console.log("Attempting a connection to the following endpoint: " + url); console.log("Attempting a connection to the following endpoint: " + url);
xhr.open("GET", url, true); xhr.open("GET", url, true);
xhr.setRequestHeader("Authorization", "Bearer " + token);
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
if (this.readyState === 4) { if (this.readyState === 4) {
if (this.status === 200) { if (this.status === 200) {
@ -222,7 +224,7 @@ function displayListOfReports(parsedData) {
for (let i = 0; i < reports.length; i++) { for (let i = 0; i < reports.length; i++) {
let title = reports[i].title; let title = reports[i].title;
let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US"); let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US");
let state = reports[i].state; let state = reports[i].submitted;
let dateSubmitted; let dateSubmitted;
let rid = reports[i].report_pk; let rid = reports[i].report_pk;
@ -240,7 +242,7 @@ function displayListOfReports(parsedData) {
actionButton.setAttribute("data-rid", rid); actionButton.setAttribute("data-rid", rid);
actionButton.classList.add("btn"); actionButton.classList.add("btn");
if (state === "created") { if (state === false) {
// Edit button // Edit button
dateSubmitted = "TBD"; dateSubmitted = "TBD";
actionButton.classList.add("btn-primary", "edit-report-button"); // Add event listener class actionButton.classList.add("btn-primary", "edit-report-button"); // Add event listener class

View file

@ -31,6 +31,7 @@
<label for="formGroupPassword">Password:</label> <label for="formGroupPassword">Password:</label>
<input class="form-control" id="formGroupPassword" type="password" name="password" required> <input class="form-control" id="formGroupPassword" type="password" name="password" required>
</div> </div>
<p id="errorLogin" style="color:red"></p>
<button type="submit" class="btn btn-primary pull-right">Submit</button> <button type="submit" class="btn btn-primary pull-right">Submit</button>
</form> </form>
</div> </div>
@ -41,7 +42,6 @@
</div> </div>
</div> </div>
</div> </div>
<p id="errorReport"><p>
<script src="js/login.js"></script> <script src="js/login.js"></script>
</body> </body>
</html> </html>