[CrOS MultiDevice] Make the password entry page of setup flow the 2nd page.

Improve user experience by showing the "Start" page first, and the
"Password" page after, making for a less jarring experience.

Bug: 881610
Change-Id: I0a54c0d6c8b5ffc11e6bfdd2aba80adf6bab374d
Reviewed-on: https://chromium-review.googlesource.com/1214169Reviewed-by: Jeremy Klein <jlklein@chromium.org>
Commit-Queue: Ryan Hansberry <hansberry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589701}

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

@@ -33,7 +33,7 @@ cr.define('multidevice_setup', function() {
        */
       visiblePageName_: {
         type: String,
-        value: PageName.PASSWORD,
+        value: PageName.START,
         // For testing purporses only
         notify: true,
       },
@@ -52,7 +52,6 @@ cr.define('multidevice_setup', function() {
        */
       authToken_: {
         type: String,
-        observer: 'onAuthTokenChanged_',
       },
 
       /**
@@ -138,12 +137,6 @@ cr.define('multidevice_setup', function() {
           return;
         case PageName.PASSWORD:
           this.$.passwordPage.clearPasswordTextInput();
-          this.visiblePageName_ = PageName.START;
-          return;
-        case PageName.SUCCESS:
-          this.exitSetupFlow_();
-          return;
-        case PageName.START:
           let deviceId = /** @type {string} */ (this.selectedDeviceId_);
           this.multideviceSetup.setHostDevice(deviceId, this.authToken_)
               .then((responseParams) => {
@@ -151,11 +144,6 @@ cr.define('multidevice_setup', function() {
                   console.warn(
                       'Failure setting device with device ID: ' +
                       this.selectedDeviceId_);
-
-                  // If setting the host failed, it was likely due to an expired
-                  // auth token, so go back to the password page to get a new
-                  // token.
-                  this.visiblePageName_ = PageName.PASSWORD;
                   return;
                 }
 
@@ -171,6 +159,13 @@ cr.define('multidevice_setup', function() {
               .catch((error) => {
                 console.warn('Mojo service failure: ' + error);
               });
+          return;
+        case PageName.SUCCESS:
+          this.exitSetupFlow_();
+          return;
+        case PageName.START:
+          this.visiblePageName_ = PageName.PASSWORD;
+          return;
       }
     },
 
@@ -188,16 +183,6 @@ cr.define('multidevice_setup', function() {
           this.passwordPageForwardButtonDisabled_;
     },
 
-    /** @private */
-    onAuthTokenChanged_: function() {
-      // If the auth token has expired but the user is still on the "Start
-      // Setup" page (i.e., the user has not yet chosen a device to be the host
-      // device for this account), go back to the password page and require that
-      // the user enter their password again.
-      if (!this.authToken_ && this.visiblePageName_ == PageName.START)
-        this.visiblePageName_ = PageName.PASSWORD;
-    },
-
     /**
      * Notifies observers that the setup flow has completed.
      *

chrome/test/data/webui/multidevice_setup/integration_test.js

@@ -24,6 +24,7 @@ cr.define('multidevice_setup', () => {
        */
       let backwardButton;
 
+      const PASSWORD = 'password-page';
       const SUCCESS = 'setup-succeeded-page';
       const START = 'start-setup-page';
 
@@ -70,12 +71,14 @@ cr.define('multidevice_setup', () => {
       });
 
       test(
-          'StartSetupPage forward button sets host in backround and ' +
-              'continues OOBE (OOBE).',
+          'StartSetupPage forward button sets host in background and ' +
+              'goes to PasswordPage (OOBE).',
           done => {
-            multiDeviceSetupElement.addEventListener('setup-exited', () => {
-              done();
-            });
+            multiDeviceSetupElement.addEventListener(
+                'visible-page-name_-changed', () => {
+                  if (multiDeviceSetupElement.visiblePageName_ == PASSWORD)
+                    done();
+                });
 
             setVisiblePage(START);
             multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed =
@@ -97,8 +100,18 @@ cr.define('multidevice_setup', () => {
         backwardButton.click();
       });
 
+      test('PasswordPage backward button closes UI (post-OOBE)', done => {
+        multiDeviceSetupElement.addEventListener('setup-exited', () => done());
+
+        setVisiblePage(PASSWORD);
+        multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed = true;
+        multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.POST_OOBE;
+
+        backwardButton.click();
+      });
+
       test(
-          'StartSetupPage forward button goes to success page if mojo works ' +
+          'PasswordPage forward button goes to success page if mojo works ' +
               '(post-OOBE)',
           done => {
             multiDeviceSetupElement.addEventListener(
@@ -107,7 +120,7 @@ cr.define('multidevice_setup', () => {
                     done();
                 });
 
-            setVisiblePage(START);
+            setVisiblePage(PASSWORD);
             multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed =
                 true;
             multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.POST_OOBE;