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

package/homebridge-ui/public/views/settings.js

@@ -0,0 +1,389 @@
+/**
+ * Settings View — global plugin settings with progressive disclosure.
+ * Simple: re-login, download logs, reset.
+ * Advanced: polling, livestream, guard modes, auto-sync, etc.
+ */
+// eslint-disable-next-line no-unused-vars
+const SettingsView = {
+
+  _advancedOpen: false,
+  _downloadInProgress: false,
+
+  async render(container) {
+    container.innerHTML = '';
+    this._advancedOpen = false;
+
+    const config = await Config.get();
+
+    // Header
+    const header = document.createElement('div');
+    header.className = 'eufy-header';
+
+    const backBtn = document.createElement('button');
+    backBtn.className = 'btn btn-link p-0';
+    backBtn.innerHTML = '← Back';
+    backBtn.style.textDecoration = 'none';
+    backBtn.addEventListener('click', () => App.navigate('dashboard'));
+
+    const titleEl = document.createElement('h4');
+    titleEl.textContent = 'Settings';
+
+    header.appendChild(backBtn);
+    header.appendChild(titleEl);
+    // Empty spacer for alignment
+    header.appendChild(document.createElement('div'));
+    container.appendChild(header);
+
+    // ── Quick Actions ──
+    const actionsSection = document.createElement('div');
+    actionsSection.className = 'settings-section';
+
+    const actionsTitle = document.createElement('div');
+    actionsTitle.className = 'detail-section__title';
+    actionsTitle.textContent = 'Quick Actions';
+    actionsSection.appendChild(actionsTitle);
+
+    const btnRow = document.createElement('div');
+    btnRow.className = 'settings-btn-row';
+
+    // Re-login button
+    const btnLogin = document.createElement('button');
+    btnLogin.className = 'btn btn-outline-primary btn-sm';
+    btnLogin.textContent = '🔄 Re-login / Re-fetch new devices';
+    btnLogin.addEventListener('click', () => App.navigate('login'));
+    btnRow.appendChild(btnLogin);
+
+    // Download logs button
+    const btnLogs = document.createElement('button');
+    btnLogs.className = 'btn btn-outline-secondary btn-sm';
+    btnLogs.textContent = '📋 Download Logs';
+    btnLogs.addEventListener('click', () => this._downloadLogs(container));
+    btnRow.appendChild(btnLogs);
+
+    // Bug report button
+    const btnBug = document.createElement('button');
+    btnBug.className = 'btn btn-outline-secondary btn-sm';
+    btnBug.textContent = '🐛 Report Issue';
+    btnBug.addEventListener('click', () => this._reportIssue());
+    btnRow.appendChild(btnBug);
+
+    // Reset plugin button
+    const btnReset = document.createElement('button');
+    btnReset.className = 'btn btn-outline-danger btn-sm';
+    btnReset.textContent = '🗑️ Reset Plugin';
+    btnReset.addEventListener('click', () => this._confirmReset(container));
+    btnRow.appendChild(btnReset);
+
+    actionsSection.appendChild(btnRow);
+
+    // Log download progress placeholder
+    const logProgress = document.createElement('div');
+    logProgress.id = 'log-download-progress';
+    actionsSection.appendChild(logProgress);
+
+    container.appendChild(actionsSection);
+
+    // ── Credentials Info ──
+    const credsSection = document.createElement('div');
+    credsSection.className = 'settings-section';
+
+    const credsTitle = document.createElement('div');
+    credsTitle.className = 'detail-section__title';
+    credsTitle.textContent = 'Account';
+    credsSection.appendChild(credsTitle);
+
+    const credsInfo = document.createElement('div');
+    credsInfo.className = 'text-muted';
+    credsInfo.style.fontSize = '0.85rem';
+    const email = config.username || 'Not configured';
+    const country = config.country || '—';
+    credsInfo.innerHTML = `
+      <div class="mb-1"><strong>Email:</strong> ${this._escHtml(email)}</div>
+      <div><strong>Country:</strong> ${country}</div>
+    `;
+    credsSection.appendChild(credsInfo);
+    container.appendChild(credsSection);
+
+    // ── Debugging ──
+    const debugSection = document.createElement('div');
+    debugSection.className = 'settings-section';
+
+    const debugTitle = document.createElement('div');
+    debugTitle.className = 'detail-section__title';
+    debugTitle.textContent = 'Debugging';
+    debugSection.appendChild(debugTitle);
+
+    Toggle.render(debugSection, {
+      id: 'toggle-detailed-log',
+      label: 'Enable Debug Logging',
+      help: 'Enable verbose logging for troubleshooting. When reporting issues, enable this, reproduce the problem, then use the "Download Logs" button above to capture everything.',
+      checked: !!config.enableDetailedLogging,
+      onChange: async (checked) => {
+        await Config.updateGlobal({ enableDetailedLogging: checked });
+      },
+    });
+
+    const debugHint = document.createElement('div');
+    debugHint.className = 'text-muted mt-1';
+    debugHint.style.fontSize = '0.8rem';
+    debugHint.innerHTML = '💡 After enabling, reproduce the issue, then click <strong>📋 Download Logs</strong> above to collect the debug output.<br>⚠️ Remember to disable debug logging once you\'re done — it generates a lot of data and may impact performance.';
+    debugSection.appendChild(debugHint);
+
+    container.appendChild(debugSection);
+
+    // ── Advanced Settings ──
+    const advBtn = document.createElement('button');
+    advBtn.className = 'advanced-toggle';
+    advBtn.innerHTML = `
+      <span class="advanced-toggle__chevron" id="settings-adv-chevron">▶</span>
+      Advanced Settings
+    `;
+    advBtn.addEventListener('click', () => {
+      this._advancedOpen = !this._advancedOpen;
+      const advSection = container.querySelector('#settings-advanced');
+      if (advSection) advSection.style.display = this._advancedOpen ? 'block' : 'none';
+      const chevron = container.querySelector('#settings-adv-chevron');
+      if (chevron) chevron.classList.toggle('advanced-toggle__chevron--open', this._advancedOpen);
+    });
+    container.appendChild(advBtn);
+
+    const advSection = document.createElement('div');
+    advSection.id = 'settings-advanced';
+    advSection.style.display = 'none';
+
+    // ── Polling & Livestream ──
+    const perfTitle = document.createElement('div');
+    perfTitle.className = 'detail-section__title';
+    perfTitle.textContent = 'Performance';
+    advSection.appendChild(perfTitle);
+
+    NumberInput.render(advSection, {
+      id: 'num-polling',
+      label: 'Polling Interval',
+      help: 'How often (in minutes) to poll the Eufy Cloud for updates. Higher values = less API usage.',
+      value: config.pollingIntervalMinutes || 10,
+      min: 1, max: 120, step: 1,
+      suffix: 'min',
+      onChange: async (val) => {
+        await Config.updateGlobal({ pollingIntervalMinutes: val });
+      },
+    });
+
+    NumberInput.render(advSection, {
+      id: 'num-livestream',
+      label: 'Max Livestream Duration',
+      help: 'Maximum duration (in seconds) for a single livestream session.',
+      value: config.CameraMaxLivestreamDuration || 30,
+      min: 10, max: 86400, step: 10,
+      suffix: 'sec',
+      onChange: async (val) => {
+        await Config.updateGlobal({ CameraMaxLivestreamDuration: val });
+      },
+    });
+
+    // ── Default Guard Modes ──
+    const guardTitle = document.createElement('div');
+    guardTitle.className = 'detail-section__title mt-3';
+    guardTitle.textContent = 'Default Guard Modes';
+    advSection.appendChild(guardTitle);
+
+    const guardHelp = document.createElement('p');
+    guardHelp.className = 'text-muted';
+    guardHelp.style.fontSize = '0.8rem';
+    guardHelp.textContent = 'Default HomeKit-to-Eufy guard mode mapping. Can be overridden per station.';
+    advSection.appendChild(guardHelp);
+
+    GuardModes.render(advSection, {
+      hkHome: config.hkHome ?? 1,
+      hkAway: config.hkAway ?? 0,
+      hkNight: config.hkNight ?? 1,
+      hkOff: config.hkOff ?? 63,
+      onChange: async (modes) => {
+        await Config.updateGlobal(modes);
+      },
+    });
+
+    // ── Misc Toggles ──
+    const miscTitle = document.createElement('div');
+    miscTitle.className = 'detail-section__title mt-3';
+    miscTitle.textContent = 'Miscellaneous';
+    advSection.appendChild(miscTitle);
+
+    Toggle.render(advSection, {
+      id: 'toggle-auto-sync',
+      label: 'Auto Sync Station',
+      help: 'Automatically synchronize station mode with HomeKit security system.',
+      checked: !!config.autoSyncStation,
+      onChange: async (checked) => {
+        await Config.updateGlobal({ autoSyncStation: checked });
+      },
+    });
+
+    Toggle.render(advSection, {
+      id: 'toggle-clean-cache',
+      label: 'Clean Cache',
+      help: 'Remove stale cached accessories on next restart.',
+      checked: !!config.cleanCache,
+      onChange: async (checked) => {
+        await Config.updateGlobal({ cleanCache: checked });
+      },
+    });
+
+    Toggle.render(advSection, {
+      id: 'toggle-omit-logs',
+      label: 'Omit Log Files',
+      help: 'Disable writing plugin log files to disk.',
+      checked: !!config.omitLogFiles,
+      onChange: async (checked) => {
+        await Config.updateGlobal({ omitLogFiles: checked });
+      },
+    });
+
+    Toggle.render(advSection, {
+      id: 'toggle-ignore-multi-warning',
+      label: 'Ignore Multiple Devices Warning',
+      help: 'Suppress warning when multiple plugins manage the same device.',
+      checked: !!config.ignoreMultipleDevicesWarning,
+      onChange: async (checked) => {
+        await Config.updateGlobal({ ignoreMultipleDevicesWarning: checked });
+      },
+    });
+
+    Toggle.render(advSection, {
+      id: 'toggle-pkcs1',
+      label: 'Embedded PKCS1 Support',
+      help: 'Enable embedded PKCS1 support for device communication.',
+      checked: !!config.enableEmbeddedPKCS1Support,
+      onChange: async (checked) => {
+        await Config.updateGlobal({ enableEmbeddedPKCS1Support: checked });
+      },
+    });
+
+    container.appendChild(advSection);
+
+
+  },
+
+  // ===== Report Issue =====
+  async _reportIssue() {
+    try {
+      homebridge.toast.info('Gathering system info...', 'Report Issue');
+      const info = await Api.getSystemInfo();
+
+      // Build environment section for the template
+      const envSection = [
+        `- **Plugin Version**: ${info.pluginVersion}`,
+        `- **Homebridge Version**: ${info.homebridgeVersion}`,
+        `- **Node.js Version**: ${info.nodeVersion}`,
+        `- **OS**: ${info.os}`,
+        `- **eufy-security-client**: ${info.eufyClientVersion}`,
+      ].join('\n');
+
+      // Build the URL with query params matching the bug report template field IDs
+      const params = new URLSearchParams();
+      params.set('template', 'bug_report.yml');
+      params.set('environment', envSection);
+
+      const url = 'https://github.com/homebridge-plugins/homebridge-eufy-security/issues/new?' + params.toString();
+      window.open(url, '_blank');
+    } catch (e) {
+      // Fallback: open without pre-fill
+      homebridge.toast.error('Could not gather system info. Opening blank issue form.');
+      window.open('https://github.com/homebridge-plugins/homebridge-eufy-security/issues/new?template=bug_report.yml', '_blank');
+    }
+  },
+
+  // ===== Log Download =====
+  async _downloadLogs(container) {
+    if (this._downloadInProgress) return;
+    this._downloadInProgress = true;
+
+    const progressArea = container.querySelector('#log-download-progress');
+    if (progressArea) {
+      progressArea.innerHTML = `
+        <div class="log-progress mt-2">
+          <div class="progress">
+            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 10%" id="log-progress-bar"></div>
+          </div>
+          <small class="text-muted" id="log-progress-status">Preparing...</small>
+        </div>
+      `;
+    }
+
+    // Listen for progress events
+    Api.onDownloadLogsProgress((data) => {
+      const bar = document.querySelector('#log-progress-bar');
+      const status = document.querySelector('#log-progress-status');
+      if (bar) bar.style.width = data.progress + '%';
+      if (status) status.textContent = data.status;
+    });
+
+    try {
+      const buffer = await Api.downloadLogs();
+      // Convert to base64 data URI (blob: URLs are blocked by Homebridge CSP)
+      const bytes = new Uint8Array(buffer.data || buffer);
+      let binary = '';
+      for (let i = 0; i < bytes.length; i++) {
+        binary += String.fromCharCode(bytes[i]);
+      }
+      const base64 = btoa(binary);
+      const a = document.createElement('a');
+      a.href = 'data:application/zip;base64,' + base64;
+      a.download = 'eufy-security-logs.zip';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+
+      homebridge.toast.success('Logs downloaded.');
+    } catch (e) {
+      homebridge.toast.error('Failed to download logs: ' + (e.message || e));
+    } finally {
+      this._downloadInProgress = false;
+      if (progressArea) progressArea.innerHTML = '';
+    }
+  },
+
+  // ===== Reset Confirmation =====
+  _confirmReset(container) {
+    const existing = container.querySelector('#reset-confirm');
+    if (existing) { existing.remove(); return; }
+
+    const confirm = document.createElement('div');
+    confirm.id = 'reset-confirm';
+    confirm.className = 'alert alert-danger mt-3';
+    confirm.innerHTML = `
+      <strong>Are you sure?</strong> This will delete all persistent data, stored accessories, and logs.
+      You will need to log in again.
+      <div class="mt-2">
+        <button class="btn btn-danger btn-sm me-2" id="btn-confirm-reset">Yes, Reset Everything</button>
+        <button class="btn btn-outline-secondary btn-sm" id="btn-cancel-reset">Cancel</button>
+      </div>
+    `;
+
+    confirm.querySelector('#btn-confirm-reset').addEventListener('click', async () => {
+      try {
+        await Api.resetPlugin();
+        // Clear config
+        await Config.update({
+          platform: 'EufySecurity',
+        });
+        await Config.save();
+        homebridge.toast.success('Plugin reset. Please restart Homebridge.');
+        App.state.stations = [];
+        App.navigate('login');
+      } catch (e) {
+        homebridge.toast.error('Reset failed: ' + (e.message || e));
+      }
+    });
+
+    confirm.querySelector('#btn-cancel-reset').addEventListener('click', () => {
+      confirm.remove();
+    });
+
+    container.appendChild(confirm);
+  },
+
+  _escHtml(str) {
+    return Helpers.escHtml(str);
+  },
+};

package/homebridge-ui/public/views/unsupported-detail.js

@@ -0,0 +1,216 @@
+/**
+ * Unsupported Device Detail View — shows device info dump and guided CTA
+ * for requesting support via GitHub.
+ */
+// eslint-disable-next-line no-unused-vars
+const UnsupportedDetailView = {
+
+  _container: null,
+
+  /**
+   * @param {HTMLElement} container
+   * @param {string} id - uniqueId / serial number
+   */
+  async render(container, id) {
+    this._container = container;
+    container.innerHTML = '';
+
+    const accessory = this._findAccessory(id);
+
+    if (!accessory) {
+      container.innerHTML = `
+        <div class="text-center text-muted py-5">
+          <p>Device not found.</p>
+          <button class="btn btn-outline-secondary btn-sm" id="btn-back">Back to Dashboard</button>
+        </div>`;
+      container.querySelector('#btn-back').addEventListener('click', () => App.navigate('dashboard'));
+      return;
+    }
+
+    // Header (no image for unsupported)
+    this._renderHeader(container, accessory);
+
+    // Main content
+    const content = document.createElement('div');
+    this._renderDetail(content, accessory);
+    container.appendChild(content);
+  },
+
+  // ===== Header =====
+  _renderHeader(container, accessory) {
+    const header = document.createElement('div');
+    header.className = 'detail-header';
+
+    const backBtn = document.createElement('button');
+    backBtn.className = 'btn btn-link p-0';
+    backBtn.innerHTML = '← Back';
+    backBtn.style.textDecoration = 'none';
+    backBtn.addEventListener('click', () => App.navigate('dashboard'));
+
+    const info = document.createElement('div');
+    info.className = 'detail-header__info';
+    info.innerHTML = `
+      <h5>${Helpers.escHtml(accessory.displayName)}</h5>
+      <small>${accessory.typename || ('Type ' + accessory.type)} · ${accessory.uniqueId}</small>
+    `;
+
+    header.appendChild(backBtn);
+    header.appendChild(info);
+    container.appendChild(header);
+  },
+
+  // ===== Detail Content =====
+  _renderDetail(content, accessory) {
+    const REPO = 'homebridge-plugins/homebridge-eufy-security';
+    const LABEL = 'device-support';
+    const COMPAT_URL = 'https://bropat.github.io/eufy-security-client/#/supported_devices';
+
+    const section = document.createElement('div');
+    section.className = 'detail-section unsupported-detail';
+
+    // Description
+    const desc = document.createElement('p');
+    desc.className = 'text-muted';
+    desc.innerHTML =
+      '<strong>ℹ️ This device was detected but is not yet supported.</strong><br />' +
+      'New device support must first be added to the eufy-security-client library. ' +
+      'If your device is not on the compatibility list, please <strong>search for existing issues first</strong> before opening a new one.';
+    section.appendChild(desc);
+
+    // Device info dump — all available data in one box
+    const props = accessory.properties || {};
+    const deviceInfo = {
+      uniqueId: accessory.uniqueId,
+      displayName: accessory.displayName,
+      type: accessory.type,
+      typename: accessory.typename || undefined,
+      ...props,
+    };
+    // Remove potentially large/sensitive fields
+    delete deviceInfo.picture;
+
+    // CTA stepper + buttons
+    const stepsWrap = document.createElement('div');
+    stepsWrap.className = 'unsupported-detail__steps';
+
+    // Stepper frieze
+    const stepper = document.createElement('div');
+    stepper.className = 'unsupported-stepper';
+    const steps = [
+      { num: '1', label: 'Check', color: 'success' },
+      { num: '2', label: 'Search', color: 'primary' },
+      { num: '3', label: 'Create', color: 'danger' },
+    ];
+    steps.forEach((step, i) => {
+      const stepEl = document.createElement('div');
+      stepEl.className = 'unsupported-stepper__step';
+      stepEl.innerHTML = `<span class="unsupported-stepper__circle unsupported-stepper__circle--${step.color}">${step.num}</span><span class="unsupported-stepper__label">${step.label}</span>`;
+      stepper.appendChild(stepEl);
+      if (i < steps.length - 1) {
+        const line = document.createElement('div');
+        line.className = 'unsupported-stepper__line';
+        stepper.appendChild(line);
+      }
+    });
+    stepsWrap.appendChild(stepper);
+
+    // Buttons row
+    const btnGroup = document.createElement('div');
+    btnGroup.className = 'unsupported-detail__actions';
+
+    // 1) Check compatibility list
+    const compatBtn = document.createElement('a');
+    compatBtn.href = COMPAT_URL;
+    compatBtn.target = '_blank';
+    compatBtn.rel = 'noopener noreferrer';
+    compatBtn.className = 'btn btn-success';
+    compatBtn.textContent = 'Check Compatibility ↗';
+    btnGroup.appendChild(compatBtn);
+
+    // 2) Search existing issues with label
+    const searchQuery = encodeURIComponent(`is:issue label:${LABEL} ${accessory.type}`);
+    const searchBtn = document.createElement('a');
+    searchBtn.href = `https://github.com/${REPO}/issues?q=${searchQuery}`;
+    searchBtn.target = '_blank';
+    searchBtn.rel = 'noopener noreferrer';
+    searchBtn.className = 'btn btn-outline-primary';
+    searchBtn.textContent = 'Search Existing Issues ↗';
+    btnGroup.appendChild(searchBtn);
+
+    // 3) Create new issue using the device_support template
+    const model = props.model || accessory.type;
+    const issueTitle = encodeURIComponent(`[Device Support] ${model} (Type ${accessory.type})`);
+    const deviceDump = JSON.stringify(deviceInfo, null, 2);
+    const templateParams = [
+      `template=device_support.yml`,
+      `title=${issueTitle}`,
+      `labels=${LABEL}`,
+      `device_info=${encodeURIComponent(deviceDump)}`,
+    ].join('&');
+    const createBtn = document.createElement('a');
+    createBtn.href = `https://github.com/${REPO}/issues/new?${templateParams}`;
+    createBtn.target = '_blank';
+    createBtn.rel = 'noopener noreferrer';
+    createBtn.className = 'btn btn-outline-danger';
+    createBtn.textContent = 'Create an Issue ↗';
+    btnGroup.appendChild(createBtn);
+
+    stepsWrap.appendChild(btnGroup);
+    section.appendChild(stepsWrap);
+
+    // External links note
+    const extNote = document.createElement('p');
+    extNote.className = 'text-muted';
+    extNote.style.cssText = 'font-size: 0.75rem; text-align: right;';
+    extNote.textContent = '↗ These links open in a new browser tab on GitHub.';
+    section.appendChild(extNote);
+
+    const infoTitle = document.createElement('div');
+    infoTitle.className = 'detail-section__title';
+    infoTitle.textContent = 'Device Information';
+    section.appendChild(infoTitle);
+
+    // JSON dump with copy button overlay
+    const dumpWrap = document.createElement('div');
+    dumpWrap.className = 'unsupported-detail__dump-wrap';
+
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'unsupported-detail__copy-btn';
+    copyBtn.textContent = '📋 Copy';
+    copyBtn.addEventListener('click', () => {
+      navigator.clipboard.writeText(pre.textContent).then(() => {
+        copyBtn.textContent = '✓ Copied!';
+        setTimeout(() => { copyBtn.textContent = '📋 Copy'; }, 2000);
+      });
+    });
+
+    const pre = document.createElement('pre');
+    pre.className = 'unsupported-detail__dump';
+    pre.textContent = JSON.stringify(deviceInfo, null, 2);
+
+    dumpWrap.appendChild(copyBtn);
+    dumpWrap.appendChild(pre);
+    section.appendChild(dumpWrap);
+
+    content.appendChild(section);
+  },
+
+  // ===== Helpers =====
+
+  /**
+   * Find an accessory (device or station) by uniqueId across all stations.
+   * For unsupported standalone stations the device may be null, so we fall back to the station.
+   * @param {string} id
+   * @returns {object|null}
+   */
+  _findAccessory(id) {
+    const stations = App.state.stations || [];
+    for (const s of stations) {
+      if (s.uniqueId === id) return s;
+      for (const d of s.devices || []) {
+        if (d.uniqueId === id) return d;
+      }
+    }
+    return null;
+  },
+};