diff --git a/build/media_source/system/js/fields/passwordstrength.es6.js b/build/media_source/system/js/fields/passwordstrength.es6.js index eaf00d14401fc..51be907566496 100644 --- a/build/media_source/system/js/fields/passwordstrength.es6.js +++ b/build/media_source/system/js/fields/passwordstrength.es6.js @@ -109,16 +109,17 @@ class PasswordStrength { const i = meter.getAttribute('id').replace(/^\D+/g, ''); const label = element.parentNode.parentNode.querySelector(`#password-${i}`); - if (score === 100) { - label.innerText = Joomla.Text._('JFIELD_PASSWORD_INDICATE_COMPLETE'); - } else { - label.innerText = Joomla.Text._('JFIELD_PASSWORD_INDICATE_INCOMPLETE'); - } - meter.value = score; - - if (!element.value.length) { - label.innerText = ''; - element.setAttribute('required', ''); + if (label) { + if (score === 100) { + label.innerText = Joomla.Text._('JFIELD_PASSWORD_INDICATE_COMPLETE'); + } else { + label.innerText = Joomla.Text._('JFIELD_PASSWORD_INDICATE_INCOMPLETE'); + } + meter.value = score; + if (!element.value.length) { + label.innerText = ''; + element.setAttribute('required', ''); + } } }; diff --git a/build/media_source/system/js/fields/passwordview.es6.js b/build/media_source/system/js/fields/passwordview.es6.js index 50f5ac2b20d8c..484ecc41941d6 100644 --- a/build/media_source/system/js/fields/passwordview.es6.js +++ b/build/media_source/system/js/fields/passwordview.es6.js @@ -5,78 +5,86 @@ ((document) => { 'use strict'; - document.addEventListener('DOMContentLoaded', () => { - [].slice.call(document.querySelectorAll('input[type="password"]')).forEach((input) => { - const toggleButton = input.parentNode.querySelector('.input-password-toggle'); - - if (toggleButton) { - toggleButton.addEventListener('click', () => { - const icon = toggleButton.firstElementChild; - const srText = toggleButton.lastElementChild; - - if (input.type === 'password') { - // Update the icon class - icon.classList.remove('icon-eye'); - icon.classList.add('icon-eye-slash'); - - // Update the input type - input.type = 'text'; - - // Focus the input field - input.focus(); - - // Update the text for screenreaders - srText.innerText = Joomla.Text._('JHIDEPASSWORD'); - } else if (input.type === 'text') { - // Update the icon class - icon.classList.add('icon-eye'); - icon.classList.remove('icon-eye-slash'); - - // Update the input type - input.type = 'password'; - - // Focus the input field - input.focus(); - - // Update the text for screenreaders - srText.innerText = Joomla.Text._('JSHOWPASSWORD'); - } - }); - } - - const modifyButton = input.parentNode.querySelector('.input-password-modify'); - - if (modifyButton) { - modifyButton.addEventListener('click', () => { - const lock = !modifyButton.classList.contains('locked'); - - if (lock === true) { - // Add lock - modifyButton.classList.add('locked'); - - // Reset value to empty string - input.value = ''; - - // Disable the field - input.setAttribute('disabled', ''); - - // Update the text - modifyButton.innerText = Joomla.Text._('JMODIFY'); - } else { - // Remove lock - modifyButton.classList.remove('locked'); - - // Enable the field - input.removeAttribute('disabled'); - - // Focus the input field - input.focus(); - - // Update the text - modifyButton.innerText = Joomla.Text._('JCANCEL'); - } - }); - } - }); - }); + function togglePassword() { + [].slice + .call(document.querySelectorAll('input[type="password"]')) + .forEach((input) => { + const toggleButton = input.parentNode.querySelector('.input-password-toggle'); + + const hasClickListener = toggleButton.getAttribute('clickListener') === 'true'; + + if (toggleButton && !hasClickListener) { + toggleButton.setAttribute('clickListener', 'true'); + toggleButton.addEventListener('click', () => { + const icon = toggleButton.firstElementChild; + const srText = toggleButton.lastElementChild; + + if (input.type === 'password') { + // Update the icon class + icon.classList.remove('icon-eye'); + icon.classList.add('icon-eye-slash'); + + // Update the input type + input.type = 'text'; + + // Focus the input field + input.focus(); + + // Update the text for screenreaders + srText.innerText = Joomla.Text._('JHIDEPASSWORD'); + } else if (input.type === 'text') { + // Update the icon class + icon.classList.add('icon-eye'); + icon.classList.remove('icon-eye-slash'); + + // Update the input type + input.type = 'password'; + + // Focus the input field + input.focus(); + + // Update the text for screenreaders + srText.innerText = Joomla.Text._('JSHOWPASSWORD'); + } + }); + } + + const modifyButton = input.parentNode.querySelector('.input-password-modify'); + + if (modifyButton) { + modifyButton.addEventListener('click', () => { + const lock = !modifyButton.classList.contains('locked'); + + if (lock === true) { + // Add lock + modifyButton.classList.add('locked'); + + // Reset value to empty string + input.value = ''; + + // Disable the field + input.setAttribute('disabled', ''); + + // Update the text + modifyButton.innerText = Joomla.Text._('JMODIFY'); + } else { + // Remove lock + modifyButton.classList.remove('locked'); + + // Enable the field + input.removeAttribute('disabled'); + + // Focus the input field + input.focus(); + + // Update the text + modifyButton.innerText = Joomla.Text._('JCANCEL'); + } + }); + } + }); + } + + document.addEventListener('joomla:updated', togglePassword); + document.addEventListener('DOMContentLoaded', togglePassword); })(document);