366 lines
9.9 KiB
JavaScript
366 lines
9.9 KiB
JavaScript
// Export button
|
|
// TODO: Parse JSON to YAML
|
|
// TODO: Download YAML
|
|
// Injection scripts
|
|
// TODO: Javascript syntax highlighting within textarea layout, styling and event listeners
|
|
// TODO: Textarea handlers and logic for javascript (e.g. tab, newline)
|
|
// TODO: Javascript escaping/unescaping as required
|
|
// TODO: remove tailwind play cdn script in head of playground.html after syntax highlighting work complete
|
|
// Ninja Keys improvements
|
|
// TODO: Group related items for Ninja Keys
|
|
// TODO: Untoggle related items that may be toggled (e.g. should only have one masquerade as bot toggled)
|
|
// Testing
|
|
// TODO: Testing
|
|
|
|
const modifierContainer = document.getElementById("modifierContainer");
|
|
const modalContainer = document.getElementById("modalContainer");
|
|
const modalBody = document.getElementById("modal-body");
|
|
const modalContent = document.getElementById("modal-content");
|
|
const modalSubmitButton = document.getElementById("modal-submit");
|
|
const modalClose = document.getElementById("modal-close");
|
|
|
|
let hasFetched = false;
|
|
let payload = {
|
|
requestmodifications: [],
|
|
responsemodifications: [],
|
|
};
|
|
let ninjaData = [];
|
|
|
|
initialize();
|
|
|
|
// Rerun handleThemeChange() so style is applied to Ninja Keys
|
|
handleThemeChange();
|
|
|
|
// Add event listener to the iframe so it closes dropdown when clicked
|
|
closeDropdownOnClickWithinIframe();
|
|
|
|
async function initialize() {
|
|
if (!hasFetched) {
|
|
try {
|
|
await fetchPayload();
|
|
hasFetched = true;
|
|
} catch (error) {
|
|
console.error("Fetch error:", error);
|
|
}
|
|
}
|
|
}
|
|
|
|
function closeDropdownOnClickWithinIframe() {
|
|
const iframe = document.getElementById("resultIframe");
|
|
iframe.contentWindow.document.addEventListener(
|
|
"click",
|
|
() => {
|
|
if (
|
|
!document.getElementById("dropdown_panel").classList.contains("hidden")
|
|
) {
|
|
toggleDropdown();
|
|
}
|
|
},
|
|
true
|
|
);
|
|
}
|
|
|
|
async function fetchPayload() {
|
|
try {
|
|
const response = await fetch("/api/modifiers");
|
|
const data = await response.json();
|
|
|
|
Object.entries(data.result.requestmodifiers ?? []).forEach(([_, value]) => {
|
|
addModifierToNinjaData(
|
|
value.name,
|
|
value.description,
|
|
value.params,
|
|
"requestmodifications"
|
|
);
|
|
});
|
|
|
|
Object.entries(data.result.responsemodifiers ?? []).forEach(
|
|
([_, value]) => {
|
|
addModifierToNinjaData(
|
|
value.name,
|
|
value.description,
|
|
value.params,
|
|
"responsemodifications"
|
|
);
|
|
}
|
|
);
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.error("Fetch error:", error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
async function submitForm() {
|
|
if (!document.getElementById("inputForm").checkValidity()) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch("/playground/" + inputField.value, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error("Request failed");
|
|
}
|
|
|
|
const result = await response.text();
|
|
updateResultIframe(result);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
function updateResultIframe(result) {
|
|
const resultIframe = parent.document.getElementById("resultIframe");
|
|
resultIframe.contentDocument.open();
|
|
resultIframe.contentDocument.write(result);
|
|
closeDropdownOnClickWithinIframe();
|
|
resultIframe.contentDocument.close();
|
|
}
|
|
|
|
document.getElementById("inputForm").addEventListener("submit", function (e) {
|
|
e.preventDefault();
|
|
submitForm();
|
|
});
|
|
|
|
if (navigator.userAgent.includes("Mac")) {
|
|
document.getElementById("ninjaKey").innerHTML = "⌘";
|
|
} else {
|
|
document.getElementById("ninjaKey").innerHTML = "Ctrl";
|
|
}
|
|
|
|
function downloadYaml() {
|
|
function parseYaml() {
|
|
//* PARSE PAYLOAD TO YAML
|
|
return payload;
|
|
}
|
|
|
|
const yamlData = parseYaml();
|
|
const blob = new Blob([yamlData], { type: "text/yaml;charset=utf-8" });
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
//* CONSTRUCT FILENAME FROM HOSTNAME
|
|
link.download = `name_of_report.yaml`;
|
|
link.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
function getValues(id, description, params) {
|
|
const focusTrap = trap(modalBody);
|
|
let values = [];
|
|
const inputs = [];
|
|
const inputEventListeners = [];
|
|
|
|
function closeModal() {
|
|
focusTrap.destroy();
|
|
modalBody.removeEventListener("keydown", handleEscapeKey);
|
|
modalBody.removeEventListener("keydown", handleEnterKey);
|
|
modalContainer.removeEventListener("click", handleClickOutside);
|
|
modalSubmitButton.removeEventListener("click", closeModal);
|
|
modalClose.removeEventListener("click", closeModal);
|
|
inputEventListeners.forEach((listener, index) => {
|
|
inputs[index].removeEventListener("input", listener);
|
|
});
|
|
inputEventListeners.length = 0;
|
|
inputs.length = 0;
|
|
values = [];
|
|
modalContainer.classList.add("hidden");
|
|
modalContent.innerHTML = "";
|
|
}
|
|
|
|
function handleClickOutside(e) {
|
|
if (modalBody !== null && !modalBody.contains(e.target)) {
|
|
closeModal();
|
|
}
|
|
}
|
|
|
|
function handleEscapeKey(e) {
|
|
if (e.key === "Escape") {
|
|
closeModal();
|
|
}
|
|
}
|
|
|
|
function handleEnterKey(e) {
|
|
if (e.key === "Enter") {
|
|
if (e.target.tagName.toLowerCase() === "textarea") {
|
|
return;
|
|
} else {
|
|
modalSubmitButton.click();
|
|
}
|
|
}
|
|
}
|
|
|
|
document.getElementById("modal-title").innerHTML = id;
|
|
document.getElementById("modal-description").innerHTML = description;
|
|
|
|
params.map((param, i) => {
|
|
function textareaEventListener(event) {
|
|
codeElement = document.querySelector("code");
|
|
codeElement.innerText = event.target.value;
|
|
Prism.highlightElement(codeElement);
|
|
values[i] = "|" + " " + event.target.value;
|
|
}
|
|
function inputEventListener(event) {
|
|
values[i] = event.target.value;
|
|
}
|
|
|
|
const label = document.createElement("label");
|
|
label.innerHTML = param.name;
|
|
label.setAttribute("for", `input-${i}`);
|
|
let input;
|
|
if (param.name === "js") {
|
|
input = document.createElement("textarea");
|
|
input.type = "textarea";
|
|
input.classList.add(
|
|
"min-h-[200px]",
|
|
"font-mono",
|
|
"whitespace-break-spaces",
|
|
"font-semibold"
|
|
);
|
|
} else {
|
|
input = document.createElement("input");
|
|
input.type = "text";
|
|
}
|
|
input.id = `input-${i}`;
|
|
input.classList.add(
|
|
"w-full",
|
|
"text-sm",
|
|
"leading-6",
|
|
"text-slate-400",
|
|
"rounded-md",
|
|
"ring-1",
|
|
"ring-slate-900/10",
|
|
"shadow-sm",
|
|
"py-1.5",
|
|
"pl-2",
|
|
"pr-3",
|
|
"hover:ring-slate-300",
|
|
"dark:bg-slate-800",
|
|
"dark:highlight-white/5"
|
|
);
|
|
modalContent.appendChild(label);
|
|
modalContent.appendChild(input);
|
|
if (input.type === "textarea") {
|
|
preElement = document.createElement("pre");
|
|
codeElement = document.createElement("code");
|
|
preElement.setAttribute("aria-hidden", "true");
|
|
preElement.setAttribute("tabindex", "-1");
|
|
codeElement.classList.add("language-javascript");
|
|
preElement.appendChild(codeElement);
|
|
modalContent.appendChild(preElement);
|
|
input.addEventListener("input", textareaEventListener);
|
|
inputEventListeners.push(textareaEventListener);
|
|
} else {
|
|
input.addEventListener("input", inputEventListener);
|
|
inputEventListeners.push(inputEventListener);
|
|
}
|
|
inputs.push(input);
|
|
});
|
|
|
|
modalContainer.classList.remove("hidden");
|
|
document.getElementById("input-0").focus();
|
|
|
|
return new Promise((resolve) => {
|
|
modalBody.addEventListener("keydown", handleEscapeKey);
|
|
modalBody.addEventListener("keydown", handleEnterKey);
|
|
modalContainer.addEventListener("click", handleClickOutside);
|
|
modalClose.addEventListener("click", () => {
|
|
closeModal();
|
|
});
|
|
modalSubmitButton.addEventListener("click", () => {
|
|
resolve(values);
|
|
closeModal();
|
|
});
|
|
});
|
|
}
|
|
|
|
function toggleModifier(type, id, params = []) {
|
|
function pillClickHandler(pill) {
|
|
toggleModifier(pill.getAttribute("type"), pill.id);
|
|
pill.removeEventListener("click", () => pillClickHandler(pill));
|
|
pill.remove();
|
|
}
|
|
|
|
function createPill(type, id) {
|
|
const pill = document.createElement("span");
|
|
pill.classList.add(
|
|
"inline-flex",
|
|
"items-center",
|
|
"rounded-md",
|
|
"bg-slate-100",
|
|
"dark:bg-slate-800",
|
|
"px-2",
|
|
"py-1",
|
|
"h-4",
|
|
"text-xs",
|
|
"font-medium",
|
|
"border",
|
|
"border-slate-400",
|
|
"dark:border-slate-700",
|
|
"cursor-pointer"
|
|
);
|
|
pill.id = id;
|
|
pill.setAttribute("type", type);
|
|
pill.textContent = id;
|
|
modifierContainer.appendChild(pill);
|
|
pill.addEventListener("click", () => pillClickHandler(pill));
|
|
}
|
|
|
|
if (payload[type].some((modifier) => modifier.name === id)) {
|
|
payload[type] = payload[type].filter((modifier) => modifier.name !== id);
|
|
const existingPill = document.getElementById(id);
|
|
if (existingPill !== null) {
|
|
existingPill.removeEventListener("click", () => pillClickHandler(pill));
|
|
existingPill.remove();
|
|
}
|
|
} else {
|
|
payload[type].push({ name: id, params: params });
|
|
createPill(type, id);
|
|
}
|
|
|
|
submitForm();
|
|
}
|
|
|
|
function addModifierToNinjaData(id, description, params, type) {
|
|
const section =
|
|
type === "requestmodifications"
|
|
? "Request Modifiers"
|
|
: "Response Modifiers";
|
|
const modifier = {
|
|
id: id,
|
|
title: id,
|
|
section: section,
|
|
|
|
handler: () => {
|
|
if (Object.keys(params).length === 0) {
|
|
toggleModifier(type, id);
|
|
} else {
|
|
if (params[0].name === "_") {
|
|
toggleModifier(type, id, (params = [""]));
|
|
} else {
|
|
getValues(id, description, params).then((values) => {
|
|
if (Object.keys(values).length === 0) return;
|
|
toggleModifier(type, id, values);
|
|
});
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
ninjaData.push(modifier);
|
|
}
|
|
|
|
const ninja = document.querySelector("ninja-keys");
|
|
ninja.data = ninjaData;
|
|
document.getElementById("btnNinja").addEventListener("click", () => {
|
|
ninja.open();
|
|
});
|