homebridge-xfinityhome/homebridge-ui/public/index.html

A homebridge plugin to control your Xfinity Home security system.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<p class="text-center">
  <img src="https://user-images.githubusercontent.com/75853497/164517422-300169c1-fb15-4742-a1ee-f524b9d10fe6.png"
    alt="homebridge-XfinityHome logo" style="width: 60%;" />
</p>
<div id="pageIntro" class="text-center" style="display: none;">
  <p class="lead">Thank you for installing <strong>homebridge-XfinityHome</strong></p>
  <p> You can configure your refresh token on the next page </p>
  <button type="button" class="btn btn-primary" id="introContinue"> Continue &rarr; </button>
</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="menuSettings"> Settings </button>
  <button type="button" class="btn btn-primary" id="menuConfigTool"> Proxy Tool </button>
  <button type="button" class="btn btn-primary mr-0" id="menuLogs"> Logs </button>
</div>
<div id="pageConfigTool" class="mt-4" style="display: none;">
  <div id="part1" style="display: none;">
    <h4>Part 1: Profile & Proxy Configuration</h4>
    <dl>
      <dt>1. Download The Profile</dt>
      <dd><span id="qrcode-alt">Open <a id="certificate" href="" target="_blank">Loading...</a> On Your iPhone To Download The
          Profile</span>
        <span id="qrcode" style="display: none;">Scan The QR Code Below To Download The Profile<br><svg id="qrcode-svg"
            style="height: 25vh;"></svg><br>If You Don't Know How Just Say "Hey Siri, Scan A QR Code"</span>
        <br>
        <small>Note: Make Sure You Have Safari Configured As Your Default Browser While Downloading The Profile</small>
      </dd>
      <dt>2. Install & Trust The Profile</dt>
      <dd>
        <ol>
          <li>Launch the <strong>Settings</strong> app on your phone. Just below your name, you will find <strong>Profile
              Downloaded</strong>; tap it. <br>
            <small>If you are using an older iOS, you won't see that. Go to <strong>General</strong>, scroll down, and tap on
              <strong>Profiles & Device Management</strong>; then tap on <strong>NodeMITMProxyCA</strong>.</small>
          </li>
          <li> Hit <strong>Install</strong> on the top-right of the screen. If your phone has a password, you would be asked to enter it. A
            confirmation dialog will pop up; hit <strong>Install</strong> again. Finally hit <strong>Done</strong> to </li>
          <li>On your iPhone, go to <strong>Settings</strong>, open <strong>General</strong>, and tap on <strong>About.</strong> Towards the
            bottom, locate and open <strong>Certificate Trust Settings</strong>. </li>
          <li>Enable full trust for <strong>NodeMITMProxyCA</strong> by flicking its switch. You will be prompted with a warning; just hit
            <strong>Continue</strong>. </li>
        </ol>
      </dd>
      <dt>3. Configure The Proxy</dt>
      <dd>
        <ol>
          <li> On your iPhone, go to <strong>Settings</strong> and open <strong>Wi-Fi</strong>. Hit the info button <strong
              class="text-info">(i)</strong>, for the WiFi connection you are using. This will open the configuration for your connection.
          </li>
          <li>On your WiFi connection screen, scroll to the bottom and hit <strong>Configure Proxy</strong>. This will open the proxy
            configuration screen. </li>
          <li>On the proxy configuration screen, tap on <strong>Manual</strong> to reveal additional settings. Then set the server to <span
              id="ip" class="text-info">Loading...</span> and the port to <span id="port" class="text-info">Loading...</span>
            <br>
            <strong class="text-danger">Leave the Authentication switch off.</strong>
          </li>
        </ol>
      </dd>
      <dt>4. Open <strong>Xfinity Home</strong></dt>
    </dl>
  </div>
  <div id="part2" style="display: none;">
    <h4>Part 2: Token Configuration</h4>
    <dl>
      <dt>1. Open <strong>Xfinity Home</strong> If You Haven't Already</dt>
      <dt>If You Still See This Page Then Follow The Steps Below</dt>
      <dd>
        <ol>
          <li>Go to the <strong>more</strong> tab in the app</li>
          <li>Scroll To The Bottom</li>
          <li>Click <strong>Sign Out</strong></li>
          <li>Re-Login</li>
          <li>If nothing happens open an <a href="https://www.github.com/bloomkd46/homebridge-XfinityHome/issues/new/choose">Issue</a> to
            receive further assistance</li>
        </ol>
      </dd>
    </dl>
  </div>
  <div id="part3" style="display: none;">
    <h4>Part 3: Cleanup</h4>
    <dl>
      <dt>1. Uninstall Xfinity Home</dt>
      <dd><span class="text-danger">Do Not Click <strong>Logout</strong>, It Will Void Your Refresh-Token</span>
      </dd>
      <dt>2. Disable The Proxy</dt>
      <dd>
        <ol>
          <li> On your iPhone, go to Settings and open Wi-Fi. Hit the info button <strong class="text-info">(i)</strong>, for the WiFi
            connection you are using. This will open the configuration for your connection. </li>
          <li>On your WiFi connection screen, scroll to the bottom and hit <strong>Configure Proxy</strong>. This will open the proxy
            configuration screen. </li>
          <li>On the proxy configuration screen, tap on <strong>Off</strong>. </li>
        </ol>
      </dd>
      <dt>Uninstall The Profile</dt>
      <dd>
        <ol>
          <li> On your iPhone, go to <strong>Settings > General > About > Certificate Trust Settings</strong> and switch off full trust for
            <strong>NodeMITMProxyCA</strong>. </li>
          <li> On your iPhone, go to <strong>Settings > General > Profiles & Device Management > NodeMITMProxyCA</strong> and tap
            <strong>Remove Profile</strong>. If one is set, you will be asked to enter your password. You would also be asked to confirm
            that you want to remove the profile; hit Remove. </li>
        </ol>
      </dd>
      <dt> Click <span class="text-warning">Exit Setup</span> Below When You Are Done</dt>
      <dd>Note: Your Config Will Automatically Update</dd>
    </dl>
  </div>
  <button id="exitSetup" type="button" class="btn btn-outline-warning ml-0">Exit Setup</button>
</div>
<div id="pageLogs" class="mt-4" style="display: none;">
  <form>
    <div class="form-group">
      <select class="form-control" id="deviceSelect"></select>
    </div>
  </form>
  <div class="clearfix">
    <button id="logDelete" class="float-right btn btn-danger"><i class="fas fa-trash-alt"></i></button>
    <a id="logDownload" download="" href=""><button class="float-right btn btn-primary"><i class="fas fa-download"></i></button></a>
    <button id="deviceInfo" class="float-right btn btn-info" style="display:none"><i class="fas fa-info-circle"></i></button>
  </div>
  <pre class="card text-nowrap" style="height: 55vh; overflow: scroll" id="logZone"></pre>
  <!-- The Modal -->
  <div class="modal fade" id="deviceDetails">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title" id="deviceName"></h4>
          <button type="button" class="close" onclick="$('#deviceDetails').modal('hide')">&times;</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          <table class="table w-100">
            <thead>
              <tr class="table-active">
                <th scope="col" style="width: 40%;">Field</th>
                <th scope="col" style="width: 60%;" id="displayName">Value</th>
              </tr>
            </thead>
            <tbody id="deviceDetailsTable">
            </tbody>
          </table>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" onclick="$('#deviceDetails').modal('hide')">Close</button>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="bundle.js"></script>