homebridge-unifi-protect 6.12.2 → 6.13.1

package/homebridge-ui/public/protect-featureoptions.mjs

@@ -81,13 +81,11 @@ export class ProtectFeatureOptions extends FeatureOptions {
     if(!this.currentConfig[0]?.controllers?.length) {
 
       document.getElementById("headerInfo").innerHTML = "Please configure a UniFi Protect controller to access in the main settings tab before configuring feature options."
+      document.getElementById("headerInfo").style.display = "";
       homebridge.hideSpinner();
       return;
     }
 
-    // Initialize our informational header.
-    document.getElementById("headerInfo").innerHTML = "Feature options are applied in prioritized order, from global to device-specific options:<br><i class=\"text-warning\">Global options</i> (lowest priority) &rarr; <i class=\"text-success\">Protect controller options</i> &rarr; <i class=\"text-info\">Protect device options</i> (highest priority)"
-
     // Enumerate our global options.
     const trGlobal = document.createElement("tr");
 
@@ -189,7 +187,7 @@ export class ProtectFeatureOptions extends FeatureOptions {
     // If we're not accessing global options, pull a list of devices attached to this controller.
     if(controller) {
 
-      this.ufpDevices = await homebridge.request("/getDevices", { address: controller.address, password: controller.password, username: controller.username });
+      this.ufpDevices = await homebridge.request("/getDevices", { address: controller.address, username: controller.username, password: controller.password });
     }
 
     // Couldn't connect to the Protect controller for some reason.
@@ -198,24 +196,21 @@ export class ProtectFeatureOptions extends FeatureOptions {
       devicesTable.innerHTML = "";
       this.configTable.innerHTML = "";
 
-      document.getElementById("device_model").innerHTML = "Unable to connect to the Protect controller. Check your settings for this controller in the main settings tab to verify they are correct."
-      document.getElementById("device_model").colSpan = 3;
-      document.getElementById("device_model").style.fontWeight = "bold";
-      document.getElementById("device_model").classList.add("text-center");
-      document.getElementById("deviceStatsHeader").style.display = "none";
-
-      document.getElementById("device_mac").innerHTML = "";
-      document.getElementById("device_address").innerHTML = "";
-      document.getElementById("device_online").innerHTML = "";
-      document.getElementById("deviceStatsTable").style.display = "inline-table";
+      document.getElementById("headerInfo").innerHTML = "Unable to connect to the Protect controller.<br>Check your settings for this controller in the settings tab to verify they are correct.<br><code class=\"text-danger\">" + (await homebridge.request("/getErrorMessage")) + "</code>";
+      document.getElementById("headerInfo").style.display = "";
+      document.getElementById("deviceStatsTable").style.display = "none";
 
       homebridge.hideSpinner();
       return;
     }
 
+    // Initialize our informational header.
+    document.getElementById("headerInfo").innerHTML = "Feature options are applied in prioritized order, from global to device-specific options:<br><i class=\"text-warning\">Global options</i> (lowest priority) &rarr; <i class=\"text-success\">Protect controller options</i> &rarr; <i class=\"text-info\">Protect device options</i> (highest priority)"
+
     // Make the UI visible.
-    document.getElementById("sidebar").style.display = "";
     document.getElementById("headerInfo").style.display = "";
+    document.getElementById("sidebar").style.display = "";
+    document.getElementById("deviceStatsTable").style.display = "";
 
     const modelKeys = [...new Set(this.ufpDevices.map(x => x.modelKey))];
     this.deviceList = [];
@@ -314,7 +309,6 @@ export class ProtectFeatureOptions extends FeatureOptions {
     // Ensure we have a controller or device. The only time this won't be the case is when we're looking at global options.
     if(ufpDevice) {
 
-      document.getElementById("deviceStatsHeader").style.display = "";
       document.getElementById("device_model").classList.remove("text-center");
       document.getElementById("device_model").colSpan = 1;
       document.getElementById("device_model").style.fontWeight = "normal";
@@ -322,13 +316,10 @@ export class ProtectFeatureOptions extends FeatureOptions {
       document.getElementById("device_mac").innerHTML = ufpDevice.mac;
       document.getElementById("device_address").innerHTML = ufpDevice.host ?? (ufpDevice.modelKey === "sensor" ? "Bluetooth Device" : "None");
       document.getElementById("device_online").innerHTML = ("state" in ufpDevice) ? (ufpDevice.state.charAt(0).toUpperCase() + ufpDevice.state.slice(1).toLowerCase()) : "Connected";
-
-      document.getElementById("deviceStatsTable").style.display = "inline-table";
+      document.getElementById("deviceStatsTable").style.display = "";
     } else {
 
       document.getElementById("deviceStatsTable").style.display = "none";
-
-      document.getElementById("deviceStatsHeader").style.display = "";
       document.getElementById("device_model").classList.remove("text-center");
       document.getElementById("device_model").colSpan = 1;
       document.getElementById("device_model").style.fontWeight = "normal";

package/homebridge-ui/public/ui.mjs

@@ -9,49 +9,85 @@ import { ProtectFeatureOptions } from "./protect-featureoptions.mjs";
 // Keep a list of all the feature options and option groups.
 const featureOptions = new ProtectFeatureOptions();
 
-// Toggle our enabled state.
-async function enablePlugin() {
+// Show the first run user experience if we don't have valid login credentials.
+function showFirstRun () {
 
-  // Show the beachball while we setup.
-  homebridge.showSpinner();
+  const buttonFirstRun = document.getElementById("firstRun");
+  const inputAddress = document.getElementById("address");
+  const inputUsername = document.getElementById("username");
+  const inputPassword = document.getElementById("password");
+  const tdLoginError = document.getElementById("loginError");
 
-  // Create our UI.
-  document.getElementById("disabledBanner").style.display = "none";
-  featureOptions.currentConfig[0].disablePlugin = false;
+  // If we don't have any controllers configured, initialize the list.
+  if(!featureOptions.currentConfig[0].controllers) {
 
-  await homebridge.updatePluginConfig(featureOptions.currentConfig)
-  await homebridge.savePluginConfig()
+    featureOptions.currentConfig[0].controllers = [ {} ];
+  }
 
-  // All done. Let the user interact with us.
-  homebridge.hideSpinner()
-}
+  // Pre-populate with anything we might already have in our configuration.
+  inputAddress.value = featureOptions.currentConfig[0].controllers[0].address ?? "";
+  inputUsername.value = featureOptions.currentConfig[0].controllers[0].username ?? "";
+  inputPassword.value = featureOptions.currentConfig[0].controllers[0].password ?? "";
 
-// Show a disabled interface.
-function showDisabledBanner() {
+  // Clear login error messages when the login credentials change.
+  inputAddress.addEventListener("input", () => {
 
-  document.getElementById("disabledBanner").style.display = "block";
-}
+    tdLoginError.innerHTML = " ";
+  });
 
-// Show an navigation bar at the top of the plugin configuration UI.
-function showIntro () {
+  inputUsername.addEventListener("input", () => {
 
-  const introLink = document.getElementById("introLink");
+    tdLoginError.innerHTML = " ";
+  });
+
+  inputPassword.addEventListener("input", () => {
+
+    tdLoginError.innerHTML = " ";
+  });
 
-  introLink.addEventListener("click", () => {
+  // First run user experience.
+  buttonFirstRun.addEventListener("click", async () => {
 
     // Show the beachball while we setup.
     homebridge.showSpinner();
 
+    const address = inputAddress.value;
+    const username = inputUsername.value;
+    const password = inputPassword.value;
+
+    tdLoginError.innerHTML = " ";
+
+    if(!address?.length || !username?.length || !password?.length) {
+
+      tdLoginError.appendChild(document.createTextNode("Please enter a valid UniFi Protect controller address, username and password."));
+      homebridge.hideSpinner();
+      return;
+    }
+
+    const ufpDevices = await homebridge.request("/getDevices", { address: address, username: username, password: password });
+
+    // Couldn't connect to the Protect controller for some reason.
+    if(!ufpDevices?.length) {
+
+      tdLoginError.innerHTML = "Unable to login to the UniFi Protect controller.<br>Please check your controller address, username, and password.<br><code class=\"text-danger\">" + (await homebridge.request("/getErrorMessage")) + "</code>";
+      homebridge.hideSpinner();
+      return;
+    }
+
+    // Save the login credentials to our configuration.
+    featureOptions.currentConfig[0].controllers[0].address = address;
+    featureOptions.currentConfig[0].controllers[0].username = username;
+    featureOptions.currentConfig[0].controllers[0].password = password;
+
+    await homebridge.updatePluginConfig(featureOptions.currentConfig);
+
     // Create our UI.
-    document.getElementById("pageIntro").style.display = "none";
+    document.getElementById("pageFirstRun").style.display = "none";
     document.getElementById("menuWrapper").style.display = "inline-flex";
-    showSettings();
-
-    // All done. Let the user interact with us.
-    homebridge.hideSpinner();
+    featureOptions.showUI();
   });
 
-  document.getElementById("pageIntro").style.display = "block";
+  document.getElementById("pageFirstRun").style.display = "block";
 }
 
 // Show the main plugin configuration tab.
@@ -109,31 +145,35 @@ async function launchWebUI() {
   menuHome.addEventListener("click", () => showSupport());
   menuFeatureOptions.addEventListener("click", () => featureOptions.showUI());
   menuSettings.addEventListener("click", () => showSettings());
-  disabledEnable.addEventListener("click", () => enablePlugin());
 
-  if(featureOptions.currentConfig.length) {
+  // If we've got a valid Protect controller, username, and password configured, we launch our feature option UI. Otherwise, we launch our first run UI.
+  if(featureOptions.currentConfig.length && featureOptions.currentConfig[0].controllers?.length && featureOptions.currentConfig[0].controllers[0]?.address?.length && featureOptions.currentConfig[0].controllers[0]?.username?.length && featureOptions.currentConfig[0].controllers[0]?.password?.length) {
 
-    document.getElementById("menuWrapper").style.display = "inline-flex"
-    showSettings();
+    document.getElementById("menuWrapper").style.display = "inline-flex";
+    featureOptions.showUI();
+    return;
+  }
 
-    // If the plugin's disabled, inform the user.
-    if(featureOptions.currentConfig[0].disablePlugin) {
+  // If we have no configuration, let's create one.
+  if(!featureOptions.currentConfig.length) {
 
-      showDisabledBanner();
-    }
-  } else {
+    featureOptions.currentConfig.push({ controllers: [ {} ], name: "UniFi Protect" });
+  } else if(!("name" in featureOptions.currentConfig[0])) {
 
-    featureOptions.currentConfig.push({ name: "UniFi Protect" });
-    await homebridge.updatePluginConfig(featureOptions.currentConfig);
-    showIntro();
+    // If we haven't set the name, let's do so now.
+    featureOptions.currentConfig[0].name = "UniFi Protect";
   }
+
+  // Update the plugin configuration and launch the first run UI.
+  await homebridge.updatePluginConfig(featureOptions.currentConfig);
+  showFirstRun();
 }
 
 // Fire off our UI, catching errors along the way.
 try {
 
   launchWebUI();
-} catch (err) {
+} catch(err) {
 
   // If we had an error instantiating or updating the UI, notify the user.
   homebridge.toast.error(err.message, "Error");

package/homebridge-ui/server.js

@@ -1,33 +1,80 @@
 /* Copyright(C) 2017-2023, HJD (https://github.com/hjdhjd). All rights reserved.
  *
- * server.js: Homebridge camera streaming delegate implementation for Protect.
+ * server.js: homebridge-unifi-protect webUI server API.
  *
  * This module is heavily inspired by the homebridge-config-ui-x source code and borrows from both.
  * Thank you oznu for your contributions to the HomeKit world.
  */
-/* eslint-disable no-undef */
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* jshint node: true,esversion: 9, -W014, -W033 */
-/* eslint-disable new-cap */
 "use strict";
 
 import { featureOptionCategories, featureOptions, isOptionEnabled } from "../dist/protect-options.js";
 import { HomebridgePluginUiServer } from "@homebridge/plugin-ui-utils";
 import { ProtectApi } from "unifi-protect";
-import * as fs from "node:fs";
+import util from "node:util";
 
 class PluginUiServer extends HomebridgePluginUiServer {
 
+  errorInfo;
+
   constructor () {
     super();
 
+    this.errorInfo = "";
+
+    // Register getErrorMessage() with the Homebridge server API.
+    this.#registerGetErrorMessage();
+
+    // Register getDevices() with the Homebridge server API.
+    this.#registerGetDevices();
+
+    // Register getOptions() with the Homebridge server API.
+    this.#registerGetOptions();
+
+    this.ready();
+  }
+
+  // Register the getErrorMessage() webUI server API endpoint.
+  #registerGetErrorMessage() {
+
+    // Return the list of Protect devices.
+    this.onRequest("/getErrorMessage", async () => {
+
+      try {
+
+        return this.errorInfo;
+      } catch(err) {
+
+        console.log(err);
+
+        // Return nothing if we error out for some reason.
+        return "";
+      }
+    });
+  }
+
+  // Register the getDevices() webUI server API endpoint.
+  #registerGetDevices() {
+
     // Return the list of Protect devices.
     this.onRequest("/getDevices", async (controller) => {
 
       try {
 
+        const log = {
+
+          debug: (message, parameters) => {},
+          error: (message, parameters = []) => {
+
+            // Save the error to inform the user in the webUI.
+            this.errorInfo = util.format(message, ...parameters);
+            console.log(this.errorInfo);
+          },
+          info: (message, parameters) => {},
+          warn: (message, parameters = []) => console.log(util.format(message, ...parameters))
+        };
+
         // Connect to the Protect controller.
-        const ufpApi = new ProtectApi();
+        const ufpApi = new ProtectApi(log);
 
         if(!(await ufpApi.login(controller.address, controller.username, controller.password))) {
 
@@ -91,13 +138,16 @@ class PluginUiServer extends HomebridgePluginUiServer {
         return [ ufpApi.bootstrap.nvr, ...ufpApi.bootstrap.cameras, ...ufpApi.bootstrap.chimes, ...ufpApi.bootstrap.lights, ...ufpApi.bootstrap.sensors, ...ufpApi.bootstrap.viewers ];
       } catch(err) {
 
-        console.log("ERRORING OUT FOR " + controller.address);
         console.log(err);
 
         // Return nothing if we error out for some reason.
         return [];
       }
     });
+  }
+
+  // Register the getOptions() webUI server API endpoint.
+  #registerGetOptions() {
 
     // Return the list of options configured for a given Protect device.
     this.onRequest("/getOptions", async(request) => {
@@ -126,8 +176,6 @@ class PluginUiServer extends HomebridgePluginUiServer {
         return {};
       }
     });
-
-    this.ready();
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homebridge-unifi-protect",
-  "version": "6.12.2",
+  "version": "6.13.1",
   "displayName": "Homebridge UniFi Protect",
   "description": "Homebridge UniFi Protect plugin providing complete HomeKit integration for the UniFi Protect ecosystem with full support for most features including autoconfiguration, motion detection, multiple controllers, and realtime updates.",
   "author": {
@@ -82,15 +82,15 @@
     "ws": "8.13.0"
   },
   "devDependencies": {
-    "@types/node": "20.5.1",
-    "@types/readable-stream": "4.0.1",
+    "@types/node": "20.5.6",
+    "@types/readable-stream": "4.0.2",
     "@types/ws": "8.5.5",
-    "@typescript-eslint/eslint-plugin": "6.4.0",
-    "@typescript-eslint/parser": "6.4.0",
-    "eslint": "8.47.0",
+    "@typescript-eslint/eslint-plugin": "6.4.1",
+    "@typescript-eslint/parser": "6.4.1",
+    "eslint": "8.48.0",
     "homebridge": "1.6.1",
     "nodemon": "3.0.1",
     "rimraf": "5.0.1",
-    "typescript": "5.1.6"
+    "typescript": "5.2.2"
   }
 }