Add "Reachable Phones" feature to chrome://proximity-auth.

This tab shows phones that have recently responded to a CryptAuth ping, so we
can be confident that the phones are online and reachable.

BUG=409158
TEST=manual

Review URL: https://codereview.chromium.org/1259093006

Cr-Commit-Position: refs/heads/master@{#341796}

12 files changed, 358 insertions, 74 deletions

diff --git a/components/proximity_auth/webui/BUILD.gn b/components/proximity_auth/webui/BUILD.gn
index 69d5ec7..39dea14 100644
--- a/components/proximity_auth/webui/BUILD.gn
+++ b/components/proximity_auth/webui/BUILD.gn
@@ -12,6 +12,8 @@ static_library("webui") {
     "proximity_auth_ui_delegate.h",
     "proximity_auth_webui_handler.cc",
     "proximity_auth_webui_handler.h",
+    "reachable_phone_flow.cc",
+    "reachable_phone_flow.h",
     "url_constants.cc",
     "url_constants.h",
   ]
diff --git a/components/proximity_auth/webui/proximity_auth_ui.cc b/components/proximity_auth/webui/proximity_auth_ui.cc
index be6884e..215be47 100644
--- a/components/proximity_auth/webui/proximity_auth_ui.cc
+++ b/components/proximity_auth/webui/proximity_auth_ui.cc
@@ -41,6 +41,10 @@ ProximityAuthUI::ProximityAuthUI(content::WebUI* web_ui,
                           IDR_PROXIMITY_AUTH_ELIGIBLE_DEVICES_HTML);
   source->AddResourcePath("eligible-devices.js",
                           IDR_PROXIMITY_AUTH_ELIGIBLE_DEVICES_JS);
+  source->AddResourcePath("reachable-devices.html",
+                          IDR_PROXIMITY_AUTH_REACHABLE_DEVICES_HTML);
+  source->AddResourcePath("reachable-devices.js",
+                          IDR_PROXIMITY_AUTH_REACHABLE_DEVICES_JS);
   source->AddResourcePath("cryptauth_interface.js",
                           IDR_PROXIMITY_AUTH_CRYPTAUTH_INTERFACE_JS);
 
diff --git a/components/proximity_auth/webui/proximity_auth_webui_handler.cc b/components/proximity_auth/webui/proximity_auth_webui_handler.cc
index 9b55d6c..a1a1319 100644
--- a/components/proximity_auth/webui/proximity_auth_webui_handler.cc
+++ b/components/proximity_auth/webui/proximity_auth_webui_handler.cc
@@ -26,6 +26,7 @@
 #include "components/proximity_auth/secure_context.h"
 #include "components/proximity_auth/webui/cryptauth_enroller_factory_impl.h"
 #include "components/proximity_auth/webui/proximity_auth_ui_delegate.h"
+#include "components/proximity_auth/webui/reachable_phone_flow.h"
 #include "content/public/browser/browser_thread.h"
 #include "content/public/browser/web_ui.h"
 #include "device/bluetooth/bluetooth_uuid.h"
@@ -128,6 +129,11 @@ void ProximityAuthWebUIHandler::RegisterMessages() {
                  base::Unretained(this)));
 
   web_ui()->RegisterMessageCallback(
+      "findReachableDevices",
+      base::Bind(&ProximityAuthWebUIHandler::FindReachableDevices,
+                 base::Unretained(this)));
+
+  web_ui()->RegisterMessageCallback(
       "getLocalState", base::Bind(&ProximityAuthWebUIHandler::GetLocalState,
                                   base::Unretained(this)));
 
@@ -232,6 +238,20 @@ void ProximityAuthWebUIHandler::FindEligibleUnlockDevices(
                  weak_ptr_factory_.GetWeakPtr()));
 }
 
+void ProximityAuthWebUIHandler::FindReachableDevices(
+    const base::ListValue* args) {
+  if (reachable_phone_flow_) {
+    PA_LOG(INFO) << "Waiting for existing ReachablePhoneFlow to finish.";
+    return;
+  }
+
+  reachable_phone_flow_.reset(
+      new ReachablePhoneFlow(cryptauth_client_factory_.get()));
+  reachable_phone_flow_->Run(
+      base::Bind(&ProximityAuthWebUIHandler::OnReachablePhonesFound,
+                 weak_ptr_factory_.GetWeakPtr()));
+}
+
 void ProximityAuthWebUIHandler::ForceEnrollment(const base::ListValue* args) {
   if (enrollment_manager_) {
     enrollment_manager_->ForceEnrollmentNow(
@@ -383,6 +403,17 @@ void ProximityAuthWebUIHandler::OnFoundEligibleUnlockDevices(
                                    eligible_devices, ineligible_devices);
 }
 
+void ProximityAuthWebUIHandler::OnReachablePhonesFound(
+    const std::vector<cryptauth::ExternalDeviceInfo>& reachable_phones) {
+  reachable_phone_flow_.reset();
+  base::ListValue device_list;
+  for (const auto& external_device : reachable_phones) {
+    device_list.Append(ExternalDeviceInfoToDictionary(external_device));
+  }
+  web_ui()->CallJavascriptFunction("CryptAuthInterface.onGotReachableDevices",
+                                   device_list);
+}
+
 void ProximityAuthWebUIHandler::GetLocalState(const base::ListValue* args) {
   scoped_ptr<base::DictionaryValue> enrollment_state =
       GetEnrollmentStateDictionary();
diff --git a/components/proximity_auth/webui/proximity_auth_webui_handler.h b/components/proximity_auth/webui/proximity_auth_webui_handler.h
index ce6f3b69..d0e8907 100644
--- a/components/proximity_auth/webui/proximity_auth_webui_handler.h
+++ b/components/proximity_auth/webui/proximity_auth_webui_handler.h
@@ -22,12 +22,17 @@ namespace base {
 class ListValue;
 }
 
+namespace cryptauth {
+class ExternalDeviceInfo;
+}
+
 namespace proximity_auth {
 
 class Authenticator;
 class BluetoothConnection;
 class Connection;
 class ClientImpl;
+class ReachablePhoneFlow;
 struct RemoteStatusUpdate;
 class SecureContext;
 
@@ -65,6 +70,7 @@ class ProximityAuthWebUIHandler : public content::WebUIMessageHandler,
   void GetLogMessages(const base::ListValue* args);
   void ClearLogBuffer(const base::ListValue* args);
   void FindEligibleUnlockDevices(const base::ListValue* args);
+  void FindReachableDevices(const base::ListValue* args);
   void GetLocalState(const base::ListValue* args);
   void ForceEnrollment(const base::ListValue* args);
   void ForceDeviceSync(const base::ListValue* args);
@@ -82,6 +88,10 @@ class ProximityAuthWebUIHandler : public content::WebUIMessageHandler,
   void OnFoundEligibleUnlockDevices(
       const cryptauth::FindEligibleUnlockDevicesResponse& response);
 
+  // Callback when |reachable_phone_flow_| completes.
+  void OnReachablePhonesFound(
+      const std::vector<cryptauth::ExternalDeviceInfo>& reachable_phones);
+
   // Called when the key agreement of PSK of the remote device completes.
   void OnPSKDerived(const cryptauth::ExternalDeviceInfo& unlock_key,
                     const std::string& persistent_symmetric_key);
@@ -138,6 +148,9 @@ class ProximityAuthWebUIHandler : public content::WebUIMessageHandler,
   // We only support one concurrent API call.
   scoped_ptr<CryptAuthClient> cryptauth_client_;
 
+  // The flow for getting a list of reachable phones.
+  scoped_ptr<ReachablePhoneFlow> reachable_phone_flow_;
+
   // True if the WebContents backing the WebUI has been initialized.
   bool web_contents_initialized_;
 
diff --git a/components/proximity_auth/webui/reachable_phone_flow.cc b/components/proximity_auth/webui/reachable_phone_flow.cc
new file mode 100644
index 0000000..fdd0a0a
--- /dev/null
+++ b/components/proximity_auth/webui/reachable_phone_flow.cc
@@ -0,0 +1,92 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "components/proximity_auth/webui/reachable_phone_flow.h"
+
+#include <algorithm>
+
+#include "base/bind.h"
+#include "base/location.h"
+#include "base/thread_task_runner_handle.h"
+#include "base/time/time.h"
+#include "components/proximity_auth/cryptauth/cryptauth_client.h"
+#include "components/proximity_auth/cryptauth/proto/cryptauth_api.pb.h"
+#include "components/proximity_auth/logging/logging.h"
+
+namespace proximity_auth {
+
+namespace {
+
+// The time, in milliseconds, to wait for phones to respond to the CryptAuth
+// ping before querying for reachable devices.
+const int kWaitTimeMillis = 7000;
+
+}  // namespace
+
+ReachablePhoneFlow::ReachablePhoneFlow(CryptAuthClientFactory* client_factory)
+    : client_factory_(client_factory), weak_ptr_factory_(this) {}
+
+ReachablePhoneFlow::~ReachablePhoneFlow() {}
+
+void ReachablePhoneFlow::Run(const ReachablePhonesCallback& callback) {
+  if (!callback_.is_null()) {
+    PA_LOG(ERROR) << "Flow already started.";
+    callback.Run(std::vector<cryptauth::ExternalDeviceInfo>());
+    return;
+  }
+
+  callback_ = callback;
+  client_ = client_factory_->CreateInstance();
+
+  // Ping the user's devices to update themselves with CryptAuth.
+  cryptauth::SendDeviceSyncTickleRequest tickle_request;
+  tickle_request.set_tickle_type(cryptauth::UPDATE_ENROLLMENT);
+  client_->SendDeviceSyncTickle(
+      tickle_request, base::Bind(&ReachablePhoneFlow::OnSyncTickleSuccess,
+                                 weak_ptr_factory_.GetWeakPtr()),
+      base::Bind(&ReachablePhoneFlow::OnApiCallError,
+                 weak_ptr_factory_.GetWeakPtr()));
+}
+
+void ReachablePhoneFlow::OnSyncTickleSuccess(
+    const cryptauth::SendDeviceSyncTickleResponse& response) {
+  PA_LOG(INFO) << "Waiting " << kWaitTimeMillis
+               << "ms for phones to callback to CryptAuth...";
+  base::ThreadTaskRunnerHandle::Get()->PostDelayedTask(
+      FROM_HERE, base::Bind(&ReachablePhoneFlow::QueryReachablePhones,
+                            weak_ptr_factory_.GetWeakPtr()),
+      base::TimeDelta::FromMilliseconds(kWaitTimeMillis));
+}
+
+void ReachablePhoneFlow::QueryReachablePhones() {
+  // Ask CryptAuth for the devices that updated themselves within the last
+  // |kWaitTimeMillis| milliseconds.
+  client_ = client_factory_->CreateInstance();
+  cryptauth::FindEligibleUnlockDevicesRequest find_devices_request;
+  find_devices_request.set_max_last_update_time_delta_millis(kWaitTimeMillis);
+  client_->FindEligibleUnlockDevices(
+      find_devices_request,
+      base::Bind(&ReachablePhoneFlow::OnFindEligibleUnlockDevicesSuccess,
+                 weak_ptr_factory_.GetWeakPtr()),
+      base::Bind(&ReachablePhoneFlow::OnApiCallError,
+                 weak_ptr_factory_.GetWeakPtr()));
+}
+
+void ReachablePhoneFlow::OnFindEligibleUnlockDevicesSuccess(
+    const cryptauth::FindEligibleUnlockDevicesResponse& response) {
+  PA_LOG(INFO) << "Found " << response.eligible_devices_size()
+               << " reachable phone(s).";
+  std::vector<cryptauth::ExternalDeviceInfo> reachable_phones(
+      response.eligible_devices_size());
+  std::copy(response.eligible_devices().begin(),
+            response.eligible_devices().end(), reachable_phones.begin());
+  callback_.Run(reachable_phones);
+}
+
+void ReachablePhoneFlow::OnApiCallError(const std::string& error) {
+  PA_LOG(ERROR) << "Error making api call: " << error;
+  callback_.Run(std::vector<cryptauth::ExternalDeviceInfo>());
+}
+
+}  // namespace proximity_auth
diff --git a/components/proximity_auth/webui/reachable_phone_flow.h b/components/proximity_auth/webui/reachable_phone_flow.h
new file mode 100644
index 0000000..211017d
--- /dev/null
+++ b/components/proximity_auth/webui/reachable_phone_flow.h
@@ -0,0 +1,80 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef COMPONENTS_PROXIMITY_AUTH_WEBUI_REACHABLE_PHONE_FLOW_H_
+#define COMPONENTS_PROXIMITY_AUTH_WEBUI_REACHABLE_PHONE_FLOW_H_
+
+#include <string>
+#include <vector>
+
+#include "base/callback.h"
+#include "base/macros.h"
+#include "base/memory/scoped_ptr.h"
+#include "base/memory/weak_ptr.h"
+
+namespace cryptauth {
+class ExternalDeviceInfo;
+class FindEligibleUnlockDevicesResponse;
+class SendDeviceSyncTickleResponse;
+};
+
+namespace proximity_auth {
+
+class CryptAuthClient;
+class CryptAuthClientFactory;
+
+// Run this flow to find the user's phones that actively respond to a CryptAuth
+// ping. We are confident that phones responding to the ping are currently
+// online and immediately reachable.
+class ReachablePhoneFlow {
+ public:
+  // Creates the ReachablePhoneFlow instance:
+  // |client_factory|: Factory for creating CryptAuthClient instances. Not owned
+  //     and must outlive |this| instance.
+  explicit ReachablePhoneFlow(CryptAuthClientFactory* client_factory);
+
+  ~ReachablePhoneFlow();
+
+  // Starts the flow and invokes |callback| with the reachable devices upon
+  // completion. If the flow fails, |callback| will be invoked with an empty
+  // vector. Do not reuse this class after calling |Run()|, but instead create a
+  // new instance.
+  typedef base::Callback<void(
+      const std::vector<cryptauth::ExternalDeviceInfo>&)>
+      ReachablePhonesCallback;
+  void Run(const ReachablePhonesCallback& callback);
+
+ private:
+  // Callback when a CryptAuth API fails.
+  void OnApiCallError(const std::string& error);
+
+  // Callback for the SyncTickle CryptAuth request.
+  void OnSyncTickleSuccess(
+      const cryptauth::SendDeviceSyncTickleResponse& response);
+
+  // Makes the CryptAuth request to get the phones that responded to the ping.
+  void QueryReachablePhones();
+
+  // Callback for the FindEligibleUnlockDevicesResponse CryptAuth request.
+  void OnFindEligibleUnlockDevicesSuccess(
+      const cryptauth::FindEligibleUnlockDevicesResponse& response);
+
+  // Factory for creating CryptAuthClient instances. Not owned and must outlive
+  // |this| instance.
+  CryptAuthClientFactory* client_factory_;
+
+  // Callback invoked when the flow completes.
+  ReachablePhonesCallback callback_;
+
+  // The client making the current CryptAuth API call.
+  scoped_ptr<CryptAuthClient> client_;
+
+  base::WeakPtrFactory<ReachablePhoneFlow> weak_ptr_factory_;
+
+  DISALLOW_COPY_AND_ASSIGN(ReachablePhoneFlow);
+};
+
+}  // namespace proximity_auth
+
+#endif  // COMPONENTS_PROXIMITY_AUTH_WEBUI_REACHABLE_PHONE_FLOW_H_
diff --git a/components/proximity_auth/webui/resources/content-panel.html b/components/proximity_auth/webui/resources/content-panel.html
index e2233fb..426b25a 100644
--- a/components/proximity_auth/webui/resources/content-panel.html
+++ b/components/proximity_auth/webui/resources/content-panel.html
@@ -9,6 +9,7 @@
 <link href="device-list.html" rel="import">
 <link href="eligible-devices.html" rel="import">
 <link href="local-state.html" rel="import">
+<link href="reachable-devices.html" rel="import">
 
 <dom-module id="content-panel">
   <style>
@@ -33,7 +34,7 @@
 
     local-state,
     eligible-devices,
-    device-list {
+    reachable-devices {
       width: 80%;
     }
   </style>
@@ -60,9 +61,8 @@
       </neon-animatable>
 
       <neon-animatable class="layout vertical center">
-        <device-list
-            label="Reachable Phones" devices="[[onlineDevices_]]" class="flex">
-        </device-list>
+        <reachable-devices id="reachable-devices" class="flex">
+        </reachable-devices>
       </neon-animatable>
     </neon-animated-pages>
   </template>
diff --git a/components/proximity_auth/webui/resources/content-panel.js b/components/proximity_auth/webui/resources/content-panel.js
index bcdfc11..1dec5dc 100644
--- a/components/proximity_auth/webui/resources/content-panel.js
+++ b/components/proximity_auth/webui/resources/content-panel.js
@@ -7,72 +7,6 @@ Polymer({
 
   properties: {
     /**
-     * List of devices that are online and reachable by CryptAuth.
-     * @type {Array<DeviceInfo>}
-     * @const
-     * @private
-     */
-    onlineDevices_: {
-      type: Array,
-      value: [
-        {
-          publicKey: 'CAESRgohAN4IwMl-bTemMQ0E-YV36s86TG0suEj422xKvNoIslyvEiE' +
-                     'Ab8m8J4dB44v2l8l-38-9vLwzf9GsPth4BsquCpAbNRk=',
-          friendlyDeviceName: 'Sony Xperia Z3',
-        },
-        {
-          publicKey: 'CAESRgohAN5ljWzNNYWbuQNoQdE0NhZaCg9CmCVd-XuwR__41G_5EiE' +
-                     'A3ATFvesN_6Tr-wSM5fHL5v5Bn1mX4d-m4OXJ3beRYhk=',
-          friendlyDeviceName: 'Samsung Galaxy S5',
-        },
-        {
-          publicKey: 'CAESRgohAN9QYU5HySO14Gi9PDIClacBnC0C8wqPwXsNHUNG_vXlEiE' +
-                     'AggzU80ZOd9DWuCBdp6bzpGcC-oj1yrwdVCHGg_yeaAQ=',
-          friendlyDeviceName: 'LGE Nexus 5',
-        },
-        {
-          publicKey: 'CAESRgohAOGtyjLiPnkQwi-bAvp75hUrBkfRlx2pBw7_C0VojjIFEiE' +
-                     'ARMN6miPfDOtlAFOiV7fulvhoDqguq-sTjUCZ2Et0mYQ=',
-          friendlyDeviceName: 'LGE Nexus 4',
-          unlockKey: true,
-          connectionStatus: 'disconnected',
-          ineligibilityReasons: [
-            'deviceOffline',
-            'invalidCredentials',
-            'bluetoothNotSupported',
-            'badOsVersion'
-          ],
-          remoteState: {
-            userPresent: true,
-            secureScreenLock: false,
-            trustAgent: true,
-          }
-        },
-        {
-          publicKey: 'CAESRgohAOKowGAhRs6FryK5KZqlHoAinNCon0T1tpeyIGPzKKmlEiE' +
-                     'ARH5joqbVWtLGjuh7aO7nLEhkFxv0u2C3kyoWysq6U_4=',
-          friendlyDeviceName: 'Samsung GT-N8010',
-        },
-        {
-          publicKey: 'CAESRgohAOPegrIJNl9HeFeykbCswXciAXOpJZdme6Nh2WcMMiyZEiE' +
-                     'A8X7fTDRh61X-iDE1bYASMPiCbk7bPy7n0N0MiBeJNuo=',
-          friendlyDeviceName: 'Sony D5503',
-        },
-        {
-          publicKey: 'CAESRgohAOZly-M7bBQokc3CJ9Wio37bzpUYaD-p9On3e6H4n2kKEiE' +
-                     'ANhkioq9y_19lN8Wnoc8XBLOilyyT6kn6iM00DEIOhFk=',
-          friendlyDeviceName: 'LGE LG-D855',
-        },
-        {
-          publicKey: 'CAESRgohAOZ6JXDntf-h7MmRgrJc9RuW0mIgDluYEBcs8zx_uESeEiE' +
-                     'AeQk_My_0AFM9jb0eOSZupZ2s_n-6Vqs-_XaOnbAGSeU=',
-          friendlyDeviceName: 'Motorola Nexus 6',
-        },
-      ],
-      readOnly: true,
-    },
-
-    /**
      * The index of the selected page that is currently shown.
      * @private
      */
diff --git a/components/proximity_auth/webui/resources/cryptauth_interface.js b/components/proximity_auth/webui/resources/cryptauth_interface.js
index 31f53a2..c4a460c 100644
--- a/components/proximity_auth/webui/resources/cryptauth_interface.js
+++ b/components/proximity_auth/webui/resources/cryptauth_interface.js
@@ -28,12 +28,22 @@ CryptAuthInterface = {
 
   /**
    * Starts the findEligibleUnlockDevices API call.
+   * The onGotEligibleDevices() function will be called upon success.
    */
   findEligibleUnlockDevices: function() {
     chrome.send('findEligibleUnlockDevices');
   },
 
   /**
+   * Starts the flow to find reachable devices. Reachable devices are those that
+   * respond to a CryptAuth ping.
+   * The onGotReachableDevices() function will be called upon success.
+   */
+  findReachableDevices: function() {
+    chrome.send('findReachableDevices');
+  },
+
+  /**
    * Called by the browser when the API request fails.
    */
   onError: function(errorMessage) {
@@ -46,11 +56,25 @@ CryptAuthInterface = {
   /**
    * Called by the browser when a findEligibleUnlockDevices completes
    * successfully.
+   * @param {Array<DeviceInfo>} eligibleDevices
+   * @param {Array<DeviceInfo>} ineligibleDevices
    */
   onGotEligibleDevices: function(eligibleDevices, ineligibleDevices) {
     CryptAuthInterface.observers_.forEach(function(observer) {
       if (observer.onGotEligibleDevices != null)
         observer.onGotEligibleDevices(eligibleDevices, ineligibleDevices);
     });
-  }
+  },
+
+  /**
+   * Called by the browser when the reachable devices flow completes
+   * successfully.
+   * @param {Array<DeviceInfo>} reachableDevices
+   */
+  onGotReachableDevices: function(reachableDevices) {
+    CryptAuthInterface.observers_.forEach(function(observer) {
+      if (observer.onGotReachableDevices != null)
+        observer.onGotReachableDevices(reachableDevices);
+    });
+  },
 };
diff --git a/components/proximity_auth/webui/resources/eligible-devices.js b/components/proximity_auth/webui/resources/eligible-devices.js
index d76a71e..fa9ce6d 100644
--- a/components/proximity_auth/webui/resources/eligible-devices.js
+++ b/components/proximity_auth/webui/resources/eligible-devices.js
@@ -11,14 +11,20 @@ Polymer({
      * @type {Array<DeviceInfo>}
      * @private
      */
-    eligibleDevices_: Array,
+    eligibleDevices_: {
+      type: Array,
+      value: null,
+    },
 
     /**
      * List of devices that are ineligible to be used as an unlock key.
      * @type {Array<DeviceInfo>}
      * @private
      */
-    ineligibleDevices_: Array,
+    ineligibleDevices_: {
+      type: Array,
+      value: null,
+    },
 
     /**
      * Whether the findEligibleUnlockDevices request is in progress.
@@ -29,7 +35,7 @@ Polymer({
   },
 
   /**
-   * Called when this element is added to the DOM
+   * Called when this element is added to the DOM.
    */
   attached: function() {
     CryptAuthInterface.addObserver(this);
@@ -47,6 +53,8 @@ Polymer({
    */
   activate: function() {
     this.requestInProgress_ = true;
+    this.eligibleDevices_ = null;
+    this.ineligibleDevices_ = null;
     CryptAuthInterface.findEligibleUnlockDevices();
   },
 
@@ -68,5 +76,7 @@ Polymer({
   onCryptAuthError: function(errorMessage) {
     console.error('CryptAuth request failed: ' + errorMessage);
     this.requestInProgress_ = false;
+    this.eligibleDevices_ = null;
+    this.ineligibleDevices_ = null;
   },
 });
diff --git a/components/proximity_auth/webui/resources/reachable-devices.html b/components/proximity_auth/webui/resources/reachable-devices.html
new file mode 100644
index 0000000..f29aec7
--- /dev/null
+++ b/components/proximity_auth/webui/resources/reachable-devices.html
@@ -0,0 +1,26 @@
+<link href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html" rel="import">
+<link href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html" rel="import">
+<link href="chrome://resources/polymer/v1_0/polymer/polymer.html" rel="import">
+<link href="device-list.html" rel="import">
+
+<dom-module id="reachable-devices">
+  <style>
+    paper-spinner {
+      margin-top: 40px;
+    }
+  </style>
+
+  <template>
+    <div class="layout vertical">
+      <paper-spinner
+          hidden$="[[!requestInProgress_]]" class="self-center" active>
+      </paper-spinner>
+
+      <device-list
+          label="Reachable Phones" devices="[[reachableDevices_]]"
+          hidden$="[[!reachableDevices_.length]]">
+      </device-list>
+    </div>
+  </template>
+  <script src="reachable-devices.js"></script>
+</dom-module>
diff --git a/components/proximity_auth/webui/resources/reachable-devices.js b/components/proximity_auth/webui/resources/reachable-devices.js
new file mode 100644
index 0000000..a247c400
--- /dev/null
+++ b/components/proximity_auth/webui/resources/reachable-devices.js
@@ -0,0 +1,68 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+Polymer({
+  is: 'reachable-devices',
+
+  properties: {
+    /**
+     * List of devices that recently responded to a CryptAuth ping.
+     * @type {Array<DeviceInfo>}
+     * @private
+     */
+    reachableDevices_: {
+      type: Array,
+      value: null,
+    },
+
+    /**
+     * Whether the findEligibleUnlockDevices request is in progress.
+     * @type {boolean}
+     * @private
+     */
+    requestInProgress_: Boolean,
+  },
+
+  /**
+   * Called when this element is added to the DOM.
+   */
+  attached: function() {
+    CryptAuthInterface.addObserver(this);
+  },
+
+  /**
+   * Called when this element is removed from the DOM.
+   */
+  detatched: function() {
+    CryptAuthInterface.removeObserver(this);
+  },
+
+  /**
+   * Called when the page is about to be shown.
+   */
+  activate: function() {
+    this.requestInProgress_ = true;
+    this.reachableDevices_ = null;
+    CryptAuthInterface.findReachableDevices();
+  },
+
+  /**
+   * Called when reachable devices are found.
+   * @param {Array<EligibleDevice>} reachableDevices
+   */
+  onGotReachableDevices: function(reachableDevices) {
+    this.requestInProgress_ = false;
+    this.reachableDevices_ = reachableDevices;
+  },
+
+  /**
+   * Called when the CryptAuth request fails.
+   * @param {string} errorMessage
+   */
+  onCryptAuthError: function(errorMessage) {
+    console.error('CryptAuth request failed: ' + errorMessage);
+    this.requestInProgress_ = false;
+    this.reachableDevices_ = null;
+  },
+});