@klauswuestefeld/jux-web 2026.3.16 → 2026.7.24

package/dist/jux-web.js

@@ -227,234 +227,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.
 
@@ -899,45 +671,326 @@ var juxWeb = (function (exports) {
   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;
+  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);
           }
-          return Array.from(answer).map((a) => a.data);
+          const h3 = document.createElement('h3');
+          h3.textContent = title;
+          h3.style.margin = '0';
+          header.appendChild(h3);
       }
-      catch (error) {
-          console.error('Fetch failed: ', error);
-          return null;
+      // END header
+      // START content
+      const modalContent = document.createElement('jux-modal-content');
+      applyJuxModalContentStyle(modalContent);
+      if (content) {
+          modalContent.innerHTML = content;
       }
-  });
-
-  // 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);
+      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;
   };
 
+  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 +1064,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 +1223,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 +1358,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 +1367,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 +1431,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 +14824,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';
@@ -15142,6 +15301,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 });