github/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-06-22 06:17:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor admin/common.ts (#33788)

Browse Source 
Only remove jQuery
This commit is contained in:
wxiaoguang 2025-03-04 23:42:07 +08:00 committed by GitHub
parent ffb276578f
commit 163bbca0eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 114 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
web_src/js/features/admin/common.ts
View File

@ -1,8 +1,8 @@
import $ from 'jquery';
import {checkAppUrl} from '../common-page.ts'; import {checkAppUrl} from '../common-page.ts';
import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts'; import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
import {POST} from '../../modules/fetch.ts'; import {POST} from '../../modules/fetch.ts';
import {initAvatarUploaderWithCropper} from '../comp/Cropper.ts'; import {initAvatarUploaderWithCropper} from '../comp/Cropper.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
const {appSubUrl} = window.config; const {appSubUrl} = window.config;
@ -20,32 +20,49 @@ export function initAdminCommon(): void {
// check whether appUrl(ROOT_URL) is correct, if not, show an error message // check whether appUrl(ROOT_URL) is correct, if not, show an error message
checkAppUrl(); checkAppUrl();
// New user initAdminUser();
if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) { initAdminAuthentication();
document.querySelector<HTMLInputElement>('#login_type')?.addEventListener('change', function () { initAdminNotice();
if (this.value?.startsWith('0')) {
document.querySelector<HTMLInputElement>('#user_name')?.removeAttribute('disabled');
document.querySelector<HTMLInputElement>('#login_name')?.removeAttribute('required');
hideElem('.non-local');
showElem('.local');
document.querySelector<HTMLInputElement>('#user_name')?.focus();
if (this.getAttribute('data-password') === 'required') { queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper);
document.querySelector('#password')?.setAttribute('required', 'required'); }
}
} else {
if (document.querySelector<HTMLDivElement>('.admin.edit.user')) {
document.querySelector<HTMLInputElement>('#user_name')?.setAttribute('disabled', 'disabled');
}
document.querySelector<HTMLInputElement>('#login_name')?.setAttribute('required', 'required');
showElem('.non-local');
hideElem('.local');
document.querySelector<HTMLInputElement>('#login_name')?.focus();
document.querySelector<HTMLInputElement>('#password')?.removeAttribute('required'); function initAdminUser() {
const pageContent = document.querySelector('.page-content.admin.edit.user, .page-content.admin.new.user');
if (!pageContent) return;
document.querySelector<HTMLInputElement>('#login_type')?.addEventListener('change', function () {
if (this.value?.startsWith('0')) {
document.querySelector<HTMLInputElement>('#user_name')?.removeAttribute('disabled');
document.querySelector<HTMLInputElement>('#login_name')?.removeAttribute('required');
hideElem('.non-local');
showElem('.local');
document.querySelector<HTMLInputElement>('#user_name')?.focus();
if (this.getAttribute('data-password') === 'required') {
document.querySelector('#password')?.setAttribute('required', 'required');
} }
}); } else {
} if (document.querySelector<HTMLDivElement>('.admin.edit.user')) {
document.querySelector<HTMLInputElement>('#user_name')?.setAttribute('disabled', 'disabled');
}
document.querySelector<HTMLInputElement>('#login_name')?.setAttribute('required', 'required');
showElem('.non-local');
hideElem('.local');
document.querySelector<HTMLInputElement>('#login_name')?.focus();
document.querySelector<HTMLInputElement>('#password')?.removeAttribute('required');
}
});
}
function initAdminAuthentication() {
const pageContent = document.querySelector('.page-content.admin.authentication');
if (!pageContent) return;
const isNewPage = pageContent.classList.contains('new');
const isEditPage = pageContent.classList.contains('edit');
if (!isNewPage && !isEditPage) return;
function onUsePagedSearchChange() { function onUsePagedSearchChange() {
const searchPageSizeElements = document.querySelectorAll<HTMLDivElement>('.search-page-size'); const searchPageSizeElements = document.querySelectorAll<HTMLDivElement>('.search-page-size');
@ -120,9 +137,11 @@ export function initAdminCommon(): void {
toggleElem(document.querySelector('#ldap-group-options'), checked); toggleElem(document.querySelector('#ldap-group-options'), checked);
} }
const elAuthType = document.querySelector<HTMLInputElement>('#auth_type');
// New authentication // New authentication
if (document.querySelector<HTMLDivElement>('.admin.new.authentication')) { if (isNewPage) {
document.querySelector<HTMLInputElement>('#auth_type')?.addEventListener('change', function () { const onAuthTypeChange = function () {
hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi'); hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
for (const input of document.querySelectorAll<HTMLInputElement>('.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]')) { for (const input of document.querySelectorAll<HTMLInputElement>('.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]')) {
@ -131,7 +150,7 @@ export function initAdminCommon(): void {
document.querySelector<HTMLDivElement>('.binddnrequired')?.classList.remove('required'); document.querySelector<HTMLDivElement>('.binddnrequired')?.classList.remove('required');
const authType = this.value; const authType = elAuthType.value;
switch (authType) { switch (authType) {
case '2': // LDAP case '2': // LDAP
showElem('.ldap'); showElem('.ldap');
@ -180,20 +199,23 @@ export function initAdminCommon(): void {
if (authType === '2') { if (authType === '2') {
onUsePagedSearchChange(); onUsePagedSearchChange();
} }
}); };
$('#auth_type').trigger('change'); elAuthType.addEventListener('change', onAuthTypeChange);
onAuthTypeChange();
document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange); document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange); document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true)); document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true)); document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
} }
// Edit authentication // Edit authentication
if (document.querySelector<HTMLDivElement>('.admin.edit.authentication')) { if (isEditPage) {
const authType = document.querySelector<HTMLInputElement>('#auth_type')?.value; const authType = elAuthType.value;
if (authType === '2' || authType === '5') { if (authType === '2' || authType === '5') {
document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange); document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange); document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
onEnableLdapGroupsChange(); onEnableLdapGroupsChange();
if (authType === '2') { if (authType === '2') {
document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange); document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
@ -205,60 +227,63 @@ export function initAdminCommon(): void {
} }
} }
if (document.querySelector<HTMLDivElement>('.admin.authentication')) { const elAuthName = document.querySelector<HTMLInputElement>('#auth_name');
$('#auth_name').on('input', function () { const onAuthNameChange = function () {
// appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash. // appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent((this as HTMLInputElement).value)}/callback`; document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(elAuthName.value)}/callback`;
}).trigger('input'); };
} elAuthName.addEventListener('input', onAuthNameChange);
onAuthNameChange();
// Notice }
if (document.querySelector<HTMLDivElement>('.admin.notice')) {
const detailModal = document.querySelector<HTMLDivElement>('#detail-modal'); function initAdminNotice() {
const pageContent = document.querySelector('.page-content.admin.notice');
// Attach view detail modals if (!pageContent) return;
$('.view-detail').on('click', function () {
const description = this.closest('tr').querySelector('.notice-description').textContent; const detailModal = document.querySelector<HTMLDivElement>('#detail-modal');
detailModal.querySelector('.content pre').textContent = description;
$(detailModal).modal('show'); // Attach view detail modals
return false; queryElems(pageContent, '.view-detail', (el) => el.addEventListener('click', (e) => {
}); e.preventDefault();
const elNoticeDesc = el.closest('tr').querySelector('.notice-description');
// Select actions const elModalDesc = detailModal.querySelector('.content pre');
const checkboxes = document.querySelectorAll<HTMLInputElement>('.select.table .ui.checkbox input'); elModalDesc.textContent = elNoticeDesc.textContent;
fomanticQuery(detailModal).modal('show');
$('.select.action').on('click', function () { }));
switch ($(this).data('action')) {
case 'select-all': // Select actions
for (const checkbox of checkboxes) { const checkboxes = document.querySelectorAll<HTMLInputElement>('.select.table .ui.checkbox input');
checkbox.checked = true;
} queryElems(pageContent, '.select.action', (el) => el.addEventListener('click', () => {
break; switch (el.getAttribute('data-action')) {
case 'deselect-all': case 'select-all':
for (const checkbox of checkboxes) { for (const checkbox of checkboxes) {
checkbox.checked = false; checkbox.checked = true;
} }
break; break;
case 'inverse': case 'deselect-all':
for (const checkbox of checkboxes) { for (const checkbox of checkboxes) {
checkbox.checked = !checkbox.checked; checkbox.checked = false;
} }
break; break;
} case 'inverse':
}); for (const checkbox of checkboxes) {
document.querySelector<HTMLButtonElement>('#delete-selection')?.addEventListener('click', async function (e) { checkbox.checked = !checkbox.checked;
e.preventDefault(); }
this.classList.add('is-loading', 'disabled'); break;
const data = new FormData(); }
for (const checkbox of checkboxes) { }));
if (checkbox.checked) {
data.append('ids[]', checkbox.closest('.ui.checkbox').getAttribute('data-id')); document.querySelector<HTMLButtonElement>('#delete-selection')?.addEventListener('click', async function (e) {
} e.preventDefault();
} this.classList.add('is-loading', 'disabled');
await POST(this.getAttribute('data-link'), {data}); const data = new FormData();
window.location.href = this.getAttribute('data-redirect'); for (const checkbox of checkboxes) {
}); if (checkbox.checked) {
} data.append('ids[]', checkbox.closest('.ui.checkbox').getAttribute('data-id'));
}
queryElems(document, '.avatar-file-with-cropper', initAvatarUploaderWithCropper); }
await POST(this.getAttribute('data-link'), {data});
window.location.href = this.getAttribute('data-redirect');
});
} }