homebridge-eufy-security 4.4.2-beta.2 → 4.4.2-beta.20

package/homebridge-ui/public/app.js

@@ -0,0 +1,221 @@
+/**
+ * App — main controller, hash-based SPA router, and global state.
+ * Entry point initialized on homebridge 'ready' event.
+ */
+// eslint-disable-next-line no-unused-vars
+const App = {
+  /** Global state shared across views */
+  state: {
+    stations: [],
+    cacheDate: null, // ISO string of when accessories were last fetched
+    initialized: false,
+    nodeVersionWarning: null, // { nodeVersion, affected, acknowledged }
+  },
+
+  /** Root container element */
+  _root: null,
+
+  /**
+   * Initialize the app. Called once on homebridge 'ready' event.
+   */
+  async init() {
+    this._root = document.getElementById('app');
+
+    // Let Homebridge's native Save button handle saving to disk.
+    // We call updatePluginConfig() on every change to keep config in sync.
+
+    // Listen for admin account error globally
+    Api.onAdminAccountUsed(() => {
+      this._showAdminError();
+    });
+
+    // Listen for cache warnings (stale data, version mismatch)
+    Api.onCacheWarning((data) => {
+      switch (data.reason) {
+        case 'stale':
+          homebridge.toast.warning(
+            `Your cached devices are ${data.ageDays} days old. Please re-login to refresh.`,
+            'Stale Cache',
+          );
+          break;
+        case 'versionWarn':
+          homebridge.toast.warning(
+            `Plugin updated (${data.storedVersion} → ${data.currentVersion}). Consider re-logging in to refresh devices.`,
+            'Version Updated',
+          );
+          break;
+        case 'versionForce':
+          homebridge.toast.error(
+            `Plugin version changed significantly (${data.storedVersion} → ${data.currentVersion}). Please re-login.`,
+            'Re-login Required',
+          );
+          this.navigate('login');
+          break;
+      }
+    });
+
+    // Listen for hash changes
+    window.addEventListener('hashchange', () => this._onRoute());
+
+    // Determine initial route
+    try {
+      // Load config without pushing it back to Homebridge
+      const config = await Config.load();
+      if (!config.platform) {
+        // Initialize default config only if truly empty
+        await Config.update({ platform: 'EufySecurity', name: 'EufySecurity' });
+      }
+
+      const stored = await Api.loadStoredAccessories();
+      const stations = stored.stations || stored;
+      const cacheDate = stored.storedAt || null;
+      if (stations && stations.length > 0) {
+        this.state.stations = stations;
+        this.state.cacheDate = cacheDate;
+        // Check Node.js version for returning users (skipping login)
+        await this.checkNodeVersion();
+        if (!window.location.hash || window.location.hash === '#/') {
+          this.navigate('dashboard');
+        } else {
+          this._onRoute();
+        }
+      } else {
+        this.navigate('login');
+      }
+    } catch (e) {
+      // No stored accessories — go to login
+      this.navigate('login');
+    }
+
+    this.state.initialized = true;
+  },
+
+  /**
+   * Navigate to a route.
+   * @param {string} route - e.g. 'login', 'dashboard', 'detail/device/SERIAL', 'settings'
+   */
+  navigate(route) {
+    window.location.hash = '#/' + route;
+  },
+
+  /**
+   * Handle route changes.
+   */
+  _onRoute() {
+    const hash = window.location.hash.replace('#/', '') || '';
+    const parts = hash.split('/');
+    const route = parts[0];
+
+    // Clear the root container
+    this._root.innerHTML = '';
+
+    switch (route) {
+      case 'login':
+        LoginView.render(this._root);
+        break;
+
+      case 'dashboard':
+        DashboardView.render(this._root);
+        break;
+
+      case 'detail': {
+        const type = parts[1]; // 'device' or 'station'
+        const id = parts[2];   // uniqueId
+        if (type && id) {
+          DeviceDetailView.render(this._root, type, id);
+        } else {
+          this.navigate('dashboard');
+        }
+        break;
+      }
+
+      case 'unsupported': {
+        const uid = parts[1];
+        if (uid) {
+          UnsupportedDetailView.render(this._root, uid);
+        } else {
+          this.navigate('dashboard');
+        }
+        break;
+      }
+
+      case 'settings':
+        SettingsView.render(this._root);
+        break;
+
+      default:
+        // Unknown route — try dashboard if we have stations, otherwise login
+        if (this.state.stations.length > 0) {
+          this.navigate('dashboard');
+        } else {
+          this.navigate('login');
+        }
+        break;
+    }
+  },
+
+  /**
+   * Show a blocking error when admin account is detected.
+   */
+  _showAdminError() {
+    this._root.innerHTML = `
+      <div class="alert alert-danger alert-admin mt-4" role="alert">
+        <h5 class="alert-heading">⚠️ Admin Account Detected</h5>
+        <p>
+          You are not using a <strong>dedicated guest admin account</strong>. 
+          Using your primary Eufy account can cause conflicts with the Eufy app.
+        </p>
+        <hr>
+        <p class="mb-0">
+          Please create a dedicated admin account for this plugin.
+          <a href="https://github.com/homebridge-plugins/homebridge-eufy-security/wiki/Create-a-dedicated-admin-account-for-Homebridge-Eufy-Security-Plugin" 
+             target="_blank" class="alert-link">
+            Follow this guide
+          </a>
+        </p>
+      </div>
+    `;
+  },
+
+  /**
+   * Check if a Node.js version string is affected by the RSA_PKCS1_PADDING removal.
+   * Affected: 18.19.1+, 20.11.1+, 21.6.2+, 22.x, 23.x, and 24.x < 24.5.0.
+   * Safe: <= 18.19.0, <= 20.11.0, <= 21.6.1, and >= 24.5.0.
+   * @param {string} versionStr - e.g. 'v20.18.1'
+   * @returns {boolean}
+   */
+  isNodeVersionAffected(versionStr) {
+    const parts = versionStr.replace('v', '').split('.').map(Number);
+    const [major, minor, patch] = parts;
+
+    if (major === 18 && (minor > 19 || (minor === 19 && patch >= 1))) return true;
+    if (major === 20 && (minor > 11 || (minor === 11 && patch >= 1))) return true;
+    if (major === 21 && (minor > 6 || (minor === 6 && patch >= 2))) return true;
+    if (major === 22 || major === 23) return true;
+    if (major === 24 && (minor < 5)) return true;
+
+    return false;
+  },
+
+  /**
+   * Fetch the Node.js version from the server and update state.
+   */
+  async checkNodeVersion() {
+    try {
+      const info = await Api.getSystemInfo();
+      const affected = this.isNodeVersionAffected(info.nodeVersion);
+      this.state.nodeVersionWarning = {
+        nodeVersion: info.nodeVersion,
+        affected,
+        acknowledged: false,
+      };
+    } catch (e) {
+      // Silently ignore — non-critical check
+    }
+  },
+};
+
+// ===== Bootstrap the app when Homebridge UI is ready =====
+homebridge.addEventListener('ready', () => {
+  App.init();
+});

package/homebridge-ui/public/components/device-card.js

@@ -0,0 +1,141 @@
+/**
+ * DeviceCard component — renders a single device/station card for the dashboard grid.
+ *
+ * Usage:
+ *   DeviceCard.render(container, {
+ *     device: { uniqueId, displayName, type, typename, ... },
+ *     isStation: false,
+ *     enabled: true,
+ *     onClick: (device) => { ... },
+ *     onToggle: (device, enabled) => { ... }
+ *   });
+ */
+// eslint-disable-next-line no-unused-vars
+const DeviceCard = {
+
+  CHARGING_LABELS: {
+    1: 'Charging',
+    2: 'Unplugged',
+    3: 'Plugged In',
+    4: 'Solar',
+  },
+
+  /**
+   * @param {HTMLElement} container
+   * @param {object} opts
+   * @param {object} opts.device - L_Device or L_Station data
+   * @param {boolean} [opts.isStation]
+   * @param {boolean} opts.enabled - whether device is enabled (not ignored)
+   * @param {function} opts.onClick - callback(device)
+   * @param {function} opts.onToggle - callback(device, enabled)
+   * @returns {HTMLElement}
+   */
+  render(container, opts) {
+    const d = opts.device;
+    const isUnsupported = d.unsupported === true;
+    const isIgnored = d.ignored === true;
+
+    const col = document.createElement('div');
+    col.className = 'col-6 col-md-4 col-lg-3 mb-3';
+
+    const card = document.createElement('div');
+    card.className = 'device-card';
+    if (isUnsupported) card.classList.add('device-card--unsupported');
+    if (isIgnored) card.classList.add('device-card--ignored');
+
+    // Image (skip for unsupported)
+    if (!isUnsupported) {
+      const imgWrap = document.createElement('div');
+      imgWrap.className = 'device-card__image-wrap';
+      const img = document.createElement('img');
+      img.src = DeviceImages.getPath(d.type);
+      img.alt = d.displayName;
+      img.loading = 'lazy';
+      imgWrap.appendChild(img);
+      card.appendChild(imgWrap);
+    }
+
+    // Body
+    const body = document.createElement('div');
+    body.className = 'device-card__body';
+
+    const name = document.createElement('div');
+    name.className = 'device-card__name';
+    name.textContent = d.displayName;
+    name.title = d.displayName;
+
+    const meta = document.createElement('div');
+    meta.className = 'device-card__meta';
+
+    const metaParts = [];
+    if (isUnsupported) {
+      metaParts.push('Type ' + d.type);
+    } else if (d.typename) {
+      metaParts.push(d.typename);
+    }
+    if (d.hasBattery && d.properties && d.properties.battery !== undefined) {
+      metaParts.push('🔋 ' + d.properties.battery + '%');
+    }
+    if (d.chargingStatus && this.CHARGING_LABELS[d.chargingStatus]) {
+      metaParts.push('⚡ ' + this.CHARGING_LABELS[d.chargingStatus]);
+    }
+    meta.textContent = metaParts.join(' · ');
+
+    body.appendChild(name);
+    body.appendChild(meta);
+
+    // Footer with badges + toggle
+    const footer = document.createElement('div');
+    footer.className = 'device-card__footer';
+
+    const badgeArea = document.createElement('div');
+
+    if (isUnsupported) {
+      const badge = document.createElement('span');
+      badge.className = 'badge badge-unsupported';
+      badge.textContent = 'Not Supported';
+      badgeArea.appendChild(badge);
+    } else if (isIgnored) {
+      const badge = document.createElement('span');
+      badge.className = 'badge bg-secondary';
+      badge.textContent = 'Disabled';
+      badgeArea.appendChild(badge);
+    }
+
+    footer.appendChild(badgeArea);
+
+    // Toggle — only for non-unsupported devices
+    if (!isUnsupported) {
+      const switchWrap = document.createElement('div');
+      switchWrap.className = 'form-check form-switch mb-0';
+      switchWrap.addEventListener('click', (e) => e.stopPropagation());
+
+      const toggle = document.createElement('input');
+      toggle.type = 'checkbox';
+      toggle.className = 'form-check-input';
+      toggle.checked = opts.enabled;
+      toggle.role = 'switch';
+      toggle.title = opts.enabled ? 'Enabled in HomeKit' : 'Disabled in HomeKit';
+
+      toggle.addEventListener('change', (e) => {
+        e.stopPropagation();
+        if (opts.onToggle) opts.onToggle(d, toggle.checked);
+      });
+
+      switchWrap.appendChild(toggle);
+      footer.appendChild(switchWrap);
+    }
+
+    card.appendChild(body);
+    card.appendChild(footer);
+
+    // Click handler — navigate to detail
+    card.addEventListener('click', () => {
+      if (opts.onClick) opts.onClick(d);
+    });
+
+    col.appendChild(card);
+    if (container) container.appendChild(col);
+    return col;
+  },
+};

package/homebridge-ui/public/components/guard-modes.js

@@ -0,0 +1,88 @@
+/**
+ * Guard Modes mapping component.
+ * Maps HomeKit modes (Home, Away, Night, Off) to Eufy guard mode numbers.
+ *
+ * Usage:
+ *   GuardModes.render(container, {
+ *     hkHome: 1, hkAway: 0, hkNight: 1, hkOff: 63,
+ *     onChange: (modes) => { ... }  // { hkHome, hkAway, hkNight, hkOff }
+ *   });
+ */
+// eslint-disable-next-line no-unused-vars
+const GuardModes = {
+  EUFY_MODES: [
+    { value: '0', label: 'Away' },
+    { value: '1', label: 'Home' },
+    { value: '2', label: 'Schedule' },
+    { value: '3', label: 'Custom 1' },
+    { value: '4', label: 'Custom 2' },
+    { value: '5', label: 'Custom 3' },
+    { value: '6', label: 'Off' },
+    { value: '47', label: 'Geofencing' },
+    { value: '63', label: 'Disarmed' },
+  ],
+
+  /**
+   * @param {HTMLElement} container
+   * @param {object} opts
+   * @param {number} [opts.hkHome]
+   * @param {number} [opts.hkAway]
+   * @param {number} [opts.hkNight]
+   * @param {number} [opts.hkOff]
+   * @param {boolean} [opts.disabled]
+   * @param {function} opts.onChange - callback({ hkHome, hkAway, hkNight, hkOff })
+   * @returns {HTMLElement}
+   */
+  render(container, opts) {
+    const wrap = document.createElement('div');
+    wrap.className = 'guard-mode-grid';
+
+    const modes = {
+      hkHome: { label: 'HomeKit Home', value: opts.hkHome ?? 1 },
+      hkAway: { label: 'HomeKit Away', value: opts.hkAway ?? 0 },
+      hkNight: { label: 'HomeKit Night', value: opts.hkNight ?? 1 },
+      hkOff: { label: 'HomeKit Off', value: opts.hkOff ?? 63 },
+    };
+
+    const currentValues = {
+      hkHome: modes.hkHome.value,
+      hkAway: modes.hkAway.value,
+      hkNight: modes.hkNight.value,
+      hkOff: modes.hkOff.value,
+    };
+
+    Object.entries(modes).forEach(([key, mode]) => {
+      const group = document.createElement('div');
+      group.className = 'form-group';
+
+      const label = document.createElement('label');
+      label.textContent = mode.label;
+      label.setAttribute('for', 'guard-' + key);
+
+      const select = document.createElement('select');
+      select.className = 'form-select form-select-sm';
+      select.id = 'guard-' + key;
+      select.disabled = !!opts.disabled;
+
+      this.EUFY_MODES.forEach((em) => {
+        const option = document.createElement('option');
+        option.value = em.value;
+        option.textContent = em.label;
+        if (String(em.value) === String(mode.value)) option.selected = true;
+        select.appendChild(option);
+      });
+
+      select.addEventListener('change', () => {
+        currentValues[key] = parseInt(select.value);
+        if (opts.onChange) opts.onChange({ ...currentValues });
+      });
+
+      group.appendChild(label);
+      group.appendChild(select);
+      wrap.appendChild(group);
+    });
+
+    if (container) container.appendChild(wrap);
+    return wrap;
+  },
+};

package/homebridge-ui/public/components/number-input.js

@@ -0,0 +1,121 @@
+/**
+ * NumberInput component — renders a number input with +/- buttons, label, and optional help tooltip.
+ *
+ * Usage:
+ *   NumberInput.render(container, {
+ *     id: 'polling-interval',
+ *     label: 'Polling Interval',
+ *     help: 'Minutes between cloud polls',
+ *     value: 10,
+ *     min: 1,
+ *     max: 120,
+ *     step: 1,
+ *     suffix: 'min',
+ *     onChange: (value) => { ... }
+ *   });
+ */
+// eslint-disable-next-line no-unused-vars
+const NumberInput = {
+  /**
+   * @param {HTMLElement} container
+   * @param {object} opts
+   * @param {string} opts.id
+   * @param {string} opts.label
+   * @param {string} [opts.help]
+   * @param {number} opts.value
+   * @param {number} [opts.min]
+   * @param {number} [opts.max]
+   * @param {number} [opts.step]
+   * @param {string} [opts.suffix] - text after the input (e.g., 'min', 'sec')
+   * @param {boolean} [opts.disabled]
+   * @param {function} opts.onChange - callback(value: number)
+   * @returns {HTMLElement}
+   */
+  render(container, opts) {
+    const row = document.createElement('div');
+    row.className = 'eufy-toggle';
+
+    const labelWrap = document.createElement('div');
+    labelWrap.className = 'eufy-toggle__label';
+
+    const labelEl = document.createElement('label');
+    labelEl.setAttribute('for', opts.id);
+    labelEl.textContent = opts.label;
+    labelWrap.appendChild(labelEl);
+
+    if (opts.help) {
+      const helpEl = document.createElement('span');
+      helpEl.className = 'eufy-toggle__help';
+      helpEl.textContent = '?';
+      helpEl.title = opts.help;
+      labelWrap.appendChild(helpEl);
+    }
+
+    const inputGroup = document.createElement('div');
+    inputGroup.className = 'number-input-group';
+
+    const step = opts.step || 1;
+    const min = opts.min !== undefined ? opts.min : 0;
+    const max = opts.max !== undefined ? opts.max : 99999;
+
+    const btnMinus = document.createElement('button');
+    btnMinus.type = 'button';
+    btnMinus.className = 'btn btn-outline-secondary btn-sm';
+    btnMinus.textContent = '−';
+
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.className = 'form-control form-control-sm';
+    input.id = opts.id;
+    input.value = opts.value;
+    input.min = min;
+    input.max = max;
+    input.step = step;
+    input.disabled = !!opts.disabled;
+
+    const btnPlus = document.createElement('button');
+    btnPlus.type = 'button';
+    btnPlus.className = 'btn btn-outline-secondary btn-sm';
+    btnPlus.textContent = '+';
+
+    const fireChange = () => {
+      let val = parseFloat(input.value);
+      if (isNaN(val)) val = min;
+      val = Math.max(min, Math.min(max, val));
+      input.value = val;
+      if (opts.onChange) opts.onChange(val);
+    };
+
+    btnMinus.addEventListener('click', () => {
+      let val = parseFloat(input.value) - step;
+      input.value = Math.max(min, val);
+      fireChange();
+    });
+
+    btnPlus.addEventListener('click', () => {
+      let val = parseFloat(input.value) + step;
+      input.value = Math.min(max, val);
+      fireChange();
+    });
+
+    input.addEventListener('change', fireChange);
+
+    inputGroup.appendChild(btnMinus);
+    inputGroup.appendChild(input);
+    inputGroup.appendChild(btnPlus);
+
+    if (opts.suffix) {
+      const suffixEl = document.createElement('span');
+      suffixEl.className = 'text-muted ms-1';
+      suffixEl.style.fontSize = '0.8rem';
+      suffixEl.textContent = opts.suffix;
+      inputGroup.appendChild(suffixEl);
+    }
+
+    row.appendChild(labelWrap);
+    row.appendChild(inputGroup);
+
+    if (container) container.appendChild(row);
+    return row;
+  },
+};

package/homebridge-ui/public/components/select.js

@@ -0,0 +1,73 @@
+/**
+ * Select component — renders a dropdown with label and optional help tooltip.
+ *
+ * Usage:
+ *   Select.render(container, {
+ *     id: 'snapshot-method',
+ *     label: 'Snapshot Method',
+ *     help: 'How snapshots are captured',
+ *     options: [{ value: '0', label: 'Auto' }, { value: '1', label: 'From Stream' }],
+ *     value: '0',
+ *     onChange: (value) => { ... }
+ *   });
+ */
+// eslint-disable-next-line no-unused-vars
+const Select = {
+  /**
+   * @param {HTMLElement} container
+   * @param {object} opts
+   * @param {string} opts.id
+   * @param {string} opts.label
+   * @param {string} [opts.help]
+   * @param {Array<{value: string, label: string}>} opts.options
+   * @param {string} opts.value - initial selected value
+   * @param {boolean} [opts.disabled]
+   * @param {function} opts.onChange - callback(value: string)
+   * @returns {HTMLElement}
+   */
+  render(container, opts) {
+    const row = document.createElement('div');
+    row.className = 'eufy-toggle';
+
+    const labelWrap = document.createElement('div');
+    labelWrap.className = 'eufy-toggle__label';
+
+    const labelEl = document.createElement('label');
+    labelEl.setAttribute('for', opts.id);
+    labelEl.textContent = opts.label;
+    labelWrap.appendChild(labelEl);
+
+    if (opts.help) {
+      const helpEl = document.createElement('span');
+      helpEl.className = 'eufy-toggle__help';
+      helpEl.textContent = '?';
+      helpEl.title = opts.help;
+      labelWrap.appendChild(helpEl);
+    }
+
+    const selectEl = document.createElement('select');
+    selectEl.className = 'form-select form-select-sm';
+    selectEl.id = opts.id;
+    selectEl.style.width = 'auto';
+    selectEl.style.maxWidth = '200px';
+    selectEl.disabled = !!opts.disabled;
+
+    (opts.options || []).forEach((opt) => {
+      const option = document.createElement('option');
+      option.value = opt.value;
+      option.textContent = opt.label;
+      if (String(opt.value) === String(opts.value)) option.selected = true;
+      selectEl.appendChild(option);
+    });
+
+    selectEl.addEventListener('change', () => {
+      if (opts.onChange) opts.onChange(selectEl.value);
+    });
+
+    row.appendChild(labelWrap);
+    row.appendChild(selectEl);
+
+    if (container) container.appendChild(row);
+    return row;
+  },
+};