Fix password toggle in dynamic subform field (#44362)

joomla · Nov 14, 2024 · 4fc3029 · 4fc3029
1 parent 9bf1dab
commit 4fc3029
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 84 deletions.
diff --git 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
@@ -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);