@schukai/monster 4.6.1 → 4.8.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.8.0] - 2025-05-16
+
+### Add Features
+
+- Enhance login functionality with additional event emissions
+
+
+
+## [4.7.0] - 2025-05-15
+
+### Add Features
+
+- Add forgot password callback support in login component
+
+
+
 ## [4.6.1] - 2025-05-15
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.0","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.6.1"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.0","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.8.0"}

package/source/components/form/login.mjs

@@ -131,6 +131,9 @@ const digitsCollapseSymbol = Symbol("digitsCollapse");
  *
  * @fires login-success
  * @fires redirect-to-first-success-url
+ * @fires second-factor-success
+ * @fires digits-success
+ * @fires monster-login-clicked
  */
 class Login extends CustomElement {
 	/**
@@ -205,6 +208,7 @@ class Login extends CustomElement {
 	 * @property {Function} actions.click Callback function for generic click actions within the login component
 	 * @property {Object} callbacks Optional callback hooks for modifying internal behavior
 	 * @property {Function} callbacks.username A function that receives and can transform the entered username before submission
+	 * @property {Function} callbacks.forgotPassword A function that receives and can transform the entered email before submission
 	 * @property {number} digits Number of digits required for second factor or password reset code input
 	 * @property {Object[]} successUrls List of URLs shown after successful login (e.g., home or logout)
 	 * @property {string} successUrls.label Label for the success URL (displayed)
@@ -274,6 +278,7 @@ class Login extends CustomElement {
 
 			callbacks : {
 				username : null,
+				forgotPassword : null,
 			},
 
 			digits: 6,
@@ -386,7 +391,7 @@ class Login extends CustomElement {
 	}
 
 	/**
-	 * Opens the digits collapse and focuses the digits control.
+	 * Opens the digits collapse and focuses the digit control.
 	 * @returns {Login}
 	 */
 	openDigits() {
@@ -1310,8 +1315,17 @@ function initEventHandler() {
 		const emailElement = this.shadowRoot.querySelector("input[name='email']");
 
 		// get username and password
-		const mail = emailElement.value;
-		const valid = emailElement.checkValidity();
+		let mail = emailElement.value;
+		let valid = emailElement.checkValidity();
+
+		const mailCallback = this.getOption("callbacks.forgotPassword");
+		if (isFunction(mailCallback)) {
+			const mailCallbackResult = mailCallback.call(this, mail);
+			if (mailCallbackResult !== undefined) {
+				mail = mailCallbackResult;
+				valid = true;
+			}
+		}
 
 		let msg = null;
 		if (mail === "" || mail === null) {
@@ -1444,6 +1458,7 @@ function initEventHandler() {
 				if (response.ok) {
 					const timeout = this.getOption("timeoutForSuccess");
 					this[secondFactorButtonSymbol].setState("successful", timeout);
+					fireEvent(this, "second-factor-success");
 					setTimeout(() => {
 						this.openLoggedIn();
 					}, timeout);
@@ -1527,6 +1542,7 @@ function initEventHandler() {
 
 				if (response.ok) {
 					this[digitsButtonSymbol].setState("successful", timeout);
+					fireEvent(this, "digits-success");
 					setTimeout(() => {
 						this.openLoggedIn();
 					}, timeout);