@klauswuestefeld/jux-web 2026.7.24 → 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');
@@ -14946,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;
   };
 
@@ -15208,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'));
   };
@@ -15273,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');
@@ -15287,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);
       };

package/dist/login/magic-link-requested-page.d.ts

@@ -1 +1 @@
-export declare const magicLinkRequestedPage: (backgroundImg: string, onReturn: any) => HTMLElement;
+export declare const magicLinkRequestedPage: (backgroundImg: string, onReturn: any, onUserLogin: any, onLoginError: any) => HTMLElement;

package/dist/login/session.d.ts

@@ -12,5 +12,5 @@ export declare const initSession: ({ clientApp, supportedLoginTypes, onUserLogin
 export declare const onMicrosoftSignIn: (onUserLogin: any) => Promise<void>;
 export declare const onGoogleSignIn: (onUserLogin: any) => void;
 export declare const onAuthPasswordLogin: (credentials: any, onUserLogin: any, onLoginError: any, onReturn: any, clientApp: HTMLElement, backgroundImg: string) => void;
-export declare const handleMagicLinkRequest: (token: string | null, onReturn: any, backgroundImage: string, currentPage: HTMLElement, clientBody: HTMLElement, email?: string) => void;
+export declare const handleMagicLinkRequest: (token: string | null, onReturn: any, backgroundImage: string, currentPage: HTMLElement, clientBody: HTMLElement, email: string, onUserLogin: any, onLoginError: any) => void;
 export {};

package/dist/main.esm.js

@@ -202,12 +202,15 @@ const backButton = (type, fn) => {
     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');
@@ -1626,139 +1629,50 @@ const authSignIn = (onUserLogin) => {
     }
 };
 
-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;
 };
 
@@ -1888,7 +1802,8 @@ const initSession = ({ clientApp, supportedLoginTypes, onUserLogin, onLoginError
         }));
         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'));
 };
@@ -1953,7 +1868,7 @@ const onAuthPasswordLogin = (credentials, onUserLogin, onLoginError, onReturn, c
     };
     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');
@@ -1967,7 +1882,7 @@ const handleMagicLinkRequest = (token, onReturn, backgroundImage, currentPage, c
             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);
     };

package/dist/main.js

@@ -226,12 +226,15 @@ const backButton = (type, fn) => {
     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');
@@ -1650,139 +1653,50 @@ const authSignIn = (onUserLogin) => {
     }
 };
 
-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;
 };
 
@@ -1912,7 +1826,8 @@ const initSession = ({ clientApp, supportedLoginTypes, onUserLogin, onLoginError
         }));
         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'));
 };
@@ -1977,7 +1892,7 @@ const onAuthPasswordLogin = (credentials, onUserLogin, onLoginError, onReturn, c
     };
     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');
@@ -1991,7 +1906,7 @@ const handleMagicLinkRequest = (token, onReturn, backgroundImage, currentPage, c
             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);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klauswuestefeld/jux-web",
-  "version": "2026.7.24",
+  "version": "2026.10.9",
   "author": "Jux.House",
   "license": "Copyrighted",
   "description": "",
@@ -11,7 +11,7 @@
   "homepage": "https://github.com/klauswuestefeld/jux-web#readme",
   "bugs": {
     "url": "https://github.com/klauswuestefeld/jux-web/issues"
-  }, 
+  },
   "dependencies": {
     "@azure/msal-browser": "2.21.0"
   },

package/dist/contact-us/contact-field.d.ts

@@ -1 +0,0 @@
-export declare const contactField: (tag: string | undefined, elType: string, elName: string, required?: boolean, value?: string | null) => HTMLElement;

package/dist/contact-us/contact-us-modal.d.ts

@@ -1 +0,0 @@
-export declare const contactUsModal: (subject: string) => HTMLElement;