connection.html

<script type="text/javascript">
  ;(function () {
    let pollingIntervalId
    let registeredDeviceCount = 0

    async function execPostRequest(url, data = {}) {
      return (
        await fetch(url, {
          method: 'POST',
          mode: 'cors',
          cache: 'no-cache',
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/json',
          },
          redirect: 'follow',
          body: JSON.stringify(data),
        })
      ).json()
    }

    async function execGetRequest(url, headers = {}) {
      return (
        await fetch(url, {
          method: 'GET',
          mode: 'cors',
          cache: 'no-cache',
          credentials: 'same-origin',
          headers: {
            ...headers,
          },
          redirect: 'follow',
        })
      ).json()
    }

    async function getInstalledVshVersion() {
      const response = await fetch(
        './icons/node-red-contrib-virtual-smart-home/version.txt',
        {
          method: 'GET',
          mode: 'cors',
          cache: 'no-cache',
          credentials: 'same-origin',
        }
      )

      return (await response.text()).trim()
    }

    async function execDeleteRequest(url, headers = {}, data = {}) {
      return (
        await fetch(url, {
          method: 'DELETE',
          mode: 'cors',
          cache: 'no-cache',
          credentials: 'same-origin',
          headers: {
            ...headers,
            'Content-Type': 'application/json',
          },
          redirect: 'follow',
          body: JSON.stringify(data),
        })
      ).json()
    }

    function fetchDeviceCode() {
      const url = 'https://api.amazon.com/auth/o2/create/codepair'
      const data = {
        response_type: 'device_code',
        client_id:
          'amzn1.application-oa2-client.3f1bb07133854b078261ad43f2484c18',
        scope: 'profile',
      }
      return execPostRequest(url, data)
    }

    async function ensureValidAccessToken() {
      const now = new Date().getTime()
      const expiry = $('#node-config-input-accessTokenExpiry').val() || 0
      const refreshToken = $('#node-config-input-refreshToken').val()

      if (expiry < now) {
        try {
          const tokenData = await fetchFreshAccessToken(refreshToken)
          populateTokenData(tokenData)
        } catch (e) {
          showError('fetching a fresh Access Token failed')
        }
      }

      return $('#node-config-input-accessToken').val()
    }

    async function fetchFreshAccessToken(refreshToken) {
      const url = 'https://api.amazon.com/auth/o2/token'
      const data = {
        grant_type: 'refresh_token',
        refresh_token: refreshToken,
        client_id:
          'amzn1.application-oa2-client.3f1bb07133854b078261ad43f2484c18',
      }

      const resp = await execPostRequest(url, data)

      if (!resp.access_token) {
        throw new Error('could not fetch access token')
      } else {
        return resp
      }
    }

    async function fetchDeviceToken(device_code, user_code) {
      const url = 'https://api.amazon.com/auth/o2/token'
      const data = {
        grant_type: 'device_code',
        device_code,
        user_code,
      }

      const resp = await execPostRequest(url, data)

      if (resp.error && resp.error == 'authorization_pending') {
        const err = new Error('authorization_pending')
        err.status = 400
        throw err
      } else {
        return resp
      }
    }

    function populateTokenData({ access_token, refresh_token, expires_in }) {
      $('#node-config-input-refreshToken').val(refresh_token)
      $('#node-config-input-accessToken').val(access_token)

      const accessTokenExpiryTimestamp =
        new Date().getTime() + (expires_in - 15) * 1000

      $('#node-config-input-accessTokenExpiry').val(accessTokenExpiryTimestamp)
    }

    function provisionDevice(accessToken, installedVshVersion) {
      return execPostRequest(
        'https://kfd5m4a21f.execute-api.eu-west-1.amazonaws.com/dev/provision',
        {
          accessToken: accessToken,
          vshVersion: installedVshVersion,
        }
      )
    }

    function getRegisteredDevices(accessToken) {
      return execGetRequest(
        'https://kfd5m4a21f.execute-api.eu-west-1.amazonaws.com/dev/devices',
        { Authorization: accessToken }
      )
    }

    function checkVersion(version) {
      return execGetRequest(
        `https://kfd5m4a21f.execute-api.eu-west-1.amazonaws.com/dev/check_version?version=${version}`
      )
    }

    function stopPolling() {
      if (pollingIntervalId) {
        clearInterval(pollingIntervalId)
      }
    }

    function showError(errorMsg) {
      $('#error-msg').html(errorMsg)
      $('#error').show()
    }

    async function deleteDevice(thingId, deviceId) {
      $(`#${deviceId}`).fadeOut()
      registeredDeviceCount--

      if (registeredDeviceCount == 0) {
        $('#empty').show()
        $('#device-list-table').hide()
      }

      const accessToken = await ensureValidAccessToken()

      const deleteResult = await execDeleteRequest(
        'https://kfd5m4a21f.execute-api.eu-west-1.amazonaws.com/dev/device',
        { Authorization: accessToken },
        { thingId, deviceId }
      )

      if (deleteResult.error) {
        showError('delete failed')
        $(`#${deviceId}`).fadeIn()
      }
    }

    async function displayRegisteredDevices() {
      $('#registered-devices').show()

      const accessToken = await ensureValidAccessToken()

      let registeredDevices = await getRegisteredDevices(accessToken)

      registeredDeviceCount = registeredDevices.length

      $('#loading').hide()

      if (registeredDevices.length == 0) {
        $('#empty').show()
        return
      }

      registeredDevices = registeredDevices.sort((a, b) => {
        const nameA = a.friendlyName.toUpperCase()
        const nameB = b.friendlyName.toUpperCase()

        let comparison = 0
        if (nameA > nameB) {
          comparison = 1
        } else if (nameA < nameB) {
          comparison = -1
        }
        return comparison
      })

      registeredDevices = registeredDevices.map((item) => {
        var splitStr = item.template.toLowerCase().split('_')
        for (var i = 0; i < splitStr.length; i++) {
          splitStr[i] =
            splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1)
        }
        item.template = splitStr.join(' ')
        return item
      })

      $.each(registeredDevices, function (i, item) {
        let $tr = $('<tr>')
          .attr('id', item.deviceId)
          .addClass(
            item.thingId == $('#node-config-input-thingId').val()
              ? 'same-thing'
              : 'other-thing'
          )
          .append(
            $('<td>').text(item.friendlyName),
            $('<td>').text(item.template),
            $('<td>')
              .addClass('action-column')
              .append(
                $('<i class="fa fa-trash">').on('click', () =>
                  deleteDevice(item.thingId, item.deviceId)
                )
              )
          )
          .appendTo('#device-list-table')
      })

      $('#device-list-table').show()
    }

    async function oneditprepare() {
      if (!this.credentials.email) {
        const installedVshVersion = await getInstalledVshVersion()

        const versionCheckResult = await checkVersion(installedVshVersion)

        if (!versionCheckResult.isAllowedVersion) {
          return showError(versionCheckResult.updateHint)
        }

        try {
          const {
            device_code,
            expires_in,
            interval,
            user_code,
            verification_uri,
          } = await fetchDeviceCode()

          const now = new Date()
          const expiresAt = new Date(now.getTime() + expires_in * 1000)

          $('#user-code').html(user_code)
          $('#verification-uri').attr('href', verification_uri)
          $('#verification-uri').html(verification_uri)
          $('#refresh-interval').html(interval)

          pollingIntervalId = setInterval(async () => {
            if (new Date() > expiresAt) {
              stopPolling()
              $('#device-code').hide()
              return showError('code expired')
            }

            try {
              console.log('polling for deviceTokenResponse...')

              const deviceTokenResponse = await fetchDeviceToken(
                device_code,
                user_code
              )

              stopPolling()

              console.log('deviceTokenResponse', deviceTokenResponse)

              const provisionData = await provisionDevice(
                deviceTokenResponse.access_token,
                installedVshVersion
              )

              if (provisionData.error) {
                const error = new Error(provisionData.error)
                error.status = 500 //so that catch below works!
                throw error
              }

              $('#device-code').hide()

              populateTokenData(deviceTokenResponse)

              $('#node-config-input-name').val(provisionData.email)
              $('#node-config-input-email').val(provisionData.email)
              $('#node-config-input-server').val(provisionData.server)
              $('#node-config-input-port').val(provisionData.port)
              $('#node-config-input-cert').val(provisionData.cert)
              $('#node-config-input-privateKey').val(provisionData.privateKey)
              $('#node-config-input-caCert').val(provisionData.caCert)
              $('#node-config-input-thingId').val(provisionData.thingId)

              $('#provisioned').show()

              console.log('provisionData', provisionData)
            } catch (e) {
              if (e.status != 400) {
                stopPolling()
                $('#device-code').hide()
                console.log(e)
                showError(e.message)
              }
            }
          }, interval * (1000 / 2)) //twice as fast as allowed...

          $('#device-code').show()
        } catch (e) {
          alert(e)
        }
      } else {
        $('#provisioned').show()
        displayRegisteredDevices()
      }
    }

    function oneditsave() {
      stopPolling()
    }

    RED.nodes.registerType('vsh-connection', {
      category: 'config',
      paletteLabel: 'connection',
      defaults: {
        name: { value: '' },
        port: { value: '', required: true },
        accessTokenExpiry: { value: 0 },
      },
      credentials: {
        refreshToken: { type: 'text' },
        accessToken: { type: 'text' },
        email: { type: 'text' },
        cert: { type: 'text' },
        privateKey: { type: 'text' },
        caCert: { type: 'text' },
        thingId: { type: 'text' },
        server: { type: 'text', required: true },
      },
      label: function () {
        return this.name || `connection_${this.id}`
      },
      paletteLabel: 'connection',
      oneditprepare,
      oneditsave,
      oneditcancel: stopPolling,
    })
  })()
</script>

<style>
  #provisioned,
  #registered-devices,
  #device-list-table,
  #device-code,
  #empty,
  #error {
    display: none;
  }

  .hidden {
    display: none;
  }

  #device-code,
  #error {
    padding: 10px;
    text-align: center;
    border: 3px red dashed;
  }

  #provisioned h1,
  #registered-devices h1 {
    font-size: 1.5em;
    margin-top: 30px;
  }

  #registered-devices table {
    border-collapse: collapse;
    width: 100%;
  }

  #registered-devices table,
  #registered-devices th,
  #registered-devices td {
    border: 1px solid black;
    padding: 5px;
    text-align: left;
  }

  #registered-devices td.action-column {
    text-align: center;
  }

  #registered-devices td.action-column i {
    cursor: pointer;
  }

  #registered-devices .other-thing {
    background-color: #f5f2f2;
  }

  #user-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 140%;
    font-weight: bold;
    color: #3737bd;
  }

  #device-code a {
    text-decoration: underline !important;
  }

  #device-code .step {
    height: 25px;
    width: 25px;
    line-height: 25px;
    color: rgb(236, 233, 233);
    background-color: rgb(114, 137, 160);
    border-radius: 50%;
    display: inline-block;
  }
</style>

<script type="text/html" data-template-name="vsh-connection">
  <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" placeholder="Name" />
  </div>

  <div id="error">
    <h1>ERROR</h1>
    <span id="error-msg">ERROR-MSG</span>
  </div>

  <div id="device-code">
    <h1>Account Linking</h1>
    <p style="color:darkorange; font-weight:bold;">
      If you already created a connection for your Amazon account, please reuse
      that connection instead of creating another one!
    </p>
    <p>
      Follow these steps to link this connection to the <i>same</i> Amazon Alexa
      account that was used to activate the 'virtual smart home' skill.
    </p>

    <p>
      <span class="step">1</span>
      <br />
      Go to
      <a id="verification-uri" href="" target="_blank">VERIFICATION_URI</a>
    </p>
    <p>
      <span class="step">2</span>
      <br />
      Enter this code (after logging in)
      <br />
      <span id="user-code">USER_CODE</span>
    </p>
    <p>
      <span class="step">3</span>
      <br />
      Wait for your account details to appear here (&lt;<span
        id="refresh-interval"
        >REFRESH-INTERVAL</span
      >
      sec)
    </p>
    <p>
      <span class="step">4</span>
      <br />
      Close this dialog by clicking the &quot;Add&quot; / &quot;Update&quot;
      button
    </p>
  </div>

  <div id="provisioned">
    <h1>Connection Details</h1>
    <div class="form-row">
      <label for="node-config-input-email"
        ><i class="fa fa-amazon"></i> Account</label
      >
      <input
        type="text"
        id="node-config-input-email"
        readonly
        placeholder="Email"
      />
    </div>

    <div class="form-row hidden">
      <label for="node-config-input-accessToken"
        ><i class="fa fa-ticket"></i> Access Token</label
      >
      <input
        type="text"
        id="node-config-input-accessToken"
        readonly
        placeholder="Access Token"
      />
    </div>
    <div class="form-row hidden">
      <label for="node-config-input-accessTokenExpiry"
        ><i class="fa fa-clock-o"></i> Token Expiry</label
      >
      <input
        type="text"
        id="node-config-input-accessTokenExpiry"
        readonly
        placeholder="Access Token Expiry"
      />
    </div>

    <div class="form-row hidden">
      <label for="node-config-input-refreshToken"
        ><i class="fa fa-refresh"></i> Refresh Token</label
      >
      <input
        type="text"
        id="node-config-input-refreshToken"
        readonly
        placeholder="Refresh Token"
      />
    </div>

    <div class="form-row hidden">
      <label for="node-config-input-server"
        ><i class="fa fa-server"></i> Server</label
      >
      <input
        type="text"
        id="node-config-input-server"
        readonly
        placeholder="Server"
      />
    </div>

    <div class="form-row hidden">
      <label for="node-config-input-port"
        ><i class="fa fa-building"></i> Port</label
      >
      <input
        type="text"
        id="node-config-input-port"
        readonly
        placeholder="Port"
      />
    </div>

    <div class="form-row hidden">
      <label for="node-config-input-cert"
        ><i class="fa fa-certificate"></i> Certificate</label
      >
      <input
        type="text"
        id="node-config-input-cert"
        readonly
        placeholder="Certificate"
      />
    </div>

    <div class="form-row hidden">
      <label for="node-config-input-privateKey"
        ><i class="fa fa-key"></i> Private Key</label
      >
      <input
        type="text"
        id="node-config-input-privateKey"
        readonly
        placeholder="Private Key"
      />
    </div>

    <div class="form-row hidden">
      <label for="node-config-input-caCert"
        ><i class="fa fa-certificate"></i> CA Certificate</label
      >
      <input
        type="text"
        id="node-config-input-caCert"
        readonly
        placeholder="CA Certificate"
      />
    </div>

    <div class="form-row">
      <label for="node-config-input-thingId"
        ><i class="fa fa-cog"></i> Thing ID</label
      >
      <input
        type="text"
        id="node-config-input-thingId"
        readonly
        placeholder="Thing ID"
      />
    </div>
  </div>

  <div id="registered-devices">
    <h1>Registered Devices</h1>
    <div id="loading">...loading...</div>
    <div id="empty">
      There are currently no devices registered for this account
    </div>
    <div>
      <table id="device-list-table">
        <tr>
          <th style="width: 45%">Name</th>
          <th style="width: 45%">Type</th>
          <th>&nbsp;</th>
        </tr>
      </table>
    </div>
  </div>
</script>

<script type="text/html" data-help-name="vsh-connection">
  <p>A connection to the IoT cloud, linked to an Alexa account.</p>
  <p>
    <strong>Note:</strong> Although it is possible to create multiple
    connections that are all linked to the same Alexa account, this comes with
    an overhead and should be avoided. For most use-cases one single connection
    that is shared by many virtual devices should suffice.
  </p>
  <h3>Account Linking</h3>
  <p>
    The connection must be linked to the same Amazon Alexa account that was /
    will be used to activate the 'virtual smart home' skill. To achieve that, a
    temporary code will be displayed that needs to be entered at
    https://amazon.com/us/code.
  </p>
  <h3>Connection Details</h3>
  <p>
    Once account linking is completed, the connection details will be displayed.
    They will however only be needed for troubleshooting support requests.
  </p>
  <h3>Registered Devices</h3>
  <p>
    The 'Registered Devices' section lists all virtual devices that are
    associated with the Alexa account the connection was linked with. Hence the
    list might contain more devices than the ones using this connection. Devices
    linked to another connection are displayed with a gray background.
  </p>
  <p>
    Registered devices can be deleted by clicking the trash icon, which will
    also delete the device from Alexa. Note that a deleted device might
    re-appear if its corresponding vsh-virtual-device node still exists and
    reconnects.
  </p>
</script>