@klauswuestefeld/jux-web 2024.2.6-4 → 2024.2.7-1

package/dist/api-client.d.ts

@@ -1,9 +1,10 @@
 export declare const setBackendUrl: (backendUrl: string) => void;
+export declare const getBackendUrl: () => string;
 export declare const handleJuxEvents: (ev: Event) => void;
-export declare const backendRequest: (requestType: string, urlString: string, params: any, onJsonResponse: (response: any) => any, onHelpMessage: (message: string) => any) => void;
+export declare const backendRequest: (requestType: string, urlString: string, params: any, onJsonResponse: (response: any) => any, onHelpMessage: (message: string) => any, handleUnauthorized?: () => void) => void;
 export declare const backendPost: (endpoint: string, postContent: any, onJsonResponse: (response: any) => any, onHelpMessage: (message: string) => any) => void;
 export declare const backendGet: (endpoint: string, params: any, onJsonResponse: (response: any) => any, onHelpMessage: (message: string) => any) => void;
-export declare const requestMagicLink: (data: any, onJsonResponse: (response: any) => any) => void;
+export declare const requestMagicLink: (data: any, onJsonResponse: (response: any) => any, onUnauthorized: () => void) => void;
 export declare const openMagicLink: (magicToken: string, onJsonResponse: (response: any) => any, onHelpMessage: (message: string) => any) => void;
 export declare const googleLogin: (token: string, onLogin: (response: any) => any, onLoginError: (message: string) => any) => void;
 export declare const microsoftLogin: (token: string, onLogin: (response: any) => any, onLoginError: (message: string) => any) => void;

package/dist/jux-web.js

@@ -196,7 +196,13 @@ var juxWeb = (function (exports) {
   const backendHelpMessage = (req) => {
       return req.response && req.response.error || req.response || req;
   };
-  const backendRequest = (requestType, urlString, params, onJsonResponse, onHelpMessage) => {
+  const defaultHandleUnauthorized = () => {
+      localStorage.removeItem('token');
+      alert(getTranslation('session-expired-msg'));
+      location.reload();
+      // googleAuthSignOut(); TODO
+  };
+  const backendRequest = (requestType, urlString, params, onJsonResponse, onHelpMessage, handleUnauthorized = defaultHandleUnauthorized) => {
       if (urlString.includes(getBackendUrl())) {
           urlString = urlString.replace(getBackendUrl(), getBackendUrlToTry());
       }
@@ -219,10 +225,7 @@ var juxWeb = (function (exports) {
       req.responseType = 'json';
       req.onerror = req.ontimeout = () => {
           if (req.status === 401) {
-              localStorage.removeItem('token');
-              alert(getTranslation('session-expired-msg'));
-              location.reload();
-              // googleAuthSignOut(); TODO
+              handleUnauthorized();
           }
           else if (req.status === 0) {
               if (retries >= maxRetries) {
@@ -269,8 +272,10 @@ var juxWeb = (function (exports) {
   const backendGet = (endpoint, params, onJsonResponse, onHelpMessage) => {
       backendRequest('GET', getApiUrl() + endpoint, params, onJsonResponse, onHelpMessage);
   };
-  const requestMagicLink = (data, onJsonResponse) => {
-      backendRequest('GET', getMagicAuthReqUrl() + encodeURIComponent(data.email) + '&destination=' + extractTokenFromWindowLocation('destination') + '&token=' + data.token, null, onJsonResponse, () => { });
+  const requestMagicLink = (data, onJsonResponse, onUnauthorized) => {
+      const { email, token } = data;
+      const url = getMagicAuthReqUrl() + encodeURIComponent(email) + '&destination=' + extractTokenFromWindowLocation('destination') + '&token=' + token;
+      backendRequest('GET', url, null, onJsonResponse, console.error, onUnauthorized);
   };
   const openMagicLink = (magicToken, onJsonResponse, onHelpMessage) => {
       backendRequest('GET', getMagicAuthUrl() + magicToken, null, onJsonResponse, onHelpMessage);
@@ -14095,16 +14100,7 @@ var juxWeb = (function (exports) {
       return result;
   };
 
-  const applyPageStyles$1 = (page, backgroundImg) => {
-      page.style.backgroundImage = `url(${backgroundImg})`;
-      page.style.display = 'block';
-      page.style.width = '100%';
-      page.style.height = '100%';
-      page.style.backgroundPosition = '50%';
-      page.style.backgroundSize = 'cover';
-      page.style.display = 'block';
-  };
-  const applyContainerStyles$1 = (container) => {
+  const applyContainerStyles = (container) => {
       container.style.backgroundColor = '#ffffffdd';
       container.style.borderRadius = '16px';
       container.style.inset = '50% 50% 50% 0';
@@ -14120,6 +14116,24 @@ var juxWeb = (function (exports) {
       container.style.margin = '0 auto';
       container.style.paddingTop = '0';
   };
+  const applyPageStyles = (page, backgroundImg) => {
+      page.style.backgroundImage = `url(${backgroundImg})`;
+      page.style.backgroundPosition = '50%';
+      page.style.backgroundSize = 'cover';
+      page.style.display = 'block';
+      page.style.height = '100%';
+  };
+  const basePage = (pageName, backgroundImg, content) => {
+      const result = document.createElement(pageName);
+      result.className = 'base-login-page';
+      applyPageStyles(result, backgroundImg);
+      const section = document.createElement('section');
+      applyContainerStyles(section);
+      content.forEach(element => section.appendChild(element));
+      result.appendChild(section);
+      return result;
+  };
+
   const applyBtnStyles = (btn) => {
       btn.style.cursor = 'pointer';
       btn.style.textDecoration = 'underline';
@@ -14134,22 +14148,20 @@ var juxWeb = (function (exports) {
       btn.style.font = 'inherit';
   };
   const magicLinkRequestedPage = (backgroundImg, onReturn) => {
-      const result = document.createElement('magic-link-requested-page');
-      const section = document.createElement('section');
-      applyContainerStyles$1(section);
-      const magicLinkSent = document.createElement('p');
-      magicLinkSent.id = 'magic-link-sent';
-      magicLinkSent.textContent = getTranslation(magicLinkSent.id);
-      magicLinkSent.style.marginBottom = '10px';
-      const magicLinkEmail = document.createElement('p');
-      magicLinkEmail.id = 'magic-link-email';
-      magicLinkEmail.style.fontWeight = '700';
-      magicLinkEmail.style.marginBottom = '10px';
-      const magicLinkHowTo = document.createElement('p');
-      magicLinkHowTo.id = 'magic-link-how-to';
-      magicLinkHowTo.innerHTML = getTranslation(magicLinkHowTo.id);
-      magicLinkHowTo.style.padding = '0 30px';
-      magicLinkHowTo.style.textAlign = 'center';
+      const content = [];
+      const sent = document.createElement('p');
+      sent.id = 'magic-link-sent';
+      sent.textContent = getTranslation(sent.id);
+      sent.style.marginBottom = '10px';
+      const email = document.createElement('p');
+      email.id = 'magic-link-email';
+      email.style.fontWeight = '700';
+      email.style.marginBottom = '10px';
+      const howTo = document.createElement('p');
+      howTo.id = 'magic-link-how-to';
+      howTo.innerHTML = getTranslation(howTo.id);
+      howTo.style.padding = '0 30px';
+      howTo.style.textAlign = 'center';
       const btn = document.createElement('button');
       btn.id = 'email-not-received-btn';
       btn.addEventListener('click', () => document.body.appendChild(contactUsModal('email-not-sent')));
@@ -14165,9 +14177,38 @@ var juxWeb = (function (exports) {
       returnLink.style.cursor = 'pointer';
       returnLink.style.fontWeight = '700';
       returnLink.style.textDecoration = 'underline';
-      section.append(magicLinkSent, magicLinkEmail, magicLinkHowTo, btn, returnLink);
-      applyPageStyles$1(result, backgroundImg);
-      result.appendChild(section);
+      content.push(sent, email, howTo, btn, returnLink);
+      const result = basePage('magic-link-requested-page', backgroundImg, content);
+      return result;
+  };
+
+  const unauthorizedMagicLinkRequestPage = (backgroundImg, onReturn) => {
+      const content = [];
+      const notSent = document.createElement('p');
+      notSent.id = 'magic-link-not-sent';
+      notSent.textContent = getTranslation(notSent.id);
+      notSent.style.marginBottom = '10px';
+      const email = document.createElement('p');
+      email.id = 'magic-link-email';
+      email.style.fontWeight = '700';
+      email.style.marginBottom = '10px';
+      const info = document.createElement('p');
+      info.id = 'magic-link-fail-info';
+      info.innerHTML = getTranslation(info.id);
+      info.style.padding = '0 30px';
+      info.style.textAlign = 'center';
+      const back = document.createElement('a');
+      back.textContent = getTranslation('return-link');
+      back.onclick = () => {
+          result.remove();
+          onReturn();
+      };
+      back.style.marginTop = '32px';
+      back.style.cursor = 'pointer';
+      back.style.fontWeight = '700';
+      back.style.textDecoration = 'underline';
+      content.push(notSent, email, info, back);
+      const result = basePage('unauthorized-magic-link-request-page', backgroundImg, content);
       return result;
   };
 
@@ -14192,7 +14233,10 @@ var juxWeb = (function (exports) {
   };
   const clearSession = () => {
       // onUserChanged(null);
+      // TODO: find a better way to preserve backend-url
+      const backendUrl = getBackendUrl(); // Preserve backend, since the authentication was succcessfull
       localStorage.clear();
+      setBackendUrl(backendUrl);
       // @ts-ignore
       window.store = {};
   };
@@ -14319,12 +14363,15 @@ var juxWeb = (function (exports) {
       }
       const payload = { email, token };
       const onRequestMagicLink = () => {
-          requestMagicLink(payload, (_res) => {
+          const onResponse = (page) => {
               currentPage.remove();
-              clientBody.appendChild(magicLinkRequestedPage(backgroundImage, onReturn));
-              const magicLinkEmail = document.querySelector('#magic-link-email');
+              clientBody.appendChild(page);
+              const magicLinkEmail = page.querySelector('#magic-link-email');
               magicLinkEmail.textContent = email;
-          });
+          };
+          const onSuccess = () => onResponse(magicLinkRequestedPage(backgroundImage, onReturn));
+          const onUnauthorized = () => onResponse(unauthorizedMagicLinkRequestPage(backgroundImage, onReturn));
+          requestMagicLink(payload, onSuccess, onUnauthorized);
       };
       // @ts-ignore
       if (window.store.fetchUserBackendUrl) {
@@ -14485,28 +14532,6 @@ var juxWeb = (function (exports) {
       return result;
   };
 
-  const applyContainerStyles = (container) => {
-      container.style.backgroundColor = '#ffffffdd';
-      container.style.borderRadius = '16px';
-      container.style.inset = '50% 50% 50% 0';
-      container.style.position = 'relative';
-      container.style.transform = 'translateY(-50%)';
-      container.style.width = '620px';
-      container.style.alignItems = 'center';
-      container.style.display = 'flex';
-      container.style.flexDirection = 'column';
-      container.style.fontSize = '16px';
-      container.style.height = '100%';
-      container.style.justifyContent = 'center';
-      container.style.margin = '0 auto';
-      container.style.paddingTop = '0';
-  };
-  const applyPageStyles = (page) => {
-      page.style.backgroundPosition = '50%';
-      page.style.backgroundSize = 'cover';
-      page.style.display = 'block';
-      page.style.height = '100%';
-  };
   const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
       const onReturn = () => clientApp.appendChild(loginPage);
       loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
@@ -14526,20 +14551,17 @@ var juxWeb = (function (exports) {
       }
   };
   const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
-      const result = document.createElement('login-page');
-      applyPageStyles(result);
-      const section = document.createElement('section');
-      applyContainerStyles(section);
+      const content = [];
       const salutation = document.createElement('sign-in-salutation');
       salutation.textContent = getTranslation('sign-in-salutation');
       const explanation = document.createElement('sign-in-explanation');
       explanation.textContent = getTranslation('sign-in-explanation');
       const msg = document.createElement('sign-in-msg');
       msg.textContent = getTranslation('sign-in-msg-general');
-      result.style.backgroundImage = `url(${backgroundImg})`;
-      section.append(salutation, explanation, msg);
+      content.push(salutation, explanation, msg);
+      const result = basePage('login-page', backgroundImg, content);
+      const section = result.querySelector('section');
       appendLoginTypes(result, section, clientApp, onUserLogin, loginTypes, backgroundImg);
-      result.appendChild(section);
       return result;
   };
 

package/dist/login/base-page.d.ts

@@ -0,0 +1 @@
+export declare const basePage: (pageName: string, backgroundImg: string, content: HTMLElement[]) => HTMLElement;

package/dist/login/session.d.ts

@@ -1,6 +1,5 @@
 export declare const setBackendToken: (token: string) => void;
 export declare const onTokenAcquired: (token: string, onUserLogin: any) => void;
-export declare const clearSession: () => void;
 export declare const initSession: (clientApp: HTMLElement, supportedLoginTypes: string[], onUserLogin: any, backgroundImage: string, fetchUserBackendUrl: any, magicLinkRequestEndpoint: string | null, magicLinkAuthEndpoint: string | null) => void;
 export declare const onMicrosoftSignIn: (onUserLogin: any) => Promise<void>;
 export declare const onGoogleSignIn: (onUserLogin: any) => void;

package/dist/login/unauthorized-magic-link-request-page.d.ts

@@ -0,0 +1 @@
+export declare const unauthorizedMagicLinkRequestPage: (backgroundImg: string, onReturn: any) => HTMLElement;

package/dist/main.esm.js

@@ -195,7 +195,13 @@ const removeOverlay = () => {
 const backendHelpMessage = (req) => {
     return req.response && req.response.error || req.response || req;
 };
-const backendRequest = (requestType, urlString, params, onJsonResponse, onHelpMessage) => {
+const defaultHandleUnauthorized = () => {
+    localStorage.removeItem('token');
+    alert(getTranslation('session-expired-msg'));
+    location.reload();
+    // googleAuthSignOut(); TODO
+};
+const backendRequest = (requestType, urlString, params, onJsonResponse, onHelpMessage, handleUnauthorized = defaultHandleUnauthorized) => {
     if (urlString.includes(getBackendUrl())) {
         urlString = urlString.replace(getBackendUrl(), getBackendUrlToTry());
     }
@@ -218,10 +224,7 @@ const backendRequest = (requestType, urlString, params, onJsonResponse, onHelpMe
     req.responseType = 'json';
     req.onerror = req.ontimeout = () => {
         if (req.status === 401) {
-            localStorage.removeItem('token');
-            alert(getTranslation('session-expired-msg'));
-            location.reload();
-            // googleAuthSignOut(); TODO
+            handleUnauthorized();
         }
         else if (req.status === 0) {
             if (retries >= maxRetries) {
@@ -268,8 +271,10 @@ const backendPost = (endpoint, postContent, onJsonResponse, onHelpMessage) => {
 const backendGet = (endpoint, params, onJsonResponse, onHelpMessage) => {
     backendRequest('GET', getApiUrl() + endpoint, params, onJsonResponse, onHelpMessage);
 };
-const requestMagicLink = (data, onJsonResponse) => {
-    backendRequest('GET', getMagicAuthReqUrl() + encodeURIComponent(data.email) + '&destination=' + extractTokenFromWindowLocation('destination') + '&token=' + data.token, null, onJsonResponse, () => { });
+const requestMagicLink = (data, onJsonResponse, onUnauthorized) => {
+    const { email, token } = data;
+    const url = getMagicAuthReqUrl() + encodeURIComponent(email) + '&destination=' + extractTokenFromWindowLocation('destination') + '&token=' + token;
+    backendRequest('GET', url, null, onJsonResponse, console.error, onUnauthorized);
 };
 const openMagicLink = (magicToken, onJsonResponse, onHelpMessage) => {
     backendRequest('GET', getMagicAuthUrl() + magicToken, null, onJsonResponse, onHelpMessage);
@@ -775,16 +780,7 @@ const contactUsModal = (subject) => {
     return result;
 };
 
-const applyPageStyles$1 = (page, backgroundImg) => {
-    page.style.backgroundImage = `url(${backgroundImg})`;
-    page.style.display = 'block';
-    page.style.width = '100%';
-    page.style.height = '100%';
-    page.style.backgroundPosition = '50%';
-    page.style.backgroundSize = 'cover';
-    page.style.display = 'block';
-};
-const applyContainerStyles$1 = (container) => {
+const applyContainerStyles = (container) => {
     container.style.backgroundColor = '#ffffffdd';
     container.style.borderRadius = '16px';
     container.style.inset = '50% 50% 50% 0';
@@ -800,6 +796,24 @@ const applyContainerStyles$1 = (container) => {
     container.style.margin = '0 auto';
     container.style.paddingTop = '0';
 };
+const applyPageStyles = (page, backgroundImg) => {
+    page.style.backgroundImage = `url(${backgroundImg})`;
+    page.style.backgroundPosition = '50%';
+    page.style.backgroundSize = 'cover';
+    page.style.display = 'block';
+    page.style.height = '100%';
+};
+const basePage = (pageName, backgroundImg, content) => {
+    const result = document.createElement(pageName);
+    result.className = 'base-login-page';
+    applyPageStyles(result, backgroundImg);
+    const section = document.createElement('section');
+    applyContainerStyles(section);
+    content.forEach(element => section.appendChild(element));
+    result.appendChild(section);
+    return result;
+};
+
 const applyBtnStyles = (btn) => {
     btn.style.cursor = 'pointer';
     btn.style.textDecoration = 'underline';
@@ -814,22 +828,20 @@ const applyBtnStyles = (btn) => {
     btn.style.font = 'inherit';
 };
 const magicLinkRequestedPage = (backgroundImg, onReturn) => {
-    const result = document.createElement('magic-link-requested-page');
-    const section = document.createElement('section');
-    applyContainerStyles$1(section);
-    const magicLinkSent = document.createElement('p');
-    magicLinkSent.id = 'magic-link-sent';
-    magicLinkSent.textContent = getTranslation(magicLinkSent.id);
-    magicLinkSent.style.marginBottom = '10px';
-    const magicLinkEmail = document.createElement('p');
-    magicLinkEmail.id = 'magic-link-email';
-    magicLinkEmail.style.fontWeight = '700';
-    magicLinkEmail.style.marginBottom = '10px';
-    const magicLinkHowTo = document.createElement('p');
-    magicLinkHowTo.id = 'magic-link-how-to';
-    magicLinkHowTo.innerHTML = getTranslation(magicLinkHowTo.id);
-    magicLinkHowTo.style.padding = '0 30px';
-    magicLinkHowTo.style.textAlign = 'center';
+    const content = [];
+    const sent = document.createElement('p');
+    sent.id = 'magic-link-sent';
+    sent.textContent = getTranslation(sent.id);
+    sent.style.marginBottom = '10px';
+    const email = document.createElement('p');
+    email.id = 'magic-link-email';
+    email.style.fontWeight = '700';
+    email.style.marginBottom = '10px';
+    const howTo = document.createElement('p');
+    howTo.id = 'magic-link-how-to';
+    howTo.innerHTML = getTranslation(howTo.id);
+    howTo.style.padding = '0 30px';
+    howTo.style.textAlign = 'center';
     const btn = document.createElement('button');
     btn.id = 'email-not-received-btn';
     btn.addEventListener('click', () => document.body.appendChild(contactUsModal('email-not-sent')));
@@ -845,9 +857,38 @@ const magicLinkRequestedPage = (backgroundImg, onReturn) => {
     returnLink.style.cursor = 'pointer';
     returnLink.style.fontWeight = '700';
     returnLink.style.textDecoration = 'underline';
-    section.append(magicLinkSent, magicLinkEmail, magicLinkHowTo, btn, returnLink);
-    applyPageStyles$1(result, backgroundImg);
-    result.appendChild(section);
+    content.push(sent, email, howTo, btn, returnLink);
+    const result = basePage('magic-link-requested-page', backgroundImg, content);
+    return result;
+};
+
+const unauthorizedMagicLinkRequestPage = (backgroundImg, onReturn) => {
+    const content = [];
+    const notSent = document.createElement('p');
+    notSent.id = 'magic-link-not-sent';
+    notSent.textContent = getTranslation(notSent.id);
+    notSent.style.marginBottom = '10px';
+    const email = document.createElement('p');
+    email.id = 'magic-link-email';
+    email.style.fontWeight = '700';
+    email.style.marginBottom = '10px';
+    const info = document.createElement('p');
+    info.id = 'magic-link-fail-info';
+    info.innerHTML = getTranslation(info.id);
+    info.style.padding = '0 30px';
+    info.style.textAlign = 'center';
+    const back = document.createElement('a');
+    back.textContent = getTranslation('return-link');
+    back.onclick = () => {
+        result.remove();
+        onReturn();
+    };
+    back.style.marginTop = '32px';
+    back.style.cursor = 'pointer';
+    back.style.fontWeight = '700';
+    back.style.textDecoration = 'underline';
+    content.push(notSent, email, info, back);
+    const result = basePage('unauthorized-magic-link-request-page', backgroundImg, content);
     return result;
 };
 
@@ -872,7 +913,10 @@ const onTokenAcquired = (token, onUserLogin) => {
 };
 const clearSession = () => {
     // onUserChanged(null);
+    // TODO: find a better way to preserve backend-url
+    const backendUrl = getBackendUrl(); // Preserve backend, since the authentication was succcessfull
     localStorage.clear();
+    setBackendUrl(backendUrl);
     // @ts-ignore
     window.store = {};
 };
@@ -999,12 +1043,15 @@ const handleMagicLinkRequest = (token, onReturn, backgroundImage, currentPage, c
     }
     const payload = { email, token };
     const onRequestMagicLink = () => {
-        requestMagicLink(payload, (_res) => {
+        const onResponse = (page) => {
             currentPage.remove();
-            clientBody.appendChild(magicLinkRequestedPage(backgroundImage, onReturn));
-            const magicLinkEmail = document.querySelector('#magic-link-email');
+            clientBody.appendChild(page);
+            const magicLinkEmail = page.querySelector('#magic-link-email');
             magicLinkEmail.textContent = email;
-        });
+        };
+        const onSuccess = () => onResponse(magicLinkRequestedPage(backgroundImage, onReturn));
+        const onUnauthorized = () => onResponse(unauthorizedMagicLinkRequestPage(backgroundImage, onReturn));
+        requestMagicLink(payload, onSuccess, onUnauthorized);
     };
     // @ts-ignore
     if (window.store.fetchUserBackendUrl) {
@@ -1165,28 +1212,6 @@ const magicLinkModal = (onUserLogin, onReturn, backgroundImage, currentPage, cli
     return result;
 };
 
-const applyContainerStyles = (container) => {
-    container.style.backgroundColor = '#ffffffdd';
-    container.style.borderRadius = '16px';
-    container.style.inset = '50% 50% 50% 0';
-    container.style.position = 'relative';
-    container.style.transform = 'translateY(-50%)';
-    container.style.width = '620px';
-    container.style.alignItems = 'center';
-    container.style.display = 'flex';
-    container.style.flexDirection = 'column';
-    container.style.fontSize = '16px';
-    container.style.height = '100%';
-    container.style.justifyContent = 'center';
-    container.style.margin = '0 auto';
-    container.style.paddingTop = '0';
-};
-const applyPageStyles = (page) => {
-    page.style.backgroundPosition = '50%';
-    page.style.backgroundSize = 'cover';
-    page.style.display = 'block';
-    page.style.height = '100%';
-};
 const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
     const onReturn = () => clientApp.appendChild(loginPage);
     loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
@@ -1206,20 +1231,17 @@ const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes
     }
 };
 const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
-    const result = document.createElement('login-page');
-    applyPageStyles(result);
-    const section = document.createElement('section');
-    applyContainerStyles(section);
+    const content = [];
     const salutation = document.createElement('sign-in-salutation');
     salutation.textContent = getTranslation('sign-in-salutation');
     const explanation = document.createElement('sign-in-explanation');
     explanation.textContent = getTranslation('sign-in-explanation');
     const msg = document.createElement('sign-in-msg');
     msg.textContent = getTranslation('sign-in-msg-general');
-    result.style.backgroundImage = `url(${backgroundImg})`;
-    section.append(salutation, explanation, msg);
+    content.push(salutation, explanation, msg);
+    const result = basePage('login-page', backgroundImg, content);
+    const section = result.querySelector('section');
     appendLoginTypes(result, section, clientApp, onUserLogin, loginTypes, backgroundImg);
-    result.appendChild(section);
     return result;
 };
 

package/dist/main.js

@@ -219,7 +219,13 @@ const removeOverlay = () => {
 const backendHelpMessage = (req) => {
     return req.response && req.response.error || req.response || req;
 };
-const backendRequest = (requestType, urlString, params, onJsonResponse, onHelpMessage) => {
+const defaultHandleUnauthorized = () => {
+    localStorage.removeItem('token');
+    alert(getTranslation('session-expired-msg'));
+    location.reload();
+    // googleAuthSignOut(); TODO
+};
+const backendRequest = (requestType, urlString, params, onJsonResponse, onHelpMessage, handleUnauthorized = defaultHandleUnauthorized) => {
     if (urlString.includes(getBackendUrl())) {
         urlString = urlString.replace(getBackendUrl(), getBackendUrlToTry());
     }
@@ -242,10 +248,7 @@ const backendRequest = (requestType, urlString, params, onJsonResponse, onHelpMe
     req.responseType = 'json';
     req.onerror = req.ontimeout = () => {
         if (req.status === 401) {
-            localStorage.removeItem('token');
-            alert(getTranslation('session-expired-msg'));
-            location.reload();
-            // googleAuthSignOut(); TODO
+            handleUnauthorized();
         }
         else if (req.status === 0) {
             if (retries >= maxRetries) {
@@ -292,8 +295,10 @@ const backendPost = (endpoint, postContent, onJsonResponse, onHelpMessage) => {
 const backendGet = (endpoint, params, onJsonResponse, onHelpMessage) => {
     backendRequest('GET', getApiUrl() + endpoint, params, onJsonResponse, onHelpMessage);
 };
-const requestMagicLink = (data, onJsonResponse) => {
-    backendRequest('GET', getMagicAuthReqUrl() + encodeURIComponent(data.email) + '&destination=' + extractTokenFromWindowLocation('destination') + '&token=' + data.token, null, onJsonResponse, () => { });
+const requestMagicLink = (data, onJsonResponse, onUnauthorized) => {
+    const { email, token } = data;
+    const url = getMagicAuthReqUrl() + encodeURIComponent(email) + '&destination=' + extractTokenFromWindowLocation('destination') + '&token=' + token;
+    backendRequest('GET', url, null, onJsonResponse, console.error, onUnauthorized);
 };
 const openMagicLink = (magicToken, onJsonResponse, onHelpMessage) => {
     backendRequest('GET', getMagicAuthUrl() + magicToken, null, onJsonResponse, onHelpMessage);
@@ -799,16 +804,7 @@ const contactUsModal = (subject) => {
     return result;
 };
 
-const applyPageStyles$1 = (page, backgroundImg) => {
-    page.style.backgroundImage = `url(${backgroundImg})`;
-    page.style.display = 'block';
-    page.style.width = '100%';
-    page.style.height = '100%';
-    page.style.backgroundPosition = '50%';
-    page.style.backgroundSize = 'cover';
-    page.style.display = 'block';
-};
-const applyContainerStyles$1 = (container) => {
+const applyContainerStyles = (container) => {
     container.style.backgroundColor = '#ffffffdd';
     container.style.borderRadius = '16px';
     container.style.inset = '50% 50% 50% 0';
@@ -824,6 +820,24 @@ const applyContainerStyles$1 = (container) => {
     container.style.margin = '0 auto';
     container.style.paddingTop = '0';
 };
+const applyPageStyles = (page, backgroundImg) => {
+    page.style.backgroundImage = `url(${backgroundImg})`;
+    page.style.backgroundPosition = '50%';
+    page.style.backgroundSize = 'cover';
+    page.style.display = 'block';
+    page.style.height = '100%';
+};
+const basePage = (pageName, backgroundImg, content) => {
+    const result = document.createElement(pageName);
+    result.className = 'base-login-page';
+    applyPageStyles(result, backgroundImg);
+    const section = document.createElement('section');
+    applyContainerStyles(section);
+    content.forEach(element => section.appendChild(element));
+    result.appendChild(section);
+    return result;
+};
+
 const applyBtnStyles = (btn) => {
     btn.style.cursor = 'pointer';
     btn.style.textDecoration = 'underline';
@@ -838,22 +852,20 @@ const applyBtnStyles = (btn) => {
     btn.style.font = 'inherit';
 };
 const magicLinkRequestedPage = (backgroundImg, onReturn) => {
-    const result = document.createElement('magic-link-requested-page');
-    const section = document.createElement('section');
-    applyContainerStyles$1(section);
-    const magicLinkSent = document.createElement('p');
-    magicLinkSent.id = 'magic-link-sent';
-    magicLinkSent.textContent = getTranslation(magicLinkSent.id);
-    magicLinkSent.style.marginBottom = '10px';
-    const magicLinkEmail = document.createElement('p');
-    magicLinkEmail.id = 'magic-link-email';
-    magicLinkEmail.style.fontWeight = '700';
-    magicLinkEmail.style.marginBottom = '10px';
-    const magicLinkHowTo = document.createElement('p');
-    magicLinkHowTo.id = 'magic-link-how-to';
-    magicLinkHowTo.innerHTML = getTranslation(magicLinkHowTo.id);
-    magicLinkHowTo.style.padding = '0 30px';
-    magicLinkHowTo.style.textAlign = 'center';
+    const content = [];
+    const sent = document.createElement('p');
+    sent.id = 'magic-link-sent';
+    sent.textContent = getTranslation(sent.id);
+    sent.style.marginBottom = '10px';
+    const email = document.createElement('p');
+    email.id = 'magic-link-email';
+    email.style.fontWeight = '700';
+    email.style.marginBottom = '10px';
+    const howTo = document.createElement('p');
+    howTo.id = 'magic-link-how-to';
+    howTo.innerHTML = getTranslation(howTo.id);
+    howTo.style.padding = '0 30px';
+    howTo.style.textAlign = 'center';
     const btn = document.createElement('button');
     btn.id = 'email-not-received-btn';
     btn.addEventListener('click', () => document.body.appendChild(contactUsModal('email-not-sent')));
@@ -869,9 +881,38 @@ const magicLinkRequestedPage = (backgroundImg, onReturn) => {
     returnLink.style.cursor = 'pointer';
     returnLink.style.fontWeight = '700';
     returnLink.style.textDecoration = 'underline';
-    section.append(magicLinkSent, magicLinkEmail, magicLinkHowTo, btn, returnLink);
-    applyPageStyles$1(result, backgroundImg);
-    result.appendChild(section);
+    content.push(sent, email, howTo, btn, returnLink);
+    const result = basePage('magic-link-requested-page', backgroundImg, content);
+    return result;
+};
+
+const unauthorizedMagicLinkRequestPage = (backgroundImg, onReturn) => {
+    const content = [];
+    const notSent = document.createElement('p');
+    notSent.id = 'magic-link-not-sent';
+    notSent.textContent = getTranslation(notSent.id);
+    notSent.style.marginBottom = '10px';
+    const email = document.createElement('p');
+    email.id = 'magic-link-email';
+    email.style.fontWeight = '700';
+    email.style.marginBottom = '10px';
+    const info = document.createElement('p');
+    info.id = 'magic-link-fail-info';
+    info.innerHTML = getTranslation(info.id);
+    info.style.padding = '0 30px';
+    info.style.textAlign = 'center';
+    const back = document.createElement('a');
+    back.textContent = getTranslation('return-link');
+    back.onclick = () => {
+        result.remove();
+        onReturn();
+    };
+    back.style.marginTop = '32px';
+    back.style.cursor = 'pointer';
+    back.style.fontWeight = '700';
+    back.style.textDecoration = 'underline';
+    content.push(notSent, email, info, back);
+    const result = basePage('unauthorized-magic-link-request-page', backgroundImg, content);
     return result;
 };
 
@@ -896,7 +937,10 @@ const onTokenAcquired = (token, onUserLogin) => {
 };
 const clearSession = () => {
     // onUserChanged(null);
+    // TODO: find a better way to preserve backend-url
+    const backendUrl = getBackendUrl(); // Preserve backend, since the authentication was succcessfull
     localStorage.clear();
+    setBackendUrl(backendUrl);
     // @ts-ignore
     window.store = {};
 };
@@ -1023,12 +1067,15 @@ const handleMagicLinkRequest = (token, onReturn, backgroundImage, currentPage, c
     }
     const payload = { email, token };
     const onRequestMagicLink = () => {
-        requestMagicLink(payload, (_res) => {
+        const onResponse = (page) => {
             currentPage.remove();
-            clientBody.appendChild(magicLinkRequestedPage(backgroundImage, onReturn));
-            const magicLinkEmail = document.querySelector('#magic-link-email');
+            clientBody.appendChild(page);
+            const magicLinkEmail = page.querySelector('#magic-link-email');
             magicLinkEmail.textContent = email;
-        });
+        };
+        const onSuccess = () => onResponse(magicLinkRequestedPage(backgroundImage, onReturn));
+        const onUnauthorized = () => onResponse(unauthorizedMagicLinkRequestPage(backgroundImage, onReturn));
+        requestMagicLink(payload, onSuccess, onUnauthorized);
     };
     // @ts-ignore
     if (window.store.fetchUserBackendUrl) {
@@ -1189,28 +1236,6 @@ const magicLinkModal = (onUserLogin, onReturn, backgroundImage, currentPage, cli
     return result;
 };
 
-const applyContainerStyles = (container) => {
-    container.style.backgroundColor = '#ffffffdd';
-    container.style.borderRadius = '16px';
-    container.style.inset = '50% 50% 50% 0';
-    container.style.position = 'relative';
-    container.style.transform = 'translateY(-50%)';
-    container.style.width = '620px';
-    container.style.alignItems = 'center';
-    container.style.display = 'flex';
-    container.style.flexDirection = 'column';
-    container.style.fontSize = '16px';
-    container.style.height = '100%';
-    container.style.justifyContent = 'center';
-    container.style.margin = '0 auto';
-    container.style.paddingTop = '0';
-};
-const applyPageStyles = (page) => {
-    page.style.backgroundPosition = '50%';
-    page.style.backgroundSize = 'cover';
-    page.style.display = 'block';
-    page.style.height = '100%';
-};
 const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
     const onReturn = () => clientApp.appendChild(loginPage);
     loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
@@ -1230,20 +1255,17 @@ const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes
     }
 };
 const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
-    const result = document.createElement('login-page');
-    applyPageStyles(result);
-    const section = document.createElement('section');
-    applyContainerStyles(section);
+    const content = [];
     const salutation = document.createElement('sign-in-salutation');
     salutation.textContent = getTranslation('sign-in-salutation');
     const explanation = document.createElement('sign-in-explanation');
     explanation.textContent = getTranslation('sign-in-explanation');
     const msg = document.createElement('sign-in-msg');
     msg.textContent = getTranslation('sign-in-msg-general');
-    result.style.backgroundImage = `url(${backgroundImg})`;
-    section.append(salutation, explanation, msg);
+    content.push(salutation, explanation, msg);
+    const result = basePage('login-page', backgroundImg, content);
+    const section = result.querySelector('section');
     appendLoginTypes(result, section, clientApp, onUserLogin, loginTypes, backgroundImg);
-    result.appendChild(section);
     return result;
 };
 

package/package.json

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