@thingweb/node-red-node-wot/src/wot-thing-config.html

Web of Things nodes for Node-RED using node-wot

<script type="text/javascript">
    ;(() => {
        RED.nodes.registerType("wot-thing-config", {
            category: "config",
            defaults: {
                name: { value: "", required: true },
                description: { value: "", required: false },
                thingId: { value: "", required: false },
                basicAuth: { value: false },
                basicAuthUsername: { value: "", required: false },
                basicAuthPassword: { value: "", required: false },
            },
            label: function () {
                return this.name || this._("editor.configLabel")
            },
            labelStyle: function () {
                return this.name ? "node_label_italic" : ""
            },
            oneditprepare: function () {
                const $basicAuth = $("#node-config-input-basicAuth")
                function toggleBasicAuthContainer() {
                    // Check if event is triggered by user
                    if ($basicAuth.prop("checked") === true) {
                        $(".basicAuthContainer").show()
                    } else {
                        $(".basicAuthContainer").hide()
                    }
                }
                // Toggle username and password when basic auth is enabled/disabled
                $basicAuth.change(toggleBasicAuthContainer)
            },
        })
    })()
</script>

<script type="text/html" data-template-name="wot-thing-config">
    <div class="form-row">
        <label for="node-config-input-name"><span data-i18n="editor.nameLabel"></span></label>
        <input type="text" id="node-config-input-name" data-i18n="[placeholder]editor.nameLabel" />
    </div>
    <div class="form-row">
        <label for="node-config-input-description"><span data-i18n="editor.descriptionLabel"></span></label>
        <input type="text" id="node-config-input-description" data-i18n="[placeholder]editor.descriptionLabel" />
    </div>
    <div class="form-row">
        <label for="node-config-input-thingId"><span data-i18n="editor.thingIdLabel"></span></label>
        <input type="text" id="node-config-input-thingId" data-i18n="[placeholder]editor.thingIdLabel" />
    </div>
    <p><span data-i18n="editor.securityLabel"></span></p>
    <div class="form-row">
        <label for="node-config-input-basicAuth"><span data-i18n="editor.basicAuthLabel"></span></span></label>
        <span id="basicAuth-tooltip"><input type="checkbox" id="node-config-input-basicAuth"></span>
    </div>
    <div class="form-row basicAuthContainer">
            <label for="node-config-input-basicAuthUsername"><i class="fa fa-user"></i><span data-i18n="editor.usernameLabel"></span></label>
            <input type="text" id="node-config-input-basicAuthUsername" style="width:60%">
    </div>
    <div class="form-row basicAuthContainer">
        <label for="node-config-input-basicAuthPassword"><i class="fa fa-lock"></i><span data-i18n="editor.passwordLabel"></span></label>
        <input type="password" id="node-config-input-basicAuthPassword" style="width:60%">
    </div>
</script>