loading up the forgejo repo on tangled to test page performance
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 <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit a190f68f1bf92554923a4adde50e5cbc637a2a2e)
authored by
Yarden Shoham
Giteabot
and committed by
Earl Warren
b95a893b
4249512c
+91
-62
+91
-62
web_src/js/features/admin/common.js
+91
-62
web_src/js/features/admin/common.js
···
5
5
6
6
const {appSubUrl} = window.config;
7
7
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
+
8
16
export function initAdminCommon() {
9
-
if (!$('.page-content.admin').length) return;
17
+
if (!document.querySelector('.page-content.admin')) return;
10
18
11
19
// check whether appUrl(ROOT_URL) is correct, if not, show an error message
12
20
checkAppUrl();
13
21
14
22
// New user
15
23
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');
20
28
hideElem('.non-local');
21
29
showElem('.local');
22
-
$('#user_name').trigger('focus');
30
+
document.getElementById('user_name')?.focus();
23
31
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');
26
34
}
27
35
} 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');
30
38
}
31
-
$('#login_name').attr('required', 'required');
39
+
document.getElementById('login_name')?.setAttribute('required', 'required');
32
40
showElem('.non-local');
33
41
hideElem('.local');
34
-
$('#login_name').trigger('focus');
42
+
document.getElementById('login_name')?.focus();
35
43
36
-
$('#password').removeAttr('required');
44
+
document.getElementById('password')?.removeAttribute('required');
37
45
}
38
46
});
39
47
}
40
48
41
-
function onSecurityProtocolChange() {
42
-
if ($('#security_protocol').val() > 0) {
43
-
showElem('.has-tls');
44
-
} else {
45
-
hideElem('.has-tls');
46
-
}
47
-
}
48
-
49
49
function onUsePagedSearchChange() {
50
+
const searchPageSizeElements = document.querySelectorAll('.search-page-size');
50
51
if (document.getElementById('use_paged_search').checked) {
51
52
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
+
}
53
56
} else {
54
57
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
+
}
56
61
}
57
62
}
58
63
59
64
function onOAuth2Change(applyDefaultValues) {
60
65
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
+
}
62
69
63
-
const provider = $('#oauth2_provider').val();
70
+
const provider = document.getElementById('oauth2_provider')?.value;
64
71
switch (provider) {
65
72
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
+
}
67
76
showElem('.open_id_connect_auto_discovery_url');
68
77
break;
69
78
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');
72
81
}
73
-
if ($(`#${provider}_customURLSettings`).data('available')) {
82
+
if (document.getElementById(`#${provider}_customURLSettings`)?.getAttribute('data-available')) {
74
83
showElem('.oauth2_use_custom_url');
75
84
}
76
85
}
···
78
87
}
79
88
80
89
function onOAuth2UseCustomURLChange(applyDefaultValues) {
81
-
const provider = $('#oauth2_provider').val();
90
+
const provider = document.getElementById('oauth2_provider')?.value;
82
91
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
+
}
84
95
85
96
if (document.getElementById('oauth2_use_custom_url')?.checked) {
86
97
for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
87
98
if (applyDefaultValues) {
88
-
$(`#oauth2_${custom}`).val($(`#${provider}_${custom}`).val());
99
+
document.getElementById(`oauth2_${custom}`).value = document.getElementById(`${provider}_${custom}`).value;
89
100
}
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}`);
93
107
}
94
108
}
95
109
}
96
110
}
97
111
98
112
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);
100
114
}
101
115
102
116
// 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 () {
105
119
hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
106
120
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
+
108
125
$('.binddnrequired').removeClass('required');
109
126
110
-
const authType = $(this).val();
127
+
const authType = this.value;
111
128
switch (authType) {
112
129
case '2': // LDAP
113
130
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
+
}
115
134
$('.binddnrequired').addClass('required');
116
135
break;
117
136
case '3': // SMTP
118
137
showElem('.smtp');
119
138
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
+
}
121
142
break;
122
143
case '4': // PAM
123
144
showElem('.pam');
124
-
$('.pam input').attr('required', 'required');
145
+
for (const input of document.querySelectorAll('.pam input')) {
146
+
input.setAttribute('required', 'required');
147
+
}
125
148
break;
126
149
case '5': // LDAP
127
150
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
+
}
129
154
break;
130
155
case '6': // OAuth2
131
156
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
+
}
133
160
onOAuth2Change(true);
134
161
break;
135
162
case '7': // SSPI
136
163
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
+
}
138
167
break;
139
168
}
140
169
if (authType === '2' || authType === '5') {
···
146
175
}
147
176
});
148
177
$('#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));
153
182
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
154
183
}
155
184
// 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;
158
187
if (authType === '2' || authType === '5') {
159
-
$('#security_protocol').on('change', onSecurityProtocolChange);
188
+
document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
160
189
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
161
190
onEnableLdapGroupsChange();
162
191
if (authType === '2') {
163
-
$('#use_paged_search').on('change', onUsePagedSearchChange);
192
+
document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
164
193
}
165
194
} 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));
168
197
onOAuth2Change(false);
169
198
}
170
199
}
171
200
172
-
if ($('.admin.authentication').length > 0) {
201
+
if (document.querySelector('.admin.authentication')) {
173
202
$('#auth_name').on('input', function () {
174
203
// 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`;
176
205
}).trigger('input');
177
206
}
178
207
179
208
// Notice
180
-
if ($('.admin.notice')) {
181
-
const $detailModal = $('#detail-modal');
209
+
if (document.querySelector('.admin.notice')) {
210
+
const $detailModal = document.getElementById('detail-modal');
182
211
183
212
// Attach view detail modals
184
213
$('.view-detail').on('click', function () {
185
214
$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'));
187
216
$detailModal.modal('show');
188
217
return false;
189
218
});
···
203
232
break;
204
233
}
205
234
});
206
-
$('#delete-selection').on('click', async function (e) {
235
+
document.getElementById('delete-selection')?.addEventListener('click', async function (e) {
207
236
e.preventDefault();
208
237
const $this = $(this);
209
238
$this.addClass('is-loading disabled');