fix(ui): clear fields when canceling adding ssh key (#8990)

- Add javascript to clear fields upon clicking the cancel button inside the panel for adding new SSH keys.
- Add E2E test.
- Resolves #8915

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8990
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: dawe <dawedawe@posteo.de>
Co-committed-by: dawe <dawedawe@posteo.de>

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

@@ -78,3 +78,21 @@ test('User: Storage overview', async ({browser}, workerInfo) => {
   await expect(page.getByText('Git LFS')).toBeVisible();
   await save_visual(page);
 });
+
+test('User: Canceling adding SSH key clears inputs', async ({browser}, workerInfo) => {
+  const page = await login({browser}, workerInfo);
+  await page.goto('/user/settings/keys');
+  await page.locator('#add-ssh-button').click();
+
+  await page.getByLabel('Key name').fill('MyAwesomeKey');
+  await page.locator('#ssh-key-content').fill('Wront key material');
+
+  await page.getByRole('button', {name: 'Cancel'}).click();
+  await page.locator('#add-ssh-button').click();
+
+  const keyName = page.getByLabel('Key name');
+  await expect(keyName).toHaveValue('');
+
+  const content = page.locator('#ssh-key-content');
+  await expect(content).toHaveValue('');
+});

web_src/js/features/sshkey-helper.js

@@ -8,3 +8,10 @@ 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} from './features/sshkey-helper.js';
+import {initSshKeyFormParser, initSshKeyCancelButton} from './features/sshkey-helper.js';
 import {initRepoArchiveLinks} from './features/repo-common.js';
 import {initRepoMigrationStatusChecker} from './features/repo-migrate.js';
 import {
@@ -122,6 +122,7 @@ onDomReady(() => {
   initMarkupAnchors();
   initMarkupContent();
   initSshKeyFormParser();
+  initSshKeyCancelButton();
   initStopwatch();
   initTableSort();
   initAutoFocusEnd();