[CrOS MultiDevice] Add profile information to password page.

This CL adds the user's e-mail address and profile photo to the password
prompt page at the beginning of the setup flow. This is a security
requirement as it makes it clear to users what password that they should
enter.

Additionally, this CL adds a "cancel" button to this page.

Note that there are various styling/CSS changes which still need to be
made so that this page matches the mocks.

Bug: 878643, 824568
Change-Id: I59e75f73c310ea5f275b844268b70fa2e47af72f
Reviewed-on: https://chromium-review.googlesource.com/1198564
Reviewed-by: Tommy Li <tommycli@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#588186}

chrome/browser/resources/chromeos/multidevice_setup/multidevice_setup_browser_proxy.js

@@ -5,6 +5,13 @@
 cr.define('multidevice_setup', function() {
   /** @interface */
   class BrowserProxy {
+    /**
+     * Requests profile information; namely, a dictionary containing the user's
+     * e-mail address and profile photo.
+     * @return {!Promise<{profilePhotoUrl: string, email: string}>}
+     */
+    getProfileInfo() {}
+
     /**
      * Opens settings to the MultiDevice individual feature settings subpage.
      * (a.k.a. Connected Devices).
@@ -14,6 +21,11 @@ cr.define('multidevice_setup', function() {
 
   /** @implements {multidevice_setup.BrowserProxy} */
   class BrowserProxyImpl {
+    /** @override */
+    getProfileInfo() {
+      return cr.sendWithPromise('getProfileInfo');
+    }
+
     /** @override */
     openMultiDeviceSettings() {
       chrome.send('openMultiDeviceSettings');

chrome/browser/resources/chromeos/multidevice_setup/password_page.html

@@ -7,10 +7,30 @@
 
 <dom-module id="password-page">
   <template>
+    <style>
+      #user-info-container  {
+        @apply(--layout-horizontal);
+        border: 1px solid rgb(95, 99, 104);
+        border-radius: 15px;
+        color: rgb(95, 99, 104);
+        margin: 35px 0;
+        padding: 5px 20px 5px 5px;
+        width: fit-content;
+      }
+
+      #profile-photo {
+        border-radius: 50%;
+        height: 20px;
+        margin-right: 4px;
+        width: 20px;
+      }
+    </style>
     <ui-page header-text="[[headerText]]" icon-name="google-g">
       <div id="content-container" slot="additional-content">
-        <!-- TODO(khorimoto): Add account details here. Mocks show the user's
-             profile picture and e-mail address. -->
+        <div id="user-info-container">
+          <img id="profile-photo" src="[[profilePhotoUrl_]]"></img>
+          <span id="email">[[email_]]</span>
+        </div>
         <cr-input id="passwordInput" type="password"
             placeholder="$i18n{enterPassword}"
             invalid="[[passwordInvalid_]]"

chrome/browser/resources/chromeos/multidevice_setup/password_page.js

@@ -28,6 +28,12 @@ Polymer({
       value: 'done',
     },
 
+    /** Overridden from UiPageContainerBehavior. */
+    backwardButtonTextId: {
+      type: String,
+      value: 'cancel',
+    },
+
     /** Overridden from UiPageContainerBehavior. */
     headerId: {
       type: String,
@@ -40,6 +46,18 @@ Polymer({
      */
     authToken: {type: String, value: '', notify: true},
 
+    /** @private {string} */
+    profilePhotoUrl_: {
+      type: String,
+      value: '',
+    },
+
+    /** @private {string} */
+    email_: {
+      type: String,
+      value: '',
+    },
+
     /** @private {!QuickUnlockPrivate} */
     quickUnlockPrivate_: {type: Object, value: chrome.quickUnlockPrivate},
 
@@ -57,6 +75,9 @@ Polymer({
     },
   },
 
+  /** @private {?multidevice_setup.BrowserProxy} */
+  browserProxy_: null,
+
   /**
    * Function which clears this.authToken after it has expired.
    * @private {number|undefined}
@@ -67,8 +88,18 @@ Polymer({
     this.$.passwordInput.value = '';
   },
 
+  /** @override */
+  created: function() {
+    this.browserProxy_ = multidevice_setup.BrowserProxyImpl.getInstance();
+  },
+
   /** @override */
   attached: function() {
+    this.browserProxy_.getProfileInfo().then((profileInfo) => {
+      this.profilePhotoUrl_ = profileInfo.profilePhotoUrl;
+      this.email_ = profileInfo.email;
+    });
+
     this.$.passwordInput.focus();
   },
 

chrome/browser/resources/chromeos/multidevice_setup/ui_page.html

@@ -21,7 +21,6 @@
       }
 
       #message-container {
-        height: 72px;
         padding-top: 14px;
       }
     </style>

chrome/browser/ui/webui/chromeos/multidevice_setup/multidevice_setup_handler.cc

@@ -6,9 +6,13 @@
 
 #include "base/bind.h"
 #include "base/bind_helpers.h"
+#include "chrome/browser/chromeos/profiles/profile_helper.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/ui/chrome_pages.h"
+#include "chrome/browser/ui/webui/chromeos/user_image_source.h"
 #include "chrome/common/webui_url_constants.h"
+#include "components/user_manager/user.h"
+#include "ui/base/webui/web_ui_util.h"
 
 namespace chromeos {
 
@@ -19,13 +23,40 @@ MultideviceSetupHandler::MultideviceSetupHandler() = default;
 MultideviceSetupHandler::~MultideviceSetupHandler() = default;
 
 void MultideviceSetupHandler::RegisterMessages() {
+  web_ui()->RegisterMessageCallback(
+      "getProfileInfo",
+      base::BindRepeating(&MultideviceSetupHandler::HandleGetProfileInfo,
+                          base::Unretained(this)));
   web_ui()->RegisterMessageCallback(
       "openMultiDeviceSettings",
       base::BindRepeating(
           &MultideviceSetupHandler::HandleOpenMultiDeviceSettings,
           base::Unretained(this)));
 }
 
+void MultideviceSetupHandler::HandleGetProfileInfo(
+    const base::ListValue* args) {
+  AllowJavascript();
+
+  std::string callback_id;
+  bool result = args->GetString(0, &callback_id);
+  DCHECK(result);
+
+  const user_manager::User* user =
+      chromeos::ProfileHelper::Get()->GetUserByProfile(
+          Profile::FromWebUI(web_ui()));
+
+  base::DictionaryValue response;
+  response.SetString("email", user->GetDisplayEmail());
+
+  scoped_refptr<base::RefCountedMemory> image =
+      chromeos::UserImageSource::GetUserImage(user->GetAccountId());
+  response.SetString("profilePhotoUrl",
+                     webui::GetPngDataUrl(image->front(), image->size()));
+
+  ResolveJavascriptCallback(base::Value(callback_id), response);
+}
+
 void MultideviceSetupHandler::HandleOpenMultiDeviceSettings(
     const base::ListValue* args) {
   DCHECK(args->empty());

chrome/browser/ui/webui/chromeos/multidevice_setup/multidevice_setup_handler.h

@@ -18,12 +18,11 @@ class MultideviceSetupHandler : public content::WebUIMessageHandler {
   MultideviceSetupHandler();
   ~MultideviceSetupHandler() override;
 
- protected:
+ private:
   // content::WebUIMessageHandler:
   void RegisterMessages() override;
 
- private:
-  // Opens settings to MultiDevice (a.k.a. "ConnectedDevices") subpage.
+  void HandleGetProfileInfo(const base::ListValue* args);
   void HandleOpenMultiDeviceSettings(const base::ListValue* args);
 
   DISALLOW_COPY_AND_ASSIGN(MultideviceSetupHandler);