Repository: gchq/CyberChef
File: src/web/HTMLIngredient.mjs (JavaScript)

Code before:
        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;
        this.target = config.target;
        this.defaultIndex = config.defaultIndex || 0;
        this.toggleValues = config.toggleValues;
        this.id = "ing-" + this.app.nextIngId();
    }


    /**
     * Renders the ingredient in HTML.
     *
     * @returns {string}
     */
    toHtml() {
        let html = "",
            i, m;

        switch (this.type) {
            case "code":
                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}"
                    value="${this.value}"
                    rows=5
                    ${this.disabled ? "disabled" : ""}></textarea>
                ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}`;
                break;
            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>`;
                break;
            case "shortString":

Review comment (suggestion):
As discussed above, you can probably just use the `text` type instead of creating a new argument here. See line 236 in this file for its definition. It's basically identical to what you have here.

Code after:
        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;
        this.rows = config.rows || false;
        this.target = config.target;
        this.defaultIndex = config.defaultIndex || 0;
        this.toggleValues = config.toggleValues;
        this.id = "ing-" + this.app.nextIngId();
    }


    /**
     * Renders the ingredient in HTML.
     *
     * @returns {string}
     */
    toHtml() {
        let html = "",
            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>`;
                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>" : ""}