@klauswuestefeld/jux-web 2024.2.8 → 2024.3.28

package/dist/main.esm.js

@@ -1,89 +1,89 @@
 import * as msal from '@azure/msal-browser';
 
-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;
 };
 
 /******************************************************************************
@@ -111,1146 +111,1193 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-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=';
-};
-// TODO: use jux-events to call commands and queries inside jux-web library
-const handleJuxEvents = (ev) => {
-    const { endpoint, onResult, params, onError } = ev;
-    const onJsonResponse = (res) => onResult ? onResult(res) : null;
-    const onHelpMessage = (err) => onError ? onError(err) : null;
-    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) => {
-    const params = JSON.stringify(postContent);
-    backendRequest('POST', getApiUrl() + endpoint, params, 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(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 { requestType, 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, requestType);
+};
+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(void 0, [url_1, options_1, onSuccess_1, onError_1, onRedirect_1, ...args_1], void 0, function* (url, options, onSuccess, onError, onRedirect, requestType = 'query', handleUnauthorized = defaultHandleUnauthorized, retrial = false, retrialNum = 0) {
+    if (requestRunning && !retrial) { // only allow one request at a time
+        setTimeout(() => backendRequest(url, options, onSuccess, onError, onRedirect, requestType, 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({}, options);
+    if (requestType === 'query') {
+        requestInit.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 (requestType === 'command') {
+            // Do not retry applying command if it fails for the first time.
+            onError('There was an error performing your request. Please try again later.');
+            requestRunning = false;
+            return;
+        }
+        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, requestType, 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, requestType = "query") => {
+    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, requestType);
+};
+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, 'query', 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(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;
+    }
 });
 
-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', 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;
+<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);
-    // 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(void 0, void 0, void 0, function* () {
-    const msalConfig = { auth: { clientId: process.env.MICROSOFT_CLIENT_ID } };
-    const msalInstance = new msal.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(void 0, void 0, void 0, function* () {
+    const msalConfig = { auth: { clientId: process.env.MICROSOFT_CLIENT_ID } };
+    const msalInstance = new msal.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(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(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(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(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('POST', 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(type, method, endpoint, onResult, params, onError, onRedirect) {
+        super('jux-event', { bubbles: true, cancelable: true, composed: true });
+        this.requestType = type;
+        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('query', 'POST', endpoint, onResult, params, onError, onRedirect));
+};
+const command = (element, endpoint, onResult, params, onError, onRedirect) => {
+    element.dispatchEvent(new JuxEvent('command', 'POST', endpoint, onResult, params, onError, onRedirect));
 };
 
-export { chosenLanguage, command, getTranslation, handleJuxEvents, handleMagicLinkRequest, initLanguage, initSession, loginButton, loginPage, magicLinkModal, onMicrosoftSignIn, query, reloadWithLanguageOverride, requestMagicLink };
+export { chosenLanguage, command, getTranslation, handleJuxEvent, handleMagicLinkRequest, initLanguage, initSession, loginButton, loginPage, magicLinkModal, onMicrosoftSignIn, query, reloadWithLanguageOverride, requestMagicLink };