Skip to content

Commit a190f68

Browse files
Remove jQuery .attr from the common admin functions (#30115)
- Switched from jQuery `attr` to plain javascript `getAttribute` and `setAttribute` - Tested most of the functions and they work as before --------- Signed-off-by: Yarden Shoham <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent 4efe788 commit a190f68

File tree

1 file changed

+91
-62
lines changed

1 file changed

+91
-62
lines changed

web_src/js/features/admin/common.js

Lines changed: 91 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -5,136 +5,165 @@ import {POST} from '../../modules/fetch.js';
55

66
const {appSubUrl} = window.config;
77

8+
function onSecurityProtocolChange() {
9+
if (Number(document.getElementById('security_protocol')?.value) > 0) {
10+
showElem('.has-tls');
11+
} else {
12+
hideElem('.has-tls');
13+
}
14+
}
15+
816
export function initAdminCommon() {
9-
if (!$('.page-content.admin').length) return;
17+
if (!document.querySelector('.page-content.admin')) return;
1018

1119
// check whether appUrl(ROOT_URL) is correct, if not, show an error message
1220
checkAppUrl();
1321

1422
// New user
1523
if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
16-
$('#login_type').on('change', function () {
17-
if ($(this).val().substring(0, 1) === '0') {
18-
$('#user_name').removeAttr('disabled');
19-
$('#login_name').removeAttr('required');
24+
document.getElementById('login_type')?.addEventListener('change', function () {
25+
if (this.value?.substring(0, 1) === '0') {
26+
document.getElementById('user_name')?.removeAttribute('disabled');
27+
document.getElementById('login_name')?.removeAttribute('required');
2028
hideElem('.non-local');
2129
showElem('.local');
22-
$('#user_name').trigger('focus');
30+
document.getElementById('user_name')?.focus();
2331

24-
if ($(this).data('password') === 'required') {
25-
$('#password').attr('required', 'required');
32+
if (this.getAttribute('data-password') === 'required') {
33+
document.getElementById('password')?.setAttribute('required', 'required');
2634
}
2735
} else {
28-
if ($('.admin.edit.user').length > 0) {
29-
$('#user_name').attr('disabled', 'disabled');
36+
if (document.querySelector('.admin.edit.user')) {
37+
document.getElementById('user_name')?.setAttribute('disabled', 'disabled');
3038
}
31-
$('#login_name').attr('required', 'required');
39+
document.getElementById('login_name')?.setAttribute('required', 'required');
3240
showElem('.non-local');
3341
hideElem('.local');
34-
$('#login_name').trigger('focus');
42+
document.getElementById('login_name')?.focus();
3543

36-
$('#password').removeAttr('required');
44+
document.getElementById('password')?.removeAttribute('required');
3745
}
3846
});
3947
}
4048

41-
function onSecurityProtocolChange() {
42-
if ($('#security_protocol').val() > 0) {
43-
showElem('.has-tls');
44-
} else {
45-
hideElem('.has-tls');
46-
}
47-
}
48-
4949
function onUsePagedSearchChange() {
50+
const searchPageSizeElements = document.querySelectorAll('.search-page-size');
5051
if (document.getElementById('use_paged_search').checked) {
5152
showElem('.search-page-size');
52-
$('.search-page-size').find('input').attr('required', 'required');
53+
for (const el of searchPageSizeElements) {
54+
el.querySelector('input')?.setAttribute('required', 'required');
55+
}
5356
} else {
5457
hideElem('.search-page-size');
55-
$('.search-page-size').find('input').removeAttr('required');
58+
for (const el of searchPageSizeElements) {
59+
el.querySelector('input')?.removeAttribute('required');
60+
}
5661
}
5762
}
5863

5964
function onOAuth2Change(applyDefaultValues) {
6065
hideElem('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url');
61-
$('.open_id_connect_auto_discovery_url input[required]').removeAttr('required');
66+
for (const input of document.querySelectorAll('.open_id_connect_auto_discovery_url input[required]')) {
67+
input.removeAttribute('required');
68+
}
6269

63-
const provider = $('#oauth2_provider').val();
70+
const provider = document.getElementById('oauth2_provider')?.value;
6471
switch (provider) {
6572
case 'openidConnect':
66-
$('.open_id_connect_auto_discovery_url input').attr('required', 'required');
73+
for (const input of document.querySelectorAll('.open_id_connect_auto_discovery_url input')) {
74+
input.setAttribute('required', 'required');
75+
}
6776
showElem('.open_id_connect_auto_discovery_url');
6877
break;
6978
default:
70-
if ($(`#${provider}_customURLSettings`).data('required')) {
71-
$('#oauth2_use_custom_url').attr('checked', 'checked');
79+
if (document.getElementById(`#${provider}_customURLSettings`)?.getAttribute('data-required')) {
80+
document.getElementById('oauth2_use_custom_url')?.setAttribute('checked', 'checked');
7281
}
73-
if ($(`#${provider}_customURLSettings`).data('available')) {
82+
if (document.getElementById(`#${provider}_customURLSettings`)?.getAttribute('data-available')) {
7483
showElem('.oauth2_use_custom_url');
7584
}
7685
}
7786
onOAuth2UseCustomURLChange(applyDefaultValues);
7887
}
7988

8089
function onOAuth2UseCustomURLChange(applyDefaultValues) {
81-
const provider = $('#oauth2_provider').val();
90+
const provider = document.getElementById('oauth2_provider')?.value;
8291
hideElem('.oauth2_use_custom_url_field');
83-
$('.oauth2_use_custom_url_field input[required]').removeAttr('required');
92+
for (const input of document.querySelectorAll('.oauth2_use_custom_url_field input[required]')) {
93+
input.removeAttribute('required');
94+
}
8495

8596
if (document.getElementById('oauth2_use_custom_url')?.checked) {
8697
for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
8798
if (applyDefaultValues) {
88-
$(`#oauth2_${custom}`).val($(`#${provider}_${custom}`).val());
99+
document.getElementById(`oauth2_${custom}`).value = document.getElementById(`${provider}_${custom}`).value;
89100
}
90-
if ($(`#${provider}_${custom}`).data('available')) {
91-
$(`.oauth2_${custom} input`).attr('required', 'required');
92-
showElem($(`.oauth2_${custom}`));
101+
const customInput = document.getElementById(`${provider}_${custom}`);
102+
if (customInput && customInput.getAttribute('data-available')) {
103+
for (const input of document.querySelectorAll(`.oauth2_${custom} input`)) {
104+
input.setAttribute('required', 'required');
105+
}
106+
showElem(`.oauth2_${custom}`);
93107
}
94108
}
95109
}
96110
}
97111

98112
function onEnableLdapGroupsChange() {
99-
toggleElem($('#ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
113+
toggleElem(document.getElementById('ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
100114
}
101115

102116
// New authentication
103-
if ($('.admin.new.authentication').length > 0) {
104-
$('#auth_type').on('change', function () {
117+
if (document.querySelector('.admin.new.authentication')) {
118+
document.getElementById('auth_type')?.addEventListener('change', function () {
105119
hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
106120

107-
$('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]').removeAttr('required');
121+
for (const input of document.querySelectorAll('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]')) {
122+
input.removeAttribute('required');
123+
}
124+
108125
$('.binddnrequired').removeClass('required');
109126

110-
const authType = $(this).val();
127+
const authType = this.value;
111128
switch (authType) {
112129
case '2': // LDAP
113130
showElem('.ldap');
114-
$('.binddnrequired input, .ldap div.required:not(.dldap) input').attr('required', 'required');
131+
for (const input of document.querySelectorAll('.binddnrequired input, .ldap div.required:not(.dldap) input')) {
132+
input.setAttribute('required', 'required');
133+
}
115134
$('.binddnrequired').addClass('required');
116135
break;
117136
case '3': // SMTP
118137
showElem('.smtp');
119138
showElem('.has-tls');
120-
$('.smtp div.required input, .has-tls').attr('required', 'required');
139+
for (const input of document.querySelectorAll('.smtp div.required input, .has-tls')) {
140+
input.setAttribute('required', 'required');
141+
}
121142
break;
122143
case '4': // PAM
123144
showElem('.pam');
124-
$('.pam input').attr('required', 'required');
145+
for (const input of document.querySelectorAll('.pam input')) {
146+
input.setAttribute('required', 'required');
147+
}
125148
break;
126149
case '5': // LDAP
127150
showElem('.dldap');
128-
$('.dldap div.required:not(.ldap) input').attr('required', 'required');
151+
for (const input of document.querySelectorAll('.dldap div.required:not(.ldap) input')) {
152+
input.setAttribute('required', 'required');
153+
}
129154
break;
130155
case '6': // OAuth2
131156
showElem('.oauth2');
132-
$('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input').attr('required', 'required');
157+
for (const input of document.querySelectorAll('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input')) {
158+
input.setAttribute('required', 'required');
159+
}
133160
onOAuth2Change(true);
134161
break;
135162
case '7': // SSPI
136163
showElem('.sspi');
137-
$('.sspi div.required input').attr('required', 'required');
164+
for (const input of document.querySelectorAll('.sspi div.required input')) {
165+
input.setAttribute('required', 'required');
166+
}
138167
break;
139168
}
140169
if (authType === '2' || authType === '5') {
@@ -146,44 +175,44 @@ export function initAdminCommon() {
146175
}
147176
});
148177
$('#auth_type').trigger('change');
149-
$('#security_protocol').on('change', onSecurityProtocolChange);
150-
$('#use_paged_search').on('change', onUsePagedSearchChange);
151-
$('#oauth2_provider').on('change', () => onOAuth2Change(true));
152-
$('#oauth2_use_custom_url').on('change', () => onOAuth2UseCustomURLChange(true));
178+
document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
179+
document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
180+
document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
181+
document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
153182
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
154183
}
155184
// Edit authentication
156-
if ($('.admin.edit.authentication').length > 0) {
157-
const authType = $('#auth_type').val();
185+
if (document.querySelector('.admin.edit.authentication')) {
186+
const authType = document.getElementById('auth_type')?.value;
158187
if (authType === '2' || authType === '5') {
159-
$('#security_protocol').on('change', onSecurityProtocolChange);
188+
document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
160189
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
161190
onEnableLdapGroupsChange();
162191
if (authType === '2') {
163-
$('#use_paged_search').on('change', onUsePagedSearchChange);
192+
document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
164193
}
165194
} else if (authType === '6') {
166-
$('#oauth2_provider').on('change', () => onOAuth2Change(true));
167-
$('#oauth2_use_custom_url').on('change', () => onOAuth2UseCustomURLChange(false));
195+
document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
196+
document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
168197
onOAuth2Change(false);
169198
}
170199
}
171200

172-
if ($('.admin.authentication').length > 0) {
201+
if (document.querySelector('.admin.authentication')) {
173202
$('#auth_name').on('input', function () {
174203
// appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
175-
$('#oauth2-callback-url').text(`${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent($(this).val())}/callback`);
204+
document.getElementById('oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
176205
}).trigger('input');
177206
}
178207

179208
// Notice
180-
if ($('.admin.notice')) {
181-
const $detailModal = $('#detail-modal');
209+
if (document.querySelector('.admin.notice')) {
210+
const $detailModal = document.getElementById('detail-modal');
182211

183212
// Attach view detail modals
184213
$('.view-detail').on('click', function () {
185214
$detailModal.find('.content pre').text($(this).parents('tr').find('.notice-description').text());
186-
$detailModal.find('.sub.header').text($(this).parents('tr').find('relative-time').attr('title'));
215+
$detailModal.find('.sub.header').text(this.closest('tr')?.querySelector('relative-time')?.getAttribute('title'));
187216
$detailModal.modal('show');
188217
return false;
189218
});
@@ -203,7 +232,7 @@ export function initAdminCommon() {
203232
break;
204233
}
205234
});
206-
$('#delete-selection').on('click', async function (e) {
235+
document.getElementById('delete-selection')?.addEventListener('click', async function (e) {
207236
e.preventDefault();
208237
const $this = $(this);
209238
$this.addClass('is-loading disabled');

0 commit comments

Comments
 (0)