From eb3f15b034671d62f49e230a58f94dbf83137d28 Mon Sep 17 00:00:00 2001 From: Daniele T Date: Mon, 30 Sep 2024 19:58:01 +0200 Subject: [PATCH 01/10] fix: test to add a11y features --- docs/form/input.md | 27 +++--- src/js/plugins/input-password.js | 144 +++++++++++++++++++++---------- 2 files changed, 113 insertions(+), 58 deletions(-) diff --git a/docs/form/input.md b/docs/form/input.md index 116b0d8d78..ae599ec37c 100644 --- a/docs/form/input.md +++ b/docs/form/input.md @@ -200,18 +200,19 @@ Per rendere più semplice l'inserimento della password, l'elemento è stato dota
- - + + Inserisci almeno 8 caratteri e una lettera maiuscola
- +
-
- - CAPS LOCK inserito + + + {% endcapture %}{% include example.html content=example %} diff --git a/src/js/plugins/input-password.js b/src/js/plugins/input-password.js index 8f5cca2f14..d05a41fb49 100644 --- a/src/js/plugins/input-password.js +++ b/src/js/plugins/input-password.js @@ -12,12 +12,12 @@ const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' const Default = { - shortPass: 'Password molto debole', - badPass: 'Password debole', - goodPass: 'Password sicura', - strongPass: 'Password molto sicura', - enterPass: 'Inserisci almeno 8 caratteri e una lettera maiuscola', - alertCaps: 'CAPS LOCK inserito', + shortPass: 'Password molto debole. ', + badPass: 'Password debole. ', + goodPass: 'Password sicura. ', + strongPass: 'Password molto sicura. ', + enterPass: 'Inserisci almeno 8 caratteri e una lettera maiuscola. ', + alertCaps: 'Attenzione: CAPS LOCK inserito. ', showText: true, minimumLength: 4, } @@ -25,7 +25,6 @@ const Default = { const EVENT_CLICK = `click${EVENT_KEY}` const EVENT_KEYUP = `keyup${EVENT_KEY}` const EVENT_KEYDOWN = `keydown${EVENT_KEY}` -const EVENT_KEYPRESS = `keypress${EVENT_KEY}` const EVENT_SCORE = `score${EVENT_KEY}` const EVENT_TEXT = `text${EVENT_KEY}` @@ -35,7 +34,6 @@ const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}` const CLASS_NAME_PASSWORD = 'input-password' //const CLASS_NAME_METER = 'input-password-strength-meter' -const CLASS_NAME_SHOW = 'show' const SELECTOR_PASSWORD = 'input[data-bs-input][type="password"]' const SELECTOR_BTN_SHOW_PWD = '.password-icon' @@ -99,6 +97,11 @@ class InputPassword extends BaseComponent { } if (this._isCustom) { this._capsElement = this._element.parentNode.querySelector(SELECTOR_CAPS) + if (this._capsElement) { + // Ensure the element is hidden and empty initially + this._capsElement.style.display = 'none' + this._capsElement.textContent = '' + } } this._showPwdElement = SelectorEngine.findOne(SELECTOR_BTN_SHOW_PWD, this._element.parentNode) @@ -110,34 +113,8 @@ class InputPassword extends BaseComponent { } if (this._isCustom) { - EventHandler.on(this._element, EVENT_KEYDOWN, (evt) => { - if (evt.key === 'Shift') { - this._isShiftPressed = true - } - }) - EventHandler.on(this._element, EVENT_KEYUP, (evt) => { - if (evt.key === 'Shift') { - this._isShiftPressed = false - } - if (evt.key === 'CapsLock') { - this._isCapsOn = !this._isCapsOn - if (this._isCapsOn) { - this._showCapsMsg() - } else { - this._hideCapsMsg() - } - } - }) - EventHandler.on(this._element, EVENT_KEYPRESS, (evt) => { - const matches = evt.key.match(/[A-Z]$/) || [] - if (matches.length > 0 && !this._isShiftPressed) { - this._isCapsOn = true - this._showCapsMsg() - } else if (this._isCapsOn) { - this._isCapsOn = false - this._hideCapsMsg() - } - }) + EventHandler.on(this._element, EVENT_KEYDOWN, (evt) => this._handleKeyDown(evt)) + EventHandler.on(this._element, EVENT_KEYUP, (evt) => this._handleKeyUp(evt)) } if (this._showPwdElement) { @@ -145,25 +122,63 @@ class InputPassword extends BaseComponent { } } - _showCapsMsg() { - if (this._capsElement) { - this._capsElement.classList.add(CLASS_NAME_SHOW) + _handleKeyDown(evt) { + if (evt.key === 'Shift') { + this._isShiftPressed = true + } + this._checkCapsLock(evt) + } + + _handleKeyUp(evt) { + if (evt.key === 'Shift') { + this._isShiftPressed = false } + this._checkCapsLock(evt) } - _hideCapsMsg() { + + _checkCapsLock(evt) { + if (!this._capsElement) return + + const capsOn = this._isCapsLockOn(evt) + if (capsOn !== this._isCapsOn) { + this._isCapsOn = capsOn + this._toggleCapsLockWarning(this._isCapsOn) + } + } + + _isCapsLockOn(evt) { + if (evt.getModifierState) { + return evt.getModifierState('CapsLock') + } + const charCode = evt.which || evt.keyCode + const isUpperCase = charCode >= 65 && charCode <= 90 + const isLowerCase = charCode >= 97 && charCode <= 122 + return (isUpperCase && !evt.shiftKey) || (isLowerCase && evt.shiftKey) + } + + _toggleCapsLockWarning(show) { if (this._capsElement) { - this._capsElement.classList.remove(CLASS_NAME_SHOW) + if (show) { + this._capsElement.textContent = this._config.alertCaps || Default.alertCaps + this._capsElement.style.display = 'block' + } else { + this._capsElement.style.display = 'none' + setTimeout(() => { + if (this._capsElement.style.display === 'none') { + this._capsElement.textContent = '' + } + }, 100) + } } } _toggleShowPassword() { const toShow = this._element.getAttribute('type') === 'password' + SelectorEngine.find('[class^="password-icon"]', this._showPwdElement).forEach((icon) => icon.classList.toggle('d-none')) - if (toShow) { - this._element.setAttribute('type', 'text') - } else { - this._element.setAttribute('type', 'password') - } + + this._element.setAttribute('type', toShow ? 'text' : 'password') + this._showPwdElement.setAttribute('aria-checked', toShow.toString()) } _checkPassword() { @@ -198,6 +213,43 @@ class InputPassword extends BaseComponent { EventHandler.trigger(this._element, EVENT_TEXT) } } + + const strengthMeter = this._element.parentNode.querySelector('#strengthMeter') + if (strengthMeter) { + const requirements = this._getCompletedRequirements(this._element.value) + const strengthText = this._scoreText(score) + let detailedMessage = `${strengthText}. ${requirements.completed} su ${requirements.total} requisiti soddisfatti. `; + + if (requirements.completedDescriptions.length > 0) { + detailedMessage += `Requisiti soddisfatti: ${requirements.completedDescriptions.join(', ')}. `; + } + + if (requirements.missingDescriptions.length > 0) { + detailedMessage += `Requisiti mancanti: ${requirements.missingDescriptions.join(', ')}.`; + } + + strengthMeter.textContent = detailedMessage; + } + } + + _getCompletedRequirements(password) { + const requirements = [ + { test: password.length >= 8, description: "Almeno 8 caratteri." }, + { test: /[A-Z]/.test(password), description: "Almeno una lettera maiuscola." }, + { test: /[a-z]/.test(password), description: "Almeno una lettera minuscola." }, + { test: /[0-9]/.test(password), description: "Almeno un numero." }, + { test: /[^A-Z-a-z0-9]/.test(password), description: "Almeno un carattere speciale." } + ]; + + const completedRequirements = requirements.filter(req => req.test); + const missingRequirements = requirements.filter(req => !req.test); + + return { + completed: completedRequirements.length, + total: requirements.length, + completedDescriptions: completedRequirements.map(req => req.description), + missingDescriptions: missingRequirements.map(req => req.description) + }; } /** From cc2a0f0d70e9afd1e2ee2087946e9c639cb39769 Mon Sep 17 00:00:00 2001 From: Daniele T Date: Mon, 30 Sep 2024 20:01:59 +0200 Subject: [PATCH 02/10] fix: linting --- src/js/plugins/input-password.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/js/plugins/input-password.js b/src/js/plugins/input-password.js index d05a41fb49..687cd006a8 100644 --- a/src/js/plugins/input-password.js +++ b/src/js/plugins/input-password.js @@ -218,38 +218,38 @@ class InputPassword extends BaseComponent { if (strengthMeter) { const requirements = this._getCompletedRequirements(this._element.value) const strengthText = this._scoreText(score) - let detailedMessage = `${strengthText}. ${requirements.completed} su ${requirements.total} requisiti soddisfatti. `; + let detailedMessage = `${strengthText}. ${requirements.completed} su ${requirements.total} requisiti soddisfatti. ` if (requirements.completedDescriptions.length > 0) { - detailedMessage += `Requisiti soddisfatti: ${requirements.completedDescriptions.join(', ')}. `; + detailedMessage += `Requisiti soddisfatti: ${requirements.completedDescriptions.join(', ')}. ` } if (requirements.missingDescriptions.length > 0) { - detailedMessage += `Requisiti mancanti: ${requirements.missingDescriptions.join(', ')}.`; + detailedMessage += `Requisiti mancanti: ${requirements.missingDescriptions.join(', ')}.` } - strengthMeter.textContent = detailedMessage; + strengthMeter.textContent = detailedMessage } } _getCompletedRequirements(password) { const requirements = [ - { test: password.length >= 8, description: "Almeno 8 caratteri." }, - { test: /[A-Z]/.test(password), description: "Almeno una lettera maiuscola." }, - { test: /[a-z]/.test(password), description: "Almeno una lettera minuscola." }, - { test: /[0-9]/.test(password), description: "Almeno un numero." }, - { test: /[^A-Z-a-z0-9]/.test(password), description: "Almeno un carattere speciale." } - ]; + { test: password.length >= 8, description: 'Almeno 8 caratteri.' }, + { test: /[A-Z]/.test(password), description: 'Almeno una lettera maiuscola.' }, + { test: /[a-z]/.test(password), description: 'Almeno una lettera minuscola.' }, + { test: /[0-9]/.test(password), description: 'Almeno un numero.' }, + { test: /[^A-Z-a-z0-9]/.test(password), description: 'Almeno un carattere speciale.' }, + ] - const completedRequirements = requirements.filter(req => req.test); - const missingRequirements = requirements.filter(req => !req.test); + const completedRequirements = requirements.filter((req) => req.test) + const missingRequirements = requirements.filter((req) => !req.test) return { completed: completedRequirements.length, total: requirements.length, - completedDescriptions: completedRequirements.map(req => req.description), - missingDescriptions: missingRequirements.map(req => req.description) - }; + completedDescriptions: completedRequirements.map((req) => req.description), + missingDescriptions: missingRequirements.map((req) => req.description), + } } /** From 5f21bf8f5c949942a5b4842cddc040d82c7e6a35 Mon Sep 17 00:00:00 2001 From: Daniele T Date: Tue, 1 Oct 2024 10:21:53 +0200 Subject: [PATCH 03/10] feat: better messages and handlers --- docs/form/input.md | 22 +++++++++++----------- src/js/plugins/input-password.js | 16 ++++++++++++---- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/docs/form/input.md b/docs/form/input.md index ae599ec37c..c2255986d7 100644 --- a/docs/form/input.md +++ b/docs/form/input.md @@ -156,7 +156,7 @@ Per rendere più semplice l'inserimento della password, l'elemento è stato dota data-bs-minimum-length Lunghezza minima per il calcolo della forza della password (soglia password molto debole) - 4 + 8 @@ -175,22 +175,22 @@ Per rendere più semplice l'inserimento della password, l'elemento è stato dota data-bs-short-pass Testo per il punteggio di forza della password minimo - Password molto debole + Password molto debole. data-bs-bad-pass Testo per punteggio di forza della password basso - Password debole + Password debole. data-bs-good-pass Testo per punteggio di forza della password buono - Password sicura + Password sicura. data-bs-strong-pass Testo per il punteggio di forza della password massimo - Password molto sicura + Password molto sicura. @@ -206,18 +206,18 @@ Per rendere più semplice l'inserimento della password, l'elemento è stato dota - Inserisci almeno 8 caratteri e una lettera maiuscola + Inserisci almeno 8 caratteri, una lettera maiuscola e un carattere speciale.
Inserisci almeno 8 caratteri e una lettera maiuscola + data-bs-short-pass="Password molto debole. " + data-bs-bad-pas="Password debole. " + data-bs-good-pass="Password sicura. " + data-bs-strong-pass="Password molto sicura. " + >Inserisci almeno 8 caratteri, una lettera maiuscola e un carattere speciale.
diff --git a/src/js/plugins/input-password.js b/src/js/plugins/input-password.js index 687cd006a8..28a7c44c00 100644 --- a/src/js/plugins/input-password.js +++ b/src/js/plugins/input-password.js @@ -16,10 +16,10 @@ const Default = { badPass: 'Password debole. ', goodPass: 'Password sicura. ', strongPass: 'Password molto sicura. ', - enterPass: 'Inserisci almeno 8 caratteri e una lettera maiuscola. ', + enterPass: 'Inserisci almeno 8 caratteri, una lettera maiuscola e un carattere speciale. ', alertCaps: 'Attenzione: CAPS LOCK inserito. ', showText: true, - minimumLength: 4, + minimumLength: 8, } const EVENT_CLICK = `click${EVENT_KEY}` @@ -108,6 +108,8 @@ class InputPassword extends BaseComponent { } _bindEvents() { + EventHandler.on(this._element, 'keypress', (evt) => this._preventSpace(evt)) + if (this._meter) { EventHandler.on(this._element, EVENT_KEYUP, () => this._checkPassword()) } @@ -122,6 +124,12 @@ class InputPassword extends BaseComponent { } } + _preventSpace(evt) { + if (evt.key === ' ' || evt.keyCode === 32) { + evt.preventDefault() + } + } + _handleKeyDown(evt) { if (evt.key === 'Shift') { this._isShiftPressed = true @@ -221,11 +229,11 @@ class InputPassword extends BaseComponent { let detailedMessage = `${strengthText}. ${requirements.completed} su ${requirements.total} requisiti soddisfatti. ` if (requirements.completedDescriptions.length > 0) { - detailedMessage += `Requisiti soddisfatti: ${requirements.completedDescriptions.join(', ')}. ` + detailedMessage += `Soddisfatti: ${requirements.completedDescriptions.join(' ')} ` } if (requirements.missingDescriptions.length > 0) { - detailedMessage += `Requisiti mancanti: ${requirements.missingDescriptions.join(', ')}.` + detailedMessage += `Mancanti: ${requirements.missingDescriptions.join(' ')} ` } strengthMeter.textContent = detailedMessage From 400ea2a950b0fc1b94799b5cc6bbbcd2f4a9f852 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Mon, 30 Sep 2024 22:51:32 +0200 Subject: [PATCH 04/10] fix: update icon minus --- src/svg/it-map-marker-minus.svg | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/svg/it-map-marker-minus.svg b/src/svg/it-map-marker-minus.svg index 745afb7847..8e2b65fc6e 100644 --- a/src/svg/it-map-marker-minus.svg +++ b/src/svg/it-map-marker-minus.svg @@ -1,9 +1,3 @@ - - - - - - + + From 867ca0d13e9615d8adaeb73cea1811b0883bf56b Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 26 Sep 2024 17:58:21 +0200 Subject: [PATCH 05/10] fix: extra space on webkit browsers --- src/scss/custom/_forms.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/scss/custom/_forms.scss b/src/scss/custom/_forms.scss index df89f98ef4..7289858f6c 100644 --- a/src/scss/custom/_forms.scss +++ b/src/scss/custom/_forms.scss @@ -116,6 +116,12 @@ textarea { } } +input[type='date'], +input[type='datetime-local'], +input[type='time'] { + display: flex; +} + textarea { border: 1px solid $input-border; height: auto; From 3e1e2cbe4583269717b6209ba339144ceb72fce3 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 26 Sep 2024 17:58:39 +0200 Subject: [PATCH 06/10] fix: remove duplicated properties --- src/scss/custom/_forms.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/scss/custom/_forms.scss b/src/scss/custom/_forms.scss index 7289858f6c..4b09fc3bce 100644 --- a/src/scss/custom/_forms.scss +++ b/src/scss/custom/_forms.scss @@ -103,14 +103,11 @@ input[type='url'], textarea { border: none; border-bottom: 1px solid $input-border; - border-radius: 0; padding: $input-spacing-y $input-spacing-x; outline: 0; - width: 100%; box-shadow: none; transition: none; -webkit-appearance: none; - -webkit-border-radius: 0; &::placeholder { color: $input-color-placeholder; } @@ -148,12 +145,12 @@ textarea { } .was-validated &:valid, &.is-valid { - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); } .was-validated &:invalid, &.is-invalid { - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E"); } &.warning { From 8a37ad9124d845c940d343e349a4c801d9592a29 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 26 Sep 2024 17:58:51 +0200 Subject: [PATCH 07/10] fix: added `form-control` class --- docs/form/input-calendario.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/form/input-calendario.md b/docs/form/input-calendario.md index 81e9335c5f..807adba8c1 100644 --- a/docs/form/input-calendario.md +++ b/docs/form/input-calendario.md @@ -20,6 +20,6 @@ Assicurarsi di aggiungere alla label la classe **`active`** per impedire la sovr {% capture example %}
- +
{% endcapture %}{% include example.html content=example %} From 6cda64f7ed58bc989b2462417cb384f70c599e76 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Thu, 26 Sep 2024 17:59:05 +0200 Subject: [PATCH 08/10] fix: remove duplicated properties --- src/scss/custom/_just-validate.scss | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index 0a9dc3018b..adfd5ade33 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -33,6 +33,7 @@ button:has(~ .is-invalid), padding-right: calc(1.5em + 0.75rem) !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); } + .input-group-text:has(~ .just-validate-success-field), .just-validate-success-field ~ .input-group-text, button:has(~ .just-validate-success-field), @@ -70,13 +71,7 @@ textarea { border-bottom-width: 1px; } } -input[type='date'] { - &.is-invalid { - border-bottom: 1px solid #d9364f; - padding-right: calc(1.5em + 0.75rem) !important; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E"); - } -} + input[type='checkbox'], input[type='radio'] { &.just-validate-success-field { @@ -85,6 +80,7 @@ input[type='radio'] { } } } + select { &.is-invalid { border-bottom: 1px solid #d9364f; From 45ec73d1737f0ba7e4b9693175e81b5a46a3b597 Mon Sep 17 00:00:00 2001 From: Daniele T Date: Tue, 1 Oct 2024 10:25:43 +0200 Subject: [PATCH 09/10] fix: typo --- src/js/plugins/input-password.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/plugins/input-password.js b/src/js/plugins/input-password.js index 28a7c44c00..bc12e2f926 100644 --- a/src/js/plugins/input-password.js +++ b/src/js/plugins/input-password.js @@ -226,7 +226,7 @@ class InputPassword extends BaseComponent { if (strengthMeter) { const requirements = this._getCompletedRequirements(this._element.value) const strengthText = this._scoreText(score) - let detailedMessage = `${strengthText}. ${requirements.completed} su ${requirements.total} requisiti soddisfatti. ` + let detailedMessage = `${strengthText} ${requirements.completed} su ${requirements.total} requisiti soddisfatti. ` if (requirements.completedDescriptions.length > 0) { detailedMessage += `Soddisfatti: ${requirements.completedDescriptions.join(' ')} ` From bbbe4b43b20da4cf370bdd746c947bdfb31e437b Mon Sep 17 00:00:00 2001 From: Daniele T Date: Tue, 1 Oct 2024 10:31:49 +0200 Subject: [PATCH 10/10] fix: docs --- docs/form/input.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/form/input.md b/docs/form/input.md index c2255986d7..f7395d2819 100644 --- a/docs/form/input.md +++ b/docs/form/input.md @@ -140,9 +140,9 @@ Il testo di aiuto deve essere esplicitamente associato agli elementi del modulo ### Input password -Per rendere più semplice l'inserimento della password, l'elemento è stato dotato di un visualizzatore dei caratteri digitati. Inoltre è possibile abbinare un controllo per segnalare quanto la password che si sta inserendo sia sicura con l'aggiunta dell'HTML necessario. +Per rendere più semplice l'inserimento della password, l'elemento è dotato di un pulsante che permette di mostrare i caratteri inseriti. -È possibile personalizzare la componente `strength meter` usando gli attributi data. +Inoltre, nel caso di un campo Input password utilizzato per la scelta di una password, è possibile abbinare un controllo per segnalare quanto la password che si sta inserendo sia sicura, con l'aggiunta dell'HTML necessario. È possibile personalizzare alcuni messaggi di questa variante con `strength meter` usando specifici attributi `data`. @@ -246,7 +246,7 @@ Abilitarlo manualmente con: ```js var inputElement = document.querySelector('#exampleInputPassword')) var passwordComponent = new bootstrap.InputPassword(inputElement, { - minimumLength: 4, + minimumLength: 8, }) ``` @@ -264,7 +264,7 @@ var passwordComponent = new bootstrap.InputPassword(inputElement, { - +
minimumLength Lunghezza minima per il calcolo della forza della password (soglia password molto debole)48