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 () {
      var node = this;

      if (node.user) {
        $('#node-config-input-user').append('<option value="' + node.user + '">' + node.user + '</option>').val(
          node.user);
      }

      function getUsers() {
        $.get('fritzbox/users')
          .done(function (data) {
            users = JSON.parse(data);
            console.log(users);

            $('#node-config-input-user').find('option').remove();

            for (user of users.Username) {
              $('#node-config-input-user').append('<option value="' + user + '">' + user + '</option>');
            }
            $('#node-config-input-user').val(node.user);
          })
          .fail(function () {
            RED.notify("Something went wrong. Please retry.", "error");
          });
      }

      $('#node-input-getusers').click(function () {
        getUsers();
      });

      // 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>
          <select id="node-config-input-user" name="node-config-input-user" style="width: 250px;">
          </select>
          <input type="hidden" id="node-config-input-username"/>
          <button type="button" id="node-input-getusers" class="red-ui-button"><i class="fa fa-search"></i></button>
      </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>