merge commit: refactor init & clearing of panel forms without jQuery (#9062)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9062
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>

tests/e2e/user-settings.test.e2e.ts

@@ -96,3 +96,16 @@ test('User: Canceling adding SSH key clears inputs', async ({browser}, workerInf
   const content = page.locator('#ssh-key-content');
   await expect(content).toHaveValue('');
 });
+
+test('User: Canceling adding GPG key clears input', async ({browser}, workerInfo) => {
+  const page = await login({browser}, workerInfo);
+  await page.goto('/user/settings/keys');
+  await page.locator('.show-panel[data-panel="#add-gpg-key-panel"]').click();
+
+  const gpgKeyContent = page.locator('#gpg-key-content');
+  await gpgKeyContent.fill('Wront key material');
+
+  await page.locator('.hide-panel[data-panel="#add-gpg-key-panel"]').click();
+
+  await expect(gpgKeyContent).toHaveValue('');
+});

web_src/js/features/common-global.js

@@ -5,7 +5,7 @@ import {createDropzone} from './dropzone.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
 import {svg} from '../svg.js';
-import {hideElem, showElem, toggleElem, initSubmitEventPolyfill, submitEventSubmitter} from '../utils/dom.js';
+import {hideElem, showElem, toggleElem, resetForms, initSubmitEventPolyfill, submitEventSubmitter} from '../utils/dom.js';
 import {htmlEscape} from 'escape-goat';
 import {showTemporaryTooltip} from '../modules/tippy.js';
 import {confirmModal} from './comp/ConfirmModal.js';
@@ -477,38 +477,48 @@ export function initGlobalButtons() {
   // There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
   // However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
   // There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content")
-  $(document).on('click', 'form button.ui.cancel.button', (e) => {
+  document.addEventListener('click', (e) => {
-    e.preventDefault();
+    if (e.target.matches('form button.ui.cancel.button')) {
-  });
+      e.preventDefault();
-
-  $('.show-panel').on('click', function (e) {
-    // a '.show-panel' element can show a panel, by `data-panel="selector"`
-    // if it has "toggle" class, it toggles the panel
-    e.preventDefault();
-    const sel = this.getAttribute('data-panel');
-    if (this.classList.contains('toggle')) {
-      toggleElem(sel);
-    } else {
-      showElem(sel);
     }
   });
 
-  $('.hide-panel').on('click', function (e) {
+  for (const showPanelButton of document.querySelectorAll('.show-panel')) {
-    // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
+    showPanelButton.addEventListener('click', (e) => {
-    e.preventDefault();
+      // a '.show-panel' element can show a panel, by `data-panel="selector"`
-    let sel = this.getAttribute('data-panel');
+      // if it has "toggle" class, it toggles the panel
-    if (sel) {
+      e.preventDefault();
-      hideElem($(sel));
+      const sel = e.currentTarget.getAttribute('data-panel');
-      return;
+      if (e.currentTarget.classList.contains('toggle')) {
-    }
+        toggleElem(sel);
-    sel = this.getAttribute('data-panel-closest');
+      } else {
-    if (sel) {
+        showElem(sel);
-      hideElem($(this).closest(sel));
+      }
-      return;
+    });
-    }
+  }
-    // should never happen, otherwise there is a bug in code
+
-    showErrorToast('Nothing to hide');
+  for (const hidePanelButton of document.querySelectorAll('.hide-panel')) {
-  });
+    hidePanelButton.addEventListener('click', (e) => {
+      // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
+      e.preventDefault();
+      let sel = e.currentTarget.getAttribute('data-panel');
+      if (sel) {
+        const element = document.querySelector(sel);
+        hideElem(element);
+        resetForms(element);
+        return;
+      }
+      sel = e.currentTarget.getAttribute('data-panel-closest');
+      if (sel) {
+        const element = e.currentTarget.closest(sel);
+        hideElem(element);
+        resetForms(element);
+        return;
+      }
+      // should never happen, otherwise there is a bug in code
+      showErrorToast('Nothing to hide');
+    });
+  }
 
   initGlobalShowModal();
 }

web_src/js/features/sshkey-helper.js

@@ -8,10 +8,3 @@ export function initSshKeyFormParser() {
     }
   });
 }
-
-export function initSshKeyCancelButton() {
-  document.getElementById('cancel-ssh-button')?.addEventListener('click', () => {
-    document.getElementById('ssh-key-title').value = '';
-    document.getElementById('ssh-key-content').value = '';
-  });
-}

web_src/js/index.js

@@ -49,7 +49,7 @@ import {initAdminEmails} from './features/admin/emails.js';
 import {initAdminCommon} from './features/admin/common.js';
 import {initRepoTemplateSearch} from './features/repo-template.js';
 import {initRepoCodeView} from './features/repo-code.js';
-import {initSshKeyFormParser, initSshKeyCancelButton} from './features/sshkey-helper.js';
+import {initSshKeyFormParser} from './features/sshkey-helper.js';
 import {initRepoArchiveLinks} from './features/repo-common.js';
 import {initRepoMigrationStatusChecker} from './features/repo-migrate.js';
 import {
@@ -122,7 +122,6 @@ onDomReady(() => {
   initMarkupAnchors();
   initMarkupContent();
   initSshKeyFormParser();
-  initSshKeyCancelButton();
   initStopwatch();
   initTableSort();
   initAutoFocusEnd();

web_src/js/utils/dom.js

@@ -51,6 +51,14 @@ export function isElemHidden(el) {
   return res[0];
 }
 
+export function resetForms(el) {
+  queryElemChildren(el, 'form', resetForm);
+}
+
+function resetForm(form) {
+  form.reset();
+}
+
 function applyElemsCallback(elems, fn) {
   if (fn) {
     for (const el of elems) {