Merge branch 'doLoginWhenUnauthorized' into 'staging'

feat(login): Perform login when we get 401 Unauthorized

See merge request hanfi/bgp_worker!12

src/js/main.js

@@ -9,8 +9,8 @@ import {
     Buffer
 } from "buffer";
 
+var currentlyAddingItemByTag = new Map();
 var received_items = {};
-var access_token;
 var config;
 var scanner = new Html5QrcodeScanner("reader",{
   fps: 10,
@@ -29,6 +29,31 @@ function htoa(h) {
   return Uint8Array.from(Buffer.from(h,"hex"));
 }
 
+async function fetchWithAuth(input, init) {
+  if(init == undefined || init == null) {
+    init = {};
+  }
+  if(init["headers"] == null) {
+    init["headers"] = {};
+  }
+
+  if(!window.sessionStorage.getItem("access_token")) {
+    await login();
+  }
+
+  init["headers"]["Authorization"] = "Bearer " + window.sessionStorage.getItem("access_token");
+  let response = await fetch(input, init);
+
+  while(response.status == 401) {
+    console.log("Fetch with auth failed for", input);
+    await login();
+    init["headers"]["Authorization"] = "Bearer " + window.sessionStorage.getItem("access_token");
+    response = await fetch(input, init);
+  }
+
+  return response;
+}
+
 async function checkResponseForError(response, message) {
   if (response.status !== 200) {
     let content = await response.text();
@@ -50,25 +75,8 @@ async function getConfig() {
   }
 }
 
-export async function login() {
-  let token_from_storage = window.sessionStorage.getItem("access_token");
-
-  if(token_from_storage !== null) {
-    console.log("Found token in storage, checking validity.");
-    let checkResponse = await fetch(config.backend_url + "/token/check", {
-      method: "GET",
-      headers: {
-          "Content-Type": "application/json",
-          "Authorization": "Bearer " + token_from_storage,
-      },
-    });
-    if(checkResponse.status == 200) {
-      access_token = token_from_storage;
-      console.log("Token from storage valid.");
-      return;
-    }
-  }
-
+async function login() {
+  console.log("Performing login");
   let loginSuccess = false;
   do {
     console.log("Prompting user for shared secret.");
@@ -84,10 +92,8 @@ export async function login() {
     });
     if (await checkResponseForError(response, "Login failed")) {
       var result = await response.json();
-      access_token = result.access_token;
       console.log("Got token");
-
-      window.sessionStorage.setItem("access_token", access_token);
+      window.sessionStorage.setItem("access_token", result.access_token);
       loginSuccess = true;
     }
   } while(!loginSuccess);
@@ -114,7 +120,7 @@ function updateItemsView() {
  */
 
 export async function onTagTextUpdate(element) {
-  console.log("On tag text update", element);
+  // A character was typed
   if(element.value.length == 0) {
     element.setCustomValidity("");
     element.classList.remove("is-invalid");
@@ -124,22 +130,26 @@ export async function onTagTextUpdate(element) {
     element.classList.add("is-invalid");
     return;
   } else {
-    element.setCustomValidity("");
-    let succ = await addItemByTag(element.value);
-    if(succ) {
-      element.classList.remove("is-invalid");
-      element.value = "";
-    } else {
-      element.setCustomValidity("Unknown item");
-      element.classList.add("is-invalid");
-    }
-    element.reportValidity();
+    tagEntered(element);
   }
 }
 
 export async function onTagInputChanged(element) {
-  console.log("Tag Input Changed");
+  // Element lost focus or user pressed enter
   if(element.value.length == 6) {
+    tagEntered(element);
+  } else {
+    element.reportValidity();
+  }
+}
+
+async function tagEntered(element) {
+  let tag = element.value;
+  console.log("Tag Entered", tag);
+  if(currentlyAddingItemByTag.has(tag)) {
+    return;
+  }
+  currentlyAddingItemByTag.set(tag, "");
   let succ = await addItemByTag(element.value);
   if(succ) {
     element.classList.remove("is-invalid");
@@ -149,8 +159,8 @@ export async function onTagInputChanged(element) {
     element.setCustomValidity("Unknown item");
     element.classList.add("is-invalid");
   }
-  }
   element.reportValidity();
+  currentlyAddingItemByTag.delete(tag);
 }
 
 export async function addItemByTag(tag) {
@@ -162,11 +172,7 @@ export async function addItemByTag(tag) {
 
   console.log("Trying to add item by tag:", tag);
 
-  var response = await fetch(config.backend_url + "/tag/" + tag, {
-    headers: {
-      "Authorization": "Bearer " + access_token
-    },
-  });
+  var response = await fetchWithAuth(config.backend_url + "/tag/" + tag);
   if (response.status == 200) {
     var tracking_item = await response.json();
     if (tracking_item.uuid in received_items) {
@@ -242,11 +248,8 @@ export async function addItemImage(e) {
   console.log("Adding item  by image");
   var form = new FormData();
   form.append("image", e.files[0]);
-  var response = await fetch(config.backend_url + "/item/register", {
+  var response = await fetchWithAuth(config.backend_url + "/item/register", {
     method: "POST",
-    headers: {
-      "Authorization": "Bearer " + access_token
-    },
     body: form
   });
   if(await checkResponseForError(response, "Failed to save item")) {
@@ -287,11 +290,10 @@ export async function increaseItemCount(uuid) {
 export async function checkinItems() {
   console.log("Checking in items");
   for (var item in received_items) {
-    var response = await fetch(config.backend_url + "/checkin", {
+    var response = await fetchWithAuth(config.backend_url + "/checkin", {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
-            "Authorization": "Bearer " + access_token,
         },
         body: JSON.stringify({
             "item_uuid": received_items[item].item.uuid,
@@ -341,13 +343,8 @@ export async function scanReceiver() {
 
 export async function loadStorages(selectedStorage) {
   await getConfig();
-  await login();
   console.log("Retrieving storages");
-  var response = await fetch(config.backend_url + "/storages", {
-    headers: {
-      "Authorization": "Bearer " + access_token
-    },
-  });
+  var response = await fetchWithAuth(config.backend_url + "/storages");
   if(await checkResponseForError(response, "Failed to load storages.")) {
     var storages = await response.json();
     var select = document.querySelector("#storage_select");