@klauswuestefeld/jux-web 2026.3.6 → 2026.3.16

package/dist/jux/language.d.ts

@@ -1,4 +1,7 @@
 export declare let chosenLanguage: any;
 export declare const reloadWithLanguageOverride: (lang: string) => void;
 export declare const getTranslation: (k: string) => string;
+export declare const formatTextToMarkdown: (container: HTMLElement, text: string) => void;
+export declare const createFormattedParagraph: (text: string) => HTMLParagraphElement;
+export declare const applyFormattedTranslation: (element: HTMLElement, key: string) => void;
 export declare const initLanguage: (translations_: any, defaultLanguage?: string) => void;

package/dist/jux-web.js

@@ -6,7 +6,7 @@ var juxWeb = (function (exports) {
       if (prefix !== undefined) {
           throw 'prefix was already set to ' + prefix;
       }
-      if (!s) {
+      if (!s && s !== '') {
           throw 'prefix argument is ' + s + ', use empty string if you want no prefix.';
       }
       prefix = s;
@@ -36,6 +36,61 @@ var juxWeb = (function (exports) {
   };
   // @ts-ignore
   const getTranslation = (k) => translations[k] || k;
+  const formatTextToMarkdown = (container, text) => {
+      // Split the text on bold markers (**...**), <br>, markdown-style links [text](url),
+      // and semantic color tags like {warning|text}.
+      // The regex uses a capture group to include the delimiters in the results.
+      const parts = text.split(/(\*\*.*?\*\*|<br>|\[.*?\]\(https?:\/\/.*?\)|\{[a-z0-9-]+\|.*?\})/gi);
+      parts.forEach(part => {
+          if (!part)
+              return;
+          if (part === '<br>') {
+              container.appendChild(document.createElement('br'));
+              return;
+          }
+          if (part.startsWith('**') && part.endsWith('**')) {
+              const bold = document.createElement('b');
+              bold.textContent = part.slice(2, -2);
+              container.appendChild(bold);
+              return;
+          }
+          if (part.startsWith('[') && part.includes('](') && part.endsWith(')')) {
+              const match = part.match(/\[(.*?)\]\((https?:\/\/.*?)\)/);
+              if (match) {
+                  const [, label, href] = match;
+                  const link = document.createElement('a');
+                  link.href = href;
+                  link.textContent = label;
+                  link.target = '_blank';
+                  link.rel = 'noopener noreferrer';
+                  container.appendChild(link);
+                  return;
+              }
+          }
+          if (part.startsWith('{') && part.includes('|') && part.endsWith('}')) {
+              const match = part.match(/\{([a-z0-9-]+)\|(.*?)\}/i);
+              if (match) {
+                  const [, className, text] = match;
+                  const coloredText = document.createElement('span');
+                  coloredText.className = `${className.toLowerCase()}`;
+                  formatTextToMarkdown(coloredText, text);
+                  container.appendChild(coloredText);
+                  return;
+              }
+          }
+          container.appendChild(document.createTextNode(part));
+      });
+  };
+  const createFormattedParagraph = (text) => {
+      const paragraph = document.createElement('p');
+      formatTextToMarkdown(paragraph, text);
+      return paragraph;
+  };
+  const applyFormattedTranslation = (element, key) => {
+      const wrapper = document.createElement('span');
+      formatTextToMarkdown(wrapper, getTranslation(key));
+      element.replaceChildren(...Array.from(wrapper.childNodes));
+  };
   const initLanguage = (translations_, defaultLanguage = 'en') => {
       exports.chosenLanguage = getLocalStorageItem(OVERRIDE_KEY) || getBrowserLanguage();
       translations = translations_[exports.chosenLanguage] || translations_[defaultLanguage];
@@ -1045,6 +1100,8 @@ var juxWeb = (function (exports) {
       container.style.justifyContent = 'center';
       container.style.margin = '0 auto';
       container.style.paddingTop = '0';
+      container.style.paddingInline = '36px';
+      container.style.boxSizing = 'border-box';
   };
   const applyBtnsContainerStyles = (container) => {
       container.style.display = 'flex';
@@ -1141,14 +1198,19 @@ var juxWeb = (function (exports) {
   };
   const appendLoginTypes = (loginPage, btnsContainer, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg, explanation, handleSSOLogin, handlers) => {
       const upperLoginTypes = loginTypes.map(str => str.toUpperCase());
+      if (upperLoginTypes.length === 0) {
+          applyFormattedTranslation(explanation, 'sign-in-no-login-type');
+          btnsContainer.replaceChildren();
+          return;
+      }
       const onlyAuth = upperLoginTypes.length > 0 &&
           upperLoginTypes.every(type => type === 'AUTH-PASSWORD');
-      explanation.textContent = getTranslation('sign-in-explanation');
+      applyFormattedTranslation(explanation, 'sign-in-explanation');
       if (upperLoginTypes.includes('AUTH-PASSWORD2') || onlyAuth) {
           btnsContainer.replaceChildren();
           btnsContainer.appendChild(authPasswordForm(clientApp, loginPage, onUserLogin, onLoginError, backgroundImg, handlers));
           upperLoginTypes.pop();
-          explanation.textContent = getTranslation('sign-in-email');
+          applyFormattedTranslation(explanation, 'sign-in-email');
           if (!onlyAuth) {
               btnsContainer.appendChild(backButton('Back', () => {
                   btnsContainer.replaceChildren();
@@ -1187,7 +1249,7 @@ var juxWeb = (function (exports) {
       const salutation = document.createElement('sign-in-salutation');
       salutation.textContent = getTranslation('sign-in-salutation');
       const explanation = document.createElement('sign-in-explanation');
-      explanation.textContent = getTranslation('sign-in-explanation');
+      applyFormattedTranslation(explanation, 'sign-in-explanation');
       const msg = document.createElement('sign-in-msg');
       msg.textContent = getTranslation('sign-in-msg-general');
       content.push(salutation, explanation, msg);
@@ -14838,7 +14900,7 @@ var juxWeb = (function (exports) {
       email.style.marginBottom = '10px';
       const howTo = document.createElement('p');
       howTo.id = 'magic-link-how-to';
-      howTo.innerHTML = getTranslation(howTo.id);
+      applyFormattedTranslation(howTo, howTo.id);
       howTo.style.padding = '0 30px';
       howTo.style.textAlign = 'center';
       const btn = document.createElement('button');
@@ -14873,7 +14935,7 @@ var juxWeb = (function (exports) {
       email.style.marginBottom = '10px';
       const info = document.createElement('p');
       info.id = 'magic-link-fail-info';
-      info.innerHTML = getTranslation(failInfo || info.id);
+      applyFormattedTranslation(info, failInfo || info.id);
       info.style.padding = '0 30px';
       info.style.textAlign = 'center';
       const back = document.createElement('a');
@@ -14951,9 +15013,9 @@ var juxWeb = (function (exports) {
       window.juxWebGlobal.fetchUserBackendUrl = fetchUserBackendUrl;
       window.juxWebGlobal.magicLinkRequestEndpoint = magicLinkRequestEndpoint;
       window.juxWebGlobal.magicLinkAuthEndpoint = magicLinkAuthEndpoint;
-      const supportedLoginTypesArray = Array.isArray(supportedLoginTypes)
+      const supportedLoginTypesArray = (Array.isArray(supportedLoginTypes)
           ? supportedLoginTypes
-          : [supportedLoginTypes];
+          : [supportedLoginTypes]).filter((loginType) => typeof loginType === 'string' && loginType.trim().length > 0);
       const signInToken = extractTokenFromWindowLocation('sign-in') || extractTokenFromWindowLocation('magic-link');
       if (signInToken) {
           const onOpenMagicLink = () => {
@@ -15102,6 +15164,8 @@ var juxWeb = (function (exports) {
 
   exports.clearSession = clearSession;
   exports.command = command;
+  exports.createFormattedParagraph = createFormattedParagraph;
+  exports.formatTextToMarkdown = formatTextToMarkdown;
   exports.getCurrentUser = getCurrentUser;
   exports.getTranslation = getTranslation;
   exports.handleJuxEvent = handleJuxEvent;

package/dist/main.d.ts

@@ -1,4 +1,4 @@
-export { chosenLanguage, reloadWithLanguageOverride, initLanguage, getTranslation } from './jux/language';
+export { chosenLanguage, reloadWithLanguageOverride, initLanguage, getTranslation, formatTextToMarkdown, createFormattedParagraph } from './jux/language';
 export { loginButton } from './login/login-button';
 export { loginPage } from './login/login-page';
 export { handleMagicLinkRequest, initSession, onMicrosoftSignIn } from './login/session';

package/dist/main.esm.js

@@ -5,7 +5,7 @@ const setLocalStoragePrefix = (s) => {
     if (prefix !== undefined) {
         throw 'prefix was already set to ' + prefix;
     }
-    if (!s) {
+    if (!s && s !== '') {
         throw 'prefix argument is ' + s + ', use empty string if you want no prefix.';
     }
     prefix = s;
@@ -35,6 +35,61 @@ const reloadWithLanguageOverride = (lang) => {
 };
 // @ts-ignore
 const getTranslation = (k) => translations[k] || k;
+const formatTextToMarkdown = (container, text) => {
+    // Split the text on bold markers (**...**), <br>, markdown-style links [text](url),
+    // and semantic color tags like {warning|text}.
+    // The regex uses a capture group to include the delimiters in the results.
+    const parts = text.split(/(\*\*.*?\*\*|<br>|\[.*?\]\(https?:\/\/.*?\)|\{[a-z0-9-]+\|.*?\})/gi);
+    parts.forEach(part => {
+        if (!part)
+            return;
+        if (part === '<br>') {
+            container.appendChild(document.createElement('br'));
+            return;
+        }
+        if (part.startsWith('**') && part.endsWith('**')) {
+            const bold = document.createElement('b');
+            bold.textContent = part.slice(2, -2);
+            container.appendChild(bold);
+            return;
+        }
+        if (part.startsWith('[') && part.includes('](') && part.endsWith(')')) {
+            const match = part.match(/\[(.*?)\]\((https?:\/\/.*?)\)/);
+            if (match) {
+                const [, label, href] = match;
+                const link = document.createElement('a');
+                link.href = href;
+                link.textContent = label;
+                link.target = '_blank';
+                link.rel = 'noopener noreferrer';
+                container.appendChild(link);
+                return;
+            }
+        }
+        if (part.startsWith('{') && part.includes('|') && part.endsWith('}')) {
+            const match = part.match(/\{([a-z0-9-]+)\|(.*?)\}/i);
+            if (match) {
+                const [, className, text] = match;
+                const coloredText = document.createElement('span');
+                coloredText.className = `${className.toLowerCase()}`;
+                formatTextToMarkdown(coloredText, text);
+                container.appendChild(coloredText);
+                return;
+            }
+        }
+        container.appendChild(document.createTextNode(part));
+    });
+};
+const createFormattedParagraph = (text) => {
+    const paragraph = document.createElement('p');
+    formatTextToMarkdown(paragraph, text);
+    return paragraph;
+};
+const applyFormattedTranslation = (element, key) => {
+    const wrapper = document.createElement('span');
+    formatTextToMarkdown(wrapper, getTranslation(key));
+    element.replaceChildren(...Array.from(wrapper.childNodes));
+};
 const initLanguage = (translations_, defaultLanguage = 'en') => {
     chosenLanguage = getLocalStorageItem(OVERRIDE_KEY) || getBrowserLanguage();
     translations = translations_[chosenLanguage] || translations_[defaultLanguage];
@@ -1044,6 +1099,8 @@ const applyContainerStyles = (container) => {
     container.style.justifyContent = 'center';
     container.style.margin = '0 auto';
     container.style.paddingTop = '0';
+    container.style.paddingInline = '36px';
+    container.style.boxSizing = 'border-box';
 };
 const applyBtnsContainerStyles = (container) => {
     container.style.display = 'flex';
@@ -1140,14 +1197,19 @@ const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage,
 };
 const appendLoginTypes = (loginPage, btnsContainer, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg, explanation, handleSSOLogin, handlers) => {
     const upperLoginTypes = loginTypes.map(str => str.toUpperCase());
+    if (upperLoginTypes.length === 0) {
+        applyFormattedTranslation(explanation, 'sign-in-no-login-type');
+        btnsContainer.replaceChildren();
+        return;
+    }
     const onlyAuth = upperLoginTypes.length > 0 &&
         upperLoginTypes.every(type => type === 'AUTH-PASSWORD');
-    explanation.textContent = getTranslation('sign-in-explanation');
+    applyFormattedTranslation(explanation, 'sign-in-explanation');
     if (upperLoginTypes.includes('AUTH-PASSWORD2') || onlyAuth) {
         btnsContainer.replaceChildren();
         btnsContainer.appendChild(authPasswordForm(clientApp, loginPage, onUserLogin, onLoginError, backgroundImg, handlers));
         upperLoginTypes.pop();
-        explanation.textContent = getTranslation('sign-in-email');
+        applyFormattedTranslation(explanation, 'sign-in-email');
         if (!onlyAuth) {
             btnsContainer.appendChild(backButton('Back', () => {
                 btnsContainer.replaceChildren();
@@ -1186,7 +1248,7 @@ const loginPage = (clientApp, backgroundImg, onUserLogin, onLoginError, loginTyp
     const salutation = document.createElement('sign-in-salutation');
     salutation.textContent = getTranslation('sign-in-salutation');
     const explanation = document.createElement('sign-in-explanation');
-    explanation.textContent = getTranslation('sign-in-explanation');
+    applyFormattedTranslation(explanation, 'sign-in-explanation');
     const msg = document.createElement('sign-in-msg');
     msg.textContent = getTranslation('sign-in-msg-general');
     content.push(salutation, explanation, msg);
@@ -1518,7 +1580,7 @@ const magicLinkRequestedPage = (backgroundImg, onReturn) => {
     email.style.marginBottom = '10px';
     const howTo = document.createElement('p');
     howTo.id = 'magic-link-how-to';
-    howTo.innerHTML = getTranslation(howTo.id);
+    applyFormattedTranslation(howTo, howTo.id);
     howTo.style.padding = '0 30px';
     howTo.style.textAlign = 'center';
     const btn = document.createElement('button');
@@ -1553,7 +1615,7 @@ const unauthorizedMagicLinkRequestPage = (backgroundImg, onReturn, failInfo) =>
     email.style.marginBottom = '10px';
     const info = document.createElement('p');
     info.id = 'magic-link-fail-info';
-    info.innerHTML = getTranslation(failInfo || info.id);
+    applyFormattedTranslation(info, failInfo || info.id);
     info.style.padding = '0 30px';
     info.style.textAlign = 'center';
     const back = document.createElement('a');
@@ -1631,9 +1693,9 @@ const initSession = ({ clientApp, supportedLoginTypes, onUserLogin, onLoginError
     window.juxWebGlobal.fetchUserBackendUrl = fetchUserBackendUrl;
     window.juxWebGlobal.magicLinkRequestEndpoint = magicLinkRequestEndpoint;
     window.juxWebGlobal.magicLinkAuthEndpoint = magicLinkAuthEndpoint;
-    const supportedLoginTypesArray = Array.isArray(supportedLoginTypes)
+    const supportedLoginTypesArray = (Array.isArray(supportedLoginTypes)
         ? supportedLoginTypes
-        : [supportedLoginTypes];
+        : [supportedLoginTypes]).filter((loginType) => typeof loginType === 'string' && loginType.trim().length > 0);
     const signInToken = extractTokenFromWindowLocation('sign-in') || extractTokenFromWindowLocation('magic-link');
     if (signInToken) {
         const onOpenMagicLink = () => {
@@ -1780,4 +1842,4 @@ const command = (element, endpoint, onResult, params, onError, onRedirect) => {
     element.dispatchEvent(new JuxEvent('command', 'POST', endpoint, onResult, params, onError, onRedirect));
 };
 
-export { chosenLanguage, clearSession, command, getCurrentUser, getTranslation, handleJuxEvent, handleMagicLinkRequest, initLanguage, initSession, loginButton, loginPage, magicLinkModal, onMicrosoftSignIn, query, reloadWithLanguageOverride, requestMagicLink, resetJuxWebGlobal, setLocalStoragePrefix, upload };
+export { chosenLanguage, clearSession, command, createFormattedParagraph, formatTextToMarkdown, getCurrentUser, getTranslation, handleJuxEvent, handleMagicLinkRequest, initLanguage, initSession, loginButton, loginPage, magicLinkModal, onMicrosoftSignIn, query, reloadWithLanguageOverride, requestMagicLink, resetJuxWebGlobal, setLocalStoragePrefix, upload };

package/dist/main.js

@@ -29,7 +29,7 @@ const setLocalStoragePrefix = (s) => {
     if (prefix !== undefined) {
         throw 'prefix was already set to ' + prefix;
     }
-    if (!s) {
+    if (!s && s !== '') {
         throw 'prefix argument is ' + s + ', use empty string if you want no prefix.';
     }
     prefix = s;
@@ -59,6 +59,61 @@ const reloadWithLanguageOverride = (lang) => {
 };
 // @ts-ignore
 const getTranslation = (k) => translations[k] || k;
+const formatTextToMarkdown = (container, text) => {
+    // Split the text on bold markers (**...**), <br>, markdown-style links [text](url),
+    // and semantic color tags like {warning|text}.
+    // The regex uses a capture group to include the delimiters in the results.
+    const parts = text.split(/(\*\*.*?\*\*|<br>|\[.*?\]\(https?:\/\/.*?\)|\{[a-z0-9-]+\|.*?\})/gi);
+    parts.forEach(part => {
+        if (!part)
+            return;
+        if (part === '<br>') {
+            container.appendChild(document.createElement('br'));
+            return;
+        }
+        if (part.startsWith('**') && part.endsWith('**')) {
+            const bold = document.createElement('b');
+            bold.textContent = part.slice(2, -2);
+            container.appendChild(bold);
+            return;
+        }
+        if (part.startsWith('[') && part.includes('](') && part.endsWith(')')) {
+            const match = part.match(/\[(.*?)\]\((https?:\/\/.*?)\)/);
+            if (match) {
+                const [, label, href] = match;
+                const link = document.createElement('a');
+                link.href = href;
+                link.textContent = label;
+                link.target = '_blank';
+                link.rel = 'noopener noreferrer';
+                container.appendChild(link);
+                return;
+            }
+        }
+        if (part.startsWith('{') && part.includes('|') && part.endsWith('}')) {
+            const match = part.match(/\{([a-z0-9-]+)\|(.*?)\}/i);
+            if (match) {
+                const [, className, text] = match;
+                const coloredText = document.createElement('span');
+                coloredText.className = `${className.toLowerCase()}`;
+                formatTextToMarkdown(coloredText, text);
+                container.appendChild(coloredText);
+                return;
+            }
+        }
+        container.appendChild(document.createTextNode(part));
+    });
+};
+const createFormattedParagraph = (text) => {
+    const paragraph = document.createElement('p');
+    formatTextToMarkdown(paragraph, text);
+    return paragraph;
+};
+const applyFormattedTranslation = (element, key) => {
+    const wrapper = document.createElement('span');
+    formatTextToMarkdown(wrapper, getTranslation(key));
+    element.replaceChildren(...Array.from(wrapper.childNodes));
+};
 const initLanguage = (translations_, defaultLanguage = 'en') => {
     exports.chosenLanguage = getLocalStorageItem(OVERRIDE_KEY) || getBrowserLanguage();
     translations = translations_[exports.chosenLanguage] || translations_[defaultLanguage];
@@ -1068,6 +1123,8 @@ const applyContainerStyles = (container) => {
     container.style.justifyContent = 'center';
     container.style.margin = '0 auto';
     container.style.paddingTop = '0';
+    container.style.paddingInline = '36px';
+    container.style.boxSizing = 'border-box';
 };
 const applyBtnsContainerStyles = (container) => {
     container.style.display = 'flex';
@@ -1164,14 +1221,19 @@ const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage,
 };
 const appendLoginTypes = (loginPage, btnsContainer, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg, explanation, handleSSOLogin, handlers) => {
     const upperLoginTypes = loginTypes.map(str => str.toUpperCase());
+    if (upperLoginTypes.length === 0) {
+        applyFormattedTranslation(explanation, 'sign-in-no-login-type');
+        btnsContainer.replaceChildren();
+        return;
+    }
     const onlyAuth = upperLoginTypes.length > 0 &&
         upperLoginTypes.every(type => type === 'AUTH-PASSWORD');
-    explanation.textContent = getTranslation('sign-in-explanation');
+    applyFormattedTranslation(explanation, 'sign-in-explanation');
     if (upperLoginTypes.includes('AUTH-PASSWORD2') || onlyAuth) {
         btnsContainer.replaceChildren();
         btnsContainer.appendChild(authPasswordForm(clientApp, loginPage, onUserLogin, onLoginError, backgroundImg, handlers));
         upperLoginTypes.pop();
-        explanation.textContent = getTranslation('sign-in-email');
+        applyFormattedTranslation(explanation, 'sign-in-email');
         if (!onlyAuth) {
             btnsContainer.appendChild(backButton('Back', () => {
                 btnsContainer.replaceChildren();
@@ -1210,7 +1272,7 @@ const loginPage = (clientApp, backgroundImg, onUserLogin, onLoginError, loginTyp
     const salutation = document.createElement('sign-in-salutation');
     salutation.textContent = getTranslation('sign-in-salutation');
     const explanation = document.createElement('sign-in-explanation');
-    explanation.textContent = getTranslation('sign-in-explanation');
+    applyFormattedTranslation(explanation, 'sign-in-explanation');
     const msg = document.createElement('sign-in-msg');
     msg.textContent = getTranslation('sign-in-msg-general');
     content.push(salutation, explanation, msg);
@@ -1542,7 +1604,7 @@ const magicLinkRequestedPage = (backgroundImg, onReturn) => {
     email.style.marginBottom = '10px';
     const howTo = document.createElement('p');
     howTo.id = 'magic-link-how-to';
-    howTo.innerHTML = getTranslation(howTo.id);
+    applyFormattedTranslation(howTo, howTo.id);
     howTo.style.padding = '0 30px';
     howTo.style.textAlign = 'center';
     const btn = document.createElement('button');
@@ -1577,7 +1639,7 @@ const unauthorizedMagicLinkRequestPage = (backgroundImg, onReturn, failInfo) =>
     email.style.marginBottom = '10px';
     const info = document.createElement('p');
     info.id = 'magic-link-fail-info';
-    info.innerHTML = getTranslation(failInfo || info.id);
+    applyFormattedTranslation(info, failInfo || info.id);
     info.style.padding = '0 30px';
     info.style.textAlign = 'center';
     const back = document.createElement('a');
@@ -1655,9 +1717,9 @@ const initSession = ({ clientApp, supportedLoginTypes, onUserLogin, onLoginError
     window.juxWebGlobal.fetchUserBackendUrl = fetchUserBackendUrl;
     window.juxWebGlobal.magicLinkRequestEndpoint = magicLinkRequestEndpoint;
     window.juxWebGlobal.magicLinkAuthEndpoint = magicLinkAuthEndpoint;
-    const supportedLoginTypesArray = Array.isArray(supportedLoginTypes)
+    const supportedLoginTypesArray = (Array.isArray(supportedLoginTypes)
         ? supportedLoginTypes
-        : [supportedLoginTypes];
+        : [supportedLoginTypes]).filter((loginType) => typeof loginType === 'string' && loginType.trim().length > 0);
     const signInToken = extractTokenFromWindowLocation('sign-in') || extractTokenFromWindowLocation('magic-link');
     if (signInToken) {
         const onOpenMagicLink = () => {
@@ -1806,6 +1868,8 @@ const command = (element, endpoint, onResult, params, onError, onRedirect) => {
 
 exports.clearSession = clearSession;
 exports.command = command;
+exports.createFormattedParagraph = createFormattedParagraph;
+exports.formatTextToMarkdown = formatTextToMarkdown;
 exports.getCurrentUser = getCurrentUser;
 exports.getTranslation = getTranslation;
 exports.handleJuxEvent = handleJuxEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klauswuestefeld/jux-web",
-  "version": "2026.3.6",
+  "version": "2026.3.16",
   "author": "Jux.House",
   "license": "Copyrighted",
   "description": "",