Intercept 401 errors, pop up a login window that closes when successful.

Author: ocielliottc

web-ui/src/api/api.js

@@ -58,6 +58,24 @@ export const getMyFetch = async () => {
   return myFetch;
 };
 
+function windowLogin() {
+  return new Promise((resolve, reject) => {
+    const authUrl = `${BASE_API_URL}/login?close=true`;
+    const loginWindow = window.open(authUrl, "Login", "width=500,height=600");
+
+    const interval = setInterval(() => {
+      try {
+        if (loginWindow.closed) {
+          clearInterval(interval);
+          resolve();
+        }
+      } catch (err) {
+        reject(err);
+      }
+    }, 1000);
+  });
+}
+
 export const resolve = async payload => {
   let { url } = payload;
   const { params = null, data = null, ...rest } = payload;
@@ -77,6 +95,11 @@ export const resolve = async payload => {
 
   resolved.payload = await promise;
 
+  if (resolved.payload.status == 401) {
+    await windowLogin();
+    resolved.payload = await myFetch(url, rest);
+  }
+
   if (!resolved.payload.ok) {
     try {
       resolved.error = await resolved.payload.json();

web-ui/src/components/routes/Routes.jsx

@@ -203,6 +203,9 @@ export default function Routes() {
         <Header title="Manage Kudos"></Header>
         <ManageKudosPage />
       </Route>
+      <Route path="/login?close=true">
+        {window.close()}
+      </Route>
     </Switch>
   );
 }