Skip to content

feat: Add ability to set auth header in admin api request #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: Add ability to set auth header in admin api request #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
56e72d2
feat: Add ability to set auth header in admin api request
Oct 4, 2024
6d41a2e
chore: lint
fkakatie Oct 7, 2024
6dae1c3
chore: lint
fkakatie Oct 7, 2024
731e2a9
fix: malformed svg
fkakatie Oct 7, 2024
a0ac874
fix: a11y button sizing and label
fkakatie Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions icons/trash-delete-bin.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions tools/admin-edit/admin-edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -56,3 +67,8 @@
.admin-edit .status-light.http3::before {
color: var(--yellow-900);
}

.admin-edit .headers-container {
display: flex;
gap: var(--spacing-s);
}
40 changes: 39 additions & 1 deletion tools/admin-edit/admin-edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -60,21 +80,39 @@ bodyForm.addEventListener('submit', async (e) => {
body: body.value,
headers: {
'content-type': adminURL.value.endsWith('.yaml') ? 'text/yaml' : 'application/json',
...getHeaders(),
},
});
resp.text().then(() => {
logResponse([resp.status, reqMethod.value, adminURL.value, resp.headers.get('x-error') || '']);
});
});

addHeaderButton.addEventListener('click', () => {
const header = document.createElement('div');
header.className = 'header';
header.innerHTML = `
<input type="text" class="header-name" placeholder="Header name" required>
<input type="text" class="header-value" placeholder="Header value" required>
<button type="button" class="remove-header"><span class="icon icon-trash-delete-bin"></span></button>
`;
headersContainer.append(header);
decorateIcons(header);
swapIcons();
header.querySelector('.remove-header').addEventListener('click', () => header.remove());
});

/**
* Handles admin form submission.
* @param {Event} e - Submit event.
*/
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') || '']);
});
Expand Down
29 changes: 19 additions & 10 deletions tools/admin-edit/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ <h1>Admin Edit</h1>
<input name="admin-url" id="admin-url" type="url" required />
<div class="field-help-text">
<p>
See supported calls at <a href="https://www.aem.live/docs/admin.html" target="_blank">aem.live/docs/admin</a>.
See supported calls at <a href="https://www.aem.live/docs/admin.html"
target="_blank">aem.live/docs/admin</a>.
</p>
</div>
</div>
Expand All @@ -42,6 +43,20 @@ <h1>Admin Edit</h1>
</form>
</div>

<div>
<label for="headers-container">Headers</label>
<div id="headers-container">
<div id="auth-token-header" class="header">
<input type="text" class="header-name" placeholder="Header name" required="" value="x-auth-token">
<input type="text" class="header-value" placeholder="Header value" required="">
<button type="button" class="remove-header" aria-label="Delete header">
<span class="icon icon-trash-delete-bin"></span>
</button>
</div>
</div>
<button type="button" id="add-header" class="button">Add Header</button>
</div>
Comment on lines +46 to +58
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are these part of the form submission? shouldn't they be inside the form, not after it (and the submit button)?

Copy link
Author

@sdmcraft sdmcraft Oct 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They are part of the form submission and get appended to the headers. There are 2 forms on this page - admin form and the body form, and since the headers get sent on submission on either of them, associating them with one particular form did not seem correct so I kept them out of both.


<!-- BODY FORM -->
<div>
<form id="body-form">
Expand All @@ -52,13 +67,7 @@ <h1>Admin Edit</h1>
<div class="save-wrapper">
<div class="form-field picker-field">
<label for="method">Method</label>
<input
name="method"
id="method"
type="text"
aria-haspopup="listbox"
value="POST"
readonly />
<input name="method" id="method" type="text" aria-haspopup="listbox" value="POST" readonly />
<i class="symbol symbol-chevron"></i>
<ul class="menu" id="method-menu" aria-labelledby="method" role="listbox" hidden>
<li role="option" aria-selected="true">POST</li>
Expand All @@ -69,7 +78,7 @@ <h1>Admin Edit</h1>
<button type="submit" id="save" class="button">Save</button>
</p>
</div>
</form>
</form>
</div>

<!-- CONSOLE -->
Expand All @@ -85,4 +94,4 @@ <h1>Admin Edit</h1>
<footer></footer>
</body>

</html>
</html>