CyberChef/src/web/HTMLIngredient.mjs

255 lines
10 KiB
JavaScript
Raw Normal View History

2018-05-15 19:36:45 +02:00
/**
* @author n1474335 [n1474335@gmail.com]
* @copyright Crown Copyright 2016
* @license Apache-2.0
*/
/**
* Object to handle the creation of operation ingredients.
*/
class HTMLIngredient {
/**
* HTMLIngredient constructor.
*
* @param {Object} config - The configuration object for this ingredient.
* @param {App} app - The main view object for CyberChef.
* @param {Manager} manager - The CyberChef event manager.
*/
constructor(config, app, manager) {
this.app = app;
this.manager = manager;
this.name = config.name;
this.type = config.type;
this.value = config.value;
this.disabled = config.disabled || false;
this.hint = config.hint || false;
2018-05-15 19:36:45 +02:00
this.target = config.target;
this.toggleValues = config.toggleValues;
this.id = "ing-" + this.app.nextIngId();
}
/**
* Renders the ingredient in HTML.
*
* @returns {string}
*/
toHtml() {
let html = "",
2018-05-15 19:36:45 +02:00
i, m;
switch (this.type) {
case "string":
case "binaryString":
case "byteArray":
html += `<div class="form-group">
<label for="${this.id}" class="bmd-label-floating">${this.name}</label>
<input type="text"
class="form-control arg"
id="${this.id}"
arg-name="${this.name}"
value="${this.value}"
${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`;
2018-05-15 19:36:45 +02:00
break;
case "shortString":
case "binaryShortString":
html += `<div class="form-group inline">
<label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
<input type="text"
class="form-control arg inline"
id="${this.id}"
arg-name="${this.name}"
value="${this.value}"
${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`;
2018-05-15 19:36:45 +02:00
break;
case "toggleString":
html += `<div class="form-group input-group">
<div class="toggle-string">
<label for="${this.id}" class="bmd-label-floating toggle-string">${this.name}</label>
<input type="text"
class="form-control arg toggle-string"
id="${this.id}"
arg-name="${this.name}"
value="${this.value}"
${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>
<div class="input-group-append">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${this.toggleValues[0]}</button>
<div class="dropdown-menu toggle-dropdown">`;
for (i = 0; i < this.toggleValues.length; i++) {
html += `<a class="dropdown-item" href="#">${this.toggleValues[i]}</a>`;
}
html += `</div>
</div>
</div>`;
2018-05-15 19:36:45 +02:00
break;
case "number":
html += `<div class="form-group inline">
<label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
<input type="number"
class="form-control arg inline"
id="${this.id}"
arg-name="${this.name}"
value="${this.value}"
${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`;
break;
case "boolean":
2018-07-13 12:30:24 +02:00
html += `<div class="form-group inline boolean-arg">
<div class="checkbox">
2018-06-17 14:49:32 +02:00
<label>
<input type="checkbox"
class="arg"
id="${this.id}"
arg-name="${this.name}"
${this.value ? " checked" : ""}
${this.disabled ? " disabled" : ""}
value="${this.name}"> ${this.name}
</label>
</div>
</div>`;
2018-05-15 19:36:45 +02:00
break;
case "option":
html += `<div class="form-group inline">
<label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
<select
class="form-control arg inline"
id="${this.id}"
arg-name="${this.name}"
${this.disabled ? "disabled" : ""}>`;
2018-05-15 19:36:45 +02:00
for (i = 0; i < this.value.length; i++) {
if ((m = this.value[i].match(/\[([a-z0-9 -()^]+)\]/i))) {
html += `<optgroup label="${m[1]}">`;
2018-05-15 19:36:45 +02:00
} else if ((m = this.value[i].match(/\[\/([a-z0-9 -()^]+)\]/i))) {
html += "</optgroup>";
} else {
html += `<option>${this.value[i]}</option>`;
2018-05-15 19:36:45 +02:00
}
}
html += `</select>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`;
2018-05-15 19:36:45 +02:00
break;
case "populateOption":
html += `<div class="form-group">
<label for="${this.id}" class="bmd-label-floating">${this.name}</label>
<select
class="form-control arg"
id="${this.id}"
arg-name="${this.name}"
${this.disabled ? "disabled" : ""}>`;
2018-05-15 19:36:45 +02:00
for (i = 0; i < this.value.length; i++) {
if ((m = this.value[i].name.match(/\[([a-z0-9 -()^]+)\]/i))) {
html += `<optgroup label="${m[1]}">`;
2018-05-15 19:36:45 +02:00
} else if ((m = this.value[i].name.match(/\[\/([a-z0-9 -()^]+)\]/i))) {
html += "</optgroup>";
} else {
html += `<option populate-value="${this.value[i].value}">${this.value[i].name}</option>`;
2018-05-15 19:36:45 +02:00
}
}
html += `</select>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`;
2018-05-15 19:36:45 +02:00
this.manager.addDynamicListener("#" + this.id, "change", this.populateOptionChange, this);
break;
case "editableOption":
html += `<div class="form-group input-group inline">
<label for="${this.id}" class="bmd-label-floating inline">${this.name}</label>
<input type="text"
class="form-control arg inline"
id="${this.id}"
arg-name="${this.name}"
value="${this.value[0].value}"
${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
<div class="input-group-append inline">
<button type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"
data-boundary="scrollParent"
aria-haspopup="true"
aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu editable-option-menu">`;
2018-05-15 19:36:45 +02:00
for (i = 0; i < this.value.length; i++) {
html += `<a class="dropdown-item" href="#" value="${this.value[i].value}">${this.value[i].name}</a>`;
2018-05-15 19:36:45 +02:00
}
html += `</div>
</div>
</div>`;
2018-05-15 19:36:45 +02:00
this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
2018-05-15 19:36:45 +02:00
break;
case "text":
html += `<div class="form-group">
<label for="${this.id}" class="bmd-label-floating">${this.name}</label>
<textarea
class="form-control arg"
id="${this.id}"
arg-name="${this.name}"
${this.disabled ? "disabled" : ""}>${this.value}</textarea>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`;
2018-05-15 19:36:45 +02:00
break;
default:
break;
}
return html;
}
/**
* Handler for populate option changes.
* Populates the relevant argument with the specified value.
*
* @param {event} e
*/
populateOptionChange(e) {
const el = e.target;
const op = el.parentNode.parentNode;
const target = op.querySelectorAll(".arg")[this.target];
2018-05-15 19:36:45 +02:00
target.value = el.childNodes[el.selectedIndex].getAttribute("populate-value");
const evt = new Event("change");
target.dispatchEvent(evt);
2018-05-15 19:36:45 +02:00
this.manager.recipe.ingChange();
}
/**
* Handler for editable option clicks.
2018-05-15 19:36:45 +02:00
* Populates the input box with the selected value.
*
* @param {event} e
*/
editableOptionClick(e) {
e.preventDefault();
e.stopPropagation();
const link = e.target,
input = link.parentNode.parentNode.parentNode.querySelector("input");
2018-05-15 19:36:45 +02:00
input.value = link.getAttribute("value");
2018-06-17 14:49:32 +02:00
const evt = new Event("change");
input.dispatchEvent(evt);
2018-05-15 19:36:45 +02:00
this.manager.recipe.ingChange();
}
}
export default HTMLIngredient;