@schukai/monster 4.3.0 → 4.4.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [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
+
+- Improve structure and port attributes in login and password components
+
+
+
 ## [4.3.0] - 2025-05-12
 
 ### Add Features

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.0"}
+{"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.0"}

package/source/components/form/login.mjs

@@ -464,6 +464,9 @@ 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.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
 			};
 		case "es":
 			return {
@@ -497,6 +500,10 @@ 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.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 		case "zh":
 			return {
@@ -526,6 +533,11 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "此表单尚未配置。",
 				messagePasswordResetDisabled:
 					"此功能无法使用，因为您的帐户启用了双因素身份验证。请联系管理员。",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
+
 			};
 
 		case "hi":
@@ -556,6 +568,10 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "यह फर कनगर नह ह।",
 				messagePasswordResetDisabled:
 					"यह सवध कम नह करत कक आपक खत म द घटक पमणकरण सकम ह। कपय पशसक स सपर कर।",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "bn":
@@ -586,6 +602,10 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "এই ফরট কনফগর কর হযন।",
 				messagePasswordResetDisabled:
 					"এই ফশনট করকর নয করণ আপনর অযকউন দট ফকর পমণকরণ সকয কর আছ। দয কর পশসকর সথ যগযগ করন।",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "pt": // Portuguese
@@ -617,6 +637,10 @@ 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.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "ru": // Russian
@@ -648,6 +672,10 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Эта форма не настроена.",
 				messagePasswordResetDisabled:
 					"Эта функция не работает, потому что двухфакторная аутентификация<br> включена в вашей учетной записи. Пожалуйста, свяжитесь с администратором.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "ja": // Japanese
@@ -680,6 +708,10 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "このフォームは設定されていません。",
 				messagePasswordResetDisabled:
 					"この機能は使用できません。アカウントで二要素認証が有効になっているため、管理者に連絡してください。",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "pa": // Western Punjabi
@@ -710,6 +742,10 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "ਇਸ ਫਰਮ ਨ ਸਰਚਤ ਨਹ ਕਤ ਗਆ ਹ।",
 				messagePasswordResetDisabled:
 					"ਇਹ ਫਕਸਨ ਕਮ ਨਹ ਕਰਦ ਕਉਕ ਤਹਡ ਖਤ ਵਚ ਦ ਫਕਟਰ ਪਰਮਣਕਰਣ ਸਰਗਰਮ ਹ। ਕਰਪ ਕਰਕ ਪਰਬਧਕ ਨਲ ਸਪਰਕ ਕਰ।",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "mr": // Marathi
@@ -740,6 +776,10 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "ह फर सरचत कलल नह.",
 				messagePasswordResetDisabled:
 					"य करच कमगर करत नह करण आपल खतत दन घटक पमणकरण सकय कल आह. कपय ववसपकश सपर सध.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "fr": // French
@@ -773,6 +813,10 @@ 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.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "it": // Italian
@@ -805,6 +849,10 @@ 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.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "nl": // Dutch
@@ -836,6 +884,10 @@ 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.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "sv": // Swedish
@@ -867,6 +919,10 @@ 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.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "pl": // Polish
@@ -899,6 +955,10 @@ 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.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "da": // Danish
@@ -929,6 +989,10 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Denne formular er ikke konfigureret.",
 				messagePasswordResetDisabled:
 					"Denne funktion fungerer ikke, fordi tofaktorautentificering<br>er aktiveret på din konto. Kontakt administratoren.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "no": // Norwegian
@@ -961,6 +1025,10 @@ function getTranslations() {
 				messageThisFormIsNotConfigured: "Dette skjemaet er ikke konfigurert.",
 				messagePasswordResetDisabled:
 					"Denne funksjonen fungerer ikke fordi<br>tofaktorautentisering er aktivert på kontoen din. Kontakt administratoren.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		case "cs": // Czech
@@ -991,6 +1059,10 @@ 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.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 
 		default:
@@ -1022,6 +1094,10 @@ 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.",
+
+				emailPlaceholder: "",
+				usernamePlaceholder: "",
+
 			};
 	}
 }
@@ -1597,8 +1673,7 @@ function getTemplate() {
                               exportparts="control:collapse-login-control,
    										   container:collapse-login-container,
 										   deco:collapse-login-deco"
-                              part="login-collapse"
-            >
+                              part="login-collapse">
                 <monster-field-set
                         exportparts="
 						control:field-set-login-control,
@@ -1610,10 +1685,16 @@ function getTemplate() {
                         part="login-field-set">
                     <slot name="login-header"></slot>
                     <label part="login-label" data-monster-replace="path:labels.username"></label>
-                    <input type="text" name="username" autofocus autocomplete="off">
+                    <input part="login-username"
+						   data-monster-attributes="placeholder name:labels.usernamePlaceholder"
+						   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-bind="path:password"></monster-password>
+                    <monster-password 
+						exportparts="input-group:input-group-password,
+						control:input-group-password-control,
+						input:input-group-password-input" part="login-password"
+						data-monster-bind="path:password"></monster-password>
                     <div data-monster-attributes="class path:classes.passwordInvalid"></div>
                     <monster-message-state-button id="loginButton"
                                                   part="login-button"
@@ -1651,7 +1732,9 @@ function getTemplate() {
                     <slot name="forgot-password-header"></slot>
                     <label part="forgot-password-label" data-monster-replace="path:labels.mailAddress"></label>
                     <input type="email" name="email"
-                           data-monster-attributes="accesskey path:accessKeys.username"
+						   part="field-set-forgot-password-email"
+                           data-monster-attributes="accesskey path:accessKeys.username,
+                                                    placeholder name:labels.emailPlaceholder"
                            autocomplete="off">
                     <div data-monster-attributes="class path:classes.emailInvalid"></div>
                     <monster-message-state-button id="requestLinkButton"
@@ -1693,6 +1776,7 @@ function getTemplate() {
                     <label part="second-factor-label" data-monster-replace="path:labels.secondFactor"></label>
                     <div>
                         <monster-digits data-monster-attributes="data-monster-option-digits path:digits"
+										part="second-factor-digits-control"
                                         id="secondFactorControl"></monster-digits>
                     </div>
                     <!-- SECOND FACTOR COLLAPSE -->
@@ -1732,7 +1816,8 @@ function getTemplate() {
                     <slot name="digits-header"></slot>
                     <label part="digits-label" data-monster-replace="path:labels.digits"></label>
                     <div>
-                        <monster-digits data-monster-attributes="data-monster-option-digits path:digits"
+                        <monster-digits part="digits-control" 
+							data-monster-attributes="data-monster-option-digits path:digits"
                                         id="digitsControl"></monster-digits>
                     </div>
                     <monster-message-state-button id="digitsButton"

package/source/components/form/password.mjs

@@ -251,8 +251,9 @@ function getTemplate() {
 	// language=HTML
 	return `
         <div data-monster-role="control" part="control">
-            <monster-input-group>
+            <monster-input-group part="input-group">
                 <input data-monster-role="input"
+		       part="input"
                        style="border:0"
                        data-monster-attributes="
 			    type path:type,
@@ -261,9 +262,7 @@ function getTemplate() {
 			    autocomplete path:autocomplete,
 			    inputmode path:inputmode,
 			    aria-required path:aria.required,
-			    aria-placeholder path:aria.placeholder"
-                >
-
+			    aria-placeholder path:aria.placeholder">
                 <svg viewBox="0 0 16 16" data-monster-role="visible-icon" class="hidden">
                     \${visible-icon}
                 </svg>