@klauswuestefeld/jux-web 2024.11.9 → 2024.11.19

package/dist/api-client.d.ts

@@ -8,4 +8,6 @@ export declare const requestMagicLink: (data: any, onJsonResponse: (response: an
 export declare const openMagicLink: (magicToken: string, onJsonResponse: (response: any) => any, onHelpMessage: (message: string) => any) => void;
 export declare const googleLogin: (token: string, onLogin: (response: any) => any, onLoginError: (message: string) => any) => void;
 export declare const microsoftLogin: (token: string, onLogin: (response: any) => any, onLoginError: (message: string) => any) => void;
+export declare const getSSOAuthorizationEndpoint: (onSuccess: (response: any) => any, onError: (message: string) => any) => void;
+export declare const validateSSOToken: (token: string, redirectUri: string, onLogin: (response: any) => any, onError: (message: string) => any) => void;
 export declare const getMXData: (domainName: string) => Promise<any>;

package/dist/jux-web.js

@@ -61,26 +61,30 @@ var juxWeb = (function (exports) {
       applyComponentStyle(result);
       result.tabIndex = 0;
       result.setAttribute('data-cy', `${loweredCasedType}-button`);
-      const icon = document.createElement('login-icon');
-      icon.style.gridColumnStart = '2';
-      icon.style.width = '28px';
-      icon.style.height = '28px';
-      icon.style.padding = '6px';
-      icon.style.marginLeft = '4px';
-      icon.style.boxSizing = 'content-box';
-      icon.className = 'ico';
       // @ts-ignore
-      icon.innerHTML = icons[loweredCasedType];
+      const iconHTML = icons[loweredCasedType];
+      if (iconHTML) {
+          const icon = document.createElement('login-icon');
+          icon.style.gridColumnStart = '2';
+          icon.style.width = '28px';
+          icon.style.height = '28px';
+          icon.style.padding = '6px';
+          icon.style.marginLeft = '4px';
+          icon.style.boxSizing = 'content-box';
+          icon.className = 'ico';
+          icon.innerHTML = iconHTML;
+          result.appendChild(icon);
+      }
       const label = document.createElement('login-label');
       label.textContent = window.innerWidth <= THRESHOLD_WIDTH ? type : getTranslation(`${loweredCasedType}-label`);
       applyLabelStyle(label);
-      result.append(icon, label);
+      result.appendChild(label);
       result.addEventListener('click', fn);
-      result.addEventListener('mouseenter', () => {
+      result.addEventListener('mouseenter', (_ev) => {
           result.style.cursor = 'pointer';
           result.style.boxShadow = '0 0 6px #808080';
       });
-      result.addEventListener('mouseleave', () => {
+      result.addEventListener('mouseleave', (_ev) => {
           result.style.cursor = 'auto';
           result.style.boxShadow = '1px 1px 1px grey';
       });
@@ -194,6 +198,7 @@ var juxWeb = (function (exports) {
   let requestRunning = false;
   const maxRetries = 20;
   let timeout = 20000;
+  const slowRequestTimeout = 2000;
   // @ts-ignore
   window.setRequestTimeout = (newTimeout) => timeout = newTimeout;
   const backendRequest = (url_1, options_1, onSuccess_1, onError_1, onRedirect_1, ...args_1) => __awaiter$2(void 0, [url_1, options_1, onSuccess_1, onError_1, onRedirect_1, ...args_1], void 0, function* (url, options, onSuccess, onError, onRedirect, requestType = 'query', handleUnauthorized = defaultHandleUnauthorized, retrial = false, retrialNum = 0) {
@@ -215,6 +220,13 @@ var juxWeb = (function (exports) {
       if (requestType === 'query') {
           timeoutId = setTimeout(() => controller.abort(), timeout); // abort connections that take longer than the value set on the timeout const
       }
+      let isSlowRequest = false;
+      const slowRequestTimeoutId = setTimeout(() => {
+          isSlowRequest = true;
+          const requestUrl = new URL(url);
+          const event = new CustomEvent('slow-request', { detail: requestUrl.pathname, bubbles: true });
+          window.dispatchEvent(event);
+      }, slowRequestTimeout);
       const requestInit = Object.assign(Object.assign({}, options), { signal: controller.signal });
       if (onRedirect)
           requestInit.redirect = 'manual'; // Treat redirects manually instead of following them automatically.
@@ -252,6 +264,12 @@ var juxWeb = (function (exports) {
       }
       finally {
           clearTimeout(timeoutId);
+          clearTimeout(slowRequestTimeoutId);
+          if (isSlowRequest) {
+              const requestUrl = new URL(url);
+              const event = new CustomEvent('slow-request-completed', { detail: requestUrl.pathname, bubbles: true });
+              window.dispatchEvent(event);
+          }
       }
       removeOverlay();
       if (onRedirect)
@@ -276,7 +294,7 @@ var juxWeb = (function (exports) {
           }
           else {
               // backend exceptions
-              onError(jsonResponse.error);
+              onError(jsonResponse);
           }
       }
       catch (err) {
@@ -342,6 +360,12 @@ var juxWeb = (function (exports) {
       const url = getBackendUrl() + 'auth-microsoft?access-token=' + token;
       backendRequest(url, {}, onLogin, onLoginError);
   };
+  const getSSOAuthorizationEndpoint = (onSuccess, onError) => {
+      backendGet('openid/authorization-endpoint', null, onSuccess, onError);
+  };
+  const validateSSOToken = (token, redirectUri, onLogin, onError) => {
+      backendGet('openid/callback', { code: token, 'redirect-uri': redirectUri }, onLogin, onError);
+  };
   const getMXData = (domainName) => __awaiter$2(void 0, void 0, void 0, function* () {
       try {
           const records = yield fetch(`https://dns.google.com/resolve?name=${domainName}&type=MX`, {
@@ -14316,6 +14340,18 @@ var juxWeb = (function (exports) {
       Array.from(clientApp.children).forEach(el => el.remove());
       clientApp.appendChild(page);
   };
+  const getSSOCallbackURI = () => {
+      const { protocol, host } = window.location;
+      return protocol + '//' + host + '/callback';
+  };
+  const handleSSOLogin = () => {
+      const onSuccess = (authEndpoint) => {
+          const authUrl = authEndpoint + `&redirect_uri=${getSSOCallbackURI()}`;
+          window.location.replace(authUrl);
+      };
+      const onError = () => onAuthenticationFailure('login-failed');
+      getSSOAuthorizationEndpoint(onSuccess, onError);
+  };
   const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
       // if (startNewDemo()) {
       //   initDemo(setBackendToken, onAuthentication);
@@ -14353,16 +14389,16 @@ var juxWeb = (function (exports) {
           backendGet('profile', null, (res) => onAuthentication(onUserLogin, res, 'Token Authentication'), (_err) => onAuthenticationFailure('login-failed'));
           return;
       }
+      const ssoToken = extractTokenFromWindowLocation('code');
+      if (ssoToken) {
+          validateSSOToken(ssoToken, getSSOCallbackURI(), (res) => onAuthentication(onUserLogin, res, 'SSO Authentication'), () => onAuthenticationFailure('login-failed'));
+          return;
+      }
+      if (supportedLoginTypes.includes('SSO')) {
+          handleSSOLogin();
+          return;
+      }
       displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, supportedLoginTypes));
-      // const linkedinToken = extractTokenFromWindowLocation('code', '\&state=9893849343');
-      // if (linkedinToken) {
-      //   openLinkedinSession(
-      //     linkedinToken,
-      //     (res) => onAuthentication(res, 'Linkedin Authentication'),
-      //     () => onAuthenticationFailure('unable-linkedin-login')
-      //   );
-      //   return;
-      // }
       // validateThirdPartyCookies(initGapi, () => displayPage(Page.LOGIN));
       // checkMixpanel(() => mixpanel.track('View Login Page'));
   };

package/dist/main.esm.js

@@ -60,26 +60,30 @@ const loginButton = (type, fn) => {
     applyComponentStyle(result);
     result.tabIndex = 0;
     result.setAttribute('data-cy', `${loweredCasedType}-button`);
-    const icon = document.createElement('login-icon');
-    icon.style.gridColumnStart = '2';
-    icon.style.width = '28px';
-    icon.style.height = '28px';
-    icon.style.padding = '6px';
-    icon.style.marginLeft = '4px';
-    icon.style.boxSizing = 'content-box';
-    icon.className = 'ico';
     // @ts-ignore
-    icon.innerHTML = icons[loweredCasedType];
+    const iconHTML = icons[loweredCasedType];
+    if (iconHTML) {
+        const icon = document.createElement('login-icon');
+        icon.style.gridColumnStart = '2';
+        icon.style.width = '28px';
+        icon.style.height = '28px';
+        icon.style.padding = '6px';
+        icon.style.marginLeft = '4px';
+        icon.style.boxSizing = 'content-box';
+        icon.className = 'ico';
+        icon.innerHTML = iconHTML;
+        result.appendChild(icon);
+    }
     const label = document.createElement('login-label');
     label.textContent = window.innerWidth <= THRESHOLD_WIDTH ? type : getTranslation(`${loweredCasedType}-label`);
     applyLabelStyle(label);
-    result.append(icon, label);
+    result.appendChild(label);
     result.addEventListener('click', fn);
-    result.addEventListener('mouseenter', () => {
+    result.addEventListener('mouseenter', (_ev) => {
         result.style.cursor = 'pointer';
         result.style.boxShadow = '0 0 6px #808080';
     });
-    result.addEventListener('mouseleave', () => {
+    result.addEventListener('mouseleave', (_ev) => {
         result.style.cursor = 'auto';
         result.style.boxShadow = '1px 1px 1px grey';
     });
@@ -193,6 +197,7 @@ const defaultHandleUnauthorized = () => {
 let requestRunning = false;
 const maxRetries = 20;
 let timeout = 20000;
+const slowRequestTimeout = 2000;
 // @ts-ignore
 window.setRequestTimeout = (newTimeout) => timeout = newTimeout;
 const backendRequest = (url_1, options_1, onSuccess_1, onError_1, onRedirect_1, ...args_1) => __awaiter(void 0, [url_1, options_1, onSuccess_1, onError_1, onRedirect_1, ...args_1], void 0, function* (url, options, onSuccess, onError, onRedirect, requestType = 'query', handleUnauthorized = defaultHandleUnauthorized, retrial = false, retrialNum = 0) {
@@ -214,6 +219,13 @@ const backendRequest = (url_1, options_1, onSuccess_1, onError_1, onRedirect_1,
     if (requestType === 'query') {
         timeoutId = setTimeout(() => controller.abort(), timeout); // abort connections that take longer than the value set on the timeout const
     }
+    let isSlowRequest = false;
+    const slowRequestTimeoutId = setTimeout(() => {
+        isSlowRequest = true;
+        const requestUrl = new URL(url);
+        const event = new CustomEvent('slow-request', { detail: requestUrl.pathname, bubbles: true });
+        window.dispatchEvent(event);
+    }, slowRequestTimeout);
     const requestInit = Object.assign(Object.assign({}, options), { signal: controller.signal });
     if (onRedirect)
         requestInit.redirect = 'manual'; // Treat redirects manually instead of following them automatically.
@@ -251,6 +263,12 @@ const backendRequest = (url_1, options_1, onSuccess_1, onError_1, onRedirect_1,
     }
     finally {
         clearTimeout(timeoutId);
+        clearTimeout(slowRequestTimeoutId);
+        if (isSlowRequest) {
+            const requestUrl = new URL(url);
+            const event = new CustomEvent('slow-request-completed', { detail: requestUrl.pathname, bubbles: true });
+            window.dispatchEvent(event);
+        }
     }
     removeOverlay();
     if (onRedirect)
@@ -275,7 +293,7 @@ const backendRequest = (url_1, options_1, onSuccess_1, onError_1, onRedirect_1,
         }
         else {
             // backend exceptions
-            onError(jsonResponse.error);
+            onError(jsonResponse);
         }
     }
     catch (err) {
@@ -341,6 +359,12 @@ const microsoftLogin = (token, onLogin, onLoginError) => {
     const url = getBackendUrl() + 'auth-microsoft?access-token=' + token;
     backendRequest(url, {}, onLogin, onLoginError);
 };
+const getSSOAuthorizationEndpoint = (onSuccess, onError) => {
+    backendGet('openid/authorization-endpoint', null, onSuccess, onError);
+};
+const validateSSOToken = (token, redirectUri, onLogin, onError) => {
+    backendGet('openid/callback', { code: token, 'redirect-uri': redirectUri }, onLogin, onError);
+};
 const getMXData = (domainName) => __awaiter(void 0, void 0, void 0, function* () {
     try {
         const records = yield fetch(`https://dns.google.com/resolve?name=${domainName}&type=MX`, {
@@ -996,6 +1020,18 @@ const displayPage = (clientApp, page) => {
     Array.from(clientApp.children).forEach(el => el.remove());
     clientApp.appendChild(page);
 };
+const getSSOCallbackURI = () => {
+    const { protocol, host } = window.location;
+    return protocol + '//' + host + '/callback';
+};
+const handleSSOLogin = () => {
+    const onSuccess = (authEndpoint) => {
+        const authUrl = authEndpoint + `&redirect_uri=${getSSOCallbackURI()}`;
+        window.location.replace(authUrl);
+    };
+    const onError = () => onAuthenticationFailure('login-failed');
+    getSSOAuthorizationEndpoint(onSuccess, onError);
+};
 const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
     // if (startNewDemo()) {
     //   initDemo(setBackendToken, onAuthentication);
@@ -1033,16 +1069,16 @@ const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImag
         backendGet('profile', null, (res) => onAuthentication(onUserLogin, res, 'Token Authentication'), (_err) => onAuthenticationFailure('login-failed'));
         return;
     }
+    const ssoToken = extractTokenFromWindowLocation('code');
+    if (ssoToken) {
+        validateSSOToken(ssoToken, getSSOCallbackURI(), (res) => onAuthentication(onUserLogin, res, 'SSO Authentication'), () => onAuthenticationFailure('login-failed'));
+        return;
+    }
+    if (supportedLoginTypes.includes('SSO')) {
+        handleSSOLogin();
+        return;
+    }
     displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, supportedLoginTypes));
-    // const linkedinToken = extractTokenFromWindowLocation('code', '\&state=9893849343');
-    // if (linkedinToken) {
-    //   openLinkedinSession(
-    //     linkedinToken,
-    //     (res) => onAuthentication(res, 'Linkedin Authentication'),
-    //     () => onAuthenticationFailure('unable-linkedin-login')
-    //   );
-    //   return;
-    // }
     // validateThirdPartyCookies(initGapi, () => displayPage(Page.LOGIN));
     // checkMixpanel(() => mixpanel.track('View Login Page'));
 };

package/dist/main.js

@@ -84,26 +84,30 @@ const loginButton = (type, fn) => {
     applyComponentStyle(result);
     result.tabIndex = 0;
     result.setAttribute('data-cy', `${loweredCasedType}-button`);
-    const icon = document.createElement('login-icon');
-    icon.style.gridColumnStart = '2';
-    icon.style.width = '28px';
-    icon.style.height = '28px';
-    icon.style.padding = '6px';
-    icon.style.marginLeft = '4px';
-    icon.style.boxSizing = 'content-box';
-    icon.className = 'ico';
     // @ts-ignore
-    icon.innerHTML = icons[loweredCasedType];
+    const iconHTML = icons[loweredCasedType];
+    if (iconHTML) {
+        const icon = document.createElement('login-icon');
+        icon.style.gridColumnStart = '2';
+        icon.style.width = '28px';
+        icon.style.height = '28px';
+        icon.style.padding = '6px';
+        icon.style.marginLeft = '4px';
+        icon.style.boxSizing = 'content-box';
+        icon.className = 'ico';
+        icon.innerHTML = iconHTML;
+        result.appendChild(icon);
+    }
     const label = document.createElement('login-label');
     label.textContent = window.innerWidth <= THRESHOLD_WIDTH ? type : getTranslation(`${loweredCasedType}-label`);
     applyLabelStyle(label);
-    result.append(icon, label);
+    result.appendChild(label);
     result.addEventListener('click', fn);
-    result.addEventListener('mouseenter', () => {
+    result.addEventListener('mouseenter', (_ev) => {
         result.style.cursor = 'pointer';
         result.style.boxShadow = '0 0 6px #808080';
     });
-    result.addEventListener('mouseleave', () => {
+    result.addEventListener('mouseleave', (_ev) => {
         result.style.cursor = 'auto';
         result.style.boxShadow = '1px 1px 1px grey';
     });
@@ -217,6 +221,7 @@ const defaultHandleUnauthorized = () => {
 let requestRunning = false;
 const maxRetries = 20;
 let timeout = 20000;
+const slowRequestTimeout = 2000;
 // @ts-ignore
 window.setRequestTimeout = (newTimeout) => timeout = newTimeout;
 const backendRequest = (url_1, options_1, onSuccess_1, onError_1, onRedirect_1, ...args_1) => __awaiter(void 0, [url_1, options_1, onSuccess_1, onError_1, onRedirect_1, ...args_1], void 0, function* (url, options, onSuccess, onError, onRedirect, requestType = 'query', handleUnauthorized = defaultHandleUnauthorized, retrial = false, retrialNum = 0) {
@@ -238,6 +243,13 @@ const backendRequest = (url_1, options_1, onSuccess_1, onError_1, onRedirect_1,
     if (requestType === 'query') {
         timeoutId = setTimeout(() => controller.abort(), timeout); // abort connections that take longer than the value set on the timeout const
     }
+    let isSlowRequest = false;
+    const slowRequestTimeoutId = setTimeout(() => {
+        isSlowRequest = true;
+        const requestUrl = new URL(url);
+        const event = new CustomEvent('slow-request', { detail: requestUrl.pathname, bubbles: true });
+        window.dispatchEvent(event);
+    }, slowRequestTimeout);
     const requestInit = Object.assign(Object.assign({}, options), { signal: controller.signal });
     if (onRedirect)
         requestInit.redirect = 'manual'; // Treat redirects manually instead of following them automatically.
@@ -275,6 +287,12 @@ const backendRequest = (url_1, options_1, onSuccess_1, onError_1, onRedirect_1,
     }
     finally {
         clearTimeout(timeoutId);
+        clearTimeout(slowRequestTimeoutId);
+        if (isSlowRequest) {
+            const requestUrl = new URL(url);
+            const event = new CustomEvent('slow-request-completed', { detail: requestUrl.pathname, bubbles: true });
+            window.dispatchEvent(event);
+        }
     }
     removeOverlay();
     if (onRedirect)
@@ -299,7 +317,7 @@ const backendRequest = (url_1, options_1, onSuccess_1, onError_1, onRedirect_1,
         }
         else {
             // backend exceptions
-            onError(jsonResponse.error);
+            onError(jsonResponse);
         }
     }
     catch (err) {
@@ -365,6 +383,12 @@ const microsoftLogin = (token, onLogin, onLoginError) => {
     const url = getBackendUrl() + 'auth-microsoft?access-token=' + token;
     backendRequest(url, {}, onLogin, onLoginError);
 };
+const getSSOAuthorizationEndpoint = (onSuccess, onError) => {
+    backendGet('openid/authorization-endpoint', null, onSuccess, onError);
+};
+const validateSSOToken = (token, redirectUri, onLogin, onError) => {
+    backendGet('openid/callback', { code: token, 'redirect-uri': redirectUri }, onLogin, onError);
+};
 const getMXData = (domainName) => __awaiter(void 0, void 0, void 0, function* () {
     try {
         const records = yield fetch(`https://dns.google.com/resolve?name=${domainName}&type=MX`, {
@@ -1020,6 +1044,18 @@ const displayPage = (clientApp, page) => {
     Array.from(clientApp.children).forEach(el => el.remove());
     clientApp.appendChild(page);
 };
+const getSSOCallbackURI = () => {
+    const { protocol, host } = window.location;
+    return protocol + '//' + host + '/callback';
+};
+const handleSSOLogin = () => {
+    const onSuccess = (authEndpoint) => {
+        const authUrl = authEndpoint + `&redirect_uri=${getSSOCallbackURI()}`;
+        window.location.replace(authUrl);
+    };
+    const onError = () => onAuthenticationFailure('login-failed');
+    getSSOAuthorizationEndpoint(onSuccess, onError);
+};
 const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
     // if (startNewDemo()) {
     //   initDemo(setBackendToken, onAuthentication);
@@ -1057,16 +1093,16 @@ const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImag
         backendGet('profile', null, (res) => onAuthentication(onUserLogin, res, 'Token Authentication'), (_err) => onAuthenticationFailure('login-failed'));
         return;
     }
+    const ssoToken = extractTokenFromWindowLocation('code');
+    if (ssoToken) {
+        validateSSOToken(ssoToken, getSSOCallbackURI(), (res) => onAuthentication(onUserLogin, res, 'SSO Authentication'), () => onAuthenticationFailure('login-failed'));
+        return;
+    }
+    if (supportedLoginTypes.includes('SSO')) {
+        handleSSOLogin();
+        return;
+    }
     displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, supportedLoginTypes));
-    // const linkedinToken = extractTokenFromWindowLocation('code', '\&state=9893849343');
-    // if (linkedinToken) {
-    //   openLinkedinSession(
-    //     linkedinToken,
-    //     (res) => onAuthentication(res, 'Linkedin Authentication'),
-    //     () => onAuthenticationFailure('unable-linkedin-login')
-    //   );
-    //   return;
-    // }
     // validateThirdPartyCookies(initGapi, () => displayPage(Page.LOGIN));
     // checkMixpanel(() => mixpanel.track('View Login Page'));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klauswuestefeld/jux-web",
-  "version": "2024.11.9",
+  "version": "2024.11.19",
   "author": "Jux.House",
   "license": "Copyrighted",
   "description": "",