@klauswuestefeld/jux-web 2024.2.6 → 2024.2.7

package/dist/jux-web.js

@@ -1,37 +1,36 @@
 var juxWeb = (function (exports) {
   'use strict';
 
-  var getBrowserLanguage = function () {
-      var result = (navigator.languages && navigator.languages.length)
+  const getBrowserLanguage = () => {
+      const result = (navigator.languages && navigator.languages.length)
           ? navigator.languages[0]
           : navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
       return result.substring(0, 2);
   };
-  var OVERRIDE_KEY = 'jux.language.override';
-  var translations = {};
-  var chosenLanguage = localStorage.getItem(OVERRIDE_KEY) || getBrowserLanguage();
-  var reloadWithLanguageOverride = function (lang) {
+  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
-  var getTranslation = function (k) { return translations[k] || k; };
-  var initLanguage = function (translations_, defaultLanguage) {
-      if (defaultLanguage === void 0) { defaultLanguage = 'en'; }
+  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;
   };
 
-  var THRESHOLD_WIDTH = 640;
+  const THRESHOLD_WIDTH = 640;
 
-  var icons = {
+  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>',
   };
-  var applyComponentStyle = function (component) {
+  const applyComponentStyle = (component) => {
       component.style.alignItems = 'center';
       component.style.background = '#fff';
       component.style.border = 'thin solid #888';
@@ -48,7 +47,7 @@ var juxWeb = (function (exports) {
       component.style.width = '276px';
       component.style.boxSizing = 'content-box';
   };
-  var applyLabelStyle = function (label) {
+  const applyLabelStyle = (label) => {
       label.style.display = 'inline-block';
       label.style.fontSize = '14px';
       label.style.fontWeight = '500';
@@ -56,13 +55,13 @@ var juxWeb = (function (exports) {
       label.style.marginRight = '34px';
       label.style.paddingLeft = '20px';
   };
-  var loginButton = function (type, fn) {
-      var loweredCasedType = type.toLowerCase();
-      var result = document.createElement('login-button');
+  const loginButton = (type, fn) => {
+      const loweredCasedType = type.toLowerCase();
+      const result = document.createElement('login-button');
       applyComponentStyle(result);
       result.tabIndex = 0;
-      result.setAttribute('data-cy', "".concat(loweredCasedType, "-button"));
-      var icon = document.createElement('login-icon');
+      result.setAttribute('data-cy', `${loweredCasedType}-button`);
+      const icon = document.createElement('login-icon');
       icon.style.gridColumnStart = '2';
       icon.style.width = '28px';
       icon.style.height = '28px';
@@ -72,16 +71,16 @@ var juxWeb = (function (exports) {
       icon.className = 'ico';
       // @ts-ignore
       icon.innerHTML = icons[loweredCasedType];
-      var label = document.createElement('login-label');
-      label.textContent = window.innerWidth <= THRESHOLD_WIDTH ? type : getTranslation("".concat(loweredCasedType, "-label"));
+      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', function () {
+      result.addEventListener('mouseenter', () => {
           result.style.cursor = 'pointer';
           result.style.boxShadow = '0 0 6px #808080';
       });
-      result.addEventListener('mouseleave', function () {
+      result.addEventListener('mouseleave', () => {
           result.style.cursor = 'auto';
           result.style.boxShadow = '1px 1px 1px grey';
       });
@@ -102,22 +101,6 @@ var juxWeb = (function (exports) {
   OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
   PERFORMANCE OF THIS SOFTWARE.
   ***************************************************************************** */
-  /* global Reflect, Promise */
-
-  var extendStatics$2 = function(d, b) {
-      extendStatics$2 = Object.setPrototypeOf ||
-          ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-          function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-      return extendStatics$2(d, b);
-  };
-
-  function __extends$2(d, b) {
-      if (typeof b !== "function" && b !== null)
-          throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-      extendStatics$2(d, b);
-      function __() { this.constructor = d; }
-      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  }
 
   function __awaiter$2(thisArg, _arguments, P, generator) {
       function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -127,54 +110,25 @@ var juxWeb = (function (exports) {
           function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
           step((generator = generator.apply(thisArg, _arguments || [])).next());
       });
-  }
-
-  function __generator$2(thisArg, body) {
-      var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-      return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-      function verb(n) { return function (v) { return step([n, v]); }; }
-      function step(op) {
-          if (f) throw new TypeError("Generator is already executing.");
-          while (_) try {
-              if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-              if (y = 0, t) op = [op[0] & 2, t.value];
-              switch (op[0]) {
-                  case 0: case 1: t = op; break;
-                  case 4: _.label++; return { value: op[1], done: false };
-                  case 5: _.label++; y = op[1]; op = [0]; continue;
-                  case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                  default:
-                      if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                      if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                      if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                      if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                      if (t[2]) _.ops.pop();
-                      _.trys.pop(); continue;
-              }
-              op = body.call(thisArg, _);
-          } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-          if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-      }
   }
 
-  var extractTokenFromWindowLocation = function (tokenParam, additionalParam) {
-      if (additionalParam === void 0) { additionalParam = ''; }
+  const extractTokenFromWindowLocation = (tokenParam, additionalParam = '') => {
       if (!tokenParam)
           return;
-      var token = '';
-      var tokenParameterName = "".concat(tokenParam, "=");
-      var search = window.location.search;
-      var tokenParameterIndex = search.indexOf(tokenParameterName);
+      let token = '';
+      const tokenParameterName = `${tokenParam}=`;
+      const search = window.location.search;
+      const tokenParameterIndex = search.indexOf(tokenParameterName);
       if (tokenParameterIndex !== -1) {
-          var tokenParameterNameLength = tokenParameterName.length;
-          var leadingAmpersandIndex = search.indexOf('&', tokenParameterIndex);
-          var searchWithoutToken = search;
+          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("".concat(tokenParam, "=") + token, '')
+          searchWithoutToken = searchWithoutToken.replace(`${tokenParam}=` + token, '')
               .replace(additionalParam, '')
               .replace('\&cypress=true', '');
           if (searchWithoutToken === '?') {
@@ -185,31 +139,40 @@ var juxWeb = (function (exports) {
       return token;
   };
 
-  var setBackendUrl = function (backendUrl) { return localStorage.setItem('backend-url', backendUrl); };
+  const setBackendUrl = (backendUrl) => localStorage.setItem('backend-url', backendUrl);
   //@ts-ignore
-  var getBackendUrl = function () { return process.env.BACKEND_URL || localStorage.getItem('backend-url'); };
+  const getBackendUrl = () => process.env.BACKEND_URL || localStorage.getItem('backend-url');
   //@ts-ignore
-  var getSecondaryBackendUrl = function () { return process.env.STAGING_BACKEND_URL || getBackendUrl(); };
-  var getBackendUrlToTry = function () { return getBackendUrl(); };
-  var getApiUrl = function () { return getBackendUrl() + 'api/'; };
-  var getGoogleAuthUrl = function () { return getBackendUrl() + 'auth-google?google-id-token='; };
-  var getMicrosoftAuthUrl = function () { return getBackendUrl() + 'auth-microsoft?access-token='; };
-  var getMagicAuthUrl = function () {
+  const getSecondaryBackendUrl = () => process.env.STAGING_BACKEND_URL || getBackendUrl();
+  const getApiUrl = () => getBackendUrl() + 'api/';
+  let getBackendUrlToTry = () => getBackendUrl();
+  const getMagicAuthUrl = () => {
       var _a;
       // @ts-ignore
-      var endpoint = ((_a = window === null || window === void 0 ? void 0 : window.store) === null || _a === void 0 ? void 0 : _a.magicLinkAuthEndpoint) || 'auth-magic';
+      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=';
   };
-  var getMagicAuthReqUrl = function () {
+  const getMagicAuthReqUrl = () => {
       var _a;
       // @ts-ignore
-      var endpoint = ((_a = window === null || window === void 0 ? void 0 : window.store) === null || _a === void 0 ? void 0 : _a.magicLinkRequestEndpoint) || 'magic-link-request';
+      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=';
   };
-  var timeout;
-  var maxRetries = 20;
-  var retries = 0;
-  var applySpinnerStyle = function (spinner) {
+  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';
@@ -218,44 +181,51 @@ var juxWeb = (function (exports) {
       spinner.style.height = '80px';
       spinner.style.width = '80px';
   };
-  var renderOverlay = function () {
-      var overlay = document.createElement('reconnect-overlay');
-      var spinner = document.createElement('loading-spinner');
+  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);
   };
-  var removeOverlay = function () {
+  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();
   };
-  var backendHelpMessage = function (req) {
+  const backendHelpMessage = (req) => {
       return req.response && req.response.error || req.response || req;
   };
-  var backendRequest = function (requestType, url, postContent, onJsonResponse, onHelpMessage) {
-      if (url.includes(getBackendUrl())) {
-          url = url.replace(getBackendUrl(), getBackendUrlToTry());
+  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 (url.includes(getSecondaryBackendUrl())) {
-          url = url.replace(getSecondaryBackendUrl(), getBackendUrlToTry());
+      else if (urlString.includes(getSecondaryBackendUrl())) {
+          urlString = urlString.replace(getSecondaryBackendUrl(), getBackendUrlToTry());
       }
       clearInterval(timeout);
-      var req = new XMLHttpRequest();
+      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
-      var backendToken = window.store.backendToken;
+      const backendToken = window.store.backendToken;
       if (backendToken) {
           req.setRequestHeader('auth', backendToken);
       }
       req.setRequestHeader('Content-Type', 'application/json');
       req.responseType = 'json';
-      req.onerror = req.ontimeout = function () {
+      req.onerror = req.ontimeout = () => {
           if (req.status === 401) {
-              localStorage.removeItem('token');
-              alert(getTranslation('session-expired-msg'));
-              location.reload();
-              // googleAuthSignOut(); TODO
+              handleUnauthorized();
           }
           else if (req.status === 0) {
               if (retries >= maxRetries) {
@@ -267,20 +237,20 @@ var juxWeb = (function (exports) {
               if (!document.querySelector('reconnect-overlay')) {
                   renderOverlay();
               }
-              var backupBackendUrl_1 = getBackendUrlToTry() === getBackendUrl()
+              const backupBackendUrl = getBackendUrlToTry() === getBackendUrl()
                   ? getSecondaryBackendUrl()
                   : getBackendUrl();
-              url = url.replace(getBackendUrlToTry(), backupBackendUrl_1);
-              getBackendUrlToTry = function () { return backupBackendUrl_1; };
-              timeout = setTimeout(function () {
-                  backendRequest(requestType, url, postContent, onJsonResponse, onHelpMessage);
+              urlString = urlString.replace(getBackendUrlToTry(), backupBackendUrl);
+              getBackendUrlToTry = () => backupBackendUrl;
+              timeout = setTimeout(() => {
+                  backendRequest(requestType, urlString, params, onJsonResponse, onHelpMessage);
               }, 2000);
           }
           else {
               onHelpMessage(backendHelpMessage(req));
           }
       };
-      req.onload = function () {
+      req.onload = () => {
           retries = 0;
           removeOverlay();
           if (req.status === 200 || req.status === 202) {
@@ -294,59 +264,52 @@ var juxWeb = (function (exports) {
           }
       };
       req.timeout = 25000;
-      req.send(postContent);
+      req.send(params);
   };
-  var backendPost = function (endpoint, postContent, onJsonResponse, onHelpMessage) {
+  const backendPost = (endpoint, postContent, onJsonResponse, onHelpMessage) => {
       backendRequest('POST', getApiUrl() + endpoint, postContent, onJsonResponse, onHelpMessage);
   };
-  var backendGet = function (endpoint, onJsonResponse, onHelpMessage) {
-      var api = getApiUrl() + endpoint;
-      if (endpoint.includes(getGoogleAuthUrl()) || endpoint.includes(getMicrosoftAuthUrl())) {
-          api = endpoint;
-      }
-      backendRequest('GET', api, undefined, onJsonResponse, onHelpMessage);
+  const backendGet = (endpoint, params, onJsonResponse, onHelpMessage) => {
+      backendRequest('GET', getApiUrl() + endpoint, params, onJsonResponse, onHelpMessage);
   };
-  var backendGetPromise = function (endpoint) { return new Promise(function (resolve, reject) {
-      return backendGet(endpoint, resolve, reject);
-  }); };
-  var requestMagicLink = function (data, onJsonResponse) {
-      backendRequest('GET', getMagicAuthReqUrl() + encodeURIComponent(data.email) + '&destination=' + extractTokenFromWindowLocation('destination') + '&token=' + data.token, undefined, onJsonResponse, function () { });
+  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);
   };
-  var openMagicLink = function (magicToken, onJsonResponse, onHelpMessage) {
-      backendRequest('GET', getMagicAuthUrl() + magicToken, undefined, onJsonResponse, onHelpMessage);
+  const openMagicLink = (magicToken, onJsonResponse, onHelpMessage) => {
+      backendRequest('GET', getMagicAuthUrl() + magicToken, null, onJsonResponse, onHelpMessage);
   };
-  var getMXData = function (domainName) { return __awaiter$2(void 0, void 0, void 0, function () {
-      var records, recordsJson, answer, error_1;
-      return __generator$2(this, function (_a) {
-          switch (_a.label) {
-              case 0:
-                  _a.trys.push([0, 3, , 4]);
-                  return [4 /*yield*/, fetch("https://dns.google.com/resolve?name=".concat(domainName, "&type=MX"), {
-                          method: 'GET',
-                          mode: 'cors'
-                      })];
-              case 1:
-                  records = _a.sent();
-                  if (!records.ok) {
-                      console.log('response was not ok');
-                      return [2 /*return*/, null];
-                  }
-                  return [4 /*yield*/, records.json()];
-              case 2:
-                  recordsJson = _a.sent();
-                  answer = recordsJson.Answer;
-                  if (!answer) {
-                      return [2 /*return*/, null];
-                  }
-                  return [2 /*return*/, Array.from(answer).map(function (a) { return a.data; })];
-              case 3:
-                  error_1 = _a.sent();
-                  console.error('Fetch failed: ', error_1);
-                  return [2 /*return*/, null];
-              case 4: return [2 /*return*/];
+  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;
+      }
+  });
 
   /*! @azure/msal-browser v2.21.0 2022-01-04 */
   /*! *****************************************************************************
@@ -13667,13 +13630,13 @@ var juxWeb = (function (exports) {
       return PublicClientApplication;
   }(ClientApplication));
 
-  var cleared = false;
-  var clearCookieValidation = function () {
+  let cleared = false;
+  const clearCookieValidation = () => {
       var _a;
       (_a = document.querySelector('#cookie-test-iframe')) === null || _a === void 0 ? void 0 : _a.remove();
       cleared = true;
   };
-  var checkCookiesEnable = function (ev, onEnabled, onDisabled) {
+  const checkCookiesEnable = (ev, onEnabled, onDisabled) => {
       if (ev.data === 'MM:3PCunsupported') {
           clearCookieValidation();
           if (onDisabled) {
@@ -13685,18 +13648,18 @@ var juxWeb = (function (exports) {
           onEnabled();
       }
   };
-  var cookieTest = function () {
-      var frame = document.createElement('iframe');
+  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);
   };
-  var validateThirdPartyCookies = function (onEnabled, onDisabled) {
+  const validateThirdPartyCookies = (onEnabled, onDisabled) => {
       cleared = false;
-      var listener = function (ev) { return checkCookiesEnable(ev, onEnabled, onDisabled); };
+      const listener = (ev) => checkCookiesEnable(ev, onEnabled, onDisabled);
       window.addEventListener('message', listener);
-      var timer = setInterval(function () {
+      const timer = setInterval(() => {
           if (cleared) {
               window.removeEventListener('message', listener);
               clearInterval(timer);
@@ -13705,26 +13668,26 @@ var juxWeb = (function (exports) {
       cookieTest();
   };
 
-  var enableSignInLayout = function () {
+  const enableSignInLayout = () => {
       document.documentElement.style.cursor = 'progress';
       document.body.style.opacity = '0.5';
       document.body.style.pointerEvents = 'none';
   };
-  var disableSignInLayout = function () {
+  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
-  var script$1 = document.createElement('script');
+  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);
-  var authStatus;
-  var authError;
-  var highLevelUser = function (gUser) {
-      var profile = gUser.getBasicProfile();
+  let authStatus;
+  let authError;
+  const highLevelUser = (gUser) => {
+      const profile = gUser.getBasicProfile();
       return {
           name: profile.getName(),
           email: profile.getEmail(),
@@ -13732,62 +13695,50 @@ var juxWeb = (function (exports) {
           googletoken: gUser.getAuthResponse().id_token
       };
   };
-  var onUserChanged = function (googleUser, onUserLogin) { return __awaiter$2(void 0, void 0, void 0, function () {
-      var error_1;
-      return __generator$2(this, function (_a) {
-          switch (_a.label) {
-              case 0:
-                  document.documentElement.classList.remove('progress');
-                  document.body.classList.remove('disabled');
-                  if (!googleUser) return [3 /*break*/, 5];
-                  _a.label = 1;
-              case 1:
-                  _a.trys.push([1, 3, , 4]);
-                  return [4 /*yield*/, backendGetPromise(getGoogleAuthUrl() + googleUser.googletoken)
-                          .then(function (res) {
-                          var token = res.token;
-                          // @ts-ignore
-                          window.store.currentUser = res;
-                          onTokenAcquired(token, onUserLogin);
-                      })
-                          .catch(function (error) { throw Error(error); })];
-              case 2:
-                  _a.sent();
-                  return [3 /*break*/, 4];
-              case 3:
-                  error_1 = _a.sent();
-                  console.error(error_1);
-                  // logError(error); TODO
-                  // checkMixpanel(() => mixpanel.track('Login Error', { 'Login Type': 'Google', 'Error': error })); TODO
-                  return [2 /*return*/];
-              case 4: return [3 /*break*/, 6];
-              case 5:
-                  setBackendToken('');
-                  _a.label = 6;
-              case 6: return [2 /*return*/];
-          }
-      });
-  }); };
-  var onGoogleUserChanged = function (gUser, onUserLogin) {
+  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);
   };
-  var initGapiClient = function (callbackFn, onUserLogin) {
+  const initGapiClient = (callbackFn, onUserLogin) => {
       // @ts-ignore
-      var clientId = process.env.GOOGLE_CLIENT_ID;
-      gapi.auth2.init({ client_id: clientId, prompt: 'select_account' }).then(function () {
+      const clientId = process.env.GOOGLE_CLIENT_ID;
+      gapi.auth2.init({ client_id: clientId, prompt: 'select_account' }).then(() => {
           authStatus = 'LOADED';
-          var currentUser = getAuth().currentUser;
+          const currentUser = getAuth().currentUser;
           currentUser.listen(onGoogleUserChanged);
           callbackFn ? callbackFn(clientId) : onGoogleUserChanged(currentUser.get(), onUserLogin);
       }, onAuthError);
   };
-  var onAuthError = function (error) {
+  const onAuthError = (error) => {
       authError = error;
       console.error(error);
       // logError(error, authError); // TODO
   };
-  var initGapi = function (callbackFn, onUserLogin) {
-      if (callbackFn === void 0) { callbackFn = null; }
+  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;
@@ -13798,27 +13749,27 @@ var juxWeb = (function (exports) {
       }
       authStatus = 'LOADING';
       gapi.load('auth2', {
-          callback: function () { return initGapiClient(callbackFn, onUserLogin); },
+          callback: () => initGapiClient(callbackFn, onUserLogin),
           onerror: onAuthError,
           ontimeout: onAuthError,
           timeout: 5000
       });
   };
-  var authAlert = function (error) {
+  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();
   };
-  var onSignInError = function (error) {
+  const onSignInError = (error) => {
       disableSignInLayout();
       console.error(error);
       // logError(error); TODO
       if (error && error.error === 'popup_closed_by_user') {
-          onUserChanged(null, function () { });
+          onUserChanged(null, () => { });
           return;
       }
       authAlert(error);
   };
-  var getAuth = function () {
+  const getAuth = () => {
       if (typeof gapi === 'undefined') {
           console.error('gapi is undefined');
           // logError('gapi is undefined'); TODO
@@ -13826,8 +13777,8 @@ var juxWeb = (function (exports) {
       }
       return gapi.auth2 && gapi.auth2.getAuthInstance();
   };
-  var googleSignIn = function () { return getAuth().signIn().catch(onSignInError); };
-  var authSignIn = function (onUserLogin) {
+  const googleSignIn = () => getAuth().signIn().catch(onSignInError);
+  const authSignIn = (onUserLogin) => {
       if (authError) {
           authAlert(authError);
           return;
@@ -13841,7 +13792,7 @@ var juxWeb = (function (exports) {
           }
           catch (err) {
               try {
-                  initGapi(function () { return googleSignIn(); }, onUserLogin);
+                  initGapi(() => googleSignIn(), onUserLogin);
               }
               catch (error) {
                   onSignInError(error);
@@ -13851,13 +13802,13 @@ var juxWeb = (function (exports) {
   };
 
   // TODO: find a better way to import external scripts
-  var script = document.createElement('script');
+  const script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = 'https://www.google.com/recaptcha/api.js';
   document.head.appendChild(script);
-  var googleCaptcha = function () {
-      var result = document.createElement('google-captcha');
-      window.submitCaptcha = function (token) { return result.setAttribute('token', token); };
+  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);
@@ -13866,14 +13817,14 @@ var juxWeb = (function (exports) {
       return result;
   };
 
-  var juxWhite = '#FFF';
-  var juxDarkGrey = '#282828';
-  var juxDimmedDarkGrey = '#28282822';
-  var juxDimmedBlack = '#00000088';
-  var juxLightGreen = '#20B03D';
-  var juxMediumGreen = '#0D631E';
+  const juxWhite = '#FFF';
+  const juxDarkGrey = '#282828';
+  const juxDimmedDarkGrey = '#28282822';
+  const juxDimmedBlack = '#00000088';
+  const juxLightGreen = '#20B03D';
+  const juxMediumGreen = '#0D631E';
 
-  var onKeyDown = function (ev, el, persitent, onClose) {
+  const onKeyDown = (ev, el, persitent, onClose) => {
       if (ev.key === 'Escape') {
           if (persitent) {
               return;
@@ -13887,34 +13838,34 @@ var juxWeb = (function (exports) {
           el.dispatchEvent(new CustomEvent('ok'));
       }
   };
-  var close = function (el, onClose) {
+  const close = (el, onClose) => {
       el.remove();
       if (onClose) {
           onClose();
       }
   };
-  var attachEventHandlers = function (el, persitent, onClose) {
-      var cancelButton = el.querySelector('.cancel');
-      cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.addEventListener('click', function (_e) {
+  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);
       });
-      var closeButton = el.querySelector('.close');
+      const closeButton = el.querySelector('.close');
       if (closeButton) {
-          closeButton.addEventListener('click', function (_e) {
+          closeButton.addEventListener('click', (_e) => {
               close(el, onClose);
           });
       }
-      var okButton = el.querySelector('.ok');
-      okButton === null || okButton === void 0 ? void 0 : okButton.addEventListener('click', function (_e) {
+      const okButton = el.querySelector('.ok');
+      okButton === null || okButton === void 0 ? void 0 : okButton.addEventListener('click', (_e) => {
           el.dispatchEvent(new CustomEvent('ok'));
       });
-      el.removeEventListener('keydown', function (ev) { return onKeyDown(ev, el, persitent, function () { return onClose; }); });
-      el.addEventListener('keydown', function (ev) { return onKeyDown(ev, el, persitent, function () { return onClose; }); });
-      el === null || el === void 0 ? void 0 : el.addEventListener('click', function (e) {
+      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;
@@ -13936,11 +13887,11 @@ var juxWeb = (function (exports) {
   //   onClose?: any,
   //   titleStyle?: string,
   // }
-  var applyWrapperStyle = function (wrapper) {
+  const applyWrapperStyle = (wrapper) => {
       wrapper.style.alignItems = 'center';
       wrapper.style.backgroundColor = juxWhite;
       wrapper.style.borderRadius = '.3125rem';
-      wrapper.style.boxShadow = "0 0 1.33rem ".concat(juxDimmedBlack);
+      wrapper.style.boxShadow = `0 0 1.33rem ${juxDimmedBlack}`;
       wrapper.style.boxSizing = 'content-box';
       wrapper.style.display = 'flex';
       wrapper.style.flexDirection = 'column';
@@ -13952,7 +13903,7 @@ var juxWeb = (function (exports) {
       wrapper.style.padding = '1.33rem';
       wrapper.style.position = 'relative';
   };
-  var applyModalStyle = function (modal) {
+  const applyModalStyle = (modal) => {
       modal.style.alignItems = 'center';
       modal.style.backgroundColor = juxDimmedBlack;
       modal.style.display = 'flex';
@@ -13965,7 +13916,7 @@ var juxWeb = (function (exports) {
       modal.style.width = '100%';
       modal.style.zIndex = '9999';
   };
-  var applyHeaderStyle = function (header) {
+  const applyHeaderStyle = (header) => {
       header.style.alignItems = 'center';
       header.style.color = juxMediumGreen;
       header.style.flexDirection = 'row';
@@ -13977,7 +13928,7 @@ var juxWeb = (function (exports) {
       header.style.position = 'relative';
       header.style.width = '100%';
   };
-  var applyJuxModalContentStyle = function (el) {
+  const applyJuxModalContentStyle = (el) => {
       el.style.display = 'flex';
       el.style.position = 'relative';
       el.style.width = '100%';
@@ -13985,37 +13936,32 @@ var juxWeb = (function (exports) {
       el.style.marginTop = '1.33rem';
       el.style.rowGap = '8px';
   };
-  var juxModal = function (title, btns, content, persistent, _busy, body, okTxt, cancelTxt, onClose, titleStyle) {
-      if (btns === void 0) { btns = ['ok', 'cancel']; }
-      if (content === void 0) { content = ''; }
-      if (persistent === void 0) { persistent = false; }
-      if (okTxt === void 0) { okTxt = getTranslation('alert-ok-btn-txt'); }
-      if (cancelTxt === void 0) { cancelTxt = getTranslation('alert-cancel-btn-txt'); }
-      var result = document.createElement('jux-modal');
+  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);
-      var wrapper = document.createElement('modal-wrapper');
+      const wrapper = document.createElement('modal-wrapper');
       applyWrapperStyle(wrapper);
       // START close
-      var closeBtn = document.createElement('button');
+      const closeBtn = document.createElement('button');
       if (!persistent) {
           closeBtn.className = 'close';
           closeBtn.setAttribute('aria-label', getTranslation('close'));
       }
       // END close
       // START header
-      var header = document.createElement('modal-header');
+      const header = document.createElement('modal-header');
       applyHeaderStyle(header);
       if (title) {
           if (titleStyle) {
               header.classList.add(titleStyle);
           }
-          var h3 = document.createElement('h3');
+          const h3 = document.createElement('h3');
           h3.textContent = title;
           header.appendChild(h3);
       }
       // END header
       // START content
-      var modalContent = document.createElement('jux-modal-content');
+      const modalContent = document.createElement('jux-modal-content');
       applyJuxModalContentStyle(modalContent);
       if (content) {
           modalContent.innerHTML = content;
@@ -14025,22 +13971,22 @@ var juxWeb = (function (exports) {
       }
       // END content
       // START footer
-      var footer = document.createElement('modal-footer');
+      const footer = document.createElement('modal-footer');
       if (btns.includes('cancel')) {
-          var cancelBtn = document.createElement('button');
+          const cancelBtn = document.createElement('button');
           cancelBtn.classList.add('secondary-button', 'modal-button', 'action', 'cancel-btn', 'cancel');
-          var cancelText = document.createElement('button-text');
+          const cancelText = document.createElement('button-text');
           cancelText.textContent = cancelTxt;
-          var cancelSpinner = document.createElement('loading-spinner');
+          const cancelSpinner = document.createElement('loading-spinner');
           cancelBtn.append(cancelText, cancelSpinner);
           footer.appendChild(cancelBtn);
       }
       if (btns.includes('ok')) {
-          var okBtn = document.createElement('button');
+          const okBtn = document.createElement('button');
           okBtn.classList.add('primary-button', 'modal-button', 'action', 'ok');
-          var okText = document.createElement('button-text');
+          const okText = document.createElement('button-text');
           okText.textContent = okTxt;
-          var okSpinner = document.createElement('loading-spinner');
+          const okSpinner = document.createElement('loading-spinner');
           okBtn.append(okText, okSpinner);
           footer.appendChild(okBtn);
       }
@@ -14064,15 +14010,13 @@ var juxWeb = (function (exports) {
       return result;
   };
 
-  var contactField = function (tag, elType, elName, required, value) {
-      if (tag === void 0) { tag = 'input'; }
-      if (required === void 0) { required = true; }
-      var result = document.createElement('contact-field');
-      var elId = 'contact-' + elName;
-      var label = document.createElement('label');
+  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;
-      var el = document.createElement(tag);
+      const el = document.createElement(tag);
       el.id = elId;
       el.setAttribute('name', elName);
       el.setAttribute('placeholder', getTranslation(elId + '-placeholder'));
@@ -14089,80 +14033,74 @@ var juxWeb = (function (exports) {
       return result;
   };
 
-  var getNestedElValue = function (el, nestedTag) {
-      var nestedEl = el.querySelector(nestedTag);
+  const getNestedElValue = (el, nestedTag) => {
+      const nestedEl = el.querySelector(nestedTag);
       return nestedEl.value;
   };
-  var sendInquiry = function (name, email, msg, whatsapp, subject, token) {
-      var inquiryPayload = {
-          subject: "[".concat(subject.charAt(0).toUpperCase()).concat(subject.slice(1), "] ").concat(getNestedElValue(name, 'input')),
-          body: "<strong>Name</strong>: ".concat(getNestedElValue(name, 'input'), "<br><br>\n<strong>E-mail</strong>: ").concat(getNestedElValue(email, 'input'), "<br><br>\n<strong>Whatsapp</strong>: ").concat(getNestedElValue(whatsapp, 'input'), "<br><br>\n<strong>Message</strong>: ").concat(getNestedElValue(msg, 'textarea')),
-          token: token,
-      };
-      backendPost('contact-us', JSON.stringify(inquiryPayload), function (_res) {
+  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();
-      }, function () { } // TODO: change it to be an error handling fn provided by the client
+      }, () => { } // TODO: change it to be an error handling fn provided by the client
       );
       // checkMixpanel(() => mixpanel.track('Sent Contact Inquiry', {}));
   };
-  var contactUsModal = function (subject) {
+  const contactUsModal = (subject) => {
       var _a, _b, _c, _d, _e;
-      var result = document.createElement('contact-us-modal');
+      const result = document.createElement('contact-us-modal');
       // @ts-ignore
-      var currentName = window.store.currentUser ? window.store.currentUser.name : '';
+      const currentName = window.store.currentUser ? window.store.currentUser.name : '';
       // @ts-ignore
-      var currentEmail = window.store.currentUser ? window.store.currentUser.email : (_a = document.querySelector('#magic-link-email')) === null || _a === void 0 ? void 0 : _a.textContent;
-      var modalBody = document.createElement('modal-body');
-      var form = document.createElement('form');
+      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';
-      var nameField = contactField('input', 'text', 'name', true, currentName);
-      var emailField = contactField('input', 'email', 'email', true, currentEmail);
-      var messageField = contactField('textarea', 'text', 'message', true);
-      var whatsappField = contactField('input', 'tel', 'whatsapp', false);
-      var btn = document.createElement('button');
+      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);
-      var modal = juxModal(getTranslation('contact-page'), [], '', false, false, modalBody, '', '', function () { return result.remove(); });
+      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;');
-      var captcha = googleCaptcha();
+      const captcha = googleCaptcha();
       if (subject !== 'email-not-sent') {
           // @ts-ignore
-          var 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=".concat(admin), function (res) {
-              var balance = res;
+          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);
               }
-          }, function () { } // TODO: change it to be an error handling fn provided by the client
+          }, () => { } // 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', function (event) {
+      form.addEventListener('submit', (event) => {
           event.preventDefault();
           sendInquiry(nameField, emailField, messageField, whatsappField, subject, captcha.getAttribute('token'));
       });
       return result;
   };
 
-  var applyPageStyles$1 = function (page, backgroundImg) {
-      page.style.backgroundImage = "url(".concat(backgroundImg, ")");
-      page.style.display = 'block';
-      page.style.width = '100%';
-      page.style.height = '100%';
-      page.style.backgroundPosition = '50%';
-      page.style.backgroundSize = 'cover';
-      page.style.display = 'block';
-  };
-  var applyContainerStyles$1 = function (container) {
+  const applyContainerStyles = (container) => {
       container.style.backgroundColor = '#ffffffdd';
       container.style.borderRadius = '16px';
       container.style.inset = '50% 50% 50% 0';
@@ -14178,7 +14116,25 @@ var juxWeb = (function (exports) {
       container.style.margin = '0 auto';
       container.style.paddingTop = '0';
   };
-  var applyBtnStyles = function (btn) {
+  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';
@@ -14191,31 +14147,29 @@ var juxWeb = (function (exports) {
       btn.style.whiteSpace = 'normal';
       btn.style.font = 'inherit';
   };
-  var magicLinkRequestedPage = function (backgroundImg, onReturn) {
-      var result = document.createElement('magic-link-requested-page');
-      var section = document.createElement('section');
-      applyContainerStyles$1(section);
-      var magicLinkSent = document.createElement('p');
-      magicLinkSent.id = 'magic-link-sent';
-      magicLinkSent.textContent = getTranslation(magicLinkSent.id);
-      magicLinkSent.style.marginBottom = '10px';
-      var magicLinkEmail = document.createElement('p');
-      magicLinkEmail.id = 'magic-link-email';
-      magicLinkEmail.style.fontWeight = '700';
-      magicLinkEmail.style.marginBottom = '10px';
-      var magicLinkHowTo = document.createElement('p');
-      magicLinkHowTo.id = 'magic-link-how-to';
-      magicLinkHowTo.innerHTML = getTranslation(magicLinkHowTo.id);
-      magicLinkHowTo.style.padding = '0 30px';
-      magicLinkHowTo.style.textAlign = 'center';
-      var btn = document.createElement('button');
+  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', function () { return document.body.appendChild(contactUsModal('email-not-sent')); });
+      btn.addEventListener('click', () => document.body.appendChild(contactUsModal('email-not-sent')));
       btn.textContent = getTranslation('magic-link-let-us-know');
       applyBtnStyles(btn);
-      var returnLink = document.createElement('a');
+      const returnLink = document.createElement('a');
       returnLink.textContent = getTranslation('return-link');
-      returnLink.onclick = function () {
+      returnLink.onclick = () => {
           result.remove();
           onReturn();
       };
@@ -14223,43 +14177,72 @@ var juxWeb = (function (exports) {
       returnLink.style.cursor = 'pointer';
       returnLink.style.fontWeight = '700';
       returnLink.style.textDecoration = 'underline';
-      section.append(magicLinkSent, magicLinkEmail, magicLinkHowTo, btn, returnLink);
-      applyPageStyles$1(result, backgroundImg);
-      result.appendChild(section);
+      content.push(sent, email, howTo, btn, returnLink);
+      const result = basePage('magic-link-requested-page', backgroundImg, content);
       return result;
   };
 
-  var setBackendToken = function (token) {
+  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);
       }
   };
-  var getBackendToken = function () {
+  const getBackendToken = () => {
       var _a;
-      var token = (_a = localStorage.getItem('token')) !== null && _a !== void 0 ? _a : '';
+      const token = (_a = localStorage.getItem('token')) !== null && _a !== void 0 ? _a : '';
       // @ts-ignore
       window.store.backendToken = token;
       return token;
   };
-  var onTokenAcquired = function (token, onUserLogin) {
+  const onTokenAcquired = (token, onUserLogin) => {
       setBackendToken(token);
       // setSuperToken();
       onUserLogin();
   };
-  var clearSession = function () {
+  const clearSession = () => {
       // onUserChanged(null);
       localStorage.clear();
       // @ts-ignore
       window.store = {};
   };
-  var onAuthenticationFailure = function (msg) {
+  const onAuthenticationFailure = (msg) => {
       localStorage.removeItem('token');
       // displayPage(Page.LOGIN);
       alert(getTranslation(msg));
   };
-  var onAuthentication = function (onUserLogin, user, type) {
+  const onAuthentication = (onUserLogin, user, type) => {
       if ((user.token && getBackendToken()) && getBackendToken() !== user.token) {
           clearSession();
       }
@@ -14272,11 +14255,15 @@ var juxWeb = (function (exports) {
       // mixpanelIdentify(user);
       // checkMixpanel(() => mixpanel.track('Login', { 'Login Type': type }));
   };
-  var displayPage = function (clientApp, page) {
-      Array.from(clientApp.children).forEach(function (el) { return el.remove(); });
+  const displayPage = (clientApp, page) => {
+      Array.from(clientApp.children).forEach(el => el.remove());
       clientApp.appendChild(page);
   };
-  var initSession = function (clientApp, supportedLoginTypes, onUserLogin, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) {
+  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;
@@ -14292,25 +14279,27 @@ var juxWeb = (function (exports) {
       window.store.magicLinkRequestEndpoint = magicLinkRequestEndpoint;
       // @ts-ignore
       window.store.magicLinkAuthEndpoint = magicLinkAuthEndpoint;
-      var magicToken = extractTokenFromWindowLocation('magic-link');
-      if (magicToken) {
-          var onOpenMagicLink_1 = function () {
-              openMagicLink(magicToken, function (res) { return onAuthentication(onUserLogin, res, 'Magic Link'); }, function () { return onAuthenticationFailure('unable-magic-login'); });
+      // 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'));
           };
-          var host = extractTokenFromWindowLocation('host');
+          const host = extractTokenFromWindowLocation('host');
           if (host) {
               // @ts-ignore
-              window.store.fetchUserBackendUrl({ host: host }, function (backendUrl) {
+              window.store.fetchUserBackendUrl({ host }, (backendUrl) => {
                   setBackendUrl(backendUrl);
-                  onOpenMagicLink_1();
+                  onOpenMagicLink();
               });
               return;
           }
-          onOpenMagicLink_1();
+          onOpenMagicLink();
           return;
       }
       if (getBackendToken()) {
-          backendGet('profile', function (res) { return onAuthentication(onUserLogin, res, 'Token Authentication'); }, function (_err) { return onAuthenticationFailure('login-failed'); });
+          backendGet('profile', null, (res) => onAuthentication(onUserLogin, res, 'Token Authentication'), (_err) => onAuthenticationFailure('login-failed'));
           return;
       }
       displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, supportedLoginTypes));
@@ -14326,73 +14315,65 @@ var juxWeb = (function (exports) {
       // validateThirdPartyCookies(initGapi, () => displayPage(Page.LOGIN));
       // checkMixpanel(() => mixpanel.track('View Login Page'));
   };
-  var onMicrosoftSignIn = function (onUserLogin) { return __awaiter$2(void 0, void 0, void 0, function () {
-      var msalConfig, msalInstance, loginRequest, loginResponse, accessToken, err_1;
-      return __generator$2(this, function (_a) {
-          switch (_a.label) {
-              case 0:
-                  msalConfig = { auth: { clientId: process.env.MICROSOFT_CLIENT_ID } };
-                  msalInstance = new PublicClientApplication(msalConfig);
-                  loginRequest = { scopes: ['user.read'] };
-                  enableSignInLayout();
-                  _a.label = 1;
-              case 1:
-                  _a.trys.push([1, 4, , 5]);
-                  return [4 /*yield*/, msalInstance.loginPopup(loginRequest)];
-              case 2:
-                  loginResponse = _a.sent();
-                  accessToken = loginResponse.accessToken;
-                  return [4 /*yield*/, backendGetPromise(getMicrosoftAuthUrl() + accessToken)
-                          .then(function (res) {
-                          var token = res.token;
-                          // @ts-ignore
-                          window.store.currentUser = res;
-                          onTokenAcquired(token, onUserLogin);
-                      })
-                          .catch(console.error)
-                          .finally(function () { return disableSignInLayout(); })];
-              case 3:
-                  _a.sent();
-                  return [3 /*break*/, 5];
-              case 4:
-                  err_1 = _a.sent();
-                  reportError(err_1);
-                  disableSignInLayout();
-                  return [3 /*break*/, 5];
-              case 5: return [2 /*return*/];
-          }
-      });
-  }); };
-  var onCookieError = function () {
+  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;
   };
-  var onGoogleSignIn = function (onUserLogin) {
-      validateThirdPartyCookies(function () {
+  const onGoogleSignIn = (onUserLogin) => {
+      validateThirdPartyCookies(() => {
           enableSignInLayout();
           authSignIn(onUserLogin);
       }, onCookieError);
   };
-  var handleMagicLinkRequest = function (token, onReturn, backgroundImage, currentPage, clientBody, email) {
-      if (email === void 0) { email = ''; }
+  const handleMagicLinkRequest = (token, onReturn, backgroundImage, currentPage, clientBody, email = '') => {
       if (!email) {
-          var mailMagic = document.querySelector('#mail-magic');
+          const mailMagic = document.querySelector('#mail-magic');
           email = mailMagic.value;
       }
-      var payload = { email: email, token: token };
-      var onRequestMagicLink = function () {
-          requestMagicLink(payload, function (_res) {
+      const payload = { email, token };
+      const onRequestMagicLink = () => {
+          const onResponse = (page) => {
               currentPage.remove();
-              clientBody.appendChild(magicLinkRequestedPage(backgroundImage, onReturn));
-              var magicLinkEmail = document.querySelector('#magic-link-email');
+              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: email }, function (backendUrl) {
+          window.store.fetchUserBackendUrl({ email }, (backendUrl) => {
               setBackendUrl(backendUrl);
               onRequestMagicLink();
           });
@@ -14401,118 +14382,101 @@ var juxWeb = (function (exports) {
       onRequestMagicLink();
   };
 
-  var socialLoginModal = function (userEmail, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal) {
-      var result = document.createElement('social-login-modal');
-      var email = document.createElement('p');
-      email.textContent = "\"".concat(userEmail, "\"");
-      var msg = document.createElement('social-login-msg');
+  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');
-      var body = document.createElement('social-login-body');
-      var socialLoginBtn = mailExchanger === 'Microsoft' ?
-          loginButton('Microsoft', function () { return onMicrosoftSignIn(onUserLogin); }) :
-          loginButton('Google', function () { return onGoogleSignIn(onUserLogin); });
-      var proceedMagicLinkRequest = document.createElement('a');
+      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', function () {
+      proceedMagicLinkRequest.addEventListener('click', () => {
           handleMagicLinkRequest(token, onReturn, backgroundImage, currentPage, clientBody, userEmail);
           closeMagicLinkModal();
           result.remove();
       });
       body.append(email, msg, socialLoginBtn, proceedMagicLinkRequest);
-      var modal = juxModal(getTranslation("using-".concat(mailExchanger.toLowerCase(), "-email")), [], '', false, false, body, '', '', function () { return result.remove(); });
+      const modal = juxModal(getTranslation(`using-${mailExchanger.toLowerCase()}-email`), [], '', false, false, body, '', '', () => result.remove());
       modal.setAttribute('data-cy', 'social-login-modal');
       result.appendChild(modal);
-      var wrapper = modal.querySelector('modal-wrapper');
+      const wrapper = modal.querySelector('modal-wrapper');
       wrapper.style.maxWidth = '360px';
       wrapper.style.width = '100%';
       return result;
   };
 
-  var isValidEmail = function (email) {
-      var 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,}))$/;
+  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);
   };
 
-  var recommendSocialLogin = function (userEmail, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal) {
+  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));
   };
-  var hasProvider = function (data, provider) {
-      return data.some(function (entry) { return entry.includes(provider); });
+  const hasProvider = (data, provider) => {
+      return data.some((entry) => entry.includes(provider));
   };
-  var getMailExchanger = function (domainName) { return __awaiter$2(void 0, void 0, void 0, function () {
-      var data;
-      return __generator$2(this, function (_a) {
-          switch (_a.label) {
-              case 0: return [4 /*yield*/, getMXData(domainName)];
-              case 1:
-                  data = _a.sent();
-                  if (!data) {
-                      return [2 /*return*/, null];
-                  }
-                  if (hasProvider(data, 'outlook.com')) {
-                      return [2 /*return*/, 'Microsoft'];
-                  }
-                  if (hasProvider(data, 'google.com')) {
-                      return [2 /*return*/, 'Google'];
-                  }
-                  return [2 /*return*/, null];
-          }
-      });
-  }); };
-  var onMagicLinkRequest = function (token, input, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes) { return __awaiter$2(void 0, void 0, void 0, function () {
-      var email, domain, mailExchanger, supportedMailExchanger;
-      return __generator$2(this, function (_a) {
-          switch (_a.label) {
-              case 0:
-                  email = input.value;
-                  if (!email.includes('-test@') && !token) {
-                      console.error('invalid-captcha-response');
-                      // logError('invalid-captcha-response');
-                      return [2 /*return*/];
-                  }
-                  if (!isValidEmail(email)) return [3 /*break*/, 2];
-                  domain = email.split('@')[1] || '';
-                  return [4 /*yield*/, getMailExchanger(domain)];
-              case 1:
-                  mailExchanger = _a.sent();
-                  supportedMailExchanger = mailExchanger !== null;
-                  if (supportedMailExchanger && loginTypes.includes(mailExchanger)) {
-                      recommendSocialLogin(email, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal);
-                      return [2 /*return*/];
-                  }
-                  _a.label = 2;
-              case 2:
-                  handleMagicLinkRequest(token, onReturn, backgroundImage, currentPage, clientBody);
-                  closeMagicLinkModal();
-                  return [2 /*return*/];
+  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;
           }
-      });
-  }); };
-  var applyMagicEmailFieldStyle = function (el) {
+      }
+      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%';
   };
-  var applyInputStyle = function (input) {
-      input.style.border = "1px solid ".concat(juxDarkGrey);
+  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 ".concat(juxDimmedDarkGrey);
+      input.style.boxShadow = `inset 0 2px 3px ${juxDimmedDarkGrey}`;
       input.style.height = '40px';
       input.style.whiteSpace = 'pre-line';
       input.style.boxSizing = 'border-box';
   };
-  var applyBtnStyle = function (btn) {
+  const applyBtnStyle = (btn) => {
       btn.style.alignSelf = 'flex-end';
       btn.style.backgroundColor = juxLightGreen;
-      btn.style.border = "2px solid ".concat(juxLightGreen);
+      btn.style.border = `2px solid ${juxLightGreen}`;
       btn.style.borderRadius = '8px';
       btn.style.color = juxWhite;
       btn.style.cursor = 'pointer';
@@ -14524,121 +14488,99 @@ var juxWeb = (function (exports) {
       btn.style.padding = '10px 16px';
       btn.style.position = 'relative';
   };
-  var magicEmailField = function (onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes) {
-      var result = document.createElement('magic-email-field');
+  const magicEmailField = (onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes) => {
+      const result = document.createElement('magic-email-field');
       applyMagicEmailFieldStyle(result);
-      var captcha = googleCaptcha();
-      var input = document.createElement('input');
+      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', function (ev) {
+      input.addEventListener('keydown', (ev) => {
           if (ev.key === 'Enter') {
               onMagicLinkRequest(captcha.getAttribute('token'), input, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes);
           }
       });
-      var btn = document.createElement('button');
+      const btn = document.createElement('button');
       applyBtnStyle(btn);
       btn.id = 'send-magic';
       btn.className = 'primary-button';
-      btn.addEventListener('click', function (_ev) { return onMagicLinkRequest(captcha.getAttribute('token'), input, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes); });
+      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;
   };
 
-  var magicLinkModal = function (onUserLogin, onReturn, backgroundImage, currentPage, clientBody, loginTypes) {
-      var result = document.createElement('magic-link-modal');
-      var subtitle = document.createElement('magic-link-request-subtitle');
+  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');
-      var body = document.createElement('magic-link-request-body');
-      body.append(subtitle, magicEmailField(onUserLogin, onReturn, backgroundImage, currentPage, clientBody, function () { return result.remove(); }, loginTypes));
-      var modal = juxModal(getTranslation('magic-link-request-title'), [], '', false, false, body, '', '', function () { return result.remove(); });
+      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);
-      var wrapper = modal.querySelector('modal-wrapper');
+      const wrapper = modal.querySelector('modal-wrapper');
       wrapper.style.maxWidth = '360px';
       wrapper.style.width = '100%';
       return result;
   };
 
-  var applyContainerStyles = function (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';
-  };
-  var applyPageStyles = function (page) {
-      page.style.backgroundPosition = '50%';
-      page.style.backgroundSize = 'cover';
-      page.style.display = 'block';
-      page.style.height = '100%';
-  };
-  var onEmailLoginRequest = function (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) {
-      var onReturn = function () { return clientApp.appendChild(loginPage); };
+  const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
+      const onReturn = () => clientApp.appendChild(loginPage);
       loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
   };
-  var appendLoginTypes = function (loginPage, section, clientApp, onUserLogin, loginTypes, backgroundImg) {
+  const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes, backgroundImg) => {
       if (loginTypes.includes('Google')) {
-          section.appendChild(loginButton('Google', function () { return onGoogleSignIn(onUserLogin); }));
+          section.appendChild(loginButton('Google', () => onGoogleSignIn(onUserLogin)));
       }
       if (loginTypes.includes('Microsoft')) {
-          section.appendChild(loginButton('Microsoft', function () { return onMicrosoftSignIn(onUserLogin); }));
+          section.appendChild(loginButton('Microsoft', () => onMicrosoftSignIn(onUserLogin)));
       }
       if (loginTypes.includes('Linkedin')) {
-          section.appendChild(loginButton('LinkedIn', function () { return console.log('login with Linkedin'); }));
+          section.appendChild(loginButton('LinkedIn', () => console.log('login with Linkedin')));
       }
       if (loginTypes.includes('Email')) {
-          section.appendChild(loginButton('Email', function () { return onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, loginTypes); }));
+          section.appendChild(loginButton('Email', () => onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, loginTypes)));
       }
   };
-  var loginPage = function (clientApp, backgroundImg, onUserLogin, loginTypes) {
-      var result = document.createElement('login-page');
-      applyPageStyles(result);
-      var section = document.createElement('section');
-      applyContainerStyles(section);
-      var salutation = document.createElement('sign-in-salutation');
+  const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
+      const content = [];
+      const salutation = document.createElement('sign-in-salutation');
       salutation.textContent = getTranslation('sign-in-salutation');
-      var explanation = document.createElement('sign-in-explanation');
+      const explanation = document.createElement('sign-in-explanation');
       explanation.textContent = getTranslation('sign-in-explanation');
-      var msg = document.createElement('sign-in-msg');
+      const msg = document.createElement('sign-in-msg');
       msg.textContent = getTranslation('sign-in-msg-general');
-      result.style.backgroundImage = "url(".concat(backgroundImg, ")");
-      section.append(salutation, explanation, msg);
+      content.push(salutation, explanation, msg);
+      const result = basePage('login-page', backgroundImg, content);
+      const section = result.querySelector('section');
       appendLoginTypes(result, section, clientApp, onUserLogin, loginTypes, backgroundImg);
-      result.appendChild(section);
       return result;
   };
 
-  var Query = /** @class */ (function (_super) {
-      __extends$2(Query, _super);
-      function Query(endpoint, onResult, params, onError) {
-          var _this = _super.call(this, endpoint) || this;
-          _this.params = params;
-          _this.onResult = onResult;
-          _this.onError = onError;
-          return _this;
+  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;
       }
-      return Query;
-  }(Event));
-  var query = function (element, endpoint, onResult, params, onError) {
-      element.dispatchEvent(new Query(endpoint, onResult, params, 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));
   };
 
   exports.chosenLanguage = chosenLanguage;
+  exports.command = command;
   exports.getTranslation = getTranslation;
   exports.handleMagicLinkRequest = handleMagicLinkRequest;
   exports.initLanguage = initLanguage;