DWS/hadrian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle existing values, begin work on json2yaml

Browse Source
This commit is contained in:
joncrangle
2023-12-09 01:47:08 -05:00
parent b0af02830b
commit 7d379f935d
3 changed files with 154 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
handlers/playground-script.js
View File

@@ -1,10 +1,8 @@
// Export button
// TODO: Parse JSON to YAML
// TODO: Download YAML
// Injection scripts
// TODO: Textarea handle events (tab key, shift tab, scroll)
// TODO: Javascript escaping/unescaping as required to prevent XSS and satisfy API requirements
// TODO: remove tailwind play cdn script in head of playground.html after syntax highlighting work complete
// TODO: Pre/Code block styling fix when existing values are present
// 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)
@@ -136,25 +134,84 @@ if (navigator.userAgent.includes("Mac")) {
}
function downloadYaml() {
function parseYaml() {
//* PARSE PAYLOAD TO YAML
return payload;
function jsonToYamlHelper(jsonObject, indent = 0) {
const yamlLines = [];
function processObject(obj, indent = 0) {
Object.entries(obj).forEach(([key, value]) => {
const indentation = " ".repeat(indent * 2);
if (
Array.isArray(value) &&
value.length > 0 &&
typeof value[0] === "object"
) {
// Handle arrays of objects
yamlLines.push(`${indentation}${key}:`);
value.forEach((item) => {
yamlLines.push(`${" ".repeat((indent + 1) * 2)}-`);
processObject(item, indent + 2);
});
} else if (Array.isArray(value)) {
// Handle flat arrays
yamlLines.push(
`${indentation}${key}: [${value
.map((item) => `"${item}"`)
.join(", ")}]`
);
} else if (typeof value === "object" && value !== null) {
// Handle nested objects
yamlLines.push(`${indentation}${key}:`);
processObject(value, indent + 1);
} else {
// Handle other types
yamlLines.push(`${indentation}${key}: ${JSON.stringify(value)}`);
}
});
}
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);
processObject(jsonObject, indent);
return yamlLines.join("\n");
}
function jsonToYaml(payload) {
if (!document.getElementById("inputForm").checkValidity()) {
alert("Please enter a valid URL.");
return;
}
const url = new URL(inputField.value);
const hostname = url.hostname;
const jsonObject = {
rules: [
{
domains: [hostname],
responsemodifications: [],
requestmodifications: [],
...payload,
},
],
};
return jsonToYamlHelper(jsonObject);
}
const yamlString = jsonToYaml(payload);
console.log(yamlString);
// const blob = new Blob([yamlString], { 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) {
function getValues(type, id, description, params) {
const focusTrap = trap(modalBody);
let values = [];
let existingValues = [];
const inputs = [];
const inputEventListeners = [];
@@ -165,12 +222,13 @@ function getValues(id, description, params) {
modalSubmitButton.removeEventListener("click", closeModal);
modalClose.removeEventListener("click", closeModal);
inputEventListeners.forEach((listener, index) => {
if (listener !== undefined && inputs[index] !== undefined)
inputs[index].removeEventListener("input", listener);
});
modalContent.classList.remove("relative", "h-[220px]");
inputEventListeners.length = 0;
inputs.length = 0;
values = [];
// values = [];
modalContainer.classList.add("hidden");
modalContent.innerHTML = "";
}
@@ -192,27 +250,19 @@ function getValues(id, description, params) {
modalSubmitButton.click();
}
}
if (
e.key === "Tab" &&
!e.shiftKey &&
e.target.tagName.toLowerCase() === "textarea"
) {
e.preventDefault();
let text = e.target.value;
const start = e.target.selectionStart;
const end = e.target.selectionEnd;
e.target.value = text.substring(0, start) + "\t" + text.substring(end);
e.target.dispatchEvent(new Event("input"));
e.target.setSelectionRange(start + 1, start + 1);
}
}
document.getElementById("modal-title").innerHTML = id;
document.getElementById("modal-description").innerHTML = description;
existingValues =
payload[type].find(
(modifier) => modifier.name === id && modifier.params !== undefined
)?.params ?? [];
params.map((param, i) => {
function textareaEventListener(e) {
codeElement = document.querySelector("code");
const codeElement = document.querySelector("code");
let text = e.target.value;
if (text[text.length - 1] == "\n") {
@@ -225,11 +275,34 @@ function getValues(id, description, params) {
Prism.highlightElement(codeElement);
values[i] = text;
syncScroll(e.target);
}
function textareaKeyEventListener(e) {
if (e.key === "Tab" && !e.shiftKey) {
e.preventDefault();
e.stopPropagation();
let text = e.target.value;
const start = e.target.selectionStart;
const end = e.target.selectionEnd;
e.target.value = text.substring(0, start) + "\t" + text.substring(end);
e.target.setSelectionRange(start + 1, start + 1);
e.target.dispatchEvent(new Event("input"));
}
syncScroll(e.target);
}
function syncScroll(el) {
const codeElement = document.querySelector("code");
codeElement.scrollTop = el.scrollTop;
codeElement.scrollLeft = el.scrollLeft;
}
function inputEventListener(e) {
if (e.key !== "Enter") {
values[i] = e.target.value;
}
}
const label = document.createElement("label");
label.innerHTML = param.name;
@@ -244,7 +317,7 @@ function getValues(id, description, params) {
"h-[200px]",
"w-full",
"font-mono",
"whitespace-break-spaces",
"whitespace-nowrap",
"font-semibold",
"absolute",
"text-base",
@@ -258,13 +331,12 @@ function getValues(id, description, params) {
"m-0",
"my-2",
"bg-transparent",
"dark:bg-transparent",
"text-transparent",
"overflow-auto",
"resize-none",
"caret-white",
"hover:ring-slate-300",
"dark:bg-slate-800",
"dark:highlight-white/5",
"hyphens-none"
);
input.style.tabSize = "4";
@@ -291,6 +363,7 @@ function getValues(id, description, params) {
);
}
input.id = `input-${i}`;
input.value = existingValues[i] ?? "";
modalContent.appendChild(label);
modalContent.appendChild(input);
if (input.type === "textarea") {
@@ -300,6 +373,7 @@ function getValues(id, description, params) {
preElement.setAttribute("aria-hidden", "true");
preElement.classList.add(
"bg-[#2d2d2d]",
"dark:bg-[#2d2d2d]",
"h-[200px]",
"w-full",
"rounded-md",
@@ -312,19 +386,42 @@ function getValues(id, description, params) {
"font-mono",
"text-base",
"leading-6",
"whitespace-break-spaces",
"overflow-auto",
"whitespace-nowrap",
"font-semibold",
"absolute",
"z-0",
"overflow-auto"
"hyphens-none"
);
modalContent.classList.add("relative", "h-[220px]");
preElement.setAttribute("tabindex", "-1");
codeElement.classList.add("language-javascript");
codeElement.classList.add(
"language-javascript",
"absolute",
"w-full",
"font-mono",
"text-base",
"leading-6",
"z-0",
"p-4",
"-mx-4",
"-my-4",
"h-full",
"whitespace-nowrap",
"overflow-auto",
"hyphens-none"
);
codeElement.textContent = input.value;
preElement.appendChild(codeElement);
modalContent.appendChild(preElement);
input.addEventListener("input", textareaEventListener);
inputEventListeners.push(textareaEventListener);
input.addEventListener("keydown", textareaKeyEventListener);
input.addEventListener("scroll", () => syncScroll(input));
inputEventListeners.push(
textareaEventListener,
textareaKeyEventListener,
syncScroll
);
} else {
input.addEventListener("input", inputEventListener);
inputEventListeners.push(inputEventListener);
@@ -341,7 +438,10 @@ function getValues(id, description, params) {
modalClose.addEventListener("click", () => {
closeModal();
});
modalSubmitButton.addEventListener("click", () => {
modalSubmitButton.addEventListener("click", (e) => {
inputs.forEach((input, i) => {
values[i] = input.value;
});
resolve(values);
closeModal();
});
@@ -380,7 +480,10 @@ function toggleModifier(type, id, params = []) {
pill.addEventListener("click", () => pillClickHandler(pill));
}
if (payload[type].some((modifier) => modifier.name === id)) {
if (
params === undefined &&
payload[type].some((modifier) => modifier.name === id)
) {
payload[type] = payload[type].filter((modifier) => modifier.name !== id);
const existingPill = document.getElementById(id);
if (existingPill !== null) {
@@ -389,8 +492,11 @@ function toggleModifier(type, id, params = []) {
}
} else {
payload[type].push({ name: id, params: params });
const existingPill = document.getElementById(id);
if (existingPill === null) {
createPill(type, id);
}
}
submitForm();
}
@@ -412,7 +518,7 @@ function addModifierToNinjaData(id, description, params, type) {
if (params[0].name === "_") {
toggleModifier(type, id, (params = [""]));
} else {
getValues(id, description, params).then((values) => {
getValues(type, id, description, params).then((values) => {
if (Object.keys(values).length === 0) return;
toggleModifier(type, id, values);
});

5
handlers/playground.html
View File

@@ -4,8 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ladder | playground</title>
<!-- <link rel="stylesheet" href="/styles.css" /> -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="/styles.css" />
<style>
#modifierContainer::-webkit-scrollbar {
width: 8px;
@@ -319,7 +318,7 @@
<button
type="button"
class="inline-flex items-center justify-center h-11 px-4 py-2 whitespace-nowrap rounded-md text-sm font-medium text-slate-200 dark:text-slate-900 ring-offset-white dark:ring-offset-slate-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-slate-800 dark:bg-slate-200 hover:bg-slate-800/90 dark:hover:bg-slate-200/90"
onclick="alert('Coming Soon!')"
onclick="downloadYaml()"
>
<svg
xmlns="http://www.w3.org/2000/svg"

2
handlers/styles.css
View File

File diff suppressed because one or more lines are too long