@klauswuestefeld/jux-web 2026.3.16 → 2026.10.9

package/dist/jux-web.js

@@ -203,12 +203,15 @@ var juxWeb = (function (exports) {
       if (iconHTML) {
           const icon = document.createElement('login-icon');
           icon.style.gridColumnStart = '2';
-          icon.style.width = '28px';
-          icon.style.padding = '6px';
-          icon.style.marginLeft = '4px';
+          icon.style.width = '16px';
+          icon.style.padding = '0';
+          icon.style.marginLeft = '0';
+          icon.style.display = 'flex';
+          icon.style.alignItems = 'center';
           icon.style.boxSizing = 'border-box';
           icon.className = 'ico';
           icon.innerHTML = iconHTML;
+          icon.querySelector('svg').style.display = 'block';
           result.appendChild(icon);
       }
       const label = document.createElement('login-label');
@@ -227,234 +230,6 @@ var juxWeb = (function (exports) {
       return result;
   };
 
-  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 = '2.8rem';
-      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.fontSize = '14px';
-      el.style.rowGap = '8px';
-  };
-  const applyFooterStyle = (footer) => {
-      footer.style.display = 'flex';
-      footer.style.width = '100%';
-      footer.style.justifyContent = 'flex-end';
-      footer.style.alignItems = 'center';
-      footer.style.gap = '0.75rem';
-      footer.style.marginTop = '1.5rem';
-      footer.style.paddingTop = '1rem';
-  };
-  const applyModalButtonStyle = (btn) => {
-      btn.style.display = 'inline-flex';
-      btn.style.alignItems = 'center';
-      btn.style.justifyContent = 'center';
-      btn.style.height = '36px';
-      btn.style.minWidth = '88px';
-      btn.style.padding = '0 16px';
-      btn.style.background = 'rgb(255, 255, 255)';
-      btn.style.border = '1px solid rgb(160, 160, 160)';
-      btn.style.borderRadius = '4px';
-      btn.style.boxShadow = '0 1px 2px rgba(0,0,0,0.15)';
-      btn.style.color = 'rgb(68, 68, 68)';
-      btn.style.fontSize = '14px';
-      btn.style.fontWeight = '500';
-      btn.style.whiteSpace = 'nowrap';
-      btn.style.cursor = 'pointer';
-  };
-  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;
-          h3.style.margin = '0';
-          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');
-      applyFooterStyle(footer);
-      if (btns.includes('cancel')) {
-          const cancelBtn = document.createElement('button');
-          cancelBtn.classList.add('secondary-button', 'modal-button', 'action', 'cancel-btn', 'cancel');
-          applyModalButtonStyle(cancelBtn);
-          const cancelText = document.createElement('button-text');
-          cancelText.textContent = cancelTxt;
-          const cancelSpinner = document.createElement('loading-spinner');
-          if (!busy)
-              cancelSpinner.style.display = 'none';
-          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');
-          applyModalButtonStyle(okBtn);
-          const okText = document.createElement('button-text');
-          okText.textContent = okTxt;
-          const okSpinner = document.createElement('loading-spinner');
-          if (!busy)
-              okSpinner.style.display = 'none';
-          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;
-  };
-
   /******************************************************************************
   Copyright (c) Microsoft Corporation.
 
@@ -865,79 +640,360 @@ var juxWeb = (function (exports) {
               endpoint += `${k}=${params[k]}`;
           });
       }
-      get(endpoint, onJsonResponse, onHelpMessage, null, handleUnauthorized);
-  };
-  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, undefined, // ← use undefined instead of 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 getSSOAuthorizationEndpoint = (onSuccess, onError) => {
-      backendGet('openid/authorization-endpoint', null, onSuccess, onError);
-  };
-  const validateSSOToken = (token, redirectUri, onLogin, onError, handleUnauthorized) => {
-      backendGet('openid/callback', { code: token, 'redirect-uri': redirectUri }, onLogin, onError, handleUnauthorized);
-  };
-  const authPasswordLogin = (credentials, onLogin, onLoginError, handleUnauthorized) => {
-      backendPost('auth-password', credentials, onLogin, onLoginError, handleUnauthorized);
-  };
-  const getMXData = (domainName) => __awaiter$2(void 0, void 0, void 0, function* () {
-      try {
-          const records = yield fetch(`https://dns.google.com/resolve?name=${domainName}&type=MX`, {
-              method: 'GET',
-              mode: 'cors'
-          });
-          if (!records.ok) {
-              console.log('response was not ok');
-              return null;
-          }
-          const recordsJson = yield records.json();
-          const answer = recordsJson.Answer;
-          if (!answer) {
-              return null;
+      get(endpoint, onJsonResponse, onHelpMessage, null, handleUnauthorized);
+  };
+  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, undefined, // ← use undefined instead of 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 getSSOAuthorizationEndpoint = (onSuccess, onError) => {
+      backendGet('openid/authorization-endpoint', null, onSuccess, onError);
+  };
+  const validateSSOToken = (token, redirectUri, onLogin, onError, handleUnauthorized) => {
+      backendGet('openid/callback', { code: token, 'redirect-uri': redirectUri }, onLogin, onError, handleUnauthorized);
+  };
+  const authPasswordLogin = (credentials, onLogin, onLoginError, handleUnauthorized) => {
+      backendPost('auth-password', credentials, onLogin, onLoginError, handleUnauthorized);
+  };
+  const getMXData = (domainName) => __awaiter$2(void 0, void 0, void 0, function* () {
+      try {
+          const records = yield fetch(`https://dns.google.com/resolve?name=${domainName}&type=MX`, {
+              method: 'GET',
+              mode: 'cors'
+          });
+          if (!records.ok) {
+              console.log('response was not ok');
+              return null;
+          }
+          const recordsJson = yield records.json();
+          const answer = recordsJson.Answer;
+          if (!answer) {
+              return null;
+          }
+          return Array.from(answer).map((a) => a.data);
+      }
+      catch (error) {
+          console.error('Fetch failed: ', error);
+          return null;
+      }
+  });
+
+  // TODO: find a better way to import external scripts
+  const script$1 = document.createElement('script');
+  script$1.type = 'text/javascript';
+  script$1.src = 'https://www.google.com/recaptcha/api.js?render=explicit';
+  document.head.appendChild(script$1);
+  const googleCaptcha = () => {
+      const result = document.createElement('google-captcha');
+      const notifyCaptchaChange = () => result.dispatchEvent(new Event('captcha-change'));
+      const renderCaptcha = () => grecaptcha.ready(() => {
+          grecaptcha.render(result, {
+              sitekey: process.env.GOOGLE_CAPTCHA_KEY,
+              callback: (token) => {
+                  result.setAttribute('token', token);
+                  notifyCaptchaChange();
+              },
+              'expired-callback': () => {
+                  result.removeAttribute('token');
+                  notifyCaptchaChange();
+              }
+          });
+          result.dispatchEvent(new Event('captcha-rendered'));
+      });
+      if (typeof grecaptcha === 'undefined') {
+          script$1.addEventListener('load', renderCaptcha, { once: true });
+      }
+      else {
+          renderCaptcha();
+      }
+      return result;
+  };
+
+  const juxWhite = '#FFF';
+  const juxDarkGrey = '#282828';
+  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 = '2.8rem';
+      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.fontSize = '14px';
+      el.style.rowGap = '8px';
+  };
+  const applyFooterStyle = (footer) => {
+      footer.style.display = 'flex';
+      footer.style.width = '100%';
+      footer.style.justifyContent = 'flex-end';
+      footer.style.alignItems = 'center';
+      footer.style.gap = '0.75rem';
+      footer.style.marginTop = '1.5rem';
+      footer.style.paddingTop = '1rem';
+  };
+  const applyModalButtonStyle = (btn) => {
+      btn.style.display = 'inline-flex';
+      btn.style.alignItems = 'center';
+      btn.style.justifyContent = 'center';
+      btn.style.height = '36px';
+      btn.style.minWidth = '88px';
+      btn.style.padding = '0 16px';
+      btn.style.background = 'rgb(255, 255, 255)';
+      btn.style.border = '1px solid rgb(160, 160, 160)';
+      btn.style.borderRadius = '4px';
+      btn.style.boxShadow = '0 1px 2px rgba(0,0,0,0.15)';
+      btn.style.color = 'rgb(68, 68, 68)';
+      btn.style.fontSize = '14px';
+      btn.style.fontWeight = '500';
+      btn.style.whiteSpace = 'nowrap';
+      btn.style.cursor = 'pointer';
+  };
+  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;
+          h3.style.margin = '0';
+          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');
+      applyFooterStyle(footer);
+      if (btns.includes('cancel')) {
+          const cancelBtn = document.createElement('button');
+          cancelBtn.classList.add('secondary-button', 'modal-button', 'action', 'cancel-btn', 'cancel');
+          applyModalButtonStyle(cancelBtn);
+          const cancelText = document.createElement('button-text');
+          cancelText.textContent = cancelTxt;
+          const cancelSpinner = document.createElement('loading-spinner');
+          if (!busy)
+              cancelSpinner.style.display = 'none';
+          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');
+          applyModalButtonStyle(okBtn);
+          const okText = document.createElement('button-text');
+          okText.textContent = okTxt;
+          const okSpinner = document.createElement('loading-spinner');
+          if (!busy)
+              okSpinner.style.display = 'none';
+          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();
           }
-          return Array.from(answer).map((a) => a.data);
-      }
-      catch (error) {
-          console.error('Fetch failed: ', error);
-          return null;
       }
-  });
-
-  // TODO: find a better way to import external scripts
-  const script$1 = document.createElement('script');
-  script$1.type = 'text/javascript';
-  script$1.src = 'https://www.google.com/recaptcha/api.js';
-  document.head.appendChild(script$1);
-  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);
+      attachEventHandlers(result, persistent, onClose);
       return result;
   };
 
+  const loginFieldClass = 'jux-login-field';
+  const addLoginFieldStyles = () => {
+      if (document.querySelector(`style[data-${loginFieldClass}]`))
+          return;
+      const style = document.createElement('style');
+      style.setAttribute(`data-${loginFieldClass}`, '');
+      style.textContent = `
+    .${loginFieldClass}:hover {
+      outline: 1px solid #999 !important;
+      outline-offset: -1px;
+    }
+    .${loginFieldClass}:focus {
+      outline: 2px solid #3943B7 !important;
+      outline-offset: -2px;
+    }
+  `;
+      document.head.appendChild(style);
+  };
+  const applyTextFieldStyle = (field) => {
+      addLoginFieldStyles();
+      field.classList.add(loginFieldClass);
+      field.style.backgroundColor = '#fff';
+      field.style.border = '1px solid #ccc';
+      field.style.borderRadius = '8px';
+      field.style.boxShadow = 'inset 0 2px 3px #28282822';
+      field.style.boxSizing = 'border-box';
+      field.style.color = '#444';
+      field.style.cursor = 'text';
+      field.style.fontFamily = 'Helvetica, Arial, sans-serif';
+      field.style.fontSize = '16px';
+      field.style.height = '40px';
+      field.style.lineHeight = '38px';
+      field.style.margin = '0';
+      field.style.outline = 'none';
+      field.style.overflow = 'hidden';
+      field.style.padding = '0 12px';
+      field.style.width = '100%';
+  };
+
   const socialLoginModal = (userEmail, mailExchanger, token, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, handlers) => {
       const result = document.createElement('social-login-modal');
       const email = document.createElement('p');
@@ -1011,77 +1067,118 @@ var juxWeb = (function (exports) {
       closeMagicLinkModal();
   });
   const applyMagicEmailFieldStyle = (el) => {
+      el.style.alignItems = 'center';
       el.style.display = 'flex';
-      el.style.flexFlow = 'column';
+      el.style.flexFlow = 'row';
+      el.style.gap = '0';
       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 applyCaptchaStyle = (captcha) => {
+      const captchaFrameWidth = 304;
+      const captchaHeight = 78;
+      const contentWidth = 356;
+      const horizontalInset = 1;
+      const scale = (contentWidth - horizontalInset * 2) / captchaFrameWidth;
+      captcha.style.height = `${captchaHeight * scale}px`;
+      captcha.style.overflow = 'visible';
+      captcha.style.width = '100%';
+      const applyWidgetStyle = () => {
+          const widget = captcha.firstElementChild;
+          widget.style.marginLeft = `${horizontalInset}px`;
+          widget.style.width = `${captchaFrameWidth}px`;
+          widget.style.transform = `scale(${scale})`;
+          widget.style.transformOrigin = 'top left';
+      };
+      if (captcha.firstElementChild) {
+          applyWidgetStyle();
+      }
+      else {
+          captcha.addEventListener('captcha-rendered', applyWidgetStyle, { once: true });
+      }
   };
   const applyBtnStyle = (btn) => {
-      btn.style.alignSelf = 'flex-end';
       btn.style.backgroundColor = juxLightGreen;
       btn.style.border = `2px solid ${juxLightGreen}`;
       btn.style.borderRadius = '8px';
+      btn.style.boxSizing = 'border-box';
       btn.style.color = juxWhite;
       btn.style.cursor = 'pointer';
       btn.style.display = 'inline-block';
+      btn.style.fontSize = '16px';
       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 captchaModal = (onVerified, onClose) => {
+      const body = document.createElement('captcha-modal-body');
+      body.style.width = '356px';
+      const modal = juxModal('Security check', [], '', false, false, body, '', '', onClose);
+      modal.id = 'magic-email-captcha-modal';
+      const wrapper = modal.querySelector('modal-wrapper');
+      wrapper.style.maxWidth = '356px';
+      wrapper.style.minWidth = '356px';
+      wrapper.style.width = '356px';
+      modal.querySelector('modal-header h3').style.color = juxDarkGrey;
+      document.body.appendChild(modal);
+      const captcha = googleCaptcha();
+      applyCaptchaStyle(captcha);
+      captcha.addEventListener('captcha-change', () => {
+          const token = captcha.getAttribute('token');
+          if (!token)
+              return;
+          modal.remove();
+          onVerified(token);
+      });
+      body.appendChild(captcha);
+      return modal;
+  };
   const magicEmailField = (onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes, handlers) => {
       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, handlers);
-          }
-      });
+      input.placeholder = 'Email';
+      applyTextFieldStyle(input);
+      input.style.borderRadius = '8px 0 0 8px';
+      input.style.flex = '1';
+      input.style.minWidth = '0';
       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, handlers));
       btn.textContent = getTranslation('send-magic');
-      result.append(input, captcha, btn);
-      return result;
-  };
-
-  const magicLinkModal = (onUserLogin, onReturn, backgroundImage, currentPage, clientBody, loginTypes, handlers) => {
-      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, handlers));
-      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%';
+      btn.style.borderRadius = '0 8px 8px 0';
+      btn.style.margin = '0';
+      let openCaptchaModal = null;
+      const requestMagicLink = (token) => onMagicLinkRequest(token, input, onUserLogin, onReturn, backgroundImage, currentPage, clientBody, closeMagicLinkModal, loginTypes, handlers);
+      btn.addEventListener('click', () => {
+          if (input.value.includes('-test@')) {
+              requestMagicLink(null);
+              return;
+          }
+          if (openCaptchaModal === null || openCaptchaModal === void 0 ? void 0 : openCaptchaModal.isConnected)
+              return;
+          openCaptchaModal = captchaModal((token) => {
+              openCaptchaModal = null;
+              requestMagicLink(token);
+          }, () => openCaptchaModal = null);
+      });
+      const updateButtonState = () => {
+          btn.disabled = !isValidEmail(input.value);
+          btn.style.cursor = btn.disabled ? 'not-allowed' : 'pointer';
+          btn.style.opacity = btn.disabled ? '0.5' : '1';
+      };
+      input.addEventListener('input', updateButtonState);
+      input.addEventListener('keydown', (ev) => {
+          if (ev.key === 'Enter' && !btn.disabled)
+              btn.click();
+      });
+      updateButtonState();
+      result.append(input, btn);
       return result;
   };
 
@@ -1129,6 +1226,78 @@ var juxWeb = (function (exports) {
       return result;
   };
 
+  class JuxWebGlobal {
+      setCurrentUser(newUser) {
+          this._currentUser = newUser;
+      }
+      getCurrentUser() {
+          return this._currentUser;
+      }
+      setBackendToken(token) {
+          this._backendToken = token;
+      }
+      getBackendToken() {
+          return this._backendToken;
+      }
+  }
+
+  const resetJuxWebGlobal = () => {
+      window.juxWebGlobal = new JuxWebGlobal();
+  };
+  const getCurrentUser = () => {
+      var _a;
+      return (_a = window.juxWebGlobal) === null || _a === void 0 ? void 0 : _a.getCurrentUser();
+  };
+
+  const setBackendToken = (token) => {
+      var _a;
+      (_a = window.juxWebGlobal) === null || _a === void 0 ? void 0 : _a.setBackendToken(token);
+      if (token)
+          setLocalStorageItem('token', token);
+  };
+  const clearSession = () => {
+      removeLocalStorageItem('token');
+      resetJuxWebGlobal();
+  };
+  const onTokenAcquired = (token, onUserLogin) => {
+      setBackendToken(token);
+      onUserLogin();
+  };
+
+  const applyLoginTokenStyle = (textarea) => {
+      applyTextFieldStyle(textarea);
+      textarea.style.resize = 'none';
+      textarea.style.setProperty('-webkit-text-security', 'disc');
+  };
+  const loginTokenTextarea = (onUserLogin, onLoginError) => {
+      const juxWebGlobal = window.juxWebGlobal;
+      const textarea = document.createElement('textarea');
+      textarea.id = 'input-login-token';
+      textarea.autocomplete = 'off';
+      textarea.placeholder = 'Paste sign-in token';
+      textarea.rows = 1;
+      textarea.spellcheck = false;
+      textarea.setAttribute('aria-label', 'Sign-in token');
+      applyLoginTokenStyle(textarea);
+      let loginInProgress = false;
+      textarea.addEventListener('input', () => {
+          const loginToken = textarea.value.trim();
+          if (loginToken.length !== 16 || loginInProgress)
+              return;
+          loginInProgress = true;
+          juxWebGlobal.setBackendToken(loginToken);
+          backendGet('profile', null, (res) => {
+              juxWebGlobal.setCurrentUser(res);
+              onTokenAcquired(loginToken, onUserLogin);
+          }, (err) => {
+              loginInProgress = false;
+              juxWebGlobal.setBackendToken('');
+              onLoginError(err);
+          });
+      });
+      return textarea;
+  };
+
   const authPasswordRow = (type, autoCompleteValue) => {
       const result = document.createElement(`${type}-row`);
       result.style.display = 'flex';
@@ -1192,10 +1361,6 @@ var juxWeb = (function (exports) {
       });
       return result;
   };
-  const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes, handlers) => {
-      const onReturn = () => clientApp.appendChild(loginPage);
-      loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes, handlers));
-  };
   const appendLoginTypes = (loginPage, btnsContainer, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg, explanation, handleSSOLogin, handlers) => {
       const upperLoginTypes = loginTypes.map(str => str.toUpperCase());
       if (upperLoginTypes.length === 0) {
@@ -1205,7 +1370,42 @@ var juxWeb = (function (exports) {
       }
       const onlyAuth = upperLoginTypes.length > 0 &&
           upperLoginTypes.every(type => type === 'AUTH-PASSWORD');
+      const onlyEmail = upperLoginTypes.every(type => type === 'EMAIL');
       applyFormattedTranslation(explanation, 'sign-in-explanation');
+      const showLoginTypes = () => {
+          btnsContainer.replaceChildren();
+          appendLoginTypes(loginPage, btnsContainer, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg, explanation, handleSSOLogin, handlers);
+      };
+      const showEmailLogin = () => {
+          btnsContainer.replaceChildren();
+          applyFormattedTranslation(explanation, 'magic-link-request-title');
+          const subtitle = document.createElement('magic-link-request-subtitle');
+          subtitle.style.fontSize = '14px';
+          subtitle.style.lineHeight = '20px';
+          subtitle.style.marginLeft = '2px';
+          subtitle.style.marginTop = '12px';
+          subtitle.style.width = 'calc(100% - 2px)';
+          subtitle.textContent = getTranslation('magic-link-request-subtitle');
+          const onReturn = () => {
+              showLoginTypes();
+              clientApp.appendChild(loginPage);
+          };
+          const content = document.createElement('email-login-content');
+          content.style.alignItems = 'center';
+          content.style.display = 'flex';
+          content.style.flexDirection = 'column';
+          content.style.width = '356px';
+          const tokenInput = loginTokenTextarea(onUserLogin, onLoginError);
+          tokenInput.style.marginTop = '24px';
+          content.append(subtitle, magicEmailField(onUserLogin, onReturn, backgroundImg, loginPage, clientApp, () => { }, upperLoginTypes, handlers), tokenInput);
+          btnsContainer.appendChild(content);
+          if (!onlyEmail)
+              btnsContainer.appendChild(backButton('Back', showLoginTypes));
+      };
+      if (onlyEmail) {
+          showEmailLogin();
+          return;
+      }
       if (upperLoginTypes.includes('AUTH-PASSWORD2') || onlyAuth) {
           btnsContainer.replaceChildren();
           btnsContainer.appendChild(authPasswordForm(clientApp, loginPage, onUserLogin, onLoginError, backgroundImg, handlers));
@@ -1234,7 +1434,7 @@ var juxWeb = (function (exports) {
           btnsContainer.appendChild(loginButton('LINKEDIN', () => console.log('login with Linkedin')));
       }
       if (upperLoginTypes.includes('EMAIL')) {
-          btnsContainer.appendChild(loginButton('EMAIL', () => onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, upperLoginTypes, handlers)));
+          btnsContainer.appendChild(loginButton('EMAIL', showEmailLogin));
       }
       if (upperLoginTypes.includes('AUTH-PASSWORD')) {
           upperLoginTypes.push('AUTH-PASSWORD2');
@@ -14627,44 +14827,6 @@ var juxWeb = (function (exports) {
       document.body.style.pointerEvents = 'auto';
   };
 
-  class JuxWebGlobal {
-      setCurrentUser(newUser) {
-          this._currentUser = newUser;
-      }
-      getCurrentUser() {
-          return this._currentUser;
-      }
-      setBackendToken(token) {
-          this._backendToken = token;
-      }
-      getBackendToken() {
-          return this._backendToken;
-      }
-  }
-
-  const resetJuxWebGlobal = () => {
-      window.juxWebGlobal = new JuxWebGlobal();
-  };
-  const getCurrentUser = () => {
-      var _a;
-      return (_a = window.juxWebGlobal) === null || _a === void 0 ? void 0 : _a.getCurrentUser();
-  };
-
-  const setBackendToken = (token) => {
-      var _a;
-      (_a = window.juxWebGlobal) === null || _a === void 0 ? void 0 : _a.setBackendToken(token);
-      if (token)
-          setLocalStorageItem('token', token);
-  };
-  const clearSession = () => {
-      removeLocalStorageItem('token');
-      resetJuxWebGlobal();
-  };
-  const onTokenAcquired = (token, onUserLogin) => {
-      setBackendToken(token);
-      onUserLogin();
-  };
-
   // TODO: find a better way to import external scripts
   const script = document.createElement('script');
   script.type = 'text/javascript';
@@ -14787,139 +14949,50 @@ var juxWeb = (function (exports) {
       }
   };
 
-  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')}`,
-          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, _f, _g, _h;
-      const result = document.createElement('contact-us-modal');
-      const currentUser = (_a = window.juxWebGlobal) === null || _a === void 0 ? void 0 : _a.getCurrentUser();
-      const currentName = currentUser ? currentUser.name : '';
-      const currentEmail = currentUser ? currentUser.email : (_b = document.querySelector('#magic-link-email')) === null || _b === void 0 ? void 0 : _b.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);
-      (_c = modal.querySelector('modal-wrapper')) === null || _c === void 0 ? void 0 : _c.setAttribute('style', 'max-width: 680px; width: 100%; overflow-y: auto;');
-      const captcha = googleCaptcha();
-      if (subject !== 'email-not-sent') {
-          const admin = ((_e = (_d = window.juxWebGlobal) === null || _d === void 0 ? void 0 : _d.selectedTeam) === null || _e === void 0 ? void 0 : _e.admin) || ((_g = (_f = window.juxWebGlobal) === null || _f === void 0 ? void 0 : _f.getCurrentUser()) === null || _g === void 0 ? void 0 : _g.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);
-      }
-      (_h = nameField.querySelector('input')) === null || _h === void 0 ? void 0 : _h.select();
-      form.addEventListener('submit', (event) => {
-          event.preventDefault();
-          sendInquiry(nameField, emailField, messageField, whatsappField, subject, captcha.getAttribute('token'));
-      });
-      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 magicLinkRequestedPage = (backgroundImg, onReturn, onUserLogin, onLoginError) => {
+      const title = document.createElement('h2');
+      title.textContent = getTranslation('magic-link-confirmation-title');
+      title.style.fontSize = '24px';
+      title.style.lineHeight = '1.25';
+      title.style.margin = '0 0 12px';
       const sent = document.createElement('p');
       sent.id = 'magic-link-sent';
       sent.textContent = getTranslation(sent.id);
-      sent.style.marginBottom = '10px';
+      sent.style.margin = '0';
       const email = document.createElement('p');
       email.id = 'magic-link-email';
       email.style.fontWeight = '700';
-      email.style.marginBottom = '10px';
+      email.style.margin = '4px 0 0';
+      email.style.overflowWrap = 'anywhere';
       const howTo = document.createElement('p');
       howTo.id = 'magic-link-how-to';
       applyFormattedTranslation(howTo, 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 = () => {
+      howTo.style.margin = '28px 0 12px';
+      const tokenInput = loginTokenTextarea(onUserLogin, onLoginError);
+      tokenInput.style.textAlign = 'left';
+      const help = document.createElement('p');
+      applyFormattedTranslation(help, 'magic-link-check-spam');
+      help.style.margin = '20px 0 0';
+      const back = backButton('Back', () => {
           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 content = [title, sent, email, howTo, tokenInput, help];
+      content.forEach(element => {
+          element.style.width = '356px';
+          element.style.maxWidth = '100%';
+      });
       const result = basePage('magic-link-requested-page', backgroundImg, content);
+      result.style.overflowY = 'auto';
+      result.style.scrollbarGutter = 'stable both-edges';
+      const section = result.querySelector('section');
+      section.style.maxWidth = 'calc(100% - 48px)';
+      section.style.lineHeight = '1.5';
+      section.style.textAlign = 'center';
+      const buttons = result.querySelector('btns-container');
+      buttons.style.width = '356px';
+      buttons.style.maxWidth = '100%';
+      buttons.appendChild(back);
       return result;
   };
 
@@ -15049,7 +15122,8 @@ var juxWeb = (function (exports) {
           }));
           return;
       }
-      displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, onLoginError, supportedLoginTypesArray, handleSSOLogin, { onAuthPasswordLogin, onGoogleSignIn, onMicrosoftSignIn, handleMagicLinkRequest }));
+      const requestSignInLink = (token, onReturn, backgroundImage, currentPage, clientBody, email = '') => handleMagicLinkRequest(token, onReturn, backgroundImage, currentPage, clientBody, email, onUserLogin, onLoginError);
+      displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, onLoginError, supportedLoginTypesArray, handleSSOLogin, { onAuthPasswordLogin, onGoogleSignIn, onMicrosoftSignIn, handleMagicLinkRequest: requestSignInLink }));
       // validateThirdPartyCookies(initGapi, () => displayPage(Page.LOGIN));
       // checkMixpanel(() => mixpanel.track('View Login Page'));
   };
@@ -15114,7 +15188,7 @@ var juxWeb = (function (exports) {
       };
       authPasswordLogin(credentials, onSuccess, onError, onUnauthorized);
   };
-  const handleMagicLinkRequest = (token, onReturn, backgroundImage, currentPage, clientBody, email = '') => {
+  const handleMagicLinkRequest = (token, onReturn, backgroundImage, currentPage, clientBody, email, onUserLogin, onLoginError) => {
       var _a;
       if (!email) {
           const mailMagic = document.querySelector('#mail-magic');
@@ -15128,7 +15202,7 @@ var juxWeb = (function (exports) {
               const magicLinkEmail = page.querySelector('#magic-link-email');
               magicLinkEmail.textContent = email;
           };
-          const onSuccess = () => onResponse(magicLinkRequestedPage(backgroundImage, onReturn));
+          const onSuccess = () => onResponse(magicLinkRequestedPage(backgroundImage, onReturn, onUserLogin, onLoginError));
           const onUnauthorized = () => onResponse(unauthorizedMagicLinkRequestPage(backgroundImage, onReturn));
           requestMagicLink(payload, onSuccess, onUnauthorized);
       };
@@ -15142,6 +15216,22 @@ var juxWeb = (function (exports) {
       onRequestMagicLink();
   };
 
+  const magicLinkModal = (onUserLogin, onReturn, backgroundImage, currentPage, clientBody, loginTypes, handlers) => {
+      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, handlers));
+      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;
+  };
+
   class JuxEvent extends Event {
       constructor(type, method, endpoint, onResult, params, onError, onRedirect, extras) {
           super('jux-event', { bubbles: true, cancelable: true, composed: true });