homebridge-miot/homebridge-ui/public/index.html

Homebridge plugin for devices supporting the miot protocol

<script crossorigin="anonymous" src="js/jquery.slim.js"></script>
<script crossorigin="anonymous" src="js/popper.js"></script>
<script crossorigin="anonymous" src="js/bootstrap.js"></script>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0 text-center">
        <button aria-controls="collapseOne" aria-expanded="true" class="btn btn-deep-orange" data-target="#collapseOne" data-toggle="collapse">
          Automatically discover all devices via MiCloud
        </button>
      </h5>
    </div>

    <div aria-labelledby="headingOne" class="collapse" data-parent="#accordion" id="collapseOne">
      <div class="card-body">
        <div class="row">
          <div class="col-6">
            <div class="form-group">
              <label for="userNameInput">UserId/Email/Phone</label>
              <input class="form-control" id="usernameInput" required type="text">
            </div>
          </div>
          <div class="col-6">
            <div class="form-group">
              <label for="passwordInput">Password</label>
              <input class="form-control" id="passwordInput" required type="password">
            </div>
          </div>
        </div>

        <div class="text-center">
          <button class="btn btn-primary btn-login" id="getAllDevices" type="button">Discover All Devices</button>
        </div>

        <div class="text-center two-factor-url" style="display: none">
          <a class="btn btn-primary btn-login" href="#">2FA required, click here, wait a few seconds and try again!</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const homebridge = window.homebridge;
  const $ = jQuery = window.jQuery;

  (async () => {
    homebridge.showSpinner();

    // get the initial config - this is an array potentially containing multiple config blocks
    const pluginConfig = await homebridge.getPluginConfig();
    const configSchema = await homebridge.getPluginConfigSchema();

    if (!pluginConfig.length) {
      pluginConfig.push({});
    }
    const configuration = pluginConfig[0];
    configuration.devices = configuration.devices || [];

    function createForm(configSchema, configuration) {
      const configForm = homebridge.createForm(configSchema, configuration);
      configForm.onChange(async (changes) => {
        await homebridge.updatePluginConfig([changes]);
      })
    }

    $('#getAllDevices').on('click', function(e) {
      e.preventDefault();
      var btn = $(this),
        usernameInput = $('#usernameInput'),
        passwordInput = $('#passwordInput');

      var username = usernameInput.val(),
        password = passwordInput.val();

      if (username && password) {
        $('.two-factor-url').hide();
        btn.prop('disabled', true).html('<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>');
        usernameInput.prop('disabled', true);
        passwordInput.prop('disabled', true);

        homebridge.request('/get-all-devices', {
          username,
          password,
        }).then(async data => {
          if (typeof data.success === 'undefined' || data.success === false) {
            homebridge.toast.error('Login error. ' + data.error, 'Error');
          } else if (data.success && !data.devices.length) {
            homebridge.toast.warning('No devices found on your account.');
          } else if (data.success && data.devices) {
            // add new devices to exists devices list, prevent duplicate by device ip
            const devices = data.devices.filter(device => !configuration.devices.find(d => d.ip === device.ip));
            configuration.devices.push(...devices);
            await homebridge.updatePluginConfig([configuration]);
            createForm(configSchema, configuration);
            homebridge.toast.success('Added ' + devices.length + ' new devices. Save and restart Homebridge to apply changes.');
            $(this).closest('.collapse').removeClass('show');
          } else if (!data.success && data.url) {
            homebridge.toast.error(data.error);
            $('.two-factor-url a').attr('href', data.url);
            $('.two-factor-url').show();
          }
          btn.prop('disabled', false).html("Discover All Devices");
          usernameInput.prop('disabled', false);
          passwordInput.prop('disabled', false);
        })
      } else {
        homebridge.toast.error('A username and password must be provided.', 'Error');
      }
    })

    createForm(configSchema, configuration);

    homebridge.hideSpinner();
  })();
</script>