@schukai/monster 4.48.3 → 4.49.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.49.0] - 2025-12-21
+
+### Add Features
+
+- Added fields object for mapping form input names in login component
+
+
+
 ## [4.48.3] - 2025-12-02
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@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.48.3"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@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.49.0"}

package/source/components/form/login.mjs

@@ -214,6 +214,9 @@ class Login extends CustomElement {
    * @property {boolean} features.redirectToFirstSuccessUrl If true, redirects to the first success URL after login
    * @property {Object} actions Action definitions for custom event handling
    * @property {Function} actions.click Callback function for generic click actions within the login component
+   * @property {Object} fields Field mappings for form inputs
+   * @property {string} fields.identifier Name of the identifier field (username/email)
+   * @property {string} fields.password Name of the password field
    * @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
@@ -288,6 +291,11 @@ class Login extends CustomElement {
       },
       actions: {},
 
+      fields: {
+        identifier: "username",
+        password: "password",
+      }
+
       callbacks: {
         username: null,
         forgotPassword: null,
@@ -1126,7 +1134,7 @@ function initEventHandler() {
 
   const type = "click";
 
-  element.addEventListener(type, function (event) {
+  element.addEventListener(type, function(event) {
     const callback = self.getOption("actions.click");
 
     fireCustomEvent(self, "monster-login-clicked", {
@@ -1293,12 +1301,23 @@ function initEventHandler() {
       return;
     }
 
+    const identifierField =
+      this.getOption("fields.login.identifier") || "username";
+
+    const passwordField =
+      this.getOption("fields.login.password") || "password";
+
+    const payload = {
+      [identifierField]: username,
+      [passwordField]: password,
+    };
+
     const options = {
       method: this.getOption("fetch.login.method"),
       mode: this.getOption("fetch.login.mode"),
       headers: this.getOption("fetch.login.headers"),
       credentials: this.getOption("fetch.login.credentials"),
-      body: JSON.stringify({ username, password }),
+      body: JSON.stringify(payload),
     };
 
     getWindow()