feat(ui): clear panel form inputs when closed

This commit replaces the SSH key-specific code in favor of resetting
panel forms when closed, which thus carries the same behavior over to
the GPG key field.

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';
@@ -507,12 +507,16 @@ export function initGlobalButtons() {
       e.preventDefault();
       let sel = e.currentTarget.getAttribute('data-panel');
       if (sel) {
-        hideElem(sel);
+        const element = document.querySelector(sel);
+        hideElem(element);
+        resetForms(element);
         return;
       }
       sel = e.currentTarget.getAttribute('data-panel-closest');
       if (sel) {
-        hideElem(e.currentTarget.closest(sel));
+        const element = e.currentTarget.closest(sel);
+        hideElem(element);
+        resetForms(element);
         return;
       }
       // should never happen, otherwise there is a bug in code

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) {