Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix a number of typescript issues #32459

Merged
merged 7 commits into from
Nov 11, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 53 additions & 52 deletions web_src/js/features/admin/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,50 +5,50 @@ import {POST} from '../../modules/fetch.ts';

const {appSubUrl} = window.config;

function onSecurityProtocolChange() {
if (Number(document.querySelector('#security_protocol')?.value) > 0) {
function onSecurityProtocolChange(): void {
if (Number(document.querySelector<HTMLInputElement>('#security_protocol')?.value) > 0) {
showElem('.has-tls');
} else {
hideElem('.has-tls');
}
}

export function initAdminCommon() {
export function initAdminCommon(): void {
if (!document.querySelector('.page-content.admin')) return;

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

// New user
if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
document.querySelector('#login_type')?.addEventListener('change', function () {
if (this.value?.substring(0, 1) === '0') {
document.querySelector('#user_name')?.removeAttribute('disabled');
document.querySelector('#login_name')?.removeAttribute('required');
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('#user_name')?.focus();
document.querySelector<HTMLInputElement>('#user_name')?.focus();

if (this.getAttribute('data-password') === 'required') {
document.querySelector('#password')?.setAttribute('required', 'required');
}
} else {
if (document.querySelector('.admin.edit.user')) {
document.querySelector('#user_name')?.setAttribute('disabled', 'disabled');
if (document.querySelector<HTMLDivElement>('.admin.edit.user')) {
document.querySelector<HTMLInputElement>('#user_name')?.setAttribute('disabled', 'disabled');
}
document.querySelector('#login_name')?.setAttribute('required', 'required');
document.querySelector<HTMLInputElement>('#login_name')?.setAttribute('required', 'required');
showElem('.non-local');
hideElem('.local');
document.querySelector('#login_name')?.focus();
document.querySelector<HTMLInputElement>('#login_name')?.focus();

document.querySelector('#password')?.removeAttribute('required');
document.querySelector<HTMLInputElement>('#password')?.removeAttribute('required');
}
});
}

function onUsePagedSearchChange() {
const searchPageSizeElements = document.querySelectorAll('.search-page-size');
if (document.querySelector('#use_paged_search').checked) {
const searchPageSizeElements = document.querySelectorAll<HTMLDivElement>('.search-page-size');
if (document.querySelector<HTMLInputElement>('#use_paged_search').checked) {
showElem('.search-page-size');
for (const el of searchPageSizeElements) {
el.querySelector('input')?.setAttribute('required', 'required');
Expand All @@ -61,28 +61,28 @@ export function initAdminCommon() {
}
}

function onOAuth2Change(applyDefaultValues) {
function onOAuth2Change(applyDefaultValues: boolean) {
hideElem('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url');
for (const input of document.querySelectorAll('.open_id_connect_auto_discovery_url input[required]')) {
for (const input of document.querySelectorAll<HTMLInputElement>('.open_id_connect_auto_discovery_url input[required]')) {
input.removeAttribute('required');
}

const provider = document.querySelector('#oauth2_provider').value;
const provider = document.querySelector<HTMLInputElement>('#oauth2_provider').value;
switch (provider) {
case 'openidConnect':
document.querySelector('.open_id_connect_auto_discovery_url input').setAttribute('required', 'required');
document.querySelector<HTMLInputElement>('.open_id_connect_auto_discovery_url input').setAttribute('required', 'required');
showElem('.open_id_connect_auto_discovery_url');
break;
default: {
const elProviderCustomUrlSettings = document.querySelector(`#${provider}_customURLSettings`);
const elProviderCustomUrlSettings = document.querySelector<HTMLInputElement>(`#${provider}_customURLSettings`);
if (!elProviderCustomUrlSettings) break; // some providers do not have custom URL settings
const couldChangeCustomURLs = elProviderCustomUrlSettings.getAttribute('data-available') === 'true';
const mustProvideCustomURLs = elProviderCustomUrlSettings.getAttribute('data-required') === 'true';
if (couldChangeCustomURLs) {
showElem('.oauth2_use_custom_url'); // show the checkbox
}
if (mustProvideCustomURLs) {
document.querySelector('#oauth2_use_custom_url').checked = true; // make the checkbox checked
document.querySelector<HTMLInputElement>('#oauth2_use_custom_url').checked = true; // make the checkbox checked
}
break;
}
Expand All @@ -91,17 +91,17 @@ export function initAdminCommon() {
}

function onOAuth2UseCustomURLChange(applyDefaultValues) {
const provider = document.querySelector('#oauth2_provider').value;
const provider = document.querySelector<HTMLInputElement>('#oauth2_provider').value;
hideElem('.oauth2_use_custom_url_field');
for (const input of document.querySelectorAll('.oauth2_use_custom_url_field input[required]')) {
for (const input of document.querySelectorAll<HTMLInputElement>('.oauth2_use_custom_url_field input[required]')) {
input.removeAttribute('required');
}

const elProviderCustomUrlSettings = document.querySelector(`#${provider}_customURLSettings`);
if (elProviderCustomUrlSettings && document.querySelector('#oauth2_use_custom_url').checked) {
if (elProviderCustomUrlSettings && document.querySelector<HTMLInputElement>('#oauth2_use_custom_url').checked) {
for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
if (applyDefaultValues) {
document.querySelector(`#oauth2_${custom}`).value = document.querySelector(`#${provider}_${custom}`).value;
document.querySelector<HTMLInputElement>(`#oauth2_${custom}`).value = document.querySelector<HTMLInputElement>(`#${provider}_${custom}`).value;
}
const customInput = document.querySelector(`#${provider}_${custom}`);
if (customInput && customInput.getAttribute('data-available') === 'true') {
Expand All @@ -115,58 +115,59 @@ export function initAdminCommon() {
}

function onEnableLdapGroupsChange() {
toggleElem(document.querySelector('#ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
const checked = document.querySelector<HTMLInputElement>('.js-ldap-group-toggle')?.checked;
toggleElem(document.querySelector('#ldap-group-options'), checked);
}

// New authentication
if (document.querySelector('.admin.new.authentication')) {
document.querySelector('#auth_type')?.addEventListener('change', function () {
if (document.querySelector<HTMLDivElement>('.admin.new.authentication')) {
document.querySelector<HTMLInputElement>('#auth_type')?.addEventListener('change', function () {
hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');

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]')) {
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]')) {
input.removeAttribute('required');
}

document.querySelector('.binddnrequired')?.classList.remove('required');
document.querySelector<HTMLDivElement>('.binddnrequired')?.classList.remove('required');

const authType = this.value;
switch (authType) {
case '2': // LDAP
showElem('.ldap');
for (const input of document.querySelectorAll('.binddnrequired input, .ldap div.required:not(.dldap) input')) {
for (const input of document.querySelectorAll<HTMLInputElement>('.binddnrequired input, .ldap div.required:not(.dldap) input')) {
input.setAttribute('required', 'required');
}
document.querySelector('.binddnrequired')?.classList.add('required');
break;
case '3': // SMTP
showElem('.smtp');
showElem('.has-tls');
for (const input of document.querySelectorAll('.smtp div.required input, .has-tls')) {
for (const input of document.querySelectorAll<HTMLInputElement>('.smtp div.required input, .has-tls')) {
input.setAttribute('required', 'required');
}
break;
case '4': // PAM
showElem('.pam');
for (const input of document.querySelectorAll('.pam input')) {
for (const input of document.querySelectorAll<HTMLInputElement>('.pam input')) {
input.setAttribute('required', 'required');
}
break;
case '5': // LDAP
showElem('.dldap');
for (const input of document.querySelectorAll('.dldap div.required:not(.ldap) input')) {
for (const input of document.querySelectorAll<HTMLInputElement>('.dldap div.required:not(.ldap) input')) {
input.setAttribute('required', 'required');
}
break;
case '6': // OAuth2
showElem('.oauth2');
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')) {
for (const input of document.querySelectorAll<HTMLInputElement>('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input')) {
input.setAttribute('required', 'required');
}
onOAuth2Change(true);
break;
case '7': // SSPI
showElem('.sspi');
for (const input of document.querySelectorAll('.sspi div.required input')) {
for (const input of document.querySelectorAll<HTMLInputElement>('.sspi div.required input')) {
input.setAttribute('required', 'required');
}
break;
Expand All @@ -180,39 +181,39 @@ export function initAdminCommon() {
}
});
$('#auth_type').trigger('change');
document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
}
// Edit authentication
if (document.querySelector('.admin.edit.authentication')) {
const authType = document.querySelector('#auth_type')?.value;
if (document.querySelector<HTMLDivElement>('.admin.edit.authentication')) {
const authType = document.querySelector<HTMLInputElement>('#auth_type')?.value;
if (authType === '2' || authType === '5') {
document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
onEnableLdapGroupsChange();
if (authType === '2') {
document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
}
} else if (authType === '6') {
document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
onOAuth2Change(false);
}
}

if (document.querySelector('.admin.authentication')) {
if (document.querySelector<HTMLDivElement>('.admin.authentication')) {
$('#auth_name').on('input', function () {
// 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.value)}/callback`;
document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent((this as HTMLInputElement).value)}/callback`;
}).trigger('input');
}

// Notice
if (document.querySelector('.admin.notice')) {
const detailModal = document.querySelector('#detail-modal');
if (document.querySelector<HTMLDivElement>('.admin.notice')) {
const detailModal = document.querySelector<HTMLDivElement>('#detail-modal');

// Attach view detail modals
$('.view-detail').on('click', function () {
Expand All @@ -223,7 +224,7 @@ export function initAdminCommon() {
});

// Select actions
const checkboxes = document.querySelectorAll('.select.table .ui.checkbox input');
const checkboxes = document.querySelectorAll<HTMLInputElement>('.select.table .ui.checkbox input');

$('.select.action').on('click', function () {
switch ($(this).data('action')) {
Expand All @@ -244,7 +245,7 @@ export function initAdminCommon() {
break;
}
});
document.querySelector('#delete-selection')?.addEventListener('click', async function (e) {
document.querySelector<HTMLButtonElement>('#delete-selection')?.addEventListener('click', async function (e) {
e.preventDefault();
this.classList.add('is-loading', 'disabled');
const data = new FormData();
Expand Down
10 changes: 5 additions & 5 deletions web_src/js/features/admin/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@ import {POST} from '../../modules/fetch.ts';

const {appSubUrl} = window.config;

export function initAdminConfigs() {
const elAdminConfig = document.querySelector('.page-content.admin.config');
export function initAdminConfigs(): void {
const elAdminConfig = document.querySelector<HTMLDivElement>('.page-content.admin.config');
if (!elAdminConfig) return;

for (const el of elAdminConfig.querySelectorAll('input[type="checkbox"][data-config-dyn-key]')) {
for (const el of elAdminConfig.querySelectorAll<HTMLInputElement>('input[type="checkbox"][data-config-dyn-key]')) {
el.addEventListener('change', async () => {
try {
const resp = await POST(`${appSubUrl}/-/admin/config`, {
data: new URLSearchParams({key: el.getAttribute('data-config-dyn-key'), value: el.checked}),
data: new URLSearchParams({key: el.getAttribute('data-config-dyn-key'), value: String(el.checked)}),
});
const json = await resp.json();
const json: Record<string, any> = await resp.json();
if (json.errorMessage) throw new Error(json.errorMessage);
} catch (ex) {
showTemporaryTooltip(el, ex.toString());
Expand Down
7 changes: 3 additions & 4 deletions web_src/js/features/admin/emails.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import $ from 'jquery';

export function initAdminEmails() {
function linkEmailAction(e) {
export function initAdminEmails(): void {
$('.link-email-action').on('click', (e) => {
const $this = $(this);
$('#form-uid').val($this.data('uid'));
$('#form-email').val($this.data('email'));
$('#form-primary').val($this.data('primary'));
$('#form-activate').val($this.data('activate'));
$('#change-email-modal').modal('show');
e.preventDefault();
}
$('.link-email-action').on('click', linkEmailAction);
});
}
6 changes: 3 additions & 3 deletions web_src/js/features/admin/selfcheck.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ export async function initAdminSelfCheck() {
const elCheckByFrontend = document.querySelector('#self-check-by-frontend');
if (!elCheckByFrontend) return;

const elContent = document.querySelector('.page-content.admin .admin-setting-content');
const elContent = document.querySelector<HTMLDivElement>('.page-content.admin .admin-setting-content');

// send frontend self-check request
const resp = await POST(`${appSubUrl}/-/admin/self_check`, {
data: new URLSearchParams({
location_origin: window.location.origin,
now: Date.now(), // TODO: check time difference between server and client
now: String(Date.now()), // TODO: check time difference between server and client
}),
});
const json = await resp.json();
const json: Record<string, any> = await resp.json();
toggleElem(elCheckByFrontend, Boolean(json.problems?.length));
for (const problem of json.problems ?? []) {
const elProblem = document.createElement('div');
Expand Down
12 changes: 6 additions & 6 deletions web_src/js/features/admin/users.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export function initAdminUserListSearchForm() {
export function initAdminUserListSearchForm(): void {
const searchForm = window.config.pageData.adminUserListSearchForm;
if (!searchForm) return;

const form = document.querySelector('#user-list-search-form');
const form = document.querySelector<HTMLFormElement>('#user-list-search-form');
if (!form) return;

for (const button of form.querySelectorAll(`button[name=sort][value="${searchForm.SortType}"]`)) {
Expand All @@ -12,23 +12,23 @@ export function initAdminUserListSearchForm() {
if (searchForm.StatusFilterMap) {
for (const [k, v] of Object.entries(searchForm.StatusFilterMap)) {
if (!v) continue;
for (const input of form.querySelectorAll(`input[name="status_filter[${k}]"][value="${v}"]`)) {
for (const input of form.querySelectorAll<HTMLInputElement>(`input[name="status_filter[${k}]"][value="${v}"]`)) {
input.checked = true;
}
}
}

for (const radio of form.querySelectorAll('input[type=radio]')) {
for (const radio of form.querySelectorAll<HTMLInputElement>('input[type=radio]')) {
radio.addEventListener('click', () => {
form.submit();
});
}

const resetButtons = form.querySelectorAll('.j-reset-status-filter');
const resetButtons = form.querySelectorAll<HTMLAnchorElement>('.j-reset-status-filter');
for (const button of resetButtons) {
button.addEventListener('click', (e) => {
e.preventDefault();
for (const input of form.querySelectorAll('input[type=radio]')) {
for (const input of form.querySelectorAll<HTMLInputElement>('input[type=radio]')) {
if (input.name.startsWith('status_filter[')) {
input.checked = false;
}
Expand Down
Loading