@schukai/monster 4.3.1 → 4.4.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.4.1] - 2025-05-14
+
+### Bug Fixes
+
+- Add placeholder properties for login inputs [#315](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/315)
+
+
+
+## [4.4.0] - 2025-05-14
+
+### Add Features
+
+- Add placeholders for email and username fields in login form translations [#315](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/315)
+
+
+
 ## [4.3.1] - 2025-05-12
 
 ### 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.3.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.4.1"}

package/source/components/form/login.mjs

@@ -216,6 +216,10 @@ class Login extends CustomElement {
 	 * @property {string} accessKeys.username Access key for focusing the username field
 	 * @property {string} accessKeys.password Access key for focusing the password field
 	 * @property {Object} fetch Definitions for backend requests to support login workflows
+	 * @property {Object} placeholder Placeholder text for input fields
+	 * @property {string} placeholder.username Placeholder for the username field
+	 * @property {string} placeholder.password Placeholder for the password field
+	 * @property {string} placeholder.email Placeholder for the email field
 	 * @property {Object} fetch.login Fetch config for login request
 	 * @property {string} fetch.login.url Endpoint to post login credentials to
 	 * @property {string} fetch.login.method HTTP method for login (e.g., "POST")
@@ -294,6 +298,12 @@ class Login extends CustomElement {
 				password: "p",
 			},
 
+			placeholder: {
+				username: "",
+				password: "",
+				email: "",
+			},
+
 			fetch: {
 				login: {
 					url: "",
@@ -464,6 +474,7 @@ function getTranslations() {
 					"Dieses Formular ist nicht konfiguriert.",
 				messagePasswordResetDisabled:
 					"Sie können keinen Code anfordern, da die<br>Zwei-Faktor-Authentifizierung bei Ihrem Konto aktiviert ist.<br>Bitte kontaktieren Sie den Administrator.",
+
 			};
 		case "es":
 			return {
@@ -497,6 +508,9 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Este formulario no está configurado.",
 				messagePasswordResetDisabled:
 					"Esta función no funciona porque la autenticación de dos factores está activada en su cuenta. Por favor, póngase en contacto con el administrador.",
+
+				
+
 			};
 		case "zh":
 			return {
@@ -526,6 +540,9 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "此表单尚未配置。",
 				messagePasswordResetDisabled:
 					"此功能无法使用，因为您的帐户启用了双因素身份验证。请联系管理员。",
+
+
+
 			};
 
 		case "hi":
@@ -556,6 +573,8 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "यह फर कनगर नह ह।",
 				messagePasswordResetDisabled:
 					"यह सवध कम नह करत कक आपक खत म द घटक पमणकरण सकम ह। कपय पशसक स सपर कर।",
+
+
 			};
 
 		case "bn":
@@ -586,6 +605,8 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "এই ফরট কনফগর কর হযন।",
 				messagePasswordResetDisabled:
 					"এই ফশনট করকর নয করণ আপনর অযকউন দট ফকর পমণকরণ সকয কর আছ। দয কর পশসকর সথ যগযগ করন।",
+
+
 			};
 
 		case "pt": // Portuguese
@@ -617,6 +638,8 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Este formulário não está configurado.",
 				messagePasswordResetDisabled:
 					"Esta função não funciona porque a autenticação de dois fatores<br>está ativada em sua conta. Por favor, entre em contato com o administrador.",
+
+
 			};
 
 		case "ru": // Russian
@@ -648,6 +671,8 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Эта форма не настроена.",
 				messagePasswordResetDisabled:
 					"Эта функция не работает, потому что двухфакторная аутентификация<br> включена в вашей учетной записи. Пожалуйста, свяжитесь с администратором.",
+
+
 			};
 
 		case "ja": // Japanese
@@ -680,6 +705,7 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "このフォームは設定されていません。",
 				messagePasswordResetDisabled:
 					"この機能は使用できません。アカウントで二要素認証が有効になっているため、管理者に連絡してください。",
+
 			};
 
 		case "pa": // Western Punjabi
@@ -710,6 +736,8 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "ਇਸ ਫਰਮ ਨ ਸਰਚਤ ਨਹ ਕਤ ਗਆ ਹ।",
 				messagePasswordResetDisabled:
 					"ਇਹ ਫਕਸਨ ਕਮ ਨਹ ਕਰਦ ਕਉਕ ਤਹਡ ਖਤ ਵਚ ਦ ਫਕਟਰ ਪਰਮਣਕਰਣ ਸਰਗਰਮ ਹ। ਕਰਪ ਕਰਕ ਪਰਬਧਕ ਨਲ ਸਪਰਕ ਕਰ।",
+
+
 			};
 
 		case "mr": // Marathi
@@ -740,6 +768,8 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "ह फर सरचत कलल नह.",
 				messagePasswordResetDisabled:
 					"य करच कमगर करत नह करण आपल खतत दन घटक पमणकरण सकय कल आह. कपय ववसपकश सपर सध.",
+
+
 			};
 
 		case "fr": // French
@@ -773,6 +803,8 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Ce formulaire n'est pas configuré.",
 				messagePasswordResetDisabled:
 					"Cette fonctionnalité ne fonctionne pas car l'authentification à deux facteurs est activée sur<br>votre compte. Veuillez contacter l'administrateur.",
+
+
 			};
 
 		case "it": // Italian
@@ -805,6 +837,7 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Questo modulo non è configurato.",
 				messagePasswordResetDisabled:
 					"Questa funzione non funziona perché l'autenticazione a due<br>fattori è attiva sul tuo account. Contatta l'amministratore.",
+
 			};
 
 		case "nl": // Dutch
@@ -836,6 +869,7 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Dit formulier is niet geconfigureerd.",
 				messagePasswordResetDisabled:
 					"Deze functie werkt niet omdat tweefactorauthenticatie is<br>ingeschakeld op uw account. Neem contact op met de beheerder.",
+
 			};
 
 		case "sv": // Swedish
@@ -867,6 +901,7 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Detta formulär är inte konfigurerat.",
 				messagePasswordResetDisabled:
 					"Denna funktion fungerar inte eftersom tvåfaktorsautentisering är aktiverad på ditt konto. Kontakta administratören.",
+
 			};
 
 		case "pl": // Polish
@@ -899,6 +934,7 @@ function getTranslations() {
 					"Ten formularz nie jest skonfigurowany.",
 				messagePasswordResetDisabled:
 					"Ta funkcja nie działa, ponieważ włączona jest autoryzacja dwuetapowa na twoim koncie. Skontaktuj się z administratorem.",
+
 			};
 
 		case "da": // Danish
@@ -929,6 +965,7 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Denne formular er ikke konfigureret.",
 				messagePasswordResetDisabled:
 					"Denne funktion fungerer ikke, fordi tofaktorautentificering<br>er aktiveret på din konto. Kontakt administratoren.",
+
 			};
 
 		case "no": // Norwegian
@@ -961,6 +998,7 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Dette skjemaet er ikke konfigurert.",
 				messagePasswordResetDisabled:
 					"Denne funksjonen fungerer ikke fordi<br>tofaktorautentisering er aktivert på kontoen din. Kontakt administratoren.",
+
 			};
 
 		case "cs": // Czech
@@ -991,6 +1029,7 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Tento formulář není nakonfigurován.",
 				messagePasswordResetDisabled:
 					"Tato funkce nefunguje, protože je na vašem<br>účtu aktivováno dvoufaktorové ověřování. Kontaktujte správce.",
+
 			};
 
 		default:
@@ -1022,6 +1061,7 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "This form is not configured.",
 				messagePasswordResetDisabled:
 					"This function does not work because two-factor<br>authentication is enabled on your account.<br>Please contact the administrator.",
+
 			};
 	}
 }
@@ -1609,10 +1649,13 @@ function getTemplate() {
                         part="login-field-set">
                     <slot name="login-header"></slot>
                     <label part="login-label" data-monster-replace="path:labels.username"></label>
-                    <input part="login-username" type="text" name="username" autofocus autocomplete="off">
+                    <input part="login-username"
+						   data-monster-attributes="placeholder path:placeholder.username"
+						   type="text" name="username" autofocus autocomplete="off">
                     <div data-monster-attributes="class path:classes.usernameInvalid"></div>
                     <label part="login-password-label" data-monster-replace="path:labels.password"></label>
                     <monster-password 
+						data-monster-attributes="data-monster-option-placeholder path:placeholder.password"
 						exportparts="input-group:input-group-password,
 						control:input-group-password-control,
 						input:input-group-password-input" part="login-password"
@@ -1655,7 +1698,8 @@ function getTemplate() {
                     <label part="forgot-password-label" data-monster-replace="path:labels.mailAddress"></label>
                     <input type="email" name="email"
 						   part="field-set-forgot-password-email"
-                           data-monster-attributes="accesskey path:accessKeys.username"
+                           data-monster-attributes="accesskey path:accessKeys.username,
+                                                    placeholder path:placeholder.email"
                            autocomplete="off">
                     <div data-monster-attributes="class path:classes.emailInvalid"></div>
                     <monster-message-state-button id="requestLinkButton"