diff --git a/icons/trash-delete-bin.svg b/icons/trash-delete-bin.svg new file mode 100644 index 00000000..f5e351f4 --- /dev/null +++ b/icons/trash-delete-bin.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/tools/admin-edit/admin-edit.css b/tools/admin-edit/admin-edit.css index d8d8bb57..dee18395 100644 --- a/tools/admin-edit/admin-edit.css +++ b/tools/admin-edit/admin-edit.css @@ -15,6 +15,17 @@ gap: var(--spacing-s); } +.admin-edit #headers-container .header { + display: flex; + gap: var(--spacing-s); + flex-direction: row; +} + +.admin-edit #headers-container button { + flex: 0 0 44px; + cursor: pointer; +} + @media (width >= 720px) { .admin-edit #admin-form { grid-template-columns: 1fr max-content; @@ -56,3 +67,8 @@ .admin-edit .status-light.http3::before { color: var(--yellow-900); } + +.admin-edit .headers-container { + display: flex; + gap: var(--spacing-s); +} diff --git a/tools/admin-edit/admin-edit.js b/tools/admin-edit/admin-edit.js index af2e437d..bdf53438 100644 --- a/tools/admin-edit/admin-edit.js +++ b/tools/admin-edit/admin-edit.js @@ -1,6 +1,11 @@ +import { decorateIcons } from '../../scripts/aem.js'; +import { swapIcons } from '../../scripts/scripts.js'; + const adminForm = document.getElementById('admin-form'); const adminURL = document.getElementById('admin-url'); const bodyForm = document.getElementById('body-form'); +const headersContainer = document.getElementById('headers-container'); +const addHeaderButton = document.getElementById('add-header'); const body = document.getElementById('body'); const reqMethod = document.getElementById('method'); const methodDropdown = document.querySelector('.picker-field ul'); @@ -31,6 +36,21 @@ function logResponse(cols) { logTable.prepend(row); } +function getHeaders() { + const headers = {}; + headersContainer.querySelectorAll('.header').forEach((header) => { + const name = header.querySelector('.header-name').value; + const { value } = header.querySelector('.header-value'); + if (name && value) headers[name] = value; + }); + return headers; +} + +headersContainer?.querySelector('#auth-token-header button')?.addEventListener('click', (evt) => { + evt.preventDefault(); + evt.target.closest('.header').remove(); +}); + // toggles the request method dropdown reqMethod.addEventListener('click', () => { const expanded = reqMethod.getAttribute('aria-expanded') === 'true'; @@ -60,6 +80,7 @@ bodyForm.addEventListener('submit', async (e) => { body: body.value, headers: { 'content-type': adminURL.value.endsWith('.yaml') ? 'text/yaml' : 'application/json', + ...getHeaders(), }, }); resp.text().then(() => { @@ -67,6 +88,20 @@ bodyForm.addEventListener('submit', async (e) => { }); }); +addHeaderButton.addEventListener('click', () => { + const header = document.createElement('div'); + header.className = 'header'; + header.innerHTML = ` + + + + `; + headersContainer.append(header); + decorateIcons(header); + swapIcons(); + header.querySelector('.remove-header').addEventListener('click', () => header.remove()); +}); + /** * Handles admin form submission. * @param {Event} e - Submit event. @@ -74,7 +109,10 @@ bodyForm.addEventListener('submit', async (e) => { adminForm.addEventListener('submit', async (e) => { e.preventDefault(); localStorage.setItem('admin-url', adminURL.value); - const resp = await fetch(adminURL.value); + const resp = await fetch(adminURL.value, { + method: 'GET', + headers: getHeaders(), + }); body.value = await resp.text(); logResponse([resp.status, 'GET', adminURL.value, resp.headers.get('x-error') || '']); }); diff --git a/tools/admin-edit/index.html b/tools/admin-edit/index.html index 3c6746d3..fd859085 100644 --- a/tools/admin-edit/index.html +++ b/tools/admin-edit/index.html @@ -31,7 +31,8 @@

Admin Edit

- See supported calls at aem.live/docs/admin. + See supported calls at aem.live/docs/admin.

@@ -42,6 +43,20 @@

Admin Edit

+
+ +
+
+ + + +
+
+ +
+
@@ -52,13 +67,7 @@

Admin Edit

- +
- +
@@ -85,4 +94,4 @@

Admin Edit

- + \ No newline at end of file