@homebridge-plugins/homebridge-firstalert 0.0.1-beta.0

package/src/homebridge-ui/public/index.html

@@ -0,0 +1,548 @@
+<p class="text-center">
+   <img
+      src="https://raw.githubusercontent.com/homebridge-plugins/homebridge-firstalert/latest/branding/Homebridge_x_Resideo.svg"
+      alt="homebridge-firstalert logo" style="width: 40%;" />
+</p>
+<div id="pageIntro" style="display: none;">
+   <p class="lead text-center">Thank you for installing <strong>homebridge-firstalert</strong></p>
+   <p class="lead text-center">Before continuing:</p>
+   <ol>
+      <li class="mb-3">Login / create an account at <a href="https://developer.honeywellhome.com/user" target="_blank"
+            rel="noreferrer noopener">https://developer.honeywellhome.com/user</a>.</li>
+      <li class="mb-3">Click <strong>Create New App</strong>.</li>
+      <li class="mb-3">
+         Give your application a name, and enter the 'Callback URL' exactly as it is displayed below.
+         <br>
+         <div class="input-group mt-3">
+            <input type="text" class="form-control" disabled id="copyMe">
+            <div class="input-group-append">
+               <button class="btn btn-primary m-0 py-0 px-3" onclick="copyMyText()" type="button">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor"
+                     class="mb-1 bi bi-clipboard" viewBox="0 0 16 16">
+                     <path
+                        d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
+                     <path
+                        d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
+                  </svg>
+               </button>
+            </div>
+         </div>
+      </li>
+      <li>Enter the generated 'Consumer Key' and 'Consumer Secret' on the next page.</li>
+   </ol>
+   <div class="text-center">
+      <button type="button" class="btn btn-primary" id="introLink">Continue &rarr;</button>
+   </div>
+</div>
+<div id="menuWrapper" class="btn-group w-100 mb-0" role="group" aria-label="UI Menu" style="display: none;">
+   <button type="button" class="btn btn-primary ml-0" id="menuAccount">
+      Account
+   </button>
+   <button type="button" class="btn btn-primary" id="menuSettings">
+      Settings
+   </button>
+   <button type="button" class="btn btn-primary" id="menuDevices">
+      Devices
+   </button>
+   <button type="button" class="btn btn-primary mr-0" id="menuHome">
+      Support
+   </button>
+</div>
+<div id="pageAccount" class="mt-4" style="display: none;">
+   <div class="alert alert-warning" style="display: none;" id="validateForm">
+      Please enter both values
+   </div>
+   <div class="alert alert-success" style="display: none;" id="linkSuccess">
+      Config saved, please close this window and restart Homebridge
+   </div>
+   <div class="form-group">
+      <label for="inputConsumerKey">Consumer Key <span class="text-danger">*</span></label>
+      <input type="text" class="form-control" id="inputConsumerKey">
+   </div>
+   <div class="form-group">
+      <label for="inputConsumerSecret">Consumer Secret <span class="text-danger">*</span></label>
+      <input type="text" class="form-control" id="inputConsumerSecret">
+   </div>
+   <div class="form-group text-center">
+      <button type="button" class="btn btn-primary" id="backToIntro">&larr;</button>
+      <button type="button" class="btn btn-primary" id="linkButton">Continue &rarr;</button>
+      <button type="button" class="btn btn-danger" id="unLinkButton">Unlink Account &rarr;</button>
+   </div>
+</div>
+<div id="pageDevices" class="mt-4" style="display: none;">
+   <div id="deviceInfo">
+      <form>
+         <div class="form-group">
+            <select class="form-control" id="deviceSelect"></select>
+         </div>
+      </form>
+      <table class="table w-100" id="deviceTable" style="display: none;">
+         <thead>
+            <tr class="table-active">
+               <th scope="col" style="width: 40%;">Device Name</th>
+               <th scope="col" style="width: 60%;" id="displayName"></th>
+            </tr>
+         </thead>
+         <tbody>
+            <tr>
+               <th scope="row">Device ID</th>
+               <td id="deviceID"></td>
+            </tr>
+            <tr>
+               <th scope="row">Model</th>
+               <td id="model"></td>
+            </tr>
+            <tr>
+               <th scope="row">Firmware Version</th>
+               <td id="firmwareRevision"></td>
+            </tr>
+         </tbody>
+      </table>
+   </div>
+</div>
+<div id="pageSupport" class="mt-4" style="display: none;">
+   <p class="text-center lead">Thank you for using <strong>homebridge-firstalert</strong></p>
+   <p class="text-center">The links below will take you to our GitHub wiki</p>
+   <h5>Setup</h5>
+   <ul>
+      <li>
+         <a href="https://github.com/homebridge-plugins/homebridge-firstalert/wiki" target="_blank">Wiki Home</a>
+      </li>
+      <li>
+         <a href="https://github.com/homebridge-plugins/homebridge-firstalert/wiki/Configuration"
+            target="_blank">Configuration</a>
+      </li>
+      <li>
+         <a href="https://github.com/homebridge-plugins/homebridge-firstalert/wiki/Beta-Version" target="_blank">Beta
+            Version</a>
+      </li>
+      <li>
+         <a href="https://github.com/homebridge-plugins/homebridge-firstalert/wiki/Node-Version" target="_blank">Node
+            Version</a>
+      </li>
+      <li>
+         <a href="https://github.com/homebridge-plugins/homebridge-firstalert/wiki/Uninstallation"
+            target="_blank">Uninstallation</a>
+      </li>
+   </ul>
+   <h5>Features</h5>
+   <ul>
+      <li>
+         <a href="https://github.com/homebridge-plugins/homebridge-firstalert/wiki/Supported-Devices"
+            target="_blank">Supported
+            Devices</a>
+      </li>
+      <li>
+         <a href="https://github.com/homebridge-plugins/homebridge-firstalert/wiki/Fan-Modes" target="_blank">Fan
+            Modes</a>
+      </li>
+   </ul>
+   <h5>Help/About</h5>
+   <ul>
+      <li>
+         <a href="https://github.com/homebridge-plugins/homebridge-firstalert/issues/new/choose" target="_blank">Support
+            Request</a>
+      </li>
+      <li>
+         <a href="https://github.com/homebridge-plugins/homebridge-firstalert/blob/latest/CHANGELOG.md"
+            target="_blank">Changelog</a>
+      </li>
+      <li>
+         <a href="https://github.com/sponsors/donavanbecker" target="_blank">About Me</a>
+      </li>
+   </ul>
+   <h5>Disclaimer</h5>
+   <ul>
+      <li>
+         I am in no way affiliated with FirstAlert and this plugin is a personal project that I maintain in
+         my free time.
+      </li>
+      <li>
+         Use this plugin entirely at your own risk - please see licence for more information.
+      </li>
+   </ul>
+</div>
+<script>
+   ; (async () => {
+      try {
+         const currentConfig = await homebridge.getPluginConfig()
+         const hostname = window.location.hostname
+         try {
+            await homebridge.request('Start FirstAlert Login Server')
+         } catch (err) {
+            const msg = err.message
+            homebridge.toast.error(msg, 'HTTP Server Not Started')
+         }
+         homebridge.addEventListener('creds-received', async event => {
+            try {
+               if (event.data.access && event.data.refresh) {
+                  this.popup.close()
+                  currentConfig[0].credentials = {
+                     consumerKey: event.data.key,
+                     consumerSecret: event.data.secret,
+                     accessToken: event.data.access,
+                     refreshToken: event.data.refresh
+                  }
+                  await homebridge.updatePluginConfig(currentConfig)
+                  await homebridge.savePluginConfig()
+                  homebridge.toast.success("Successfully Linked FirstAlert Account", "homebridge-firstalert")
+                  document.getElementById('backToIntro').style.display = 'none'
+                  document.getElementById('linkButton').style.display = 'none'
+                  document.getElementById('unLinkButton').style.display = 'none'
+                  document.getElementById('linkSuccess').style.display = 'block'
+                  // Show discover devices button after successful login
+                  if (!document.getElementById('discoverDevicesBtn')) {
+                     const discoverBtn = document.createElement('button')
+                     discoverBtn.id = 'discoverDevicesBtn'
+                     discoverBtn.className = 'btn btn-success mt-3'
+                     discoverBtn.innerText = 'Discover Devices'
+                     discoverBtn.onclick = async () => {
+                        homebridge.showSpinner()
+                        try {
+                           const result = await homebridge.request('discoverDevices', { accessToken: result.data.accessToken })
+                           if (result.status === 'ok' && result.data) {
+                              // Show device list and allow adding to config
+                              let deviceList = result.data.devices || result.data;
+                              if (!Array.isArray(deviceList)) deviceList = Object.values(deviceList).flat();
+                              const deviceDiv = document.createElement('div')
+                              deviceDiv.id = 'discoveredDevices'
+                              deviceDiv.innerHTML = '<h5>Discovered Devices</h5>'
+                              deviceList.forEach(device => {
+                                 const d = document.createElement('div')
+                                 d.className = 'alert alert-info mb-2'
+                                 d.innerHTML = `<b>${device.name || device.deviceID}</b> (${device.type || device.deviceType || ''}) <button class='btn btn-sm btn-primary ml-2 addDeviceBtn'>Add</button>`
+                                 d.querySelector('.addDeviceBtn').onclick = async () => {
+                                    // Add device to config
+                                    if (!currentConfig[0].devices) currentConfig[0].devices = []
+                                    currentConfig[0].devices.push({ id: device.deviceID, name: device.name, type: device.type || device.deviceType })
+                                    await homebridge.updatePluginConfig(currentConfig)
+                                    await homebridge.savePluginConfig()
+                                    homebridge.toast.success('Device added to config', 'homebridge-firstalert')
+                                 }
+                                 deviceDiv.appendChild(d)
+                              })
+                              document.getElementById('pageAccount').appendChild(deviceDiv)
+                           } else {
+                              homebridge.toast.error('Device discovery failed: ' + (result.data || 'Unknown error'), 'Error')
+                           }
+                        } catch (err) {
+                           homebridge.toast.error('Device discovery failed: ' + (err?.message || err), 'Error')
+                        } finally {
+                           homebridge.hideSpinner()
+                        }
+                     }
+                     document.getElementById('pageAccount').appendChild(discoverBtn)
+                  }
+               } else {
+                  throw new Error('no access/token received from server')
+               }
+            } catch (err) {
+               console.log(err)
+               homebridge.toast.error('Try again, or see the console message for info.', 'Error')
+            }
+         })
+         copyMyText = () => {
+            var textToCopy = document.getElementById("copyMe");
+            textToCopy.select();
+            document.execCommand("copy");
+         }
+         linkAccount = async () => {
+            document.getElementById('validateForm').style.display = 'none'
+            const consumerKey = document.getElementById('inputConsumerKey').value
+            const consumerSecret = document.getElementById('inputConsumerSecret').value
+            if (!consumerKey || !consumerSecret) {
+               document.getElementById('validateForm').style.display = 'block'
+               return
+            }
+            homebridge.showSpinner()
+            try {
+               // Step 1: Start OAuth flow, get authUrl and codeVerifier
+               const startResult = await homebridge.request('startOAuthFlow', { consumerKey, consumerSecret })
+               if (startResult.status === 'need_code' && startResult.data && startResult.data.authUrl && startResult.data.codeVerifier) {
+                  // Show modal for code entry
+                  let modal = document.getElementById('oauthModal')
+                  if (!modal) {
+                     modal = document.createElement('div')
+                     modal.id = 'oauthModal'
+                     modal.style.position = 'fixed'
+                     modal.style.top = '0'
+                     modal.style.left = '0'
+                     modal.style.width = '100vw'
+                     modal.style.height = '100vh'
+                     modal.style.background = 'rgba(0,0,0,0.5)'
+                     modal.style.display = 'flex'
+                     modal.style.alignItems = 'center'
+                     modal.style.justifyContent = 'center'
+                     modal.innerHTML = `<div style="background:#fff;padding:2em;border-radius:8px;max-width:400px;width:100%;text-align:center;">
+                        <h5>FirstAlert Login</h5>
+                        <p>Click <a href='${startResult.data.authUrl}' target='_blank'>here</a> to log in and authorize, then paste the code below:</p>
+                        <input id='oauthCodeInput' class='form-control mb-2' placeholder='Paste code here'>
+                        <div class='text-danger mb-2' id='oauthCodeError' style='display:none'></div>
+                        <button class='btn btn-primary' id='oauthCodeSubmit'>Submit</button>
+                        <button class='btn btn-link' id='oauthCodeCancel'>Cancel</button>
+                     </div>`
+                     document.body.appendChild(modal)
+                  } else {
+                     modal.style.display = 'flex'
+                  }
+                  document.getElementById('oauthCodeInput').value = ''
+                  document.getElementById('oauthCodeError').style.display = 'none'
+                  document.getElementById('oauthCodeSubmit').onclick = async () => {
+                     const code = document.getElementById('oauthCodeInput').value
+                     if (!code) {
+                        document.getElementById('oauthCodeError').innerText = 'Please enter the code.'
+                        document.getElementById('oauthCodeError').style.display = 'block'
+                        return
+                     }
+                     modal.style.display = 'none'
+                     homebridge.showSpinner()
+                     try {
+                        const finishResult = await homebridge.request('startOAuthFlow', { consumerKey, consumerSecret, code, codeVerifier: startResult.data.codeVerifier })
+                        if (finishResult.status === 'ok' && finishResult.data && finishResult.data.refreshToken) {
+                           currentConfig[0].credentials = {
+                              consumerKey,
+                              consumerSecret,
+                              accessToken: finishResult.data.accessToken,
+                              refreshToken: finishResult.data.refreshToken
+                           }
+                           await homebridge.updatePluginConfig(currentConfig)
+                           await homebridge.savePluginConfig()
+                           homebridge.toast.success('Successfully Linked FirstAlert Account', 'homebridge-firstalert')
+                           document.getElementById('backToIntro').style.display = 'none'
+                           document.getElementById('linkButton').style.display = 'none'
+                           document.getElementById('unLinkButton').style.display = 'none'
+                           document.getElementById('linkSuccess').style.display = 'block'
+                        } else {
+                           homebridge.toast.error('Login failed: ' + (finishResult.data?.error_description || finishResult.data || 'Unknown error'), 'Error')
+                        }
+                     } catch (err) {
+                        homebridge.toast.error('Login failed: ' + (err?.message || err), 'Error')
+                     } finally {
+                        homebridge.hideSpinner()
+                     }
+                  }
+                  document.getElementById('oauthCodeCancel').onclick = () => {
+                     modal.style.display = 'none'
+                  }
+                  return
+               }
+               // If we get here, try the legacy direct token flow
+               if (startResult.status === 'ok' && startResult.data && startResult.data.refreshToken) {
+                  currentConfig[0].credentials = {
+                     consumerKey,
+                     consumerSecret,
+                     accessToken: startResult.data.accessToken,
+                     refreshToken: startResult.data.refreshToken
+                  }
+                  await homebridge.updatePluginConfig(currentConfig)
+                  await homebridge.savePluginConfig()
+                  homebridge.toast.success('Successfully Linked FirstAlert Account', 'homebridge-firstalert')
+                  document.getElementById('backToIntro').style.display = 'none'
+                  document.getElementById('linkButton').style.display = 'none'
+                  document.getElementById('unLinkButton').style.display = 'none'
+                  document.getElementById('linkSuccess').style.display = 'block'
+               } else {
+                  homebridge.toast.error('Login failed: ' + (startResult.data?.error_description || startResult.data || 'Unknown error'), 'Error')
+               }
+            } catch (err) {
+               homebridge.toast.error('Login failed: ' + (err?.message || err), 'Error')
+            } finally {
+               homebridge.hideSpinner()
+            }
+         }
+         unLinkAccount = async () => {
+            try {
+               document.getElementById('validateForm').style.display = 'none'
+               if (
+                  !document.getElementById('inputConsumerKey').value ||
+                  !document.getElementById('inputConsumerSecret').value
+               ) {
+                  document.getElementById('validateForm').style.display = 'block'
+                  return
+               }
+               delete currentConfig[0].credentials
+               await homebridge.updatePluginConfig(currentConfig)
+               await homebridge.savePluginConfig()
+               document.getElementById('inputConsumerKey').value = ''
+               document.getElementById('inputConsumerSecret').value = ''
+               document.getElementById('unLinkButton').style.display = 'none'
+            } catch (err) {
+               console.error(err)
+               homebridge.toast.error('Try again, or see the console message for info.', 'Error')
+            }
+         }
+         showIntro = () => {
+            const introLink = document.getElementById('introLink')
+            document.getElementById('copyMe').value = 'http://' + hostname + ':8585/auth'
+            introLink.addEventListener('click', () => {
+               homebridge.showSpinner()
+               document.getElementById('pageIntro').style.display = 'none'
+               document.getElementById('menuWrapper').style.display = 'inline-flex'
+               showAccount()
+               homebridge.hideSpinner()
+            })
+            document.getElementById('pageAccount').style.display = 'none'
+            document.getElementById('menuWrapper').style.display = 'none'
+            document.getElementById('pageIntro').style.display = 'block'
+         }
+         showDevices = async () => {
+            homebridge.showSpinner()
+            homebridge.hideSchemaForm()
+            document.getElementById('menuHome').classList.remove('btn-elegant')
+            document.getElementById('menuHome').classList.add('btn-primary')
+            document.getElementById('menuDevices').classList.add('btn-elegant')
+            document.getElementById('menuDevices').classList.remove('btn-primary')
+            document.getElementById('menuAccount').classList.remove('btn-elegant')
+            document.getElementById('menuAccount').classList.add('btn-primary')
+            document.getElementById('menuSettings').classList.remove('btn-elegant')
+            document.getElementById('menuSettings').classList.add('btn-primary')
+            document.getElementById('pageSupport').style.display = 'none'
+            document.getElementById('pageAccount').style.display = 'none'
+            document.getElementById('pageDevices').style.display = 'block'
+            const cachedAccessories =
+               typeof homebridge.getCachedAccessories === 'function'
+                  ? await homebridge.getCachedAccessories()
+                  : await homebridge.request('/getCachedAccessories')
+            if (cachedAccessories.length > 0) {
+               cachedAccessories.sort((a, b) => {
+                  return a.displayName.toLowerCase() > b.displayName.toLowerCase()
+                     ? 1
+                     : b.displayName.toLowerCase() > a.displayName.toLowerCase()
+                        ? -1
+                        : 0
+               })
+            }
+            const deviceSelect = document.getElementById('deviceSelect')
+            deviceSelect.innerHTML = ''
+            cachedAccessories.forEach(a => {
+               const option = document.createElement('option')
+               option.text = a.displayName
+               option.value = a.UUID
+               deviceSelect.add(option)
+            })
+            showDeviceInfo = async UUID => {
+               homebridge.showSpinner()
+               const thisAcc = cachedAccessories.find(x => x.UUID === UUID)
+               const context = thisAcc.context
+               document.getElementById('displayName').innerHTML = thisAcc.displayName
+               document.getElementById('deviceID').innerHTML = context.deviceID
+               document.getElementById('model').innerHTML = context.model
+               document.getElementById('firmwareRevision').innerHTML = context.firmwareRevision || 'N/A'
+               document.getElementById('deviceTable').style.display = 'inline-table'
+               homebridge.hideSpinner()
+            }
+            deviceSelect.addEventListener('change', event => showDeviceInfo(event.target.value))
+            if (cachedAccessories.length > 0) {
+               showDeviceInfo(cachedAccessories[0].UUID)
+            } else {
+               const option = document.createElement('option')
+               option.text = 'No Devices'
+               deviceSelect.add(option)
+               deviceSelect.disabled = true
+            }
+            homebridge.hideSpinner()
+         }
+         showSupport = () => {
+            homebridge.showSpinner()
+            homebridge.hideSchemaForm()
+            document.getElementById('menuHome').classList.add('btn-elegant')
+            document.getElementById('menuHome').classList.remove('btn-primary')
+            document.getElementById('menuDevices').classList.remove('btn-elegant')
+            document.getElementById('menuDevices').classList.add('btn-primary')
+            document.getElementById('menuSettings').classList.remove('btn-elegant')
+            document.getElementById('menuSettings').classList.add('btn-primary')
+            document.getElementById('menuAccount').classList.remove('btn-elegant')
+            document.getElementById('menuAccount').classList.add('btn-primary')
+            document.getElementById('pageSupport').style.display = 'block'
+            document.getElementById('pageDevices').style.display = 'none'
+            document.getElementById('pageAccount').style.display = 'none'
+            homebridge.hideSpinner()
+         }
+         showSettings = () => {
+            homebridge.showSpinner()
+            document.getElementById('menuHome').classList.remove('btn-elegant')
+            document.getElementById('menuHome').classList.add('btn-primary')
+            document.getElementById('menuDevices').classList.remove('btn-elegant')
+            document.getElementById('menuDevices').classList.add('btn-primary')
+            document.getElementById('menuSettings').classList.add('btn-elegant')
+            document.getElementById('menuSettings').classList.remove('btn-primary')
+            document.getElementById('menuAccount').classList.remove('btn-elegant')
+            document.getElementById('menuAccount').classList.add('btn-primary')
+            document.getElementById('pageSupport').style.display = 'none'
+            document.getElementById('pageDevices').style.display = 'none'
+            document.getElementById('pageAccount').style.display = 'none'
+            homebridge.showSchemaForm()
+            homebridge.hideSpinner()
+         }
+         showAccount = () => {
+            homebridge.showSpinner()
+            const backToIntro = document.getElementById('backToIntro')
+            backToIntro.addEventListener('click', () => {
+               showIntro()
+            })
+            backToIntro.style.display = 'none'
+            const linkButton = document.getElementById('linkButton')
+            linkButton.addEventListener('click', () => {
+               linkAccount()
+            })
+            const unLinkButton = document.getElementById('unLinkButton')
+            unLinkButton.style.display = 'none'
+            unLinkButton.addEventListener('click', () => {
+               unLinkAccount()
+            })
+            document.getElementById('linkSuccess').style.display = 'none'
+            homebridge.hideSchemaForm()
+            document.getElementById('menuHome').classList.remove('btn-elegant')
+            document.getElementById('menuHome').classList.add('btn-primary')
+            document.getElementById('menuDevices').classList.remove('btn-elegant')
+            document.getElementById('menuDevices').classList.add('btn-primary')
+            document.getElementById('menuAccount').classList.add('btn-elegant')
+            document.getElementById('menuAccount').classList.remove('btn-primary')
+            document.getElementById('menuSettings').classList.remove('btn-elegant')
+            document.getElementById('menuSettings').classList.add('btn-primary')
+            document.getElementById('pageSupport').style.display = 'none'
+            document.getElementById('pageDevices').style.display = 'none'
+            document.getElementById('pageAccount').style.display = 'block'
+            document.getElementById('linkButton').style.display = 'inline-block'
+            let isRelink = false
+            if (currentConfig[0] && currentConfig[0].credentials) {
+               const key = currentConfig[0].credentials.consumerKey || ''
+               const secret = currentConfig[0].credentials.consumerSecret || ''
+               document.getElementById('inputConsumerKey').value = key
+               document.getElementById('inputConsumerSecret').value = secret
+               if (key && secret) {
+                  isRelink = true
+                  document.getElementById('unLinkButton').style.display = 'inline-block'
+               } else {
+                  document.getElementById('unLinkButton').style.display = 'none'
+               }
+            }
+            document.getElementById('linkButton').innerHTML = isRelink
+               ? 'Relink Account &rarr;'
+               : 'Link Account &rarr;'
+            if (!isRelink) {
+               document.getElementById('backToIntro').style.display = 'inline-block'
+            } else {
+               document.getElementById('backToIntro').style.display = 'none'
+            }
+            homebridge.hideSpinner()
+         }
+         menuHome.addEventListener('click', () => showSupport())
+         menuAccount.addEventListener('click', () => showAccount())
+         menuDevices.addEventListener('click', () => showDevices())
+         menuSettings.addEventListener('click', () => showSettings())
+         if (currentConfig.length) {
+            document.getElementById('menuWrapper').style.display = 'inline-flex'
+            showAccount()
+         } else {
+            currentConfig.push({ name: 'FirstAlert' })
+            await homebridge.updatePluginConfig(currentConfig)
+            showIntro()
+         }
+      } catch (err) {
+         homebridge.toast.error(err.message, 'Error')
+      } finally {
+         homebridge.hideSpinner()
+      }
+   })()
+</script>

package/src/homebridge-ui/server.ts

@@ -0,0 +1,102 @@
+import { Buffer } from 'node:buffer'
+import crypto from 'node:crypto'
+import fs from 'node:fs'
+
+import { HomebridgePluginUiServer } from '@homebridge/plugin-ui-utils'
+
+interface CustomRequestResponse {
+  status: string
+  data?: any
+}
+
+export class PluginUiServer extends HomebridgePluginUiServer {
+  constructor() {
+    super()
+
+    // OAuth PKCE flow handler
+    this.onRequest('startOAuthFlow', async (payload): Promise<CustomRequestResponse> => {
+      try {
+        const { consumerKey, consumerSecret, code, codeVerifier } = payload || {}
+        if (!consumerKey || !consumerSecret) {
+          return { status: 'error', data: 'Missing consumerKey or consumerSecret' }
+        }
+        // If no code, generate PKCE and return authUrl for UI
+        if (!code) {
+          const generatedVerifier = crypto.randomBytes(32).toString('base64url')
+          const challenge = crypto.createHash('sha256').update(generatedVerifier).digest('base64url')
+          const redirectUri = 'urn:ietf:wg:oauth:2.0:oob'
+          const authUrl = `https://api.honeywell.com/oauth2/authorize?response_type=code&client_id=${encodeURIComponent(consumerKey)}&redirect_uri=${encodeURIComponent(redirectUri)}&code_challenge=${encodeURIComponent(challenge)}&code_challenge_method=S256&appSelect=1`
+          return { status: 'need_code', data: { authUrl, codeVerifier: generatedVerifier } }
+        }
+        // Exchange code for tokens
+        if (!codeVerifier) {
+          return { status: 'error', data: 'Missing PKCE code_verifier' }
+        }
+        const redirectUri = 'urn:ietf:wg:oauth:2.0:oob'
+        const tokenRes = await fetch('https://api.honeywell.com/oauth2/token', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Basic ${Buffer.from(`${consumerKey}:${consumerSecret}`).toString('base64')}`,
+            'Accept': 'application/json',
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: `grant_type=authorization_code&code=${encodeURIComponent(code)}&redirect_uri=${encodeURIComponent(redirectUri)}&code_verifier=${encodeURIComponent(codeVerifier)}`,
+        })
+        const tokenData = await tokenRes.json()
+        if (tokenData.refresh_token) {
+          return { status: 'ok', data: { refreshToken: tokenData.refresh_token, accessToken: tokenData.access_token } }
+        } else {
+          return { status: 'error', data: tokenData }
+        }
+      } catch (err) {
+        return { status: 'error', data: (err && typeof err === 'object' && 'message' in err) ? (err as any).message : String(err) }
+      }
+    })
+
+    // Device discovery handler
+    this.onRequest('discoverDevices', async (payload): Promise<CustomRequestResponse> => {
+      try {
+        const { accessToken } = payload || {}
+        if (!accessToken) {
+          return { status: 'error', data: 'No access token provided' }
+        }
+        const res = await fetch('https://api.honeywell.com/v2/devices', {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            Accept: 'application/json',
+          },
+        })
+        if (!res.ok) {
+          return { status: 'error', data: await res.text() }
+        }
+        const data = await res.json()
+        return { status: 'ok', data }
+      } catch (err) {
+        return { status: 'error', data: (err && typeof err === 'object' && 'message' in err) ? (err as any).message : String(err) }
+      }
+    })
+
+    // Legacy: getCachedAccessories for older config-ui-x
+    this.onRequest('/getCachedAccessories', async (): Promise<CustomRequestResponse> => {
+      try {
+        const plugin = '@homebridge-plugins/homebridge-firstalert'
+        const devicesToReturn: any[] = []
+        const accFile = `${this.homebridgeStoragePath}/accessories/cachedAccessories`
+        if (fs.existsSync(accFile)) {
+          const cachedAccessoriesData = await fs.promises.readFile(accFile, 'utf8')
+          const cachedAccessories: any[] = JSON.parse(cachedAccessoriesData)
+          cachedAccessories
+            .filter((accessory: any) => accessory.plugin === plugin)
+            .forEach((accessory: any) => devicesToReturn.push(accessory))
+        }
+        return { status: 'ok', data: devicesToReturn }
+      } catch (err) {
+        return { status: 'error', data: [] }
+      }
+    })
+
+    this.ready()
+  }
+}
+
+(() => new PluginUiServer())()

package/src/index.ts

@@ -0,0 +1,13 @@
+/* Copyright(C) 2022-2024, donavanbecker (https://github.com/donavanbecker). All rights reserved.
+ *
+ * index.ts: homebridge-firstalert.
+ */
+import type { API } from 'homebridge'
+
+import { ResideoPlatform } from './platform.js'
+import { PLATFORM_NAME, PLUGIN_NAME } from './settings.js'
+
+// Register our platform with homebridge.
+export default (api: API): void => {
+  api.registerPlatform(PLUGIN_NAME, PLATFORM_NAME, ResideoPlatform)
+}