@klauswuestefeld/jux-web 2024.2.7 → 2024.3.13

package/dist/jux-web.js

@@ -1,90 +1,90 @@
 var juxWeb = (function (exports) {
   'use strict';
 
-  const getBrowserLanguage = () => {
-      const result = (navigator.languages && navigator.languages.length)
-          ? navigator.languages[0]
-          : navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
-      return result.substring(0, 2);
-  };
-  const OVERRIDE_KEY = 'jux.language.override';
-  let translations = {};
-  const chosenLanguage = localStorage.getItem(OVERRIDE_KEY) || getBrowserLanguage();
-  const reloadWithLanguageOverride = (lang) => {
-      localStorage.setItem(OVERRIDE_KEY, lang);
-      location.reload();
-  };
-  // @ts-ignore
-  const getTranslation = (k) => translations[k] || k;
-  const initLanguage = (translations_, defaultLanguage = 'en') => {
-      translations = translations_[chosenLanguage] || translations_[defaultLanguage];
-      document.title = getTranslation('title');
-      document.documentElement.lang = translations_[chosenLanguage] ? chosenLanguage : defaultLanguage;
+  const getBrowserLanguage = () => {
+      const result = (navigator.languages && navigator.languages.length)
+          ? navigator.languages[0]
+          : navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
+      return result.substring(0, 2);
+  };
+  const OVERRIDE_KEY = 'jux.language.override';
+  let translations = {};
+  const chosenLanguage = localStorage.getItem(OVERRIDE_KEY) || getBrowserLanguage();
+  const reloadWithLanguageOverride = (lang) => {
+      localStorage.setItem(OVERRIDE_KEY, lang);
+      location.reload();
+  };
+  // @ts-ignore
+  const getTranslation = (k) => translations[k] || k;
+  const initLanguage = (translations_, defaultLanguage = 'en') => {
+      translations = translations_[chosenLanguage] || translations_[defaultLanguage];
+      document.title = getTranslation('title');
+      document.documentElement.lang = translations_[chosenLanguage] ? chosenLanguage : defaultLanguage;
   };
 
   const THRESHOLD_WIDTH = 640;
 
-  const icons = {
-      email: '<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 64.000000 48.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M44 468 c-38 -18 -44 -51 -44 -228 0 -180 6 -210 47 -229 33 -15 513 -15 546 0 41 19 47 49 47 229 0 180 -6 210 -47 229 -31 14 -519 14 -549 -1z m516 -33 c0 -7 -232 -205 -240 -205 -8 0 -240 198 -240 205 0 3 108 5 240 5 132 0 240 -2 240 -5z m-406 -118 l59 -53 -87 -97 -86 -97 0 170 0 171 28 -20 c15 -11 54 -44 86 -74z m446 -77 l0 -170 -85 95 c-47 53 -85 98 -85 99 0 5 162 146 167 146 1 0 3 -77 3 -170z m-319 -31 l39 -31 40 32 39 31 33 -37 c18 -21 57 -65 87 -99 l53 -60 -126 -3 c-69 -1 -183 -1 -252 0 l-126 3 84 97 c46 53 85 97 87 97 2 1 21 -13 42 -30z"/>  </g> </svg>',
-      google: '<svg viewBox="0 0 24 24" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)"><path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/><path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/><path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/><path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/></g></svg>',
-      linkedin: '<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100%" height="100%" viewBox="1.786 1.783 76.226652 76.248" version="1.1" id="svg72" sodipodi:docname="linkedin.svg" inkscape:version="0.92.4 (5da689c313, 2019-01-14)"> <metadata id="metadata78"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <defs id="defs76" /> <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1916" inkscape:window-height="1036" id="namedview74" showgrid="false" inkscape:zoom="0.79365665" inkscape:cx="428.70379" inkscape:cy="325.16058" inkscape:window-x="0" inkscape:window-y="20" inkscape:window-maximized="0" inkscape:current-layer="svg72" inkscape:pagecheckerboard="false" /> <path d="m 2.10821,7.2952417 c 0,-3.015 2.508,-5.462 5.6,-5.462 h 64.568 c 3.093,0 5.6,2.447 5.6,5.462 V 72.620242 c 0,3.016 -2.507,5.461 -5.6,5.461 h -64.568 c -3.092,0 -5.6,-2.445 -5.6,-5.46 V 7.2942417 Z" id="path64" inkscape:connector-curvature="0" style="fill:#0b78b7;fill-opacity:1" /> <path d="m 25.07621,65.660242 v -34.43 h -11.444 v 34.43 h 11.445 z m -5.72,-39.13 c 3.99,0 6.474,-2.644 6.474,-5.948 -0.075,-3.379 -2.484,-5.949 -6.398,-5.949 -3.917,0 -6.475,2.57 -6.475,5.949 0,3.304 2.483,5.948 6.324,5.948 h 0.074 z m 12.054,39.13 h 11.443 v -19.225 c 0,-1.028 0.075,-2.058 0.377,-2.792 0.827,-2.057 2.71,-4.186 5.872,-4.186 4.14,0 5.797,3.157 5.797,7.786 v 18.417 h 11.443 v -19.741 c 0,-10.575 -5.645,-15.496 -13.174,-15.496 -6.173,0 -8.884,3.45 -10.39,5.8 h 0.076 v -4.992 h -11.443 c 0.149,3.23 -0.001,34.43 -0.001,34.43 z" id="path70" inkscape:connector-curvature="0" style="fill:#ffffff" /> </svg>',
-      microsoft: '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 21 21"><title>MS-SymbolLockup</title><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>',
-  };
-  const applyComponentStyle = (component) => {
-      component.style.alignItems = 'center';
-      component.style.background = '#fff';
-      component.style.border = 'thin solid #888';
-      component.style.borderRadius = '5px';
-      component.style.boxShadow = '1px 1px 1px grey';
-      component.style.boxSizing = 'content - box';
-      component.style.color = '#444';
-      component.style.display = 'grid';
-      component.style.gridTemplateColumns = '12% 1fr 4fr';
-      component.style.height = '42px';
-      component.style.marginTop = '16px';
-      component.style.padding = '0 12px';
-      component.style.whiteSpace = 'nowrap';
-      component.style.width = '276px';
-      component.style.boxSizing = 'content-box';
-  };
-  const applyLabelStyle = (label) => {
-      label.style.display = 'inline-block';
-      label.style.fontSize = '14px';
-      label.style.fontWeight = '500';
-      label.style.gridColumnStart = '3';
-      label.style.marginRight = '34px';
-      label.style.paddingLeft = '20px';
-  };
-  const loginButton = (type, fn) => {
-      const loweredCasedType = type.toLowerCase();
-      const result = document.createElement('login-button');
-      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 label = document.createElement('login-label');
-      label.textContent = window.innerWidth <= THRESHOLD_WIDTH ? type : getTranslation(`${loweredCasedType}-label`);
-      applyLabelStyle(label);
-      result.append(icon, label);
-      result.addEventListener('click', fn);
-      result.addEventListener('mouseenter', () => {
-          result.style.cursor = 'pointer';
-          result.style.boxShadow = '0 0 6px #808080';
-      });
-      result.addEventListener('mouseleave', () => {
-          result.style.cursor = 'auto';
-          result.style.boxShadow = '1px 1px 1px grey';
-      });
-      return result;
+  const icons = {
+      email: '<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 64.000000 48.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M44 468 c-38 -18 -44 -51 -44 -228 0 -180 6 -210 47 -229 33 -15 513 -15 546 0 41 19 47 49 47 229 0 180 -6 210 -47 229 -31 14 -519 14 -549 -1z m516 -33 c0 -7 -232 -205 -240 -205 -8 0 -240 198 -240 205 0 3 108 5 240 5 132 0 240 -2 240 -5z m-406 -118 l59 -53 -87 -97 -86 -97 0 170 0 171 28 -20 c15 -11 54 -44 86 -74z m446 -77 l0 -170 -85 95 c-47 53 -85 98 -85 99 0 5 162 146 167 146 1 0 3 -77 3 -170z m-319 -31 l39 -31 40 32 39 31 33 -37 c18 -21 57 -65 87 -99 l53 -60 -126 -3 c-69 -1 -183 -1 -252 0 l-126 3 84 97 c46 53 85 97 87 97 2 1 21 -13 42 -30z"/>  </g> </svg>',
+      google: '<svg viewBox="0 0 24 24" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)"><path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/><path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/><path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/><path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/></g></svg>',
+      linkedin: '<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100%" height="100%" viewBox="1.786 1.783 76.226652 76.248" version="1.1" id="svg72" sodipodi:docname="linkedin.svg" inkscape:version="0.92.4 (5da689c313, 2019-01-14)"> <metadata id="metadata78"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <defs id="defs76" /> <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1916" inkscape:window-height="1036" id="namedview74" showgrid="false" inkscape:zoom="0.79365665" inkscape:cx="428.70379" inkscape:cy="325.16058" inkscape:window-x="0" inkscape:window-y="20" inkscape:window-maximized="0" inkscape:current-layer="svg72" inkscape:pagecheckerboard="false" /> <path d="m 2.10821,7.2952417 c 0,-3.015 2.508,-5.462 5.6,-5.462 h 64.568 c 3.093,0 5.6,2.447 5.6,5.462 V 72.620242 c 0,3.016 -2.507,5.461 -5.6,5.461 h -64.568 c -3.092,0 -5.6,-2.445 -5.6,-5.46 V 7.2942417 Z" id="path64" inkscape:connector-curvature="0" style="fill:#0b78b7;fill-opacity:1" /> <path d="m 25.07621,65.660242 v -34.43 h -11.444 v 34.43 h 11.445 z m -5.72,-39.13 c 3.99,0 6.474,-2.644 6.474,-5.948 -0.075,-3.379 -2.484,-5.949 -6.398,-5.949 -3.917,0 -6.475,2.57 -6.475,5.949 0,3.304 2.483,5.948 6.324,5.948 h 0.074 z m 12.054,39.13 h 11.443 v -19.225 c 0,-1.028 0.075,-2.058 0.377,-2.792 0.827,-2.057 2.71,-4.186 5.872,-4.186 4.14,0 5.797,3.157 5.797,7.786 v 18.417 h 11.443 v -19.741 c 0,-10.575 -5.645,-15.496 -13.174,-15.496 -6.173,0 -8.884,3.45 -10.39,5.8 h 0.076 v -4.992 h -11.443 c 0.149,3.23 -0.001,34.43 -0.001,34.43 z" id="path70" inkscape:connector-curvature="0" style="fill:#ffffff" /> </svg>',
+      microsoft: '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 21 21"><title>MS-SymbolLockup</title><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>',
+  };
+  const applyComponentStyle = (component) => {
+      component.style.alignItems = 'center';
+      component.style.background = '#fff';
+      component.style.border = 'thin solid #888';
+      component.style.borderRadius = '5px';
+      component.style.boxShadow = '1px 1px 1px grey';
+      component.style.boxSizing = 'content - box';
+      component.style.color = '#444';
+      component.style.display = 'grid';
+      component.style.gridTemplateColumns = '12% 1fr 4fr';
+      component.style.height = '42px';
+      component.style.marginTop = '16px';
+      component.style.padding = '0 12px';
+      component.style.whiteSpace = 'nowrap';
+      component.style.width = '276px';
+      component.style.boxSizing = 'content-box';
+  };
+  const applyLabelStyle = (label) => {
+      label.style.display = 'inline-block';
+      label.style.fontSize = '14px';
+      label.style.fontWeight = '500';
+      label.style.gridColumnStart = '3';
+      label.style.marginRight = '34px';
+      label.style.paddingLeft = '20px';
+  };
+  const loginButton = (type, fn) => {
+      const loweredCasedType = type.toLowerCase();
+      const result = document.createElement('login-button');
+      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 label = document.createElement('login-label');
+      label.textContent = window.innerWidth <= THRESHOLD_WIDTH ? type : getTranslation(`${loweredCasedType}-label`);
+      applyLabelStyle(label);
+      result.append(icon, label);
+      result.addEventListener('click', fn);
+      result.addEventListener('mouseenter', () => {
+          result.style.cursor = 'pointer';
+          result.style.boxShadow = '0 0 6px #808080';
+      });
+      result.addEventListener('mouseleave', () => {
+          result.style.cursor = 'auto';
+          result.style.boxShadow = '1px 1px 1px grey';
+      });
+      return result;
   };
 
   /******************************************************************************
@@ -112,203 +112,236 @@ var juxWeb = (function (exports) {
       });
   }
 
-  const extractTokenFromWindowLocation = (tokenParam, additionalParam = '') => {
-      if (!tokenParam)
-          return;
-      let token = '';
-      const tokenParameterName = `${tokenParam}=`;
-      const search = window.location.search;
-      const tokenParameterIndex = search.indexOf(tokenParameterName);
-      if (tokenParameterIndex !== -1) {
-          const tokenParameterNameLength = tokenParameterName.length;
-          const leadingAmpersandIndex = search.indexOf('&', tokenParameterIndex);
-          let searchWithoutToken = search;
-          token = search.substring(tokenParameterIndex + tokenParameterNameLength);
-          if (leadingAmpersandIndex !== -1) {
-              token = search.substring(tokenParameterIndex + tokenParameterNameLength, leadingAmpersandIndex);
-              searchWithoutToken = searchWithoutToken.slice(0, leadingAmpersandIndex) + searchWithoutToken.slice(leadingAmpersandIndex + 1);
-          }
-          searchWithoutToken = searchWithoutToken.replace(`${tokenParam}=` + token, '')
-              .replace(additionalParam, '')
-              .replace('\&cypress=true', '');
-          if (searchWithoutToken === '?') {
-              searchWithoutToken = '';
-          }
-          window.history.replaceState({}, document.title, window.location.pathname + searchWithoutToken);
-      }
-      return token;
+  const extractTokenFromWindowLocation = (tokenParam, additionalParam = '') => {
+      if (!tokenParam)
+          return;
+      let token = '';
+      const tokenParameterName = `${tokenParam}=`;
+      const search = window.location.search;
+      const tokenParameterIndex = search.indexOf(tokenParameterName);
+      if (tokenParameterIndex !== -1) {
+          const tokenParameterNameLength = tokenParameterName.length;
+          const leadingAmpersandIndex = search.indexOf('&', tokenParameterIndex);
+          let searchWithoutToken = search;
+          token = search.substring(tokenParameterIndex + tokenParameterNameLength);
+          if (leadingAmpersandIndex !== -1) {
+              token = search.substring(tokenParameterIndex + tokenParameterNameLength, leadingAmpersandIndex);
+              searchWithoutToken = searchWithoutToken.slice(0, leadingAmpersandIndex) + searchWithoutToken.slice(leadingAmpersandIndex + 1);
+          }
+          searchWithoutToken = searchWithoutToken.replace(`${tokenParam}=` + token, '')
+              .replace(additionalParam, '')
+              .replace('\&cypress=true', '');
+          if (searchWithoutToken === '?') {
+              searchWithoutToken = '';
+          }
+          window.history.replaceState({}, document.title, window.location.pathname + searchWithoutToken);
+      }
+      return token;
   };
 
-  const setBackendUrl = (backendUrl) => localStorage.setItem('backend-url', backendUrl);
-  //@ts-ignore
-  const getBackendUrl = () => process.env.BACKEND_URL || localStorage.getItem('backend-url');
-  //@ts-ignore
-  const getSecondaryBackendUrl = () => process.env.STAGING_BACKEND_URL || getBackendUrl();
-  const getApiUrl = () => getBackendUrl() + 'api/';
-  let getBackendUrlToTry = () => getBackendUrl();
-  const getMagicAuthUrl = () => {
-      var _a;
-      // @ts-ignore
-      const endpoint = ((_a = window === null || window === void 0 ? void 0 : window.store) === null || _a === void 0 ? void 0 : _a.magicLinkAuthEndpoint) || 'auth-magic';
-      return getBackendUrl() + endpoint + '?token=';
-  };
-  const getMagicAuthReqUrl = () => {
-      var _a;
-      // @ts-ignore
-      const endpoint = ((_a = window === null || window === void 0 ? void 0 : window.store) === null || _a === void 0 ? void 0 : _a.magicLinkRequestEndpoint) || 'magic-link-request';
-      return getBackendUrl() + endpoint + '?email=';
-  };
-  const handleJuxEvents = (ev) => {
-      const { method, endpoint, onResult, params, onError } = ev;
-      const onJsonResponse = (res) => onResult ? onResult(res) : null;
-      const onHelpMessage = (err) => onError ? onError(err) : null;
-      if (method === 'GET') {
-          backendGet(endpoint, params, onJsonResponse, onHelpMessage);
-      }
-      if (method === 'POST') {
-          backendPost(endpoint, params, onJsonResponse, onHelpMessage);
-      }
-  };
-  let timeout;
-  const maxRetries = 20;
-  let retries = 0;
-  const applySpinnerStyle = (spinner) => {
-      spinner.style.position = 'fixed';
-      spinner.style.top = '50%';
-      spinner.style.zIndex = '2147483647';
-      spinner.style.border = '8px solid #bababa';
-      spinner.style.borderTopColor = '#171f1c';
-      spinner.style.height = '80px';
-      spinner.style.width = '80px';
-  };
-  const renderOverlay = () => {
-      const overlay = document.createElement('reconnect-overlay');
-      const spinner = document.createElement('loading-spinner');
-      spinner.className = 'reconnect-spinner';
-      applySpinnerStyle(spinner);
-      document.body.append(overlay, spinner);
-  };
-  const removeOverlay = () => {
-      var _a, _b;
-      (_a = document.querySelector('reconnect-overlay')) === null || _a === void 0 ? void 0 : _a.remove();
-      (_b = document.querySelector('.reconnect-spinner')) === null || _b === void 0 ? void 0 : _b.remove();
-  };
-  const backendHelpMessage = (req) => {
-      return req.response && req.response.error || req.response || req;
-  };
-  const defaultHandleUnauthorized = () => {
-      localStorage.removeItem('token');
-      alert(getTranslation('session-expired-msg'));
-      location.reload();
-      // googleAuthSignOut(); TODO
-  };
-  const backendRequest = (requestType, urlString, params, onJsonResponse, onHelpMessage, handleUnauthorized = defaultHandleUnauthorized) => {
-      if (urlString.includes(getBackendUrl())) {
-          urlString = urlString.replace(getBackendUrl(), getBackendUrlToTry());
-      }
-      else if (urlString.includes(getSecondaryBackendUrl())) {
-          urlString = urlString.replace(getSecondaryBackendUrl(), getBackendUrlToTry());
-      }
-      clearInterval(timeout);
-      const req = new XMLHttpRequest();
-      const url = new URL(urlString);
-      if (requestType === 'GET' && params) {
-          Object.keys(params).forEach(k => url.searchParams.set(k, params[k]));
-      }
-      req.open(requestType, url, true);
-      // @ts-ignore
-      const backendToken = window.store.backendToken;
-      if (backendToken) {
-          req.setRequestHeader('auth', backendToken);
-      }
-      req.setRequestHeader('Content-Type', 'application/json');
-      req.responseType = 'json';
-      req.onerror = req.ontimeout = () => {
-          if (req.status === 401) {
-              handleUnauthorized();
-          }
-          else if (req.status === 0) {
-              if (retries >= maxRetries) {
-                  removeOverlay();
-                  // displayPage(Page.DISCONNECTED); TODO
-                  return;
-              }
-              retries++;
-              if (!document.querySelector('reconnect-overlay')) {
-                  renderOverlay();
-              }
-              const backupBackendUrl = getBackendUrlToTry() === getBackendUrl()
-                  ? getSecondaryBackendUrl()
-                  : getBackendUrl();
-              urlString = urlString.replace(getBackendUrlToTry(), backupBackendUrl);
-              getBackendUrlToTry = () => backupBackendUrl;
-              timeout = setTimeout(() => {
-                  backendRequest(requestType, urlString, params, onJsonResponse, onHelpMessage);
-              }, 2000);
-          }
-          else {
-              onHelpMessage(backendHelpMessage(req));
-          }
-      };
-      req.onload = () => {
-          retries = 0;
-          removeOverlay();
-          if (req.status === 200 || req.status === 202) {
-              onJsonResponse(req.response);
-          }
-          else {
-              if (req.onerror) {
-                  // @ts-ignore
-                  req.onerror();
-              }
-          }
-      };
-      req.timeout = 25000;
-      req.send(params);
-  };
-  const backendPost = (endpoint, postContent, onJsonResponse, onHelpMessage) => {
-      backendRequest('POST', getApiUrl() + endpoint, postContent, onJsonResponse, onHelpMessage);
-  };
-  const backendGet = (endpoint, params, onJsonResponse, onHelpMessage) => {
-      backendRequest('GET', getApiUrl() + endpoint, params, onJsonResponse, onHelpMessage);
-  };
-  const requestMagicLink = (data, onJsonResponse, onUnauthorized) => {
-      const { email, token } = data;
-      const url = getMagicAuthReqUrl() + encodeURIComponent(email) + '&destination=' + extractTokenFromWindowLocation('destination') + '&token=' + token;
-      backendRequest('GET', url, null, onJsonResponse, console.error, onUnauthorized);
-  };
-  const openMagicLink = (magicToken, onJsonResponse, onHelpMessage) => {
-      backendRequest('GET', getMagicAuthUrl() + magicToken, null, onJsonResponse, onHelpMessage);
-  };
-  const googleLogin = (token, onLogin, onLoginError) => {
-      const url = getBackendUrl() + 'auth-google?google-id-token=' + token;
-      backendRequest('GET', url, null, onLogin, onLoginError);
-  };
-  const microsoftLogin = (token, onLogin, onLoginError) => {
-      const url = getBackendUrl() + 'auth-microsoft?access-token=' + token;
-      backendRequest('GET', url, null, onLogin, onLoginError);
-  };
-  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`, {
-              method: 'GET',
-              mode: 'cors'
-          });
-          if (!records.ok) {
-              console.log('response was not ok');
-              return null;
-          }
-          const recordsJson = yield records.json();
-          const answer = recordsJson.Answer;
-          if (!answer) {
-              return null;
-          }
-          return Array.from(answer).map((a) => a.data);
-      }
-      catch (error) {
-          console.error('Fetch failed: ', error);
-          return null;
-      }
+  const setBackendUrl = (backendUrl) => localStorage.setItem('backend-url', backendUrl);
+  //@ts-ignore
+  const getBackendUrl = () => process.env.BACKEND_URL || localStorage.getItem('backend-url');
+  //@ts-ignore
+  const getSecondaryBackendUrl = () => process.env.STAGING_BACKEND_URL || getBackendUrl();
+  const getApiUrl = () => getBackendUrl() + 'api/';
+  const getMagicAuthUrl = () => {
+      var _a;
+      // @ts-ignore
+      const endpoint = ((_a = window === null || window === void 0 ? void 0 : window.store) === null || _a === void 0 ? void 0 : _a.magicLinkAuthEndpoint) || 'auth-magic';
+      return getBackendUrl() + endpoint + '?token=';
+  };
+  const getMagicAuthReqUrl = () => {
+      var _a;
+      // @ts-ignore
+      const endpoint = ((_a = window === null || window === void 0 ? void 0 : window.store) === null || _a === void 0 ? void 0 : _a.magicLinkRequestEndpoint) || 'magic-link-request';
+      return getBackendUrl() + endpoint + '?email=';
+  };
+  // TODO: use jux-events to call commands and queries inside jux-web library
+  const handleJuxEvent = (ev) => {
+      const { endpoint, onResult, params, onError, onRedirect } = ev;
+      const onJsonResponse = (res) => onResult ? onResult(res) : null;
+      const onHelpMessage = (err) => onError ? onError(err) : null;
+      post(endpoint, params, onJsonResponse, onHelpMessage, onRedirect);
+  };
+  const applySpinnerStyle = (spinner) => {
+      spinner.style.position = 'fixed';
+      spinner.style.top = '50%';
+      spinner.style.zIndex = '2147483647';
+      spinner.style.border = '8px solid #bababa';
+      spinner.style.borderTopColor = '#171f1c';
+      spinner.style.height = '80px';
+      spinner.style.width = '80px';
+  };
+  const renderOverlay = () => {
+      const overlay = document.createElement('reconnect-overlay');
+      const spinner = document.createElement('loading-spinner');
+      spinner.className = 'reconnect-spinner';
+      applySpinnerStyle(spinner);
+      document.body.append(overlay, spinner);
+  };
+  const removeOverlay = () => {
+      var _a, _b;
+      (_a = document.querySelector('reconnect-overlay')) === null || _a === void 0 ? void 0 : _a.remove();
+      (_b = document.querySelector('.reconnect-spinner')) === null || _b === void 0 ? void 0 : _b.remove();
+  };
+  const defaultHandleUnauthorized = () => {
+      localStorage.removeItem('token');
+      alert(getTranslation('session-expired-msg'));
+      location.reload();
+      // googleAuthSignOut(); TODO
+  };
+  let requestRunning = false;
+  const maxRetries = 20;
+  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, handleUnauthorized = defaultHandleUnauthorized, retrial = false, retrialNum = 0) {
+      if (requestRunning && !retrial) { // only allow one request at a time
+          setTimeout(() => backendRequest(url, options, onSuccess, onError, onRedirect, handleUnauthorized, false), 300);
+          return;
+      }
+      // @ts-ignore
+      const backendToken = window.store.backendToken;
+      if (backendToken) {
+          if (!options.headers)
+              options.headers = {};
+          options.headers.auth = backendToken;
+      }
+      let response;
+      requestRunning = true;
+      const requestInit = Object.assign(Object.assign({}, options), { signal: AbortSignal.timeout(6000) });
+      if (onRedirect)
+          requestInit.redirect = 'manual'; // Treat redirects manually instead of following them automatically.
+      try {
+          response = yield fetch(url, requestInit);
+      }
+      catch (err) {
+          // network errors
+          if (retrialNum > maxRetries) {
+              removeOverlay();
+              requestRunning = false;
+              return;
+          }
+          const retryRequest = () => {
+              retrialNum++;
+              if (!document.querySelector('reconnect-overlay')) {
+                  renderOverlay();
+              }
+              if (url.includes(getBackendUrl())) {
+                  url = url.replace(getBackendUrl(), getSecondaryBackendUrl());
+              }
+              else if (url.includes(getSecondaryBackendUrl())) {
+                  url = url.replace(getSecondaryBackendUrl(), getBackendUrl());
+              }
+              setTimeout(() => backendRequest(url, options, onSuccess, onError, onRedirect, handleUnauthorized, true, retrialNum), 2000);
+          };
+          retryRequest();
+          return;
+      }
+      finally {
+          requestRunning = false;
+      }
+      removeOverlay();
+      if (onRedirect)
+          onRedirect(response);
+      if (response.status === 401) {
+          handleUnauthorized();
+          return;
+      }
+      try {
+          const jsonResponse = yield response.json();
+          if (response.ok) {
+              if (onSuccess) {
+                  onSuccess(jsonResponse);
+              }
+              else {
+                  return jsonResponse;
+              }
+          }
+          else {
+              // backend predicted exceptions
+              onError(jsonResponse.error);
+          }
+      }
+      catch (err) {
+          // json conversion error / json response dealing errors
+          onError(err);
+      }
+  });
+  const post = (endpoint, body, onSuccess, onError, onRedirect) => {
+      const options = {
+          method: 'POST',
+          headers: {
+              'Accept': 'application/json',
+              'Content-Type': 'application/json',
+          }
+      };
+      if (body) {
+          // @ts-ignore
+          options.body = JSON.stringify(body);
+      }
+      return backendRequest(getApiUrl() + endpoint, options, onSuccess, onError, onRedirect);
+  };
+  const get = (endpoint, onSuccess, onError, onRedirect) => {
+      const options = {
+          method: 'GET',
+          headers: {
+              'Accept': 'application/json',
+              'Content-Type': 'application/json',
+          }
+      };
+      return backendRequest(getApiUrl() + endpoint, options, onSuccess, onError, onRedirect);
+  };
+  const backendPost = (endpoint, postContent, onJsonResponse, onHelpMessage) => {
+      post(endpoint, postContent, onJsonResponse, onHelpMessage);
+  };
+  const backendGet = (endpoint, params, onJsonResponse, onHelpMessage) => {
+      if (params) {
+          endpoint += '?';
+          Object.keys(params).forEach((k, i) => {
+              if (i > 0)
+                  endpoint += '&';
+              endpoint += `${k}=${params[k]}`;
+          });
+      }
+      get(endpoint, onJsonResponse, onHelpMessage);
+  };
+  const requestMagicLink = (data, onJsonResponse, onUnauthorized) => {
+      const { email, token } = data;
+      const url = getMagicAuthReqUrl() + encodeURIComponent(email) + '&destination=' + extractTokenFromWindowLocation('destination') + '&token=' + token;
+      const options = {};
+      backendRequest(url, options, onJsonResponse, console.error, null, onUnauthorized);
+  };
+  const openMagicLink = (magicToken, onJsonResponse, onHelpMessage) => {
+      backendRequest(getMagicAuthUrl() + magicToken, {}, onJsonResponse, onHelpMessage);
+  };
+  const googleLogin = (token, onLogin, onLoginError) => {
+      const url = getBackendUrl() + 'auth-google?google-id-token=' + token;
+      backendRequest(url, {}, onLogin, onLoginError);
+  };
+  const microsoftLogin = (token, onLogin, onLoginError) => {
+      const url = getBackendUrl() + 'auth-microsoft?access-token=' + token;
+      backendRequest(url, {}, onLogin, onLoginError);
+  };
+  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`, {
+              method: 'GET',
+              mode: 'cors'
+          });
+          if (!records.ok) {
+              console.log('response was not ok');
+              return null;
+          }
+          const recordsJson = yield records.json();
+          const answer = recordsJson.Answer;
+          if (!answer) {
+              return null;
+          }
+          return Array.from(answer).map((a) => a.data);
+      }
+      catch (error) {
+          console.error('Fetch failed: ', error);
+          return null;
+      }
   });
 
   /*! @azure/msal-browser v2.21.0 2022-01-04 */
@@ -13630,958 +13663,957 @@ var juxWeb = (function (exports) {
       return PublicClientApplication;
   }(ClientApplication));
 
-  let cleared = false;
-  const clearCookieValidation = () => {
-      var _a;
-      (_a = document.querySelector('#cookie-test-iframe')) === null || _a === void 0 ? void 0 : _a.remove();
-      cleared = true;
-  };
-  const checkCookiesEnable = (ev, onEnabled, onDisabled) => {
-      if (ev.data === 'MM:3PCunsupported') {
-          clearCookieValidation();
-          if (onDisabled) {
-              onDisabled();
-          }
-      }
-      else if (ev.data === 'MM:3PCsupported') {
-          clearCookieValidation();
-          onEnabled();
-      }
-  };
-  const cookieTest = () => {
-      const frame = document.createElement('iframe');
-      frame.id = 'cookie-test-iframe';
-      frame.src = 'https://mindmup.github.io/3rdpartycookiecheck/start.html';
-      frame.style.display = 'none';
-      document.body.appendChild(frame);
-  };
-  const validateThirdPartyCookies = (onEnabled, onDisabled) => {
-      cleared = false;
-      const listener = (ev) => checkCookiesEnable(ev, onEnabled, onDisabled);
-      window.addEventListener('message', listener);
-      const timer = setInterval(() => {
-          if (cleared) {
-              window.removeEventListener('message', listener);
-              clearInterval(timer);
-          }
-      }, 50);
-      cookieTest();
+  let cleared = false;
+  const clearCookieValidation = () => {
+      var _a;
+      (_a = document.querySelector('#cookie-test-iframe')) === null || _a === void 0 ? void 0 : _a.remove();
+      cleared = true;
+  };
+  const checkCookiesEnable = (ev, onEnabled, onDisabled) => {
+      if (ev.data === 'MM:3PCunsupported') {
+          clearCookieValidation();
+          if (onDisabled) {
+              onDisabled();
+          }
+      }
+      else if (ev.data === 'MM:3PCsupported') {
+          clearCookieValidation();
+          onEnabled();
+      }
+  };
+  const cookieTest = () => {
+      const frame = document.createElement('iframe');
+      frame.id = 'cookie-test-iframe';
+      frame.src = 'https://mindmup.github.io/3rdpartycookiecheck/start.html';
+      frame.style.display = 'none';
+      document.body.appendChild(frame);
+  };
+  const validateThirdPartyCookies = (onEnabled, onDisabled) => {
+      cleared = false;
+      const listener = (ev) => checkCookiesEnable(ev, onEnabled, onDisabled);
+      window.addEventListener('message', listener);
+      const timer = setInterval(() => {
+          if (cleared) {
+              window.removeEventListener('message', listener);
+              clearInterval(timer);
+          }
+      }, 50);
+      cookieTest();
   };
 
-  const enableSignInLayout = () => {
-      document.documentElement.style.cursor = 'progress';
-      document.body.style.opacity = '0.5';
-      document.body.style.pointerEvents = 'none';
-  };
-  const disableSignInLayout = () => {
-      document.documentElement.style.cursor = 'default';
-      document.body.style.opacity = '1';
-      document.body.style.pointerEvents = 'auto';
+  const enableSignInLayout = () => {
+      document.documentElement.style.cursor = 'progress';
+      document.body.style.opacity = '0.5';
+      document.body.style.pointerEvents = 'none';
+  };
+  const disableSignInLayout = () => {
+      document.documentElement.style.cursor = 'default';
+      document.body.style.opacity = '1';
+      document.body.style.pointerEvents = 'auto';
   };
 
-  // TODO: find a better way to import external scripts
-  const script$1 = document.createElement('script');
-  script$1.type = 'text/javascript';
-  script$1.src = 'https://apis.google.com/js/api.js';
-  document.head.appendChild(script$1);
-  let authStatus;
-  let authError;
-  const highLevelUser = (gUser) => {
-      const profile = gUser.getBasicProfile();
-      return {
-          name: profile.getName(),
-          email: profile.getEmail(),
-          picture: profile.getImageUrl(),
-          googletoken: gUser.getAuthResponse().id_token
-      };
-  };
-  const onUserChanged = (googleUser, onUserLogin) => {
-      document.documentElement.classList.remove('progress');
-      document.body.classList.remove('disabled');
-      if (googleUser) {
-          // mixpanelIdentify(googleUser); TODO
-          const onSuccess = (res) => {
-              const { token } = res;
-              // @ts-ignore
-              window.store.currentUser = res;
-              onTokenAcquired(token, onUserLogin);
-          };
-          const onError = (err) => {
-              console.error(err);
-              // logError(error); TODO
-              // checkMixpanel(() => mixpanel.track('Login Error', { 'Login Type': 'Google', 'Error': error })); TODO
-          };
-          googleLogin(googleUser.googletoken, onSuccess, onError);
-          // checkMixpanel(() => mixpanel.track('Login', { 'Login Type': 'Google' })); TODO
-      }
-      else {
-          setBackendToken('');
-          // checkMixpanel(() => mixpanel.reset()); TODO
-          // displayPage(Page.LOGIN); TODO
-      }
-  };
-  const onGoogleUserChanged = (gUser, onUserLogin) => {
-      onUserChanged(gUser.isSignedIn() ? highLevelUser(gUser) : null, onUserLogin);
-  };
-  const initGapiClient = (callbackFn, onUserLogin) => {
-      // @ts-ignore
-      const clientId = process.env.GOOGLE_CLIENT_ID;
-      gapi.auth2.init({ client_id: clientId, prompt: 'select_account' }).then(() => {
-          authStatus = 'LOADED';
-          const currentUser = getAuth().currentUser;
-          currentUser.listen(onGoogleUserChanged);
-          callbackFn ? callbackFn(clientId) : onGoogleUserChanged(currentUser.get(), onUserLogin);
-      }, onAuthError);
-  };
-  const onAuthError = (error) => {
-      authError = error;
-      console.error(error);
-      // logError(error, authError); // TODO
-  };
-  const initGapi = (callbackFn = null, onUserLogin) => {
-      if (!window.location.protocol.startsWith('http')) {
-          onAuthError('To use Google Auth you must access this page using http(s), not ' + window.location.protocol);
-          return;
-      }
-      if (typeof gapi === 'undefined') {
-          onAuthError('Unable to load the Google API');
-          return;
-      }
-      authStatus = 'LOADING';
-      gapi.load('auth2', {
-          callback: () => initGapiClient(callbackFn, onUserLogin),
-          onerror: onAuthError,
-          ontimeout: onAuthError,
-          timeout: 5000
-      });
-  };
-  const authAlert = (error) => {
-      alert('Google authentication is not working at this moment.\n\nPlease try again later or use a magic sign-in link.\n\nError: ' + JSON.stringify(error));
-      location.reload();
-  };
-  const onSignInError = (error) => {
-      disableSignInLayout();
-      console.error(error);
-      // logError(error); TODO
-      if (error && error.error === 'popup_closed_by_user') {
-          onUserChanged(null, () => { });
-          return;
-      }
-      authAlert(error);
-  };
-  const getAuth = () => {
-      if (typeof gapi === 'undefined') {
-          console.error('gapi is undefined');
-          // logError('gapi is undefined'); TODO
-          return null;
-      }
-      return gapi.auth2 && gapi.auth2.getAuthInstance();
-  };
-  const googleSignIn = () => getAuth().signIn().catch(onSignInError);
-  const authSignIn = (onUserLogin) => {
-      if (authError) {
-          authAlert(authError);
-          return;
-      }
-      if (authStatus === 'LOADING') {
-          setTimeout(authSignIn, 400);
-      }
-      else {
-          try {
-              googleSignIn();
-          }
-          catch (err) {
-              try {
-                  initGapi(() => googleSignIn(), onUserLogin);
-              }
-              catch (error) {
-                  onSignInError(error);
-              }
-          }
-      }
+  // TODO: find a better way to import external scripts
+  const script$1 = document.createElement('script');
+  script$1.type = 'text/javascript';
+  script$1.src = 'https://apis.google.com/js/api.js';
+  document.head.appendChild(script$1);
+  let authStatus;
+  let authError;
+  const highLevelUser = (gUser) => {
+      const profile = gUser.getBasicProfile();
+      return {
+          name: profile.getName(),
+          email: profile.getEmail(),
+          picture: profile.getImageUrl(),
+          googletoken: gUser.getAuthResponse().id_token
+      };
+  };
+  const onUserChanged = (googleUser, onUserLogin) => {
+      document.documentElement.classList.remove('progress');
+      document.body.classList.remove('disabled');
+      if (googleUser) {
+          // mixpanelIdentify(googleUser); TODO
+          const onSuccess = (res) => {
+              const { token } = res;
+              // @ts-ignore
+              window.store.currentUser = res;
+              onTokenAcquired(token, onUserLogin);
+          };
+          const onError = (err) => {
+              console.error(err);
+              // logError(error); TODO
+              // checkMixpanel(() => mixpanel.track('Login Error', { 'Login Type': 'Google', 'Error': error })); TODO
+          };
+          googleLogin(googleUser.googletoken, onSuccess, onError);
+          // checkMixpanel(() => mixpanel.track('Login', { 'Login Type': 'Google' })); TODO
+      }
+      else {
+          setBackendToken('');
+          // checkMixpanel(() => mixpanel.reset()); TODO
+          // displayPage(Page.LOGIN); TODO
+      }
+  };
+  const onGoogleUserChanged = (gUser, onUserLogin) => {
+      onUserChanged(gUser.isSignedIn() ? highLevelUser(gUser) : null, onUserLogin);
+  };
+  const initGapiClient = (callbackFn, onUserLogin) => {
+      // @ts-ignore
+      const clientId = process.env.GOOGLE_CLIENT_ID;
+      gapi.auth2.init({ client_id: clientId, prompt: 'select_account' }).then(() => {
+          authStatus = 'LOADED';
+          const currentUser = getAuth().currentUser;
+          currentUser.listen(onGoogleUserChanged);
+          callbackFn ? callbackFn(clientId) : onGoogleUserChanged(currentUser.get(), onUserLogin);
+      }, onAuthError);
+  };
+  const onAuthError = (error) => {
+      authError = error;
+      console.error(error);
+      // logError(error, authError); // TODO
+  };
+  const initGapi = (callbackFn = null, onUserLogin) => {
+      if (!window.location.protocol.startsWith('http')) {
+          onAuthError('To use Google Auth you must access this page using http(s), not ' + window.location.protocol);
+          return;
+      }
+      if (typeof gapi === 'undefined') {
+          onAuthError('Unable to load the Google API');
+          return;
+      }
+      authStatus = 'LOADING';
+      gapi.load('auth2', {
+          callback: () => initGapiClient(callbackFn, onUserLogin),
+          onerror: onAuthError,
+          ontimeout: onAuthError,
+          timeout: 5000
+      });
+  };
+  const authAlert = (error) => {
+      alert('Google authentication is not working at this moment.\n\nPlease try again later or use a magic sign-in link.\n\nError: ' + JSON.stringify(error));
+      location.reload();
+  };
+  const onSignInError = (error) => {
+      disableSignInLayout();
+      console.error(error);
+      // logError(error); TODO
+      if (error && error.error === 'popup_closed_by_user') {
+          onUserChanged(null, () => { });
+          return;
+      }
+      authAlert(error);
+  };
+  const getAuth = () => {
+      if (typeof gapi === 'undefined') {
+          console.error('gapi is undefined');
+          // logError('gapi is undefined'); TODO
+          return null;
+      }
+      return gapi.auth2 && gapi.auth2.getAuthInstance();
+  };
+  const googleSignIn = () => getAuth().signIn().catch(onSignInError);
+  const authSignIn = (onUserLogin) => {
+      if (authError) {
+          authAlert(authError);
+          return;
+      }
+      if (authStatus === 'LOADING') {
+          setTimeout(authSignIn, 400);
+      }
+      else {
+          try {
+              googleSignIn();
+          }
+          catch (err) {
+              try {
+                  initGapi(() => googleSignIn(), onUserLogin);
+              }
+              catch (error) {
+                  onSignInError(error);
+              }
+          }
+      }
   };
 
-  // TODO: find a better way to import external scripts
-  const script = document.createElement('script');
-  script.type = 'text/javascript';
-  script.src = 'https://www.google.com/recaptcha/api.js';
-  document.head.appendChild(script);
-  const googleCaptcha = () => {
-      const result = document.createElement('google-captcha');
-      window.submitCaptcha = (token) => result.setAttribute('token', token);
-      result.className = 'g-recaptcha';
-      // @ts-ignore
-      result.setAttribute('data-sitekey', process.env.GOOGLE_CAPTCHA_KEY);
-      result.setAttribute('data-callback', 'submitCaptcha');
-      grecaptcha.render(result);
-      return result;
+  // TODO: find a better way to import external scripts
+  const script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = 'https://www.google.com/recaptcha/api.js';
+  document.head.appendChild(script);
+  const googleCaptcha = () => {
+      const result = document.createElement('google-captcha');
+      window.submitCaptcha = (token) => result.setAttribute('token', token);
+      result.className = 'g-recaptcha';
+      // @ts-ignore
+      result.setAttribute('data-sitekey', process.env.GOOGLE_CAPTCHA_KEY);
+      result.setAttribute('data-callback', 'submitCaptcha');
+      grecaptcha.render(result);
+      return result;
   };
 
-  const juxWhite = '#FFF';
-  const juxDarkGrey = '#282828';
-  const juxDimmedDarkGrey = '#28282822';
-  const juxDimmedBlack = '#00000088';
-  const juxLightGreen = '#20B03D';
+  const juxWhite = '#FFF';
+  const juxDarkGrey = '#282828';
+  const juxDimmedDarkGrey = '#28282822';
+  const juxDimmedBlack = '#00000088';
+  const juxLightGreen = '#20B03D';
   const juxMediumGreen = '#0D631E';
 
-  const onKeyDown = (ev, el, persitent, onClose) => {
-      if (ev.key === 'Escape') {
-          if (persitent) {
-              return;
-          }
-          close(el, onClose);
-      }
-      else if (ev.key === 'Enter') {
-          if (ev.target.id === 'members-textarea') {
-              return;
-          }
-          el.dispatchEvent(new CustomEvent('ok'));
-      }
-  };
-  const close = (el, onClose) => {
-      el.remove();
-      if (onClose) {
-          onClose();
-      }
-  };
-  const attachEventHandlers = (el, persitent, onClose) => {
-      const cancelButton = el.querySelector('.cancel');
-      cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.addEventListener('click', (_e) => {
-          el.dispatchEvent(new CustomEvent('cancel'));
-          if (el.hasAttribute('dont-remove')) {
-              return;
-          }
-          close(el, onClose);
-      });
-      const closeButton = el.querySelector('.close');
-      if (closeButton) {
-          closeButton.addEventListener('click', (_e) => {
-              close(el, onClose);
-          });
-      }
-      const okButton = el.querySelector('.ok');
-      okButton === null || okButton === void 0 ? void 0 : okButton.addEventListener('click', (_e) => {
-          el.dispatchEvent(new CustomEvent('ok'));
-      });
-      el.removeEventListener('keydown', (ev) => onKeyDown(ev, el, persitent, () => onClose));
-      el.addEventListener('keydown', (ev) => onKeyDown(ev, el, persitent, () => onClose));
-      el === null || el === void 0 ? void 0 : el.addEventListener('click', (e) => {
-          if (e.target === el) {
-              if (persitent) {
-                  return;
-              }
-              close(el, onClose);
-          }
-      });
-  };
-  // TODO: Mudar construtor para usar essa interface
-  // interface JuxModalOptions {
-  //   title?: string,
-  //   btns?: string[],
-  //   content?: string,
-  //   isPersistent?: boolean,
-  //   isBusy?: boolean,
-  //   body?: HTMLElement,
-  //   okTxt?: string,
-  //   cancelTxt?: string,
-  //   onClose?: any,
-  //   titleStyle?: string,
-  // }
-  const applyWrapperStyle = (wrapper) => {
-      wrapper.style.alignItems = 'center';
-      wrapper.style.backgroundColor = juxWhite;
-      wrapper.style.borderRadius = '.3125rem';
-      wrapper.style.boxShadow = `0 0 1.33rem ${juxDimmedBlack}`;
-      wrapper.style.boxSizing = 'content-box';
-      wrapper.style.display = 'flex';
-      wrapper.style.flexDirection = 'column';
-      wrapper.style.justifyContent = 'flex-start';
-      wrapper.style.margin = '0';
-      wrapper.style.maxHeight = '88%';
-      wrapper.style.maxWidth = '40%';
-      wrapper.style.minWidth = '20%';
-      wrapper.style.padding = '1.33rem';
-      wrapper.style.position = 'relative';
-  };
-  const applyModalStyle = (modal) => {
-      modal.style.alignItems = 'center';
-      modal.style.backgroundColor = juxDimmedBlack;
-      modal.style.display = 'flex';
-      modal.style.height = '100vh';
-      modal.style.justifyContent = 'center';
-      modal.style.left = '0';
-      modal.style.overflow = 'hidden';
-      modal.style.position = 'fixed';
-      modal.style.top = '0';
-      modal.style.width = '100%';
-      modal.style.zIndex = '9999';
-  };
-  const applyHeaderStyle = (header) => {
-      header.style.alignItems = 'center';
-      header.style.color = juxMediumGreen;
-      header.style.flexDirection = 'row';
-      header.style.fontSize = '16px';
-      header.style.fontWeight = '700';
-      header.style.justifyContent = 'space-between';
-      header.style.margin = '0';
-      header.style.display = 'flex';
-      header.style.position = 'relative';
-      header.style.width = '100%';
-  };
-  const applyJuxModalContentStyle = (el) => {
-      el.style.display = 'flex';
-      el.style.position = 'relative';
-      el.style.width = '100%';
-      el.style.flexFlow = 'column';
-      el.style.marginTop = '1.33rem';
-      el.style.rowGap = '8px';
-  };
-  const juxModal = (title, btns = ['ok', 'cancel'], content = '', persistent = false, _busy = false, body, okTxt = getTranslation('alert-ok-btn-txt'), cancelTxt = getTranslation('alert-cancel-btn-txt'), onClose, titleStyle) => {
-      const result = document.createElement('jux-modal');
-      applyModalStyle(result);
-      const wrapper = document.createElement('modal-wrapper');
-      applyWrapperStyle(wrapper);
-      // START close
-      const closeBtn = document.createElement('button');
-      if (!persistent) {
-          closeBtn.className = 'close';
-          closeBtn.setAttribute('aria-label', getTranslation('close'));
-      }
-      // END close
-      // START header
-      const header = document.createElement('modal-header');
-      applyHeaderStyle(header);
-      if (title) {
-          if (titleStyle) {
-              header.classList.add(titleStyle);
-          }
-          const h3 = document.createElement('h3');
-          h3.textContent = title;
-          header.appendChild(h3);
-      }
-      // END header
-      // START content
-      const modalContent = document.createElement('jux-modal-content');
-      applyJuxModalContentStyle(modalContent);
-      if (content) {
-          modalContent.innerHTML = content;
-      }
-      else if (body) {
-          modalContent.appendChild(body);
-      }
-      // END content
-      // START footer
-      const footer = document.createElement('modal-footer');
-      if (btns.includes('cancel')) {
-          const cancelBtn = document.createElement('button');
-          cancelBtn.classList.add('secondary-button', 'modal-button', 'action', 'cancel-btn', 'cancel');
-          const cancelText = document.createElement('button-text');
-          cancelText.textContent = cancelTxt;
-          const cancelSpinner = document.createElement('loading-spinner');
-          cancelBtn.append(cancelText, cancelSpinner);
-          footer.appendChild(cancelBtn);
-      }
-      if (btns.includes('ok')) {
-          const okBtn = document.createElement('button');
-          okBtn.classList.add('primary-button', 'modal-button', 'action', 'ok');
-          const okText = document.createElement('button-text');
-          okText.textContent = okTxt;
-          const okSpinner = document.createElement('loading-spinner');
-          okBtn.append(okText, okSpinner);
-          footer.appendChild(okBtn);
-      }
-      // END footer
-      if (footer.hasChildNodes()) {
-          wrapper.append(closeBtn, header, modalContent, footer);
-      }
-      else {
-          wrapper.append(closeBtn, header, modalContent);
-      }
-      result.appendChild(wrapper);
-      if (!persistent) {
-          result.querySelector('.close').focus();
-      }
-      else {
-          if (btns.includes('ok')) {
-              result.querySelector('.ok').focus();
-          }
-      }
-      attachEventHandlers(result, persistent, onClose);
-      return result;
+  const onKeyDown = (ev, el, persitent, onClose) => {
+      if (ev.key === 'Escape') {
+          if (persitent) {
+              return;
+          }
+          close(el, onClose);
+      }
+      else if (ev.key === 'Enter') {
+          if (ev.target.id === 'members-textarea') {
+              return;
+          }
+          el.dispatchEvent(new CustomEvent('ok'));
+      }
+  };
+  const close = (el, onClose) => {
+      el.remove();
+      if (onClose) {
+          onClose();
+      }
+  };
+  const attachEventHandlers = (el, persitent, onClose) => {
+      const cancelButton = el.querySelector('.cancel');
+      cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.addEventListener('click', (_e) => {
+          el.dispatchEvent(new CustomEvent('cancel'));
+          if (el.hasAttribute('dont-remove')) {
+              return;
+          }
+          close(el, onClose);
+      });
+      const closeButton = el.querySelector('.close');
+      if (closeButton) {
+          closeButton.addEventListener('click', (_e) => {
+              close(el, onClose);
+          });
+      }
+      const okButton = el.querySelector('.ok');
+      okButton === null || okButton === void 0 ? void 0 : okButton.addEventListener('click', (_e) => {
+          el.dispatchEvent(new CustomEvent('ok'));
+      });
+      el.removeEventListener('keydown', (ev) => onKeyDown(ev, el, persitent, () => onClose));
+      el.addEventListener('keydown', (ev) => onKeyDown(ev, el, persitent, () => onClose));
+      el === null || el === void 0 ? void 0 : el.addEventListener('click', (e) => {
+          if (e.target === el) {
+              if (persitent) {
+                  return;
+              }
+              close(el, onClose);
+          }
+      });
+  };
+  // TODO: Mudar construtor para usar essa interface
+  // interface JuxModalOptions {
+  //   title?: string,
+  //   btns?: string[],
+  //   content?: string,
+  //   isPersistent?: boolean,
+  //   isBusy?: boolean,
+  //   body?: HTMLElement,
+  //   okTxt?: string,
+  //   cancelTxt?: string,
+  //   onClose?: any,
+  //   titleStyle?: string,
+  // }
+  const applyWrapperStyle = (wrapper) => {
+      wrapper.style.alignItems = 'center';
+      wrapper.style.backgroundColor = juxWhite;
+      wrapper.style.borderRadius = '.3125rem';
+      wrapper.style.boxShadow = `0 0 1.33rem ${juxDimmedBlack}`;
+      wrapper.style.boxSizing = 'content-box';
+      wrapper.style.display = 'flex';
+      wrapper.style.flexDirection = 'column';
+      wrapper.style.justifyContent = 'flex-start';
+      wrapper.style.margin = '0';
+      wrapper.style.maxHeight = '88%';
+      wrapper.style.maxWidth = '40%';
+      wrapper.style.minWidth = '20%';
+      wrapper.style.padding = '1.33rem';
+      wrapper.style.position = 'relative';
+  };
+  const applyModalStyle = (modal) => {
+      modal.style.alignItems = 'center';
+      modal.style.backgroundColor = juxDimmedBlack;
+      modal.style.display = 'flex';
+      modal.style.height = '100vh';
+      modal.style.justifyContent = 'center';
+      modal.style.left = '0';
+      modal.style.overflow = 'hidden';
+      modal.style.position = 'fixed';
+      modal.style.top = '0';
+      modal.style.width = '100%';
+      modal.style.zIndex = '9999';
+  };
+  const applyHeaderStyle = (header) => {
+      header.style.alignItems = 'center';
+      header.style.color = juxMediumGreen;
+      header.style.flexDirection = 'row';
+      header.style.fontSize = '16px';
+      header.style.fontWeight = '700';
+      header.style.justifyContent = 'space-between';
+      header.style.margin = '0';
+      header.style.display = 'flex';
+      header.style.position = 'relative';
+      header.style.width = '100%';
+  };
+  const applyJuxModalContentStyle = (el) => {
+      el.style.display = 'flex';
+      el.style.position = 'relative';
+      el.style.width = '100%';
+      el.style.flexFlow = 'column';
+      el.style.marginTop = '1.33rem';
+      el.style.rowGap = '8px';
+  };
+  const juxModal = (title, btns = ['ok', 'cancel'], content = '', persistent = false, _busy = false, body, okTxt = getTranslation('alert-ok-btn-txt'), cancelTxt = getTranslation('alert-cancel-btn-txt'), onClose, titleStyle) => {
+      const result = document.createElement('jux-modal');
+      applyModalStyle(result);
+      const wrapper = document.createElement('modal-wrapper');
+      applyWrapperStyle(wrapper);
+      // START close
+      const closeBtn = document.createElement('button');
+      if (!persistent) {
+          closeBtn.className = 'close';
+          closeBtn.setAttribute('aria-label', getTranslation('close'));
+      }
+      // END close
+      // START header
+      const header = document.createElement('modal-header');
+      applyHeaderStyle(header);
+      if (title) {
+          if (titleStyle) {
+              header.classList.add(titleStyle);
+          }
+          const h3 = document.createElement('h3');
+          h3.textContent = title;
+          header.appendChild(h3);
+      }
+      // END header
+      // START content
+      const modalContent = document.createElement('jux-modal-content');
+      applyJuxModalContentStyle(modalContent);
+      if (content) {
+          modalContent.innerHTML = content;
+      }
+      else if (body) {
+          modalContent.appendChild(body);
+      }
+      // END content
+      // START footer
+      const footer = document.createElement('modal-footer');
+      if (btns.includes('cancel')) {
+          const cancelBtn = document.createElement('button');
+          cancelBtn.classList.add('secondary-button', 'modal-button', 'action', 'cancel-btn', 'cancel');
+          const cancelText = document.createElement('button-text');
+          cancelText.textContent = cancelTxt;
+          const cancelSpinner = document.createElement('loading-spinner');
+          cancelBtn.append(cancelText, cancelSpinner);
+          footer.appendChild(cancelBtn);
+      }
+      if (btns.includes('ok')) {
+          const okBtn = document.createElement('button');
+          okBtn.classList.add('primary-button', 'modal-button', 'action', 'ok');
+          const okText = document.createElement('button-text');
+          okText.textContent = okTxt;
+          const okSpinner = document.createElement('loading-spinner');
+          okBtn.append(okText, okSpinner);
+          footer.appendChild(okBtn);
+      }
+      // END footer
+      if (footer.hasChildNodes()) {
+          wrapper.append(closeBtn, header, modalContent, footer);
+      }
+      else {
+          wrapper.append(closeBtn, header, modalContent);
+      }
+      result.appendChild(wrapper);
+      if (!persistent) {
+          result.querySelector('.close').focus();
+      }
+      else {
+          if (btns.includes('ok')) {
+              result.querySelector('.ok').focus();
+          }
+      }
+      attachEventHandlers(result, persistent, onClose);
+      return result;
   };
 
-  const contactField = (tag = 'input', elType, elName, required = true, value) => {
-      const result = document.createElement('contact-field');
-      const elId = 'contact-' + elName;
-      const label = document.createElement('label');
-      label.textContent = getTranslation(elId + '-label');
-      label.htmlFor = elId;
-      const el = document.createElement(tag);
-      el.id = elId;
-      el.setAttribute('name', elName);
-      el.setAttribute('placeholder', getTranslation(elId + '-placeholder'));
-      if (tag === 'input') {
-          el.setAttribute('type', elType);
-      }
-      if (required) {
-          el.setAttribute('required', 'true');
-      }
-      if (value) {
-          el.setAttribute('value', value);
-      }
-      result.append(label, el);
-      return result;
+  const contactField = (tag = 'input', elType, elName, required = true, value) => {
+      const result = document.createElement('contact-field');
+      const elId = 'contact-' + elName;
+      const label = document.createElement('label');
+      label.textContent = getTranslation(elId + '-label');
+      label.htmlFor = elId;
+      const el = document.createElement(tag);
+      el.id = elId;
+      el.setAttribute('name', elName);
+      el.setAttribute('placeholder', getTranslation(elId + '-placeholder'));
+      if (tag === 'input') {
+          el.setAttribute('type', elType);
+      }
+      if (required) {
+          el.setAttribute('required', 'true');
+      }
+      if (value) {
+          el.setAttribute('value', value);
+      }
+      result.append(label, el);
+      return result;
   };
 
-  const getNestedElValue = (el, nestedTag) => {
-      const nestedEl = el.querySelector(nestedTag);
-      return nestedEl.value;
-  };
-  const sendInquiry = (name, email, msg, whatsapp, subject, token) => {
-      const inquiryPayload = {
-          subject: `[${subject.charAt(0).toUpperCase()}${subject.slice(1)}] ${getNestedElValue(name, 'input')}`,
+  const getNestedElValue = (el, nestedTag) => {
+      const nestedEl = el.querySelector(nestedTag);
+      return nestedEl.value;
+  };
+  const sendInquiry = (name, email, msg, whatsapp, subject, token) => {
+      const inquiryPayload = {
+          subject: `[${subject.charAt(0).toUpperCase()}${subject.slice(1)}] ${getNestedElValue(name, 'input')}`,
           body: `<strong>Name</strong>: ${getNestedElValue(name, 'input')}<br><br>
 <strong>E-mail</strong>: ${getNestedElValue(email, 'input')}<br><br>
 <strong>Whatsapp</strong>: ${getNestedElValue(whatsapp, 'input')}<br><br>
-<strong>Message</strong>: ${getNestedElValue(msg, 'textarea')}`,
-          token,
-      };
-      backendPost('contact-us', JSON.stringify(inquiryPayload), (_res) => {
-          var _a;
-          // success(getTranslation('form-success'), Length.long);
-          (_a = document.querySelector('#contact-us-modal')) === null || _a === void 0 ? void 0 : _a.remove();
-      }, () => { } // TODO: change it to be an error handling fn provided by the client
-      );
-      // checkMixpanel(() => mixpanel.track('Sent Contact Inquiry', {}));
-  };
-  const contactUsModal = (subject) => {
-      var _a, _b, _c, _d, _e;
-      const result = document.createElement('contact-us-modal');
-      // @ts-ignore
-      const currentName = window.store.currentUser ? window.store.currentUser.name : '';
-      // @ts-ignore
-      const currentEmail = window.store.currentUser ? window.store.currentUser.email : (_a = document.querySelector('#magic-link-email')) === null || _a === void 0 ? void 0 : _a.textContent;
-      const modalBody = document.createElement('modal-body');
-      const form = document.createElement('form');
-      form.id = 'contact-form';
-      const nameField = contactField('input', 'text', 'name', true, currentName);
-      const emailField = contactField('input', 'email', 'email', true, currentEmail);
-      const messageField = contactField('textarea', 'text', 'message', true);
-      const whatsappField = contactField('input', 'tel', 'whatsapp', false);
-      const btn = document.createElement('button');
-      btn.textContent = getTranslation('contact-submit');
-      btn.className = 'primary-button';
-      form.append(nameField, emailField, whatsappField, messageField, btn);
-      modalBody.appendChild(form);
-      const modal = juxModal(getTranslation('contact-page'), [], '', false, false, modalBody, '', '', () => result.remove());
-      modal.id = 'contact-us-modal';
-      document.body.appendChild(modal);
-      (_b = modal.querySelector('modal-wrapper')) === null || _b === void 0 ? void 0 : _b.setAttribute('style', 'max-width: 680px; width: 100%; overflow-y: auto;');
-      const captcha = googleCaptcha();
-      if (subject !== 'email-not-sent') {
-          // @ts-ignore
-          const admin = ((_d = (_c = window.store) === null || _c === void 0 ? void 0 : _c.selectedTeam) === null || _d === void 0 ? void 0 : _d.admin) || window.store.currentUser.email;
-          backendGet(`credits-balance-for?admin=${admin}`, null, (res) => {
-              const balance = res;
-              if (balance <= 0) {
-                  form.insertBefore(captcha, btn);
-              }
-          }, () => { } // TODO: change it to be an error handling fn provided by the client
-          );
-      }
-      else {
-          form.insertBefore(captcha, btn);
-      }
-      (_e = nameField.querySelector('input')) === null || _e === void 0 ? void 0 : _e.select();
-      form.addEventListener('submit', (event) => {
-          event.preventDefault();
-          sendInquiry(nameField, emailField, messageField, whatsappField, subject, captcha.getAttribute('token'));
-      });
-      return result;
+<strong>Message</strong>: ${getNestedElValue(msg, 'textarea')}`,
+          token,
+      };
+      backendPost('contact-us', inquiryPayload, (_res) => {
+          var _a;
+          // success(getTranslation('form-success'), Length.long);
+          (_a = document.querySelector('#contact-us-modal')) === null || _a === void 0 ? void 0 : _a.remove();
+      }, () => { } // TODO: change it to be an error handling fn provided by the client
+      );
+      // checkMixpanel(() => mixpanel.track('Sent Contact Inquiry', {}));
+  };
+  const contactUsModal = (subject) => {
+      var _a, _b, _c, _d, _e;
+      const result = document.createElement('contact-us-modal');
+      // @ts-ignore
+      const currentName = window.store.currentUser ? window.store.currentUser.name : '';
+      // @ts-ignore
+      const currentEmail = window.store.currentUser ? window.store.currentUser.email : (_a = document.querySelector('#magic-link-email')) === null || _a === void 0 ? void 0 : _a.textContent;
+      const modalBody = document.createElement('modal-body');
+      const form = document.createElement('form');
+      form.id = 'contact-form';
+      const nameField = contactField('input', 'text', 'name', true, currentName);
+      const emailField = contactField('input', 'email', 'email', true, currentEmail);
+      const messageField = contactField('textarea', 'text', 'message', true);
+      const whatsappField = contactField('input', 'tel', 'whatsapp', false);
+      const btn = document.createElement('button');
+      btn.textContent = getTranslation('contact-submit');
+      btn.className = 'primary-button';
+      form.append(nameField, emailField, whatsappField, messageField, btn);
+      modalBody.appendChild(form);
+      const modal = juxModal(getTranslation('contact-page'), [], '', false, false, modalBody, '', '', () => result.remove());
+      modal.id = 'contact-us-modal';
+      document.body.appendChild(modal);
+      (_b = modal.querySelector('modal-wrapper')) === null || _b === void 0 ? void 0 : _b.setAttribute('style', 'max-width: 680px; width: 100%; overflow-y: auto;');
+      const captcha = googleCaptcha();
+      if (subject !== 'email-not-sent') {
+          // @ts-ignore
+          const admin = ((_d = (_c = window.store) === null || _c === void 0 ? void 0 : _c.selectedTeam) === null || _d === void 0 ? void 0 : _d.admin) || window.store.currentUser.email;
+          backendGet('credits-balance-for', { admin }, (res) => {
+              const balance = res;
+              if (balance <= 0) {
+                  form.insertBefore(captcha, btn);
+              }
+          }, () => { } // TODO: change it to be an error handling fn provided by the client
+          );
+      }
+      else {
+          form.insertBefore(captcha, btn);
+      }
+      (_e = nameField.querySelector('input')) === null || _e === void 0 ? void 0 : _e.select();
+      form.addEventListener('submit', (event) => {
+          event.preventDefault();
+          sendInquiry(nameField, emailField, messageField, whatsappField, subject, captcha.getAttribute('token'));
+      });
+      return result;
   };
 
-  const applyContainerStyles = (container) => {
-      container.style.backgroundColor = '#ffffffdd';
-      container.style.borderRadius = '16px';
-      container.style.inset = '50% 50% 50% 0';
-      container.style.position = 'relative';
-      container.style.transform = 'translateY(-50%)';
-      container.style.width = '620px';
-      container.style.alignItems = 'center';
-      container.style.display = 'flex';
-      container.style.flexDirection = 'column';
-      container.style.fontSize = '16px';
-      container.style.height = '100%';
-      container.style.justifyContent = 'center';
-      container.style.margin = '0 auto';
-      container.style.paddingTop = '0';
-  };
-  const applyPageStyles = (page, backgroundImg) => {
-      page.style.backgroundImage = `url(${backgroundImg})`;
-      page.style.backgroundPosition = '50%';
-      page.style.backgroundSize = 'cover';
-      page.style.display = 'block';
-      page.style.height = '100%';
-  };
-  const basePage = (pageName, backgroundImg, content) => {
-      const result = document.createElement(pageName);
-      result.className = 'base-login-page';
-      applyPageStyles(result, backgroundImg);
-      const section = document.createElement('section');
-      applyContainerStyles(section);
-      content.forEach(element => section.appendChild(element));
-      result.appendChild(section);
-      return result;
+  const applyContainerStyles = (container) => {
+      container.style.backgroundColor = '#ffffffdd';
+      container.style.borderRadius = '16px';
+      container.style.inset = '50% 50% 50% 0';
+      container.style.position = 'relative';
+      container.style.transform = 'translateY(-50%)';
+      container.style.width = '620px';
+      container.style.alignItems = 'center';
+      container.style.display = 'flex';
+      container.style.flexDirection = 'column';
+      container.style.fontSize = '16px';
+      container.style.height = '100%';
+      container.style.justifyContent = 'center';
+      container.style.margin = '0 auto';
+      container.style.paddingTop = '0';
+  };
+  const applyPageStyles = (page, backgroundImg) => {
+      page.style.backgroundImage = `url(${backgroundImg})`;
+      page.style.backgroundPosition = '50%';
+      page.style.backgroundSize = 'cover';
+      page.style.display = 'block';
+      page.style.height = '100%';
+  };
+  const basePage = (pageName, backgroundImg, content) => {
+      const result = document.createElement(pageName);
+      result.className = 'base-login-page';
+      applyPageStyles(result, backgroundImg);
+      const section = document.createElement('section');
+      applyContainerStyles(section);
+      content.forEach(element => section.appendChild(element));
+      result.appendChild(section);
+      return result;
   };
 
-  const applyBtnStyles = (btn) => {
-      btn.style.cursor = 'pointer';
-      btn.style.textDecoration = 'underline';
-      btn.style.border = 'none';
-      btn.style.backgroundColor = '';
-      btn.style.background = 'none';
-      btn.style.boxSizing = 'border-box';
-      btn.style.margin = '0';
-      btn.style.outline = 'none';
-      btn.style.padding = '0';
-      btn.style.whiteSpace = 'normal';
-      btn.style.font = 'inherit';
-  };
-  const magicLinkRequestedPage = (backgroundImg, onReturn) => {
-      const content = [];
-      const sent = document.createElement('p');
-      sent.id = 'magic-link-sent';
-      sent.textContent = getTranslation(sent.id);
-      sent.style.marginBottom = '10px';
-      const email = document.createElement('p');
-      email.id = 'magic-link-email';
-      email.style.fontWeight = '700';
-      email.style.marginBottom = '10px';
-      const howTo = document.createElement('p');
-      howTo.id = 'magic-link-how-to';
-      howTo.innerHTML = getTranslation(howTo.id);
-      howTo.style.padding = '0 30px';
-      howTo.style.textAlign = 'center';
-      const btn = document.createElement('button');
-      btn.id = 'email-not-received-btn';
-      btn.addEventListener('click', () => document.body.appendChild(contactUsModal('email-not-sent')));
-      btn.textContent = getTranslation('magic-link-let-us-know');
-      applyBtnStyles(btn);
-      const returnLink = document.createElement('a');
-      returnLink.textContent = getTranslation('return-link');
-      returnLink.onclick = () => {
-          result.remove();
-          onReturn();
-      };
-      returnLink.style.marginTop = '32px';
-      returnLink.style.cursor = 'pointer';
-      returnLink.style.fontWeight = '700';
-      returnLink.style.textDecoration = 'underline';
-      content.push(sent, email, howTo, btn, returnLink);
-      const result = basePage('magic-link-requested-page', backgroundImg, content);
-      return result;
+  const applyBtnStyles = (btn) => {
+      btn.style.cursor = 'pointer';
+      btn.style.textDecoration = 'underline';
+      btn.style.border = 'none';
+      btn.style.backgroundColor = '';
+      btn.style.background = 'none';
+      btn.style.boxSizing = 'border-box';
+      btn.style.margin = '0';
+      btn.style.outline = 'none';
+      btn.style.padding = '0';
+      btn.style.whiteSpace = 'normal';
+      btn.style.font = 'inherit';
+  };
+  const magicLinkRequestedPage = (backgroundImg, onReturn) => {
+      const content = [];
+      const sent = document.createElement('p');
+      sent.id = 'magic-link-sent';
+      sent.textContent = getTranslation(sent.id);
+      sent.style.marginBottom = '10px';
+      const email = document.createElement('p');
+      email.id = 'magic-link-email';
+      email.style.fontWeight = '700';
+      email.style.marginBottom = '10px';
+      const howTo = document.createElement('p');
+      howTo.id = 'magic-link-how-to';
+      howTo.innerHTML = getTranslation(howTo.id);
+      howTo.style.padding = '0 30px';
+      howTo.style.textAlign = 'center';
+      const btn = document.createElement('button');
+      btn.id = 'email-not-received-btn';
+      btn.addEventListener('click', () => document.body.appendChild(contactUsModal('email-not-sent')));
+      btn.textContent = getTranslation('magic-link-let-us-know');
+      applyBtnStyles(btn);
+      const returnLink = document.createElement('a');
+      returnLink.textContent = getTranslation('return-link');
+      returnLink.onclick = () => {
+          result.remove();
+          onReturn();
+      };
+      returnLink.style.marginTop = '32px';
+      returnLink.style.cursor = 'pointer';
+      returnLink.style.fontWeight = '700';
+      returnLink.style.textDecoration = 'underline';
+      content.push(sent, email, howTo, btn, returnLink);
+      const result = basePage('magic-link-requested-page', backgroundImg, content);
+      return result;
   };
 
-  const unauthorizedMagicLinkRequestPage = (backgroundImg, onReturn) => {
-      const content = [];
-      const notSent = document.createElement('p');
-      notSent.id = 'magic-link-not-sent';
-      notSent.textContent = getTranslation(notSent.id);
-      notSent.style.marginBottom = '10px';
-      const email = document.createElement('p');
-      email.id = 'magic-link-email';
-      email.style.fontWeight = '700';
-      email.style.marginBottom = '10px';
-      const info = document.createElement('p');
-      info.id = 'magic-link-fail-info';
-      info.innerHTML = getTranslation(info.id);
-      info.style.padding = '0 30px';
-      info.style.textAlign = 'center';
-      const back = document.createElement('a');
-      back.textContent = getTranslation('return-link');
-      back.onclick = () => {
-          result.remove();
-          onReturn();
-      };
-      back.style.marginTop = '32px';
-      back.style.cursor = 'pointer';
-      back.style.fontWeight = '700';
-      back.style.textDecoration = 'underline';
-      content.push(notSent, email, info, back);
-      const result = basePage('unauthorized-magic-link-request-page', backgroundImg, content);
-      return result;
+  const unauthorizedMagicLinkRequestPage = (backgroundImg, onReturn) => {
+      const content = [];
+      const notSent = document.createElement('p');
+      notSent.id = 'magic-link-not-sent';
+      notSent.textContent = getTranslation(notSent.id);
+      notSent.style.marginBottom = '10px';
+      const email = document.createElement('p');
+      email.id = 'magic-link-email';
+      email.style.fontWeight = '700';
+      email.style.marginBottom = '10px';
+      const info = document.createElement('p');
+      info.id = 'magic-link-fail-info';
+      info.innerHTML = getTranslation(info.id);
+      info.style.padding = '0 30px';
+      info.style.textAlign = 'center';
+      const back = document.createElement('a');
+      back.textContent = getTranslation('return-link');
+      back.onclick = () => {
+          result.remove();
+          onReturn();
+      };
+      back.style.marginTop = '32px';
+      back.style.cursor = 'pointer';
+      back.style.fontWeight = '700';
+      back.style.textDecoration = 'underline';
+      content.push(notSent, email, info, back);
+      const result = basePage('unauthorized-magic-link-request-page', backgroundImg, content);
+      return result;
   };
 
-  const setBackendToken = (token) => {
-      // @ts-ignore
-      window.store.backendToken = token;
-      if (token) {
-          localStorage.setItem('token', token);
-      }
-  };
-  const getBackendToken = () => {
-      var _a;
-      const token = (_a = localStorage.getItem('token')) !== null && _a !== void 0 ? _a : '';
-      // @ts-ignore
-      window.store.backendToken = token;
-      return token;
-  };
-  const onTokenAcquired = (token, onUserLogin) => {
-      setBackendToken(token);
-      // setSuperToken();
-      onUserLogin();
-  };
-  const clearSession = () => {
-      // onUserChanged(null);
-      localStorage.clear();
-      // @ts-ignore
-      window.store = {};
-  };
-  const onAuthenticationFailure = (msg) => {
-      localStorage.removeItem('token');
-      // displayPage(Page.LOGIN);
-      alert(getTranslation(msg));
-  };
-  const onAuthentication = (onUserLogin, user, type) => {
-      if ((user.token && getBackendToken()) && getBackendToken() !== user.token) {
-          clearSession();
-      }
-      // @ts-ignore
-      window.store.currentUser = user;
-      if (type === 'Token Authentication') {
-          user.token = localStorage.getItem('token');
-      }
-      onTokenAcquired(user.token, onUserLogin);
-      // mixpanelIdentify(user);
-      // checkMixpanel(() => mixpanel.track('Login', { 'Login Type': type }));
-  };
-  const displayPage = (clientApp, page) => {
-      Array.from(clientApp.children).forEach(el => el.remove());
-      clientApp.appendChild(page);
-  };
-  const setJuxEventHandler = () => {
-      document.removeEventListener('jux-event', handleJuxEvents);
-      document.addEventListener('jux-event', handleJuxEvents);
-  };
-  const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
-      // if (startNewDemo()) {
-      //   initDemo(setBackendToken, onAuthentication);
-      //   return;
-      // }
-      // @ts-ignore
-      if (!window.store) {
-          // @ts-ignore
-          window.store = {};
-      }
-      // @ts-ignore
-      window.store.fetchUserBackendUrl = fetchUserBackendUrl;
-      // @ts-ignore
-      window.store.magicLinkRequestEndpoint = magicLinkRequestEndpoint;
-      // @ts-ignore
-      window.store.magicLinkAuthEndpoint = magicLinkAuthEndpoint;
-      // TODO: use jux-events to call commands and queries
-      setJuxEventHandler();
-      const signInToken = extractTokenFromWindowLocation('sign-in') || extractTokenFromWindowLocation('magic-link');
-      if (signInToken) {
-          const onOpenMagicLink = () => {
-              openMagicLink(signInToken, (res) => onAuthentication(onUserLogin, res, 'Magic Link'), () => onAuthenticationFailure('unable-magic-login'));
-          };
-          const host = extractTokenFromWindowLocation('host');
-          if (host) {
-              // @ts-ignore
-              window.store.fetchUserBackendUrl({ host }, (backendUrl) => {
-                  setBackendUrl(backendUrl);
-                  onOpenMagicLink();
-              });
-              return;
-          }
-          onOpenMagicLink();
-          return;
-      }
-      if (getBackendToken()) {
-          backendGet('profile', null, (res) => onAuthentication(onUserLogin, res, 'Token Authentication'), (_err) => onAuthenticationFailure('login-failed'));
-          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'));
-  };
-  const onMicrosoftSignIn = (onUserLogin) => __awaiter$2(void 0, void 0, void 0, function* () {
-      const msalConfig = { auth: { clientId: process.env.MICROSOFT_CLIENT_ID } };
-      const msalInstance = new PublicClientApplication(msalConfig);
-      const loginRequest = { scopes: ['user.read'] };
-      enableSignInLayout();
-      try {
-          const loginResponse = yield msalInstance.loginPopup(loginRequest);
-          const { accessToken } = loginResponse;
-          const onSuccess = (res) => {
-              const { token } = res;
-              // @ts-ignore
-              window.store.currentUser = res;
-              onTokenAcquired(token, onUserLogin);
-              disableSignInLayout();
-          };
-          const onError = (err) => {
-              console.error(err);
-              reportError(err);
-              disableSignInLayout();
-          };
-          microsoftLogin(accessToken, onSuccess, onError);
-      }
-      catch (err) {
-          reportError(err);
-          disableSignInLayout();
-      }
-  });
-  const onCookieError = () => {
-      disableSignInLayout();
-      // warning('cookie-error'); TODO
-      return;
-  };
-  const onGoogleSignIn = (onUserLogin) => {
-      validateThirdPartyCookies(() => {
-          enableSignInLayout();
-          authSignIn(onUserLogin);
-      }, onCookieError);
-  };
-  const handleMagicLinkRequest = (token, onReturn, backgroundImage, currentPage, clientBody, email = '') => {
-      if (!email) {
-          const mailMagic = document.querySelector('#mail-magic');
-          email = mailMagic.value;
-      }
-      const payload = { email, token };
-      const onRequestMagicLink = () => {
-          const onResponse = (page) => {
-              currentPage.remove();
-              clientBody.appendChild(page);
-              const magicLinkEmail = page.querySelector('#magic-link-email');
-              magicLinkEmail.textContent = email;
-          };
-          const onSuccess = () => onResponse(magicLinkRequestedPage(backgroundImage, onReturn));
-          const onUnauthorized = () => onResponse(unauthorizedMagicLinkRequestPage(backgroundImage, onReturn));
-          requestMagicLink(payload, onSuccess, onUnauthorized);
-      };
-      // @ts-ignore
-      if (window.store.fetchUserBackendUrl) {
-          // @ts-ignore
-          window.store.fetchUserBackendUrl({ email }, (backendUrl) => {
-              setBackendUrl(backendUrl);
-              onRequestMagicLink();
-          });
-          return;
-      }
-      onRequestMagicLink();
+  const setBackendToken = (token) => {
+      // @ts-ignore
+      window.store.backendToken = token;
+      if (token) {
+          localStorage.setItem('token', token);
+      }
+  };
+  const getBackendToken = () => {
+      var _a;
+      const token = (_a = localStorage.getItem('token')) !== null && _a !== void 0 ? _a : '';
+      // @ts-ignore
+      window.store.backendToken = token;
+      return token;
+  };
+  const onTokenAcquired = (token, onUserLogin) => {
+      setBackendToken(token);
+      // setSuperToken();
+      onUserLogin();
+  };
+  const clearSession = () => {
+      // onUserChanged(null);
+      // TODO: find a better way to preserve backend-url
+      const backendUrl = getBackendUrl(); // Preserve backend, since the authentication was succcessfull
+      localStorage.clear();
+      setBackendUrl(backendUrl);
+      // @ts-ignore
+      window.store = {};
+  };
+  const onAuthenticationFailure = (msg) => {
+      localStorage.removeItem('token');
+      // displayPage(Page.LOGIN);
+      alert(getTranslation(msg));
+  };
+  const onAuthentication = (onUserLogin, user, type) => {
+      if ((user.token && getBackendToken()) && getBackendToken() !== user.token) {
+          clearSession();
+      }
+      // @ts-ignore
+      window.store.currentUser = user;
+      if (type === 'Token Authentication') {
+          user.token = localStorage.getItem('token');
+      }
+      onTokenAcquired(user.token, onUserLogin);
+      // mixpanelIdentify(user);
+      // checkMixpanel(() => mixpanel.track('Login', { 'Login Type': type }));
+  };
+  const displayPage = (clientApp, page) => {
+      Array.from(clientApp.children).forEach(el => el.remove());
+      clientApp.appendChild(page);
+  };
+  const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
+      // if (startNewDemo()) {
+      //   initDemo(setBackendToken, onAuthentication);
+      //   return;
+      // }
+      // @ts-ignore
+      if (!window.store) {
+          // @ts-ignore
+          window.store = {};
+      }
+      // @ts-ignore
+      window.store.fetchUserBackendUrl = fetchUserBackendUrl;
+      // @ts-ignore
+      window.store.magicLinkRequestEndpoint = magicLinkRequestEndpoint;
+      // @ts-ignore
+      window.store.magicLinkAuthEndpoint = magicLinkAuthEndpoint;
+      const signInToken = extractTokenFromWindowLocation('sign-in') || extractTokenFromWindowLocation('magic-link');
+      if (signInToken) {
+          const onOpenMagicLink = () => {
+              openMagicLink(signInToken, (res) => onAuthentication(onUserLogin, res, 'Magic Link'), () => onAuthenticationFailure('unable-magic-login'));
+          };
+          const host = extractTokenFromWindowLocation('host');
+          if (host) {
+              // @ts-ignore
+              window.store.fetchUserBackendUrl({ host }, (backendUrl) => {
+                  setBackendUrl(backendUrl);
+                  onOpenMagicLink();
+              });
+              return;
+          }
+          onOpenMagicLink();
+          return;
+      }
+      if (getBackendToken()) {
+          backendGet('profile', null, (res) => onAuthentication(onUserLogin, res, 'Token Authentication'), (_err) => onAuthenticationFailure('login-failed'));
+          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'));
+  };
+  const onMicrosoftSignIn = (onUserLogin) => __awaiter$2(void 0, void 0, void 0, function* () {
+      const msalConfig = { auth: { clientId: process.env.MICROSOFT_CLIENT_ID } };
+      const msalInstance = new PublicClientApplication(msalConfig);
+      const loginRequest = { scopes: ['user.read'] };
+      enableSignInLayout();
+      try {
+          const loginResponse = yield msalInstance.loginPopup(loginRequest);
+          const { accessToken } = loginResponse;
+          const onSuccess = (res) => {
+              const { token } = res;
+              // @ts-ignore
+              window.store.currentUser = res;
+              onTokenAcquired(token, onUserLogin);
+              disableSignInLayout();
+          };
+          const onError = (err) => {
+              console.error(err);
+              reportError(err);
+              disableSignInLayout();
+          };
+          microsoftLogin(accessToken, onSuccess, onError);
+      }
+      catch (err) {
+          reportError(err);
+          disableSignInLayout();
+      }
+  });
+  const onCookieError = () => {
+      disableSignInLayout();
+      // warning('cookie-error'); TODO
+      return;
+  };
+  const onGoogleSignIn = (onUserLogin) => {
+      validateThirdPartyCookies(() => {
+          enableSignInLayout();
+          authSignIn(onUserLogin);
+      }, onCookieError);
+  };
+  const handleMagicLinkRequest = (token, onReturn, backgroundImage, currentPage, clientBody, email = '') => {
+      if (!email) {
+          const mailMagic = document.querySelector('#mail-magic');
+          email = mailMagic.value;
+      }
+      const payload = { email, token };
+      const onRequestMagicLink = () => {
+          const onResponse = (page) => {
+              currentPage.remove();
+              clientBody.appendChild(page);
+              const magicLinkEmail = page.querySelector('#magic-link-email');
+              magicLinkEmail.textContent = email;
+          };
+          const onSuccess = () => onResponse(magicLinkRequestedPage(backgroundImage, onReturn));
+          const onUnauthorized = () => onResponse(unauthorizedMagicLinkRequestPage(backgroundImage, onReturn));
+          requestMagicLink(payload, onSuccess, onUnauthorized);
+      };
+      // @ts-ignore
+      if (window.store.fetchUserBackendUrl) {
+          // @ts-ignore
+          window.store.fetchUserBackendUrl({ email }, (backendUrl) => {
+              setBackendUrl(backendUrl);
+              onRequestMagicLink();
+          });
+          return;
+      }
+      onRequestMagicLink();
   };
 
-  const socialLoginModal = (userEmail, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal) => {
-      const result = document.createElement('social-login-modal');
-      const email = document.createElement('p');
-      email.textContent = `"${userEmail}"`;
-      const msg = document.createElement('social-login-msg');
-      msg.textContent = getTranslation('social-login-recommendation') + mailExchanger + '.' + getTranslation('social-login-advantage');
-      const body = document.createElement('social-login-body');
-      const socialLoginBtn = mailExchanger === 'Microsoft' ?
-          loginButton('Microsoft', () => onMicrosoftSignIn(onUserLogin)) :
-          loginButton('Google', () => onGoogleSignIn(onUserLogin));
-      const proceedMagicLinkRequest = document.createElement('a');
-      proceedMagicLinkRequest.textContent = getTranslation('proceed-magic-link-request');
-      proceedMagicLinkRequest.addEventListener('click', () => {
-          handleMagicLinkRequest(token, onReturn, backgroundImage, currentPage, clientBody, userEmail);
-          closeMagicLinkModal();
-          result.remove();
-      });
-      body.append(email, msg, socialLoginBtn, proceedMagicLinkRequest);
-      const modal = juxModal(getTranslation(`using-${mailExchanger.toLowerCase()}-email`), [], '', false, false, body, '', '', () => result.remove());
-      modal.setAttribute('data-cy', 'social-login-modal');
-      result.appendChild(modal);
-      const wrapper = modal.querySelector('modal-wrapper');
-      wrapper.style.maxWidth = '360px';
-      wrapper.style.width = '100%';
-      return result;
+  const socialLoginModal = (userEmail, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal) => {
+      const result = document.createElement('social-login-modal');
+      const email = document.createElement('p');
+      email.textContent = `"${userEmail}"`;
+      const msg = document.createElement('social-login-msg');
+      msg.textContent = getTranslation('social-login-recommendation') + mailExchanger + '.' + getTranslation('social-login-advantage');
+      const body = document.createElement('social-login-body');
+      const socialLoginBtn = mailExchanger === 'Microsoft' ?
+          loginButton('Microsoft', () => onMicrosoftSignIn(onUserLogin)) :
+          loginButton('Google', () => onGoogleSignIn(onUserLogin));
+      const proceedMagicLinkRequest = document.createElement('a');
+      proceedMagicLinkRequest.textContent = getTranslation('proceed-magic-link-request');
+      proceedMagicLinkRequest.addEventListener('click', () => {
+          handleMagicLinkRequest(token, onReturn, backgroundImage, currentPage, clientBody, userEmail);
+          closeMagicLinkModal();
+          result.remove();
+      });
+      body.append(email, msg, socialLoginBtn, proceedMagicLinkRequest);
+      const modal = juxModal(getTranslation(`using-${mailExchanger.toLowerCase()}-email`), [], '', false, false, body, '', '', () => result.remove());
+      modal.setAttribute('data-cy', 'social-login-modal');
+      result.appendChild(modal);
+      const wrapper = modal.querySelector('modal-wrapper');
+      wrapper.style.maxWidth = '360px';
+      wrapper.style.width = '100%';
+      return result;
   };
 
-  const isValidEmail = (email) => {
-      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      return re.test(email);
+  const isValidEmail = (email) => {
+      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      return re.test(email);
   };
 
-  const recommendSocialLogin = (userEmail, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal) => {
-      var _a;
-      (_a = document.querySelector('magic-link-modal')) === null || _a === void 0 ? void 0 : _a.remove();
-      document.body.appendChild(socialLoginModal(userEmail, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal));
-  };
-  const hasProvider = (data, provider) => {
-      return data.some((entry) => entry.includes(provider));
-  };
-  const getMailExchanger = (domainName) => __awaiter$2(void 0, void 0, void 0, function* () {
-      const data = yield getMXData(domainName);
-      if (!data) {
-          return null;
-      }
-      if (hasProvider(data, 'outlook.com')) {
-          return 'Microsoft';
-      }
-      if (hasProvider(data, 'google.com')) {
-          return 'Google';
-      }
-      return null;
-  });
-  const onMagicLinkRequest = (token, input, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes) => __awaiter$2(void 0, void 0, void 0, function* () {
-      const email = input.value;
-      if (!email.includes('-test@') && !token) {
-          console.error('invalid-captcha-response');
-          // logError('invalid-captcha-response');
-          return;
-      }
-      if (isValidEmail(email)) {
-          const domain = email.split('@')[1] || '';
-          const mailExchanger = yield getMailExchanger(domain);
-          const supportedMailExchanger = mailExchanger !== null;
-          if (supportedMailExchanger && loginTypes.includes(mailExchanger)) {
-              recommendSocialLogin(email, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal);
-              return;
-          }
-      }
-      handleMagicLinkRequest(token, onReturn, backgroundImage, currentPage, clientBody);
-      closeMagicLinkModal();
-  });
-  const applyMagicEmailFieldStyle = (el) => {
-      el.style.display = 'flex';
-      el.style.flexFlow = 'column';
-      el.style.marginTop = '8px';
-      el.style.rowGap = '8px';
-      el.style.width = '100%';
-  };
-  const applyInputStyle = (input) => {
-      input.style.border = `1px solid ${juxDarkGrey}`;
-      input.style.maxWidth = '390px';
-      input.style.padding = '10px';
-      input.style.width = '100%';
-      input.style.backgroundColor = juxWhite;
-      input.style.borderRadius = '8px';
-      input.style.boxShadow = `inset 0 2px 3px ${juxDimmedDarkGrey}`;
-      input.style.height = '40px';
-      input.style.whiteSpace = 'pre-line';
-      input.style.boxSizing = 'border-box';
-  };
-  const applyBtnStyle = (btn) => {
-      btn.style.alignSelf = 'flex-end';
-      btn.style.backgroundColor = juxLightGreen;
-      btn.style.border = `2px solid ${juxLightGreen}`;
-      btn.style.borderRadius = '8px';
-      btn.style.color = juxWhite;
-      btn.style.cursor = 'pointer';
-      btn.style.display = 'inline-block';
-      btn.style.fontWeight = '700';
-      btn.style.height = '40px';
-      btn.style.lineHeight = '1';
-      btn.style.marginLeft = '10px';
-      btn.style.padding = '10px 16px';
-      btn.style.position = 'relative';
-  };
-  const magicEmailField = (onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes) => {
-      const result = document.createElement('magic-email-field');
-      applyMagicEmailFieldStyle(result);
-      const captcha = googleCaptcha();
-      const input = document.createElement('input');
-      input.id = 'mail-magic';
-      input.type = 'text';
-      input.className = 'textfield';
-      input.placeholder = 'e-mail';
-      applyInputStyle(input);
-      input.addEventListener('keydown', (ev) => {
-          if (ev.key === 'Enter') {
-              onMagicLinkRequest(captcha.getAttribute('token'), input, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes);
-          }
-      });
-      const btn = document.createElement('button');
-      applyBtnStyle(btn);
-      btn.id = 'send-magic';
-      btn.className = 'primary-button';
-      btn.addEventListener('click', (_ev) => onMagicLinkRequest(captcha.getAttribute('token'), input, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes));
-      btn.textContent = getTranslation('send-magic');
-      result.append(input, captcha, btn);
-      return result;
+  const recommendSocialLogin = (userEmail, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal) => {
+      var _a;
+      (_a = document.querySelector('magic-link-modal')) === null || _a === void 0 ? void 0 : _a.remove();
+      document.body.appendChild(socialLoginModal(userEmail, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal));
+  };
+  const hasProvider = (data, provider) => {
+      return data.some((entry) => entry.includes(provider));
+  };
+  const getMailExchanger = (domainName) => __awaiter$2(void 0, void 0, void 0, function* () {
+      const data = yield getMXData(domainName);
+      if (!data) {
+          return null;
+      }
+      if (hasProvider(data, 'outlook.com')) {
+          return 'Microsoft';
+      }
+      if (hasProvider(data, 'google.com')) {
+          return 'Google';
+      }
+      return null;
+  });
+  const onMagicLinkRequest = (token, input, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes) => __awaiter$2(void 0, void 0, void 0, function* () {
+      const email = input.value;
+      if (!email.includes('-test@') && !token) {
+          console.error('invalid-captcha-response');
+          // logError('invalid-captcha-response');
+          return;
+      }
+      if (isValidEmail(email)) {
+          const domain = email.split('@')[1] || '';
+          const mailExchanger = yield getMailExchanger(domain);
+          const supportedMailExchanger = mailExchanger !== null;
+          if (supportedMailExchanger && loginTypes.includes(mailExchanger)) {
+              recommendSocialLogin(email, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal);
+              return;
+          }
+      }
+      handleMagicLinkRequest(token, onReturn, backgroundImage, currentPage, clientBody);
+      closeMagicLinkModal();
+  });
+  const applyMagicEmailFieldStyle = (el) => {
+      el.style.display = 'flex';
+      el.style.flexFlow = 'column';
+      el.style.marginTop = '8px';
+      el.style.rowGap = '8px';
+      el.style.width = '100%';
+  };
+  const applyInputStyle = (input) => {
+      input.style.border = `1px solid ${juxDarkGrey}`;
+      input.style.maxWidth = '390px';
+      input.style.padding = '10px';
+      input.style.width = '100%';
+      input.style.backgroundColor = juxWhite;
+      input.style.borderRadius = '8px';
+      input.style.boxShadow = `inset 0 2px 3px ${juxDimmedDarkGrey}`;
+      input.style.height = '40px';
+      input.style.whiteSpace = 'pre-line';
+      input.style.boxSizing = 'border-box';
+  };
+  const applyBtnStyle = (btn) => {
+      btn.style.alignSelf = 'flex-end';
+      btn.style.backgroundColor = juxLightGreen;
+      btn.style.border = `2px solid ${juxLightGreen}`;
+      btn.style.borderRadius = '8px';
+      btn.style.color = juxWhite;
+      btn.style.cursor = 'pointer';
+      btn.style.display = 'inline-block';
+      btn.style.fontWeight = '700';
+      btn.style.height = '40px';
+      btn.style.lineHeight = '1';
+      btn.style.marginLeft = '10px';
+      btn.style.padding = '10px 16px';
+      btn.style.position = 'relative';
+  };
+  const magicEmailField = (onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes) => {
+      const result = document.createElement('magic-email-field');
+      applyMagicEmailFieldStyle(result);
+      const captcha = googleCaptcha();
+      const input = document.createElement('input');
+      input.id = 'mail-magic';
+      input.type = 'text';
+      input.className = 'textfield';
+      input.placeholder = 'e-mail';
+      applyInputStyle(input);
+      input.addEventListener('keydown', (ev) => {
+          if (ev.key === 'Enter') {
+              onMagicLinkRequest(captcha.getAttribute('token'), input, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes);
+          }
+      });
+      const btn = document.createElement('button');
+      applyBtnStyle(btn);
+      btn.id = 'send-magic';
+      btn.className = 'primary-button';
+      btn.addEventListener('click', (_ev) => onMagicLinkRequest(captcha.getAttribute('token'), input, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes));
+      btn.textContent = getTranslation('send-magic');
+      result.append(input, captcha, btn);
+      return result;
   };
 
-  const magicLinkModal = (onUserLogin, onReturn, backgroundImage, currentPage, clientBody, loginTypes) => {
-      const result = document.createElement('magic-link-modal');
-      const subtitle = document.createElement('magic-link-request-subtitle');
-      subtitle.style.fontSize = '14px';
-      subtitle.textContent = getTranslation('magic-link-request-subtitle');
-      const body = document.createElement('magic-link-request-body');
-      body.append(subtitle, magicEmailField(onUserLogin, onReturn, backgroundImage, currentPage, clientBody, () => result.remove(), loginTypes));
-      const modal = juxModal(getTranslation('magic-link-request-title'), [], '', false, false, body, '', '', () => result.remove());
-      modal.setAttribute('data-cy', 'magic-link-modal');
-      result.appendChild(modal);
-      const wrapper = modal.querySelector('modal-wrapper');
-      wrapper.style.maxWidth = '360px';
-      wrapper.style.width = '100%';
-      return result;
+  const magicLinkModal = (onUserLogin, onReturn, backgroundImage, currentPage, clientBody, loginTypes) => {
+      const result = document.createElement('magic-link-modal');
+      const subtitle = document.createElement('magic-link-request-subtitle');
+      subtitle.style.fontSize = '14px';
+      subtitle.textContent = getTranslation('magic-link-request-subtitle');
+      const body = document.createElement('magic-link-request-body');
+      body.append(subtitle, magicEmailField(onUserLogin, onReturn, backgroundImage, currentPage, clientBody, () => result.remove(), loginTypes));
+      const modal = juxModal(getTranslation('magic-link-request-title'), [], '', false, false, body, '', '', () => result.remove());
+      modal.setAttribute('data-cy', 'magic-link-modal');
+      result.appendChild(modal);
+      const wrapper = modal.querySelector('modal-wrapper');
+      wrapper.style.maxWidth = '360px';
+      wrapper.style.width = '100%';
+      return result;
   };
 
-  const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
-      const onReturn = () => clientApp.appendChild(loginPage);
-      loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
-  };
-  const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes, backgroundImg) => {
-      if (loginTypes.includes('Google')) {
-          section.appendChild(loginButton('Google', () => onGoogleSignIn(onUserLogin)));
-      }
-      if (loginTypes.includes('Microsoft')) {
-          section.appendChild(loginButton('Microsoft', () => onMicrosoftSignIn(onUserLogin)));
-      }
-      if (loginTypes.includes('Linkedin')) {
-          section.appendChild(loginButton('LinkedIn', () => console.log('login with Linkedin')));
-      }
-      if (loginTypes.includes('Email')) {
-          section.appendChild(loginButton('Email', () => onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, loginTypes)));
-      }
-  };
-  const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
-      const content = [];
-      const salutation = document.createElement('sign-in-salutation');
-      salutation.textContent = getTranslation('sign-in-salutation');
-      const explanation = document.createElement('sign-in-explanation');
-      explanation.textContent = getTranslation('sign-in-explanation');
-      const msg = document.createElement('sign-in-msg');
-      msg.textContent = getTranslation('sign-in-msg-general');
-      content.push(salutation, explanation, msg);
-      const result = basePage('login-page', backgroundImg, content);
-      const section = result.querySelector('section');
-      appendLoginTypes(result, section, clientApp, onUserLogin, loginTypes, backgroundImg);
-      return result;
+  const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
+      const onReturn = () => clientApp.appendChild(loginPage);
+      loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
+  };
+  const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes, backgroundImg) => {
+      if (loginTypes.includes('Google')) {
+          section.appendChild(loginButton('Google', () => onGoogleSignIn(onUserLogin)));
+      }
+      if (loginTypes.includes('Microsoft')) {
+          section.appendChild(loginButton('Microsoft', () => onMicrosoftSignIn(onUserLogin)));
+      }
+      if (loginTypes.includes('Linkedin')) {
+          section.appendChild(loginButton('LinkedIn', () => console.log('login with Linkedin')));
+      }
+      if (loginTypes.includes('Email')) {
+          section.appendChild(loginButton('Email', () => onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, loginTypes)));
+      }
+  };
+  const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
+      const content = [];
+      const salutation = document.createElement('sign-in-salutation');
+      salutation.textContent = getTranslation('sign-in-salutation');
+      const explanation = document.createElement('sign-in-explanation');
+      explanation.textContent = getTranslation('sign-in-explanation');
+      const msg = document.createElement('sign-in-msg');
+      msg.textContent = getTranslation('sign-in-msg-general');
+      content.push(salutation, explanation, msg);
+      const result = basePage('login-page', backgroundImg, content);
+      const section = result.querySelector('section');
+      appendLoginTypes(result, section, clientApp, onUserLogin, loginTypes, backgroundImg);
+      return result;
   };
 
-  class JuxEvent extends Event {
-      constructor(method, endpoint, onResult, params, onError) {
-          super('jux-event', { bubbles: true, cancelable: true, composed: true });
-          this.method = method;
-          this.endpoint = endpoint;
-          this.onResult = onResult;
-          this.params = params;
-          this.onError = onError;
-      }
-  }
-  const query = (element, endpoint, onResult, params, onError) => {
-      element.dispatchEvent(new JuxEvent('GET', endpoint, onResult, params, onError));
-  };
-  const command = (element, endpoint, onResult, params, onError) => {
-      element.dispatchEvent(new JuxEvent('POST', endpoint, onResult, params, onError));
+  class JuxEvent extends Event {
+      constructor(method, endpoint, onResult, params, onError, onRedirect) {
+          super('jux-event', { bubbles: true, cancelable: true, composed: true });
+          this.method = method;
+          this.endpoint = endpoint;
+          this.onResult = onResult;
+          this.params = params;
+          this.onError = onError;
+          this.onRedirect = onRedirect;
+      }
+  }
+  const query = (element, endpoint, onResult, params, onError, onRedirect) => {
+      element.dispatchEvent(new JuxEvent('POST', endpoint, onResult, params, onError, onRedirect));
+  };
+  const command = (element, endpoint, onResult, params, onError, onRedirect) => {
+      element.dispatchEvent(new JuxEvent('POST', endpoint, onResult, params, onError, onRedirect));
   };
 
   exports.chosenLanguage = chosenLanguage;
   exports.command = command;
   exports.getTranslation = getTranslation;
+  exports.handleJuxEvent = handleJuxEvent;
   exports.handleMagicLinkRequest = handleMagicLinkRequest;
   exports.initLanguage = initLanguage;
   exports.initSession = initSession;