From 4e536edaead97d61a64508db0e93cf781a889472 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 21 Feb 2024 10:13:48 +0200 Subject: [PATCH] Remove jQuery from the installation page (#29284) - Switched to plain JavaScript - Tested the installation page functionality and it works as before # Demo using JavaScript without jQuery ![action](https://github.com/go-gitea/gitea/assets/20454870/286475b3-1919-4d99-b790-def10fa36e66) Signed-off-by: Yarden Shoham --- web_src/js/features/install.js | 101 ++++++++++++++++----------------- 1 file changed, 49 insertions(+), 52 deletions(-) diff --git a/web_src/js/features/install.js b/web_src/js/features/install.js index 9fda7f7d27..2d6d345c1d 100644 --- a/web_src/js/features/install.js +++ b/web_src/js/features/install.js @@ -1,19 +1,17 @@ -import $ from 'jquery'; import {hideElem, showElem} from '../utils/dom.js'; import {GET} from '../modules/fetch.js'; export function initInstall() { - const $page = $('.page-content.install'); - if ($page.length === 0) { + const page = document.querySelector('.page-content.install'); + if (!page) { return; } - if ($page.is('.post-install')) { + if (page.classList.contains('post-install')) { initPostInstall(); } else { initPreInstall(); } } - function initPreInstall() { const defaultDbUser = 'gitea'; const defaultDbName = 'gitea'; @@ -24,83 +22,82 @@ function initPreInstall() { mssql: '127.0.0.1:1433' }; - const $dbHost = $('#db_host'); - const $dbUser = $('#db_user'); - const $dbName = $('#db_name'); + const dbHost = document.getElementById('db_host'); + const dbUser = document.getElementById('db_user'); + const dbName = document.getElementById('db_name'); // Database type change detection. - $('#db_type').on('change', function () { - const dbType = $(this).val(); - hideElem($('div[data-db-setting-for]')); - showElem($(`div[data-db-setting-for=${dbType}]`)); + document.getElementById('db_type').addEventListener('change', function () { + const dbType = this.value; + hideElem('div[data-db-setting-for]'); + showElem(`div[data-db-setting-for=${dbType}]`); if (dbType !== 'sqlite3') { // for most remote database servers - showElem($(`div[data-db-setting-for=common-host]`)); - const lastDbHost = $dbHost.val(); + showElem('div[data-db-setting-for=common-host]'); + const lastDbHost = dbHost.value; const isDbHostDefault = !lastDbHost || Object.values(defaultDbHosts).includes(lastDbHost); if (isDbHostDefault) { - $dbHost.val(defaultDbHosts[dbType] ?? ''); + dbHost.value = defaultDbHosts[dbType] ?? ''; } - if (!$dbUser.val() && !$dbName.val()) { - $dbUser.val(defaultDbUser); - $dbName.val(defaultDbName); + if (!dbUser.value && !dbName.value) { + dbUser.value = defaultDbUser; + dbName.value = defaultDbName; } } // else: for SQLite3, the default path is always prepared by backend code (setting) - }).trigger('change'); + }); + document.getElementById('db_type').dispatchEvent(new Event('change')); - const $appUrl = $('#app_url'); - const configAppUrl = $appUrl.val(); - if (configAppUrl.includes('://localhost')) { - $appUrl.val(window.location.href); + const appUrl = document.getElementById('app_url'); + if (appUrl.value.includes('://localhost')) { + appUrl.value = window.location.href; } - const $domain = $('#domain'); - const configDomain = $domain.val().trim(); - if (configDomain === 'localhost') { - $domain.val(window.location.hostname); + const domain = document.getElementById('domain'); + if (domain.value.trim() === 'localhost') { + domain.value = window.location.hostname; } // TODO: better handling of exclusive relations. - $('#offline-mode input').on('change', function () { - if ($(this).is(':checked')) { - $('#disable-gravatar').checkbox('check'); - $('#federated-avatar-lookup').checkbox('uncheck'); + document.querySelector('#offline-mode input').addEventListener('change', function () { + if (this.checked) { + document.querySelector('#disable-gravatar input').checked = true; + document.querySelector('#federated-avatar-lookup input').checked = false; } }); - $('#disable-gravatar input').on('change', function () { - if ($(this).is(':checked')) { - $('#federated-avatar-lookup').checkbox('uncheck'); + document.querySelector('#disable-gravatar input').addEventListener('change', function () { + if (this.checked) { + document.querySelector('#federated-avatar-lookup input').checked = false; } else { - $('#offline-mode').checkbox('uncheck'); + document.querySelector('#offline-mode input').checked = false; } }); - $('#federated-avatar-lookup input').on('change', function () { - if ($(this).is(':checked')) { - $('#disable-gravatar').checkbox('uncheck'); - $('#offline-mode').checkbox('uncheck'); + document.querySelector('#federated-avatar-lookup input').addEventListener('change', function () { + if (this.checked) { + document.querySelector('#disable-gravatar input').checked = false; + document.querySelector('#offline-mode input').checked = false; } }); - $('#enable-openid-signin input').on('change', function () { - if ($(this).is(':checked')) { - if (!$('#disable-registration input').is(':checked')) { - $('#enable-openid-signup').checkbox('check'); + document.querySelector('#enable-openid-signin input').addEventListener('change', function () { + if (this.checked) { + if (!document.querySelector('#disable-registration input').checked) { + document.querySelector('#enable-openid-signup input').checked = true; } } else { - $('#enable-openid-signup').checkbox('uncheck'); + document.querySelector('#enable-openid-signup input').checked = false; } }); - $('#disable-registration input').on('change', function () { - if ($(this).is(':checked')) { - $('#enable-captcha').checkbox('uncheck'); - $('#enable-openid-signup').checkbox('uncheck'); + document.querySelector('#disable-registration input').addEventListener('change', function () { + if (this.checked) { + document.querySelector('#enable-captcha input').checked = false; + document.querySelector('#enable-openid-signup input').checked = false; } else { - $('#enable-openid-signup').checkbox('check'); + document.querySelector('#enable-openid-signup input').checked = true; } }); - $('#enable-captcha input').on('change', function () { - if ($(this).is(':checked')) { - $('#disable-registration').checkbox('uncheck'); + document.querySelector('#enable-captcha input').addEventListener('change', function () { + if (this.checked) { + document.querySelector('#disable-registration input').checked = false; } }); }