front: status checking on every request, simplified display switching

front/src/index.ts

@@ -158,6 +158,16 @@ leafletLoaderCSS.setAttribute(
 );
 leafletLoaderCSS.setAttribute("crossorigin", "anonymous");
 
+const showElements = (elements: string[]) =>
+  elements.forEach((elementName) => {
+    (document.querySelector(elementName)! as HTMLElement).style.display = "block";
+  });
+
+const hideElements = (elements: string[]) =>
+  elements.forEach((elementName) => {
+    (document.querySelector(elementName)! as HTMLElement).style.display = "none";
+  });
+
 const openError = (content: string) => {
   const errorBox = <HTMLDivElement>document.querySelector(".error-box")!;
   const txt = <HTMLParagraphElement>errorBox.querySelector(".error-box-text")!;
@@ -175,13 +185,40 @@ const request = (resource: string, data: any) =>
     },
   })
     .then((res) => res.json())
+    .then((res) => {
+      if (res.status) {
+        switch (parseInt(res.status, 10)) {
+          case 200:
+            // logged in lol
+            break;
+          case -1:
+            // not logged in
+            showElements([".login-box", ".register-box"]);
+            hideElements([".mail-box", ".sms-box", ".package-list"]);
+            break;
+          case -2:
+            // mail unverified
+            showElements([".mail-box"]);
+            hideElements([".login-box", ".register-box", ".sms-box", ".package-list"]);
+            break;
+          case -3:
+            // phone unverified
+            showElements([".sms-box"]);
+            hideElements([".login-box", ".register-box", ".mail-box", ".package-list"]);
+            break;
+          default:
+            openError(res.description || res.msg || `Session error: ${res.status}`);
+        }
+      }
+      return res;
+    })
     .catch((err: Error) => {
       openError(err.message);
       throw new Error(`Rejected promise ${err.message}`);
     });
 
 const openLockerConfirm = (lat: string, lon: string, openCode: string, id: string) => {
-  (document.querySelector(".areyousure-box") as HTMLElement).style.display = "none";
+  hideElements([".areyousure-box"]);
   request("collect", {
     lat,
     lon,
@@ -195,7 +232,7 @@ const openLockerConfirm = (lat: string, lon: string, openCode: string, id: strin
 };
 
 const openLocker = (lat: string, lon: string, openCode: string, id: string) => {
-  (document.querySelector(".areyousure-box") as HTMLElement).style.display = "block";
+  showElements([".areyousure-box"]);
   (document.querySelector(".areyousure-button") as HTMLElement)!.onclick = () => {
     openLockerConfirm(lat, lon, openCode, id);
   };
@@ -356,10 +393,8 @@ window.addEventListener("load", () => {
     }).then((res) => {
       if (res.status == 200) {
         refreshPackages().then(() => {
-          [".login-box", ".register-box"].forEach((elementName) => {
+          hideElements([".login-box", ".register-box"]);
-            (document.querySelector(elementName)! as HTMLDivElement).style.display = "none";
+          showElements([".package-list"]);
-          });
-          (document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
         });
       } else {
         openError(res.msg || "Error during login. Try again in a while?");
@@ -386,10 +421,8 @@ window.addEventListener("load", () => {
       mail: (form.querySelector('input[name="email"]')! as HTMLInputElement).value,
     });
     if (res.status == 200) {
-      [".register-box", ".login-box"].forEach((element) => {
+      hideElements([".register-box", ".login-box"]);
-        (document.querySelector(element)! as HTMLDivElement).style.display = "none";
+      showElements([".mail-box"]);
-      });
-      (document.querySelector(".mail-box")! as HTMLDivElement).style.display = "block";
     } else {
       openError(res.description || res.msg);
     }
@@ -404,10 +437,10 @@ window.addEventListener("load", () => {
       phone,
     });
     if (res.status == 200) {
-      (document.querySelector(".mail-box")! as HTMLDivElement).style.display = "none";
+      hideElements([".mail-box"]);
-      (document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block";
+      showElements([".sms-box"]);
       if (!phone) {
-        (document.querySelector(".sms-phone-field")! as HTMLDivElement).style.display = "block";
+        showElements([".sms-phone-field"]);
       }
     } else {
       openError(res.description || res.msg);
@@ -426,11 +459,11 @@ window.addEventListener("load", () => {
       phone,
     });
     if (res.status == 200) {
-      (document.querySelector(".sms-box")! as HTMLDivElement).style.display = "none";
+      hideElements([".sms-box"]);
       phone = null;
       localStorage.removeItem("phone");
       await refreshPackages();
-      (document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
+      showElements([".package-list"]);
     } else {
       openError(res.description || res.msg);
     }
@@ -458,26 +491,9 @@ window.addEventListener("load", () => {
     if (Array.isArray(res)) {
       // logged in, verified e-mail and phone, res is the package list
       refreshPackages(res);
-      (document.querySelector(".package-list")! as HTMLDivElement).style.display = "block";
+      showElements([".package-list"]);
       // just to be sure
       localStorage.removeItem("phone");
-    } else {
-      switch (parseInt(res.status, 10)) {
-        case -1:
-          // not logged in
-          [".login-box", ".register-box"].forEach((elementName) => {
-            (document.querySelector(elementName)! as HTMLDivElement).style.display = "block";
-          });
-          break;
-        case -2:
-          (document.querySelector(".mail-box")! as HTMLDivElement).style.display = "block";
-          break;
-        case -3:
-          (document.querySelector(".sms-box")! as HTMLDivElement).style.display = "block";
-          break;
-        default:
-          openError(res.description || res.msg || `Session error: ${res.status}`);
-      }
     }
   });
 });