@klauswuestefeld/jux-web 2024.12.3 → 2024.12.7

package/dist/jux-web.js

@@ -14556,7 +14556,7 @@ var juxWeb = (function (exports) {
       const onError = () => onAuthenticationFailure('login-failed');
       getSSOAuthorizationEndpoint(onSuccess, onError);
   };
-  const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
+  const initSession = (clientApp, supportedLoginTypes, onUserLogin, onLoginError, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
       // if (startNewDemo()) {
       //   initDemo(setBackendToken, onAuthentication);
       //   return;
@@ -14610,7 +14610,7 @@ var juxWeb = (function (exports) {
           handleSSOLogin();
           return;
       }
-      displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, supportedLoginTypes));
+      displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, onLoginError, supportedLoginTypes));
       // validateThirdPartyCookies(initGapi, () => displayPage(Page.LOGIN));
       // checkMixpanel(() => mixpanel.track('View Login Page'));
   };
@@ -14652,7 +14652,7 @@ var juxWeb = (function (exports) {
           authSignIn(onUserLogin);
       }, onCookieError);
   };
-  const onAuthPasswordLogin = (credentials, onUserLogin, onReturn, clientApp, backgroundImg) => {
+  const onAuthPasswordLogin = (credentials, onUserLogin, onLoginError, onReturn, clientApp, backgroundImg) => {
       const { email } = credentials;
       enableSignInLayout();
       const onSuccess = (res) => {
@@ -14663,9 +14663,8 @@ var juxWeb = (function (exports) {
           disableSignInLayout();
       };
       const onError = (err) => {
-          console.error(err);
-          reportError(err);
           disableSignInLayout();
+          onLoginError(err);
       };
       const onUnauthorized = () => {
           disableSignInLayout();
@@ -14852,11 +14851,51 @@ var juxWeb = (function (exports) {
       return result;
   };
 
+  const authPasswordRow = (type, autoCompleteValue) => {
+      const result = document.createElement(`${type}-row`);
+      result.style.display = 'flex';
+      const label = document.createElement('label');
+      label.textContent = type.charAt(0).toUpperCase() + type.slice(1);
+      label.htmlFor = `input-${type}`;
+      const input = document.createElement('input');
+      input.id = `input-${type}`;
+      input.type = type;
+      input.autocomplete = autoCompleteValue;
+      result.append(label, input);
+      return result;
+  };
+  const authPasswordForm = (clientApp, loginPage, onUserLogin, onLoginError, backgroundImg) => {
+      const result = document.createElement('form');
+      const emailRow = authPasswordRow('email', 'username');
+      const emailInput = emailRow.querySelector('input');
+      const passwordRow = authPasswordRow('password', 'current-password');
+      const passwordInput = passwordRow.querySelector('input');
+      const togglePasswordDisplayBtn = document.createElement('button');
+      togglePasswordDisplayBtn.type = 'button';
+      togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
+          const passwordType = passwordInput.type === 'password' ? 'text' : 'password';
+          passwordInput.type = passwordType;
+      });
+      passwordRow.appendChild(togglePasswordDisplayBtn);
+      const handlePasswordLogin = () => onAuthPasswordLogin({ email: emailInput.value, password: passwordInput.value || null }, onUserLogin, onLoginError, onReturn, clientApp, backgroundImg);
+      const onReturn = () => clientApp.appendChild(loginPage);
+      const button = loginButton('Login', handlePasswordLogin);
+      button.classList.add('auth-password');
+      button.setAttribute('type', 'submit');
+      const submitButton = document.createElement('button');
+      submitButton.style.display = 'none';
+      result.append(emailRow, passwordRow, button, submitButton);
+      result.addEventListener('submit', (ev) => {
+          ev.preventDefault();
+          handlePasswordLogin();
+      });
+      return result;
+  };
   const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
       const onReturn = () => clientApp.appendChild(loginPage);
       loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
   };
-  const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes, backgroundImg) => {
+  const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg) => {
       if (loginTypes.includes('Google')) {
           section.appendChild(loginButton('Google', () => onGoogleSignIn(onUserLogin)));
       }
@@ -14870,26 +14909,10 @@ var juxWeb = (function (exports) {
           section.appendChild(loginButton('Email', () => onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, loginTypes)));
       }
       if (loginTypes.includes('auth-password')) {
-          const emailField = document.createElement('input');
-          emailField.id = 'input-email';
-          emailField.type = 'email';
-          const passwordRow = document.createElement('password-row');
-          passwordRow.style.display = 'flex';
-          const passwordField = document.createElement('input');
-          passwordField.id = 'input-password';
-          passwordField.type = 'password';
-          const togglePasswordDisplayBtn = document.createElement('button');
-          togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
-              const passwordType = passwordField.type === 'password' ? 'text' : 'password';
-              passwordField.type = passwordType;
-          });
-          passwordRow.append(passwordField, togglePasswordDisplayBtn);
-          const onReturn = () => clientApp.appendChild(loginPage);
-          const button = loginButton('Login', () => onAuthPasswordLogin({ email: emailField.value, password: passwordField.value || null }, onUserLogin, onReturn, clientApp, backgroundImg));
-          section.append(emailField, passwordRow, button);
+          section.appendChild(authPasswordForm(clientApp, loginPage, onUserLogin, onLoginError, backgroundImg));
       }
   };
-  const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
+  const loginPage = (clientApp, backgroundImg, onUserLogin, onLoginError, loginTypes) => {
       const content = [];
       const salutation = document.createElement('sign-in-salutation');
       salutation.textContent = getTranslation('sign-in-salutation');
@@ -14900,7 +14923,7 @@ var juxWeb = (function (exports) {
       content.push(salutation, explanation, msg);
       const result = basePage('login-page', backgroundImg, content);
       const section = result.querySelector('section');
-      appendLoginTypes(result, section, clientApp, onUserLogin, loginTypes, backgroundImg);
+      appendLoginTypes(result, section, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg);
       return result;
   };
 

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

@@ -1 +1 @@
-export declare const loginPage: (clientApp: HTMLElement, backgroundImg: string, onUserLogin: any, loginTypes: string[]) => HTMLElement;
+export declare const loginPage: (clientApp: HTMLElement, backgroundImg: string, onUserLogin: any, onLoginError: any, loginTypes: string[]) => HTMLElement;

package/dist/login/session.d.ts

@@ -1,7 +1,7 @@
 export declare const setBackendToken: (token: string) => void;
 export declare const onTokenAcquired: (token: string, onUserLogin: any) => 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 initSession: (clientApp: HTMLElement, supportedLoginTypes: string[], onUserLogin: any, onLoginError: 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;
-export declare const onAuthPasswordLogin: (credentials: any, onUserLogin: any, onReturn: any, clientApp: HTMLElement, backgroundImg: string) => 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;

package/dist/main.esm.js

@@ -1041,7 +1041,7 @@ const handleSSOLogin = () => {
     const onError = () => onAuthenticationFailure('login-failed');
     getSSOAuthorizationEndpoint(onSuccess, onError);
 };
-const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
+const initSession = (clientApp, supportedLoginTypes, onUserLogin, onLoginError, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
     // if (startNewDemo()) {
     //   initDemo(setBackendToken, onAuthentication);
     //   return;
@@ -1095,7 +1095,7 @@ const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImag
         handleSSOLogin();
         return;
     }
-    displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, supportedLoginTypes));
+    displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, onLoginError, supportedLoginTypes));
     // validateThirdPartyCookies(initGapi, () => displayPage(Page.LOGIN));
     // checkMixpanel(() => mixpanel.track('View Login Page'));
 };
@@ -1137,7 +1137,7 @@ const onGoogleSignIn = (onUserLogin) => {
         authSignIn(onUserLogin);
     }, onCookieError);
 };
-const onAuthPasswordLogin = (credentials, onUserLogin, onReturn, clientApp, backgroundImg) => {
+const onAuthPasswordLogin = (credentials, onUserLogin, onLoginError, onReturn, clientApp, backgroundImg) => {
     const { email } = credentials;
     enableSignInLayout();
     const onSuccess = (res) => {
@@ -1148,9 +1148,8 @@ const onAuthPasswordLogin = (credentials, onUserLogin, onReturn, clientApp, back
         disableSignInLayout();
     };
     const onError = (err) => {
-        console.error(err);
-        reportError(err);
         disableSignInLayout();
+        onLoginError(err);
     };
     const onUnauthorized = () => {
         disableSignInLayout();
@@ -1337,11 +1336,51 @@ const magicLinkModal = (onUserLogin, onReturn, backgroundImage, currentPage, cli
     return result;
 };
 
+const authPasswordRow = (type, autoCompleteValue) => {
+    const result = document.createElement(`${type}-row`);
+    result.style.display = 'flex';
+    const label = document.createElement('label');
+    label.textContent = type.charAt(0).toUpperCase() + type.slice(1);
+    label.htmlFor = `input-${type}`;
+    const input = document.createElement('input');
+    input.id = `input-${type}`;
+    input.type = type;
+    input.autocomplete = autoCompleteValue;
+    result.append(label, input);
+    return result;
+};
+const authPasswordForm = (clientApp, loginPage, onUserLogin, onLoginError, backgroundImg) => {
+    const result = document.createElement('form');
+    const emailRow = authPasswordRow('email', 'username');
+    const emailInput = emailRow.querySelector('input');
+    const passwordRow = authPasswordRow('password', 'current-password');
+    const passwordInput = passwordRow.querySelector('input');
+    const togglePasswordDisplayBtn = document.createElement('button');
+    togglePasswordDisplayBtn.type = 'button';
+    togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
+        const passwordType = passwordInput.type === 'password' ? 'text' : 'password';
+        passwordInput.type = passwordType;
+    });
+    passwordRow.appendChild(togglePasswordDisplayBtn);
+    const handlePasswordLogin = () => onAuthPasswordLogin({ email: emailInput.value, password: passwordInput.value || null }, onUserLogin, onLoginError, onReturn, clientApp, backgroundImg);
+    const onReturn = () => clientApp.appendChild(loginPage);
+    const button = loginButton('Login', handlePasswordLogin);
+    button.classList.add('auth-password');
+    button.setAttribute('type', 'submit');
+    const submitButton = document.createElement('button');
+    submitButton.style.display = 'none';
+    result.append(emailRow, passwordRow, button, submitButton);
+    result.addEventListener('submit', (ev) => {
+        ev.preventDefault();
+        handlePasswordLogin();
+    });
+    return result;
+};
 const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
     const onReturn = () => clientApp.appendChild(loginPage);
     loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
 };
-const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes, backgroundImg) => {
+const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg) => {
     if (loginTypes.includes('Google')) {
         section.appendChild(loginButton('Google', () => onGoogleSignIn(onUserLogin)));
     }
@@ -1355,26 +1394,10 @@ const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes
         section.appendChild(loginButton('Email', () => onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, loginTypes)));
     }
     if (loginTypes.includes('auth-password')) {
-        const emailField = document.createElement('input');
-        emailField.id = 'input-email';
-        emailField.type = 'email';
-        const passwordRow = document.createElement('password-row');
-        passwordRow.style.display = 'flex';
-        const passwordField = document.createElement('input');
-        passwordField.id = 'input-password';
-        passwordField.type = 'password';
-        const togglePasswordDisplayBtn = document.createElement('button');
-        togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
-            const passwordType = passwordField.type === 'password' ? 'text' : 'password';
-            passwordField.type = passwordType;
-        });
-        passwordRow.append(passwordField, togglePasswordDisplayBtn);
-        const onReturn = () => clientApp.appendChild(loginPage);
-        const button = loginButton('Login', () => onAuthPasswordLogin({ email: emailField.value, password: passwordField.value || null }, onUserLogin, onReturn, clientApp, backgroundImg));
-        section.append(emailField, passwordRow, button);
+        section.appendChild(authPasswordForm(clientApp, loginPage, onUserLogin, onLoginError, backgroundImg));
     }
 };
-const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
+const loginPage = (clientApp, backgroundImg, onUserLogin, onLoginError, loginTypes) => {
     const content = [];
     const salutation = document.createElement('sign-in-salutation');
     salutation.textContent = getTranslation('sign-in-salutation');
@@ -1385,7 +1408,7 @@ const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
     content.push(salutation, explanation, msg);
     const result = basePage('login-page', backgroundImg, content);
     const section = result.querySelector('section');
-    appendLoginTypes(result, section, clientApp, onUserLogin, loginTypes, backgroundImg);
+    appendLoginTypes(result, section, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg);
     return result;
 };
 

package/dist/main.js

@@ -1065,7 +1065,7 @@ const handleSSOLogin = () => {
     const onError = () => onAuthenticationFailure('login-failed');
     getSSOAuthorizationEndpoint(onSuccess, onError);
 };
-const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
+const initSession = (clientApp, supportedLoginTypes, onUserLogin, onLoginError, backgroundImage, fetchUserBackendUrl, magicLinkRequestEndpoint, magicLinkAuthEndpoint) => {
     // if (startNewDemo()) {
     //   initDemo(setBackendToken, onAuthentication);
     //   return;
@@ -1119,7 +1119,7 @@ const initSession = (clientApp, supportedLoginTypes, onUserLogin, backgroundImag
         handleSSOLogin();
         return;
     }
-    displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, supportedLoginTypes));
+    displayPage(clientApp, loginPage(clientApp, backgroundImage, onUserLogin, onLoginError, supportedLoginTypes));
     // validateThirdPartyCookies(initGapi, () => displayPage(Page.LOGIN));
     // checkMixpanel(() => mixpanel.track('View Login Page'));
 };
@@ -1161,7 +1161,7 @@ const onGoogleSignIn = (onUserLogin) => {
         authSignIn(onUserLogin);
     }, onCookieError);
 };
-const onAuthPasswordLogin = (credentials, onUserLogin, onReturn, clientApp, backgroundImg) => {
+const onAuthPasswordLogin = (credentials, onUserLogin, onLoginError, onReturn, clientApp, backgroundImg) => {
     const { email } = credentials;
     enableSignInLayout();
     const onSuccess = (res) => {
@@ -1172,9 +1172,8 @@ const onAuthPasswordLogin = (credentials, onUserLogin, onReturn, clientApp, back
         disableSignInLayout();
     };
     const onError = (err) => {
-        console.error(err);
-        reportError(err);
         disableSignInLayout();
+        onLoginError(err);
     };
     const onUnauthorized = () => {
         disableSignInLayout();
@@ -1361,11 +1360,51 @@ const magicLinkModal = (onUserLogin, onReturn, backgroundImage, currentPage, cli
     return result;
 };
 
+const authPasswordRow = (type, autoCompleteValue) => {
+    const result = document.createElement(`${type}-row`);
+    result.style.display = 'flex';
+    const label = document.createElement('label');
+    label.textContent = type.charAt(0).toUpperCase() + type.slice(1);
+    label.htmlFor = `input-${type}`;
+    const input = document.createElement('input');
+    input.id = `input-${type}`;
+    input.type = type;
+    input.autocomplete = autoCompleteValue;
+    result.append(label, input);
+    return result;
+};
+const authPasswordForm = (clientApp, loginPage, onUserLogin, onLoginError, backgroundImg) => {
+    const result = document.createElement('form');
+    const emailRow = authPasswordRow('email', 'username');
+    const emailInput = emailRow.querySelector('input');
+    const passwordRow = authPasswordRow('password', 'current-password');
+    const passwordInput = passwordRow.querySelector('input');
+    const togglePasswordDisplayBtn = document.createElement('button');
+    togglePasswordDisplayBtn.type = 'button';
+    togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
+        const passwordType = passwordInput.type === 'password' ? 'text' : 'password';
+        passwordInput.type = passwordType;
+    });
+    passwordRow.appendChild(togglePasswordDisplayBtn);
+    const handlePasswordLogin = () => onAuthPasswordLogin({ email: emailInput.value, password: passwordInput.value || null }, onUserLogin, onLoginError, onReturn, clientApp, backgroundImg);
+    const onReturn = () => clientApp.appendChild(loginPage);
+    const button = loginButton('Login', handlePasswordLogin);
+    button.classList.add('auth-password');
+    button.setAttribute('type', 'submit');
+    const submitButton = document.createElement('button');
+    submitButton.style.display = 'none';
+    result.append(emailRow, passwordRow, button, submitButton);
+    result.addEventListener('submit', (ev) => {
+        ev.preventDefault();
+        handlePasswordLogin();
+    });
+    return result;
+};
 const onEmailLoginRequest = (clientApp, loginPage, onUserLogin, backgroundImage, loginTypes) => {
     const onReturn = () => clientApp.appendChild(loginPage);
     loginPage.appendChild(magicLinkModal(onUserLogin, onReturn, backgroundImage, loginPage, clientApp, loginTypes));
 };
-const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes, backgroundImg) => {
+const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg) => {
     if (loginTypes.includes('Google')) {
         section.appendChild(loginButton('Google', () => onGoogleSignIn(onUserLogin)));
     }
@@ -1379,26 +1418,10 @@ const appendLoginTypes = (loginPage, section, clientApp, onUserLogin, loginTypes
         section.appendChild(loginButton('Email', () => onEmailLoginRequest(clientApp, loginPage, onUserLogin, backgroundImg, loginTypes)));
     }
     if (loginTypes.includes('auth-password')) {
-        const emailField = document.createElement('input');
-        emailField.id = 'input-email';
-        emailField.type = 'email';
-        const passwordRow = document.createElement('password-row');
-        passwordRow.style.display = 'flex';
-        const passwordField = document.createElement('input');
-        passwordField.id = 'input-password';
-        passwordField.type = 'password';
-        const togglePasswordDisplayBtn = document.createElement('button');
-        togglePasswordDisplayBtn.addEventListener('click', (_ev) => {
-            const passwordType = passwordField.type === 'password' ? 'text' : 'password';
-            passwordField.type = passwordType;
-        });
-        passwordRow.append(passwordField, togglePasswordDisplayBtn);
-        const onReturn = () => clientApp.appendChild(loginPage);
-        const button = loginButton('Login', () => onAuthPasswordLogin({ email: emailField.value, password: passwordField.value || null }, onUserLogin, onReturn, clientApp, backgroundImg));
-        section.append(emailField, passwordRow, button);
+        section.appendChild(authPasswordForm(clientApp, loginPage, onUserLogin, onLoginError, backgroundImg));
     }
 };
-const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
+const loginPage = (clientApp, backgroundImg, onUserLogin, onLoginError, loginTypes) => {
     const content = [];
     const salutation = document.createElement('sign-in-salutation');
     salutation.textContent = getTranslation('sign-in-salutation');
@@ -1409,7 +1432,7 @@ const loginPage = (clientApp, backgroundImg, onUserLogin, loginTypes) => {
     content.push(salutation, explanation, msg);
     const result = basePage('login-page', backgroundImg, content);
     const section = result.querySelector('section');
-    appendLoginTypes(result, section, clientApp, onUserLogin, loginTypes, backgroundImg);
+    appendLoginTypes(result, section, clientApp, onUserLogin, onLoginError, loginTypes, backgroundImg);
     return result;
 };
 

package/package.json

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