config.html

<script type="text/javascript">
  RED.nodes.registerType("fritzbox-config", {
    category: "config",
    defaults: {
      name: {
        value: "",
        required: false
      },
      host: {
        value: "fritz.box",
        required: true
      },
      port: {
        value: 49000,
        required: true
      },
      ssl: {
        value: false,
        required: true
      },
      user: {
        required: true,
        value: "admin"
      }
    },
    credentials: {
      username: {
        type: "text",
      },
      password: {
        type: "password"
      }
    },
    label: function () {
      return this.name ? this.name : "FRITZ!Box";
    },
    oneditprepare: function () {
      // For backward compatibility
      if ($('#node-config-input-username').val() !== "") {
        $('#node-config-input-user').val($('#node-config-input-username').val())
      }
      

      $('#node-config-input-user').change(function() {
        const username = $('#node-config-input-user').val()
        $('#node-config-input-username').val(username)
      })

      $('#node-config-input-ssl').change(function () {
        var ssl = $('#node-config-input-ssl').is(":checked");
        var port = $('#node-config-input-port').val();
        if (ssl === true && port === "49000") {
          $('#node-config-input-port').val("49443");
        }
        if (ssl === false && port === "49443") {
          $('#node-config-input-port').val("49000");
        }
      })
    }
  });
</script>

<script type="text/x-red" data-template-name="fritzbox-config">
    <div class="form-row">
          <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
          <input type="text" id="node-config-input-name"/>
      </div>
      <div class="form-row">
          <label for="node-config-input-host"><i class="fa fa-globe"></i> Host</label>
          <input type="text" id="node-config-input-host" style="width: 40%;"/>
          <input type="text" id="node-config-input-port" style="width:60px" />
      </div>
      <div class="form-row">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-config-input-ssl" placeholder="" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-config-input-ssl" style="width: 70%;">Enable secure connection (SSL/TLS)</label>
      </div>
      <div class="form-row">
          <label for="node-config-input-username"><i class="fa fa-user"></i> Username</label>
          <input type="text" id="node-config-input-user" />
          <input type="hidden" id="node-config-input-username"/>
      </div>
      <div class="form-row">
          <label for="node-config-input-password"><i class="fa fa-key"></i> Password</label>
          <input type="password" id="node-config-input-password" />
      </div>
      <div class="form-tips"><span>Hint: If you have set your fritzbox to login with "password only" you have to choose a random username that does not exist on the fritzbox, e.g. "admin" or "doesnotexist".</span></div>
  </script>