Skip to content

Commit 4fc3029

Browse files
MatMyftaMatMyfta
authored
Fix password toggle in dynamic subform field (joomla#44362)
1 parent 9bf1dab commit 4fc3029

File tree

2 files changed

+93
-84
lines changed

2 files changed

+93
-84
lines changed

‎build/media_source/system/js/fields/passwordstrength.es6.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -109,16 +109,17 @@ class PasswordStrength {
109109
const i = meter.getAttribute('id').replace(/^\D+/g, '');
110110
const label = element.parentNode.parentNode.querySelector(`#password-${i}`);
111111

112-
if (score === 100) {
113-
label.innerText = Joomla.Text._('JFIELD_PASSWORD_INDICATE_COMPLETE');
114-
} else {
115-
label.innerText = Joomla.Text._('JFIELD_PASSWORD_INDICATE_INCOMPLETE');
116-
}
117-
meter.value = score;
118-
119-
if (!element.value.length) {
120-
label.innerText = '';
121-
element.setAttribute('required', '');
112+
if (label) {
113+
if (score === 100) {
114+
label.innerText = Joomla.Text._('JFIELD_PASSWORD_INDICATE_COMPLETE');
115+
} else {
116+
label.innerText = Joomla.Text._('JFIELD_PASSWORD_INDICATE_INCOMPLETE');
117+
}
118+
meter.value = score;
119+
if (!element.value.length) {
120+
label.innerText = '';
121+
element.setAttribute('required', '');
122+
}
122123
}
123124
};
124125

‎build/media_source/system/js/fields/passwordview.es6.js‎

Lines changed: 82 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -5,78 +5,86 @@
55
((document) => {
66
'use strict';
77

8-
document.addEventListener('DOMContentLoaded', () => {
9-
[].slice.call(document.querySelectorAll('input[type="password"]')).forEach((input) => {
10-
const toggleButton = input.parentNode.querySelector('.input-password-toggle');
11-
12-
if (toggleButton) {
13-
toggleButton.addEventListener('click', () => {
14-
const icon = toggleButton.firstElementChild;
15-
const srText = toggleButton.lastElementChild;
16-
17-
if (input.type === 'password') {
18-
// Update the icon class
19-
icon.classList.remove('icon-eye');
20-
icon.classList.add('icon-eye-slash');
21-
22-
// Update the input type
23-
input.type = 'text';
24-
25-
// Focus the input field
26-
input.focus();
27-
28-
// Update the text for screenreaders
29-
srText.innerText = Joomla.Text._('JHIDEPASSWORD');
30-
} else if (input.type === 'text') {
31-
// Update the icon class
32-
icon.classList.add('icon-eye');
33-
icon.classList.remove('icon-eye-slash');
34-
35-
// Update the input type
36-
input.type = 'password';
37-
38-
// Focus the input field
39-
input.focus();
40-
41-
// Update the text for screenreaders
42-
srText.innerText = Joomla.Text._('JSHOWPASSWORD');
43-
}
44-
});
45-
}
46-
47-
const modifyButton = input.parentNode.querySelector('.input-password-modify');
48-
49-
if (modifyButton) {
50-
modifyButton.addEventListener('click', () => {
51-
const lock = !modifyButton.classList.contains('locked');
52-
53-
if (lock === true) {
54-
// Add lock
55-
modifyButton.classList.add('locked');
56-
57-
// Reset value to empty string
58-
input.value = '';
59-
60-
// Disable the field
61-
input.setAttribute('disabled', '');
62-
63-
// Update the text
64-
modifyButton.innerText = Joomla.Text._('JMODIFY');
65-
} else {
66-
// Remove lock
67-
modifyButton.classList.remove('locked');
68-
69-
// Enable the field
70-
input.removeAttribute('disabled');
71-
72-
// Focus the input field
73-
input.focus();
74-
75-
// Update the text
76-
modifyButton.innerText = Joomla.Text._('JCANCEL');
77-
}
78-
});
79-
}
80-
});
81-
});
8+
function togglePassword() {
9+
[].slice
10+
.call(document.querySelectorAll('input[type="password"]'))
11+
.forEach((input) => {
12+
const toggleButton = input.parentNode.querySelector('.input-password-toggle');
13+
14+
const hasClickListener = toggleButton.getAttribute('clickListener') === 'true';
15+
16+
if (toggleButton && !hasClickListener) {
17+
toggleButton.setAttribute('clickListener', 'true');
18+
toggleButton.addEventListener('click', () => {
19+
const icon = toggleButton.firstElementChild;
20+
const srText = toggleButton.lastElementChild;
21+
22+
if (input.type === 'password') {
23+
// Update the icon class
24+
icon.classList.remove('icon-eye');
25+
icon.classList.add('icon-eye-slash');
26+
27+
// Update the input type
28+
input.type = 'text';
29+
30+
// Focus the input field
31+
input.focus();
32+
33+
// Update the text for screenreaders
34+
srText.innerText = Joomla.Text._('JHIDEPASSWORD');
35+
} else if (input.type === 'text') {
36+
// Update the icon class
37+
icon.classList.add('icon-eye');
38+
icon.classList.remove('icon-eye-slash');
39+
40+
// Update the input type
41+
input.type = 'password';
42+
43+
// Focus the input field
44+
input.focus();
45+
46+
// Update the text for screenreaders
47+
srText.innerText = Joomla.Text._('JSHOWPASSWORD');
48+
}
49+
});
50+
}
51+
52+
const modifyButton = input.parentNode.querySelector('.input-password-modify');
53+
54+
if (modifyButton) {
55+
modifyButton.addEventListener('click', () => {
56+
const lock = !modifyButton.classList.contains('locked');
57+
58+
if (lock === true) {
59+
// Add lock
60+
modifyButton.classList.add('locked');
61+
62+
// Reset value to empty string
63+
input.value = '';
64+
65+
// Disable the field
66+
input.setAttribute('disabled', '');
67+
68+
// Update the text
69+
modifyButton.innerText = Joomla.Text._('JMODIFY');
70+
} else {
71+
// Remove lock
72+
modifyButton.classList.remove('locked');
73+
74+
// Enable the field
75+
input.removeAttribute('disabled');
76+
77+
// Focus the input field
78+
input.focus();
79+
80+
// Update the text
81+
modifyButton.innerText = Joomla.Text._('JCANCEL');
82+
}
83+
});
84+
}
85+
});
86+
}
87+
88+
document.addEventListener('joomla:updated', togglePassword);
89+
document.addEventListener('DOMContentLoaded', togglePassword);
8290
})(document);

0 commit comments

Comments
 (0)