@homebridge-plugins/homebridge-eufy-security 4.7.1 → 5.0.0-beta.0

package/homebridge-ui/public/index.html

@@ -1,28 +1,377 @@
-<link rel="stylesheet" href="style.css">
-
-<div id="app">
-  <div class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
-    <div class="spinner-border text-primary" role="status">
-      <span class="visually-hidden">Loading...</span>
-    </div>
-  </div>
-</div>
-
-<script src="utils/countries.js"></script>
-<script src="utils/device-images.js"></script>
-<script src="utils/helpers.js"></script>
-<script src="services/api.js"></script>
-<script src="services/config.js"></script>
-<script src="components/toggle.js"></script>
-<script src="components/select.js"></script>
-<script src="components/number-input.js"></script>
-<script src="components/guard-modes.js"></script>
-<script src="components/device-card.js"></script>
-<script src="views/login.js"></script>
-<script src="views/dashboard.js"></script>
-<script src="views/device-detail.js"></script>
-<script src="views/unsupported-detail.js"></script>
-<script src="views/settings.js"></script>
-<script src="views/diagnostics.js"></script>
-<script src="views/recordings.js"></script>
-<script src="app.js"></script>
+<link rel="stylesheet" href="app.css" />
+
+<main class="shell" data-ui-shell>
+  <header class="masthead" data-masthead>
+    <span class="eufy-logo" aria-hidden="true">
+      <img class="logo-light" src="assets/logo.svg" alt="" />
+      <img class="logo-dark" src="assets/logo-dark.svg" alt="" />
+    </span>
+    <div>
+      <p class="eyebrow" data-i18n="brand"></p>
+      <h1 data-i18n="pageTitle" data-page-title></h1>
+    </div>
+    <button
+      type="button"
+      class="dashboard-action masthead-action"
+      data-masthead-diagnostics
+      data-i18n-aria-label="menuDiagnostics"
+    >
+      <img src="assets/icons/bug-report.svg" alt="" />
+    </button>
+  </header>
+
+  <aside class="legacy-notice" data-legacy-notice hidden aria-labelledby="legacy-notice-title">
+    <img class="notice-icon" src="assets/icons/warning.svg" alt="" />
+    <div>
+      <p class="eyebrow" data-i18n="legacyEyebrow"></p>
+      <h2 id="legacy-notice-title" data-i18n="legacyTitle"></h2>
+      <p data-i18n="legacySummary"></p>
+      <p class="legacy-settings" data-legacy-settings></p>
+    </div>
+    <button type="button" data-legacy-acknowledge data-i18n="acknowledge"></button>
+  </aside>
+
+  <aside class="first-setup" data-first-setup hidden aria-labelledby="first-setup-title">
+    <p class="eyebrow" data-i18n="firstSetupEyebrow"></p>
+    <h2 id="first-setup-title" data-i18n="firstSetupTitle"></h2>
+    <p data-i18n="firstSetupIntro"></p>
+    <p class="first-setup-reason">
+      <strong data-i18n="firstSetupReasonLabel"></strong>
+      <span data-i18n="firstSetupReasonBody"></span>
+    </p>
+    <a
+      href="https://support.eufylife.com/s/article/Share-Your-eufySecurity-Devices-With-Your-Family"
+      target="_blank"
+      rel="noopener noreferrer"
+      data-i18n="shareLink"
+    ></a>
+    <div class="first-setup-confirmation">
+      <label>
+        <input type="checkbox" data-first-setup-ack />
+        <span data-i18n="firstSetupAcknowledgement"></span>
+      </label>
+      <button type="button" data-first-setup-continue disabled data-i18n="firstSetupContinue"></button>
+    </div>
+  </aside>
+
+  <section class="dashboard" data-dashboard hidden aria-labelledby="dashboard-title">
+    <div class="dashboard-status" data-dashboard-state>
+      <img class="status-icon" src="assets/icons/inventory.svg" alt="" />
+      <div>
+        <p class="eyebrow" data-i18n="devicesEyebrow"></p>
+        <h2 id="dashboard-title" data-dashboard-title></h2>
+      </div>
+      <button type="button" class="dashboard-diagnose" data-dashboard-diagnose hidden data-i18n="dashboardDiagnose"></button>
+      <div class="dashboard-actions" role="group" data-i18n-aria-label="dashboardActionsLabel">
+        <button type="button" class="dashboard-action" data-dashboard-authenticate data-i18n-aria-label="menuRelogin">
+          <img src="assets/icons/settings_backup_restore.svg" alt="" />
+        </button>
+        <button type="button" class="dashboard-action" data-menu-diagnostics data-i18n-aria-label="menuDiagnostics">
+          <img src="assets/icons/bug-report.svg" alt="" />
+        </button>
+        <button type="button" class="dashboard-action" data-menu-advanced data-i18n-aria-label="menuAdvanced">
+          <img src="assets/icons/settings.svg" alt="" />
+        </button>
+      </div>
+    </div>
+    <p class="summary" data-dashboard-summary></p>
+
+    <aside class="update-pending" data-update-pending hidden aria-labelledby="update-pending-title">
+      <img class="notice-icon" src="assets/icons/warning.svg" alt="" />
+      <div>
+        <h2 id="update-pending-title" data-i18n="updatePendingTitle"></h2>
+        <p data-update-pending-summary></p>
+        <p class="legacy-settings" data-update-pending-version></p>
+      </div>
+      <button type="button" data-update-restart data-i18n="updatePendingAction"></button>
+    </aside>
+    <div data-device-groups></div>
+
+    <section
+      class="dashboard-panel device-panel"
+      data-device-settings
+      hidden
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="device-settings-title"
+    >
+      <div class="dashboard-panel-header">
+        <button type="button" class="dashboard-page-back" data-device-close data-i18n-aria-label="closeDetails">
+          <span aria-hidden="true">←</span>
+        </button>
+        <div>
+          <p class="eyebrow" data-device-settings-eyebrow></p>
+          <h2 id="device-settings-title" data-device-settings-title></h2>
+        </div>
+      </div>
+      <div class="preference-grid" data-device-settings-controls></div>
+    </section>
+
+    <section class="dashboard-panel advanced-panel" data-advanced-settings hidden aria-labelledby="advanced-title">
+      <div class="dashboard-panel-header">
+        <button type="button" class="dashboard-page-back" data-advanced-close data-i18n-aria-label="closeAdvanced">
+          <span aria-hidden="true">←</span>
+        </button>
+        <img class="dashboard-page-icon" src="assets/icons/settings.svg" alt="" />
+        <div>
+          <p class="eyebrow" data-i18n="advancedEyebrow"></p>
+          <h2 id="advanced-title" data-i18n="advancedTitle"></h2>
+          <p class="summary" data-i18n="advancedSummary"></p>
+        </div>
+      </div>
+      <div class="advanced-fields">
+        <label>
+          <span data-i18n="advancedPollingLabel"></span>
+          <input type="number" min="0" step="1" data-advanced-polling />
+          <small data-i18n="advancedPollingHelp"></small>
+        </label>
+        <label>
+          <span data-i18n="advancedConcurrentMediaLabel"></span>
+          <input type="number" min="0" step="1" data-advanced-concurrent-media />
+          <small data-i18n="advancedConcurrentMediaHelp"></small>
+        </label>
+        <div class="advanced-field">
+          <span class="advanced-field-label" data-i18n="advancedWarmUpLabel"></span>
+          <div class="warm-up-transfer">
+            <div class="warm-up-column">
+              <p id="warm-up-available-title" data-i18n="advancedWarmUpAvailable"></p>
+              <ul data-warm-up-available aria-labelledby="warm-up-available-title"></ul>
+            </div>
+            <div class="warm-up-controls">
+              <button type="button" data-warm-up-add data-i18n-aria-label="advancedWarmUpAdd">
+                <img class="warm-up-arrow" src="assets/icons/keyboard_arrow_right.svg" alt="" />
+              </button>
+              <button type="button" data-warm-up-add-all data-i18n-aria-label="advancedWarmUpAddAll">
+                <img class="warm-up-arrow" src="assets/icons/keyboard_double_arrow_right.svg" alt="" />
+              </button>
+              <button type="button" data-warm-up-remove data-i18n-aria-label="advancedWarmUpRemove">
+                <img class="warm-up-arrow" src="assets/icons/keyboard_arrow_left.svg" alt="" />
+              </button>
+              <button type="button" data-warm-up-remove-all data-i18n-aria-label="advancedWarmUpRemoveAll">
+                <img class="warm-up-arrow" src="assets/icons/keyboard_double_arrow_left.svg" alt="" />
+              </button>
+            </div>
+            <div class="warm-up-column">
+              <p id="warm-up-chosen-title" data-i18n="advancedWarmUpChosen"></p>
+              <ul data-warm-up-chosen aria-labelledby="warm-up-chosen-title"></ul>
+            </div>
+          </div>
+          <small data-i18n="advancedWarmUpHelp"></small>
+        </div>
+        <label>
+          <span data-i18n="advancedFfmpegLabel"></span>
+          <input type="text" data-advanced-ffmpeg />
+          <small data-i18n="advancedFfmpegHelp"></small>
+        </label>
+      </div>
+      <p class="advanced-device-help" data-i18n="advancedDeviceHelp"></p>
+      <p class="advanced-status" role="status" aria-live="polite" data-advanced-status></p>
+    </section>
+  </section>
+
+  <section class="dashboard-panel diagnostics-panel" data-diagnostics hidden aria-labelledby="diagnostics-title">
+    <div class="dashboard-panel-header">
+      <button
+        type="button"
+        class="dashboard-page-back"
+        data-diagnostics-close
+        data-i18n-aria-label="closeDiagnostics"
+      >
+        <span aria-hidden="true">←</span>
+      </button>
+      <img class="dashboard-page-icon" src="assets/icons/bug-report.svg" alt="" />
+      <div>
+        <p class="eyebrow" data-i18n="diagnosticsEyebrow"></p>
+        <h2 id="diagnostics-title" data-i18n="diagnosticsTitle"></h2>
+      </div>
+    </div>
+    <div class="diagnostics-stage">
+      <div class="diagnostics-wizard diagnostics-surface" data-diagnostics-wizard aria-live="polite">
+        <div class="diagnostics-question" data-diagnostics-question>
+          <strong id="diagnostics-question-heading" tabindex="-1" data-diagnostics-question-text></strong>
+          <div class="diagnostics-choice-actions" role="group" aria-labelledby="diagnostics-question-heading">
+            <button
+              type="button"
+              class="diagnostics-secondary-action"
+              data-diagnostics-answer="no"
+              data-i18n="diagnosticsNo"
+            ></button>
+            <button type="button" data-diagnostics-answer="yes" data-i18n="diagnosticsYes"></button>
+          </div>
+          <button
+            type="button"
+            class="diagnostics-quiet-action"
+            data-diagnostics-direct
+            data-i18n="diagnosticsChooseDirectly"
+          ></button>
+        </div>
+        <div class="diagnostics-direct" data-diagnostics-direct-panel hidden>
+          <label>
+            <span data-i18n="diagnosticsProfileLabel"></span>
+            <select data-diagnostics-profile>
+              <option value="startup-authentication" data-i18n="diagnosticsProfileStartup"></option>
+              <option value="device-representation" data-i18n="diagnosticsProfileDevices"></option>
+              <option value="control-state" data-i18n="diagnosticsProfileControl"></option>
+              <option value="live-media" data-i18n="diagnosticsProfileLiveMedia"></option>
+              <option value="hksv-recording" data-i18n="diagnosticsProfileRecording"></option>
+              <option value="dashboard-ui" data-i18n="diagnosticsProfileDashboard"></option>
+              <option value="other" data-i18n="diagnosticsProfileOther"></option>
+            </select>
+          </label>
+          <div class="diagnostics-choice-actions">
+            <button
+              type="button"
+              class="diagnostics-secondary-action"
+              data-diagnostics-direct-back
+              data-i18n="diagnosticsBackToQuestions"
+            ></button>
+            <button type="button" data-diagnostics-direct-choose data-i18n="diagnosticsUseProfile"></button>
+          </div>
+        </div>
+        <div class="diagnostics-frequency" data-diagnostics-frequency hidden>
+          <strong
+            id="diagnostics-frequency-heading"
+            tabindex="-1"
+            data-i18n="diagnosticsQuestionReproduceNow"
+          ></strong>
+          <div class="diagnostics-choice-actions" role="group" aria-labelledby="diagnostics-frequency-heading">
+            <button
+              type="button"
+              class="diagnostics-secondary-action"
+              data-diagnostics-frequency-answer="intermittent"
+              data-i18n="diagnosticsNo"
+            ></button>
+            <button type="button" data-diagnostics-frequency-answer="now" data-i18n="diagnosticsYes"></button>
+          </div>
+          <button
+            type="button"
+            class="diagnostics-quiet-action"
+            data-diagnostics-frequency-back
+            data-i18n="diagnosticsFrequencyBack"
+          ></button>
+        </div>
+        <div class="diagnostics-match" data-diagnostics-match hidden>
+          <p class="eyebrow" data-i18n="diagnosticsBestMatch"></p>
+          <strong id="diagnostics-match-heading" tabindex="-1" data-diagnostics-guidance-title></strong>
+          <p data-diagnostics-mode-summary></p>
+          <div class="diagnostics-choice-actions" role="group" aria-labelledby="diagnostics-match-heading">
+            <button
+              type="button"
+              class="diagnostics-secondary-action"
+              data-diagnostics-reject
+              data-i18n="diagnosticsChangeAnswers"
+            ></button>
+            <button type="button" data-diagnostics-authorize data-i18n="diagnosticsContinue"></button>
+          </div>
+          <p class="diagnostics-privacy" data-i18n="diagnosticsPrivacy"></p>
+        </div>
+      </div>
+      <div class="diagnostics-guidance diagnostics-surface" data-diagnostics-guidance tabindex="-1" hidden>
+        <strong data-diagnostics-phase-title></strong>
+        <div data-diagnostics-guidance-before-section>
+          <span class="guidance-label" data-i18n="diagnosticsBeforeLabel"></span>
+          <p data-diagnostics-guidance-before></p>
+        </div>
+        <div>
+          <span class="guidance-label" data-i18n="diagnosticsActionLabel"></span>
+          <p data-diagnostics-guidance-action></p>
+        </div>
+        <div class="diagnostics-actions" data-diagnostics-actions hidden>
+          <button
+            type="button"
+            data-diagnostics-reproduction
+            disabled
+            data-i18n="diagnosticsStartRecording"
+          ></button>
+        </div>
+      </div>
+      <div class="diagnostics-result diagnostics-surface" data-diagnostics-result hidden>
+        <strong tabindex="-1" data-diagnostics-result-heading data-i18n="diagnosticsEvidenceReady"></strong>
+        <p data-i18n="diagnosticsArchiveReviewIntro"></p>
+        <button type="button" data-diagnostics-review data-i18n="diagnosticsArchiveReview"></button>
+        <div class="diagnostics-manifest" data-diagnostics-manifest hidden></div>
+        <label class="diagnostics-review-confirm" data-diagnostics-review-confirm-label hidden>
+          <input type="checkbox" data-diagnostics-review-confirm />
+          <span data-i18n="diagnosticsArchiveReviewConfirm"></span>
+        </label>
+        <button type="button" data-diagnostics-export disabled hidden data-i18n="diagnosticsArchiveExport"></button>
+        <a
+          data-diagnostics-issue
+          hidden
+          target="_blank"
+          rel="noopener noreferrer"
+          data-i18n="diagnosticsOpenIssue"
+        ></a>
+        <button
+          type="button"
+          class="diagnostics-secondary-action"
+          data-diagnostics-start-another
+          data-i18n="diagnosticsStartAnother"
+        ></button>
+      </div>
+      <p class="diagnostics-status" role="status" aria-live="polite" data-diagnostics-status></p>
+    </div>
+  </section>
+
+  <section class="panel" aria-labelledby="authentication-status" data-authentication="ready" data-setup-content hidden>
+    <div class="status-row">
+      <div>
+        <p class="eyebrow" data-i18n="setupStatusEyebrow"></p>
+        <h2 id="authentication-status" data-i18n="authReady"></h2>
+      </div>
+      <span class="status" data-i18n="available"></span>
+    </div>
+
+    <p class="summary" data-i18n="authSummary"></p>
+
+    <div class="handoff" role="note" aria-label="" data-i18n-aria-label="accountConnectionLabel">
+      <strong data-i18n="oneAccountSession"></strong>
+      <p data-i18n="sessionDetails"></p>
+    </div>
+
+    <ol class="steps" aria-label="" data-i18n-aria-label="setupSequenceLabel">
+      <li class="current" aria-current="step"><span>1</span><strong data-i18n="stepAuthenticate"></strong></li>
+      <li><span>2</span><strong data-i18n="stepDiscover"></strong></li>
+      <li><span>3</span><strong data-i18n="stepDevices"></strong></li>
+    </ol>
+
+    <form class="authentication-form" data-auth-form>
+      <label>
+        <span data-i18n="accountLabel"></span>
+        <input type="email" autocomplete="username" required data-account />
+      </label>
+      <label>
+        <span data-i18n="passwordLabel"></span>
+        <input type="password" autocomplete="current-password" required data-password />
+      </label>
+      <div class="field-row">
+        <label>
+          <span data-i18n="countryLabel"></span>
+          <input type="text" inputmode="text" maxlength="2" required data-country />
+        </label>
+        <label>
+          <span data-i18n="trustedDeviceLabel"></span>
+          <input type="text" maxlength="128" required data-trusted-device-name />
+        </label>
+      </div>
+      <button type="submit" data-auth-submit data-i18n="authenticate"></button>
+    </form>
+
+    <form class="challenge-form" data-challenge-form hidden>
+      <img class="captcha" alt="" data-challenge-image hidden />
+      <label>
+        <span data-challenge-label></span>
+        <input type="text" inputmode="numeric" autocomplete="one-time-code" required data-challenge-answer />
+      </label>
+      <button type="submit" data-challenge-submit data-i18n="continueAuthentication"></button>
+    </form>
+    <p class="authentication-status" role="status" aria-live="polite" data-auth-status></p>
+  </section>
+
+  <p class="footnote" data-i18n="footnote"></p>
+</main>
+
+<script src="js/dashboard.js"></script>
+<script src="js/legacy-settings.js"></script>
+<script src="js/profile-wizard.js"></script>
+<script src="js/app.js"></script>