Update locally managed user creation flow according to mocks

chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js

Index: chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js
diff --git a/chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js b/chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js
index 05dfbd03e559373420e8902e459b83b99d62cd9d..0981edcb2abad855c7cc24d3a5f6c4e1f38ed12f 100644
--- a/chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js
+++ b/chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js
@@ -37,7 +37,7 @@ cr.define('login', function() {
         managerPod.passwordErrorElement.hidden = true;
       });
       this.passwordElement.addEventListener('keyup', function(e) {
-        screen.updateContinueButton_();
+        screen.updateNextButtonForManager_();
       });
     },
 
@@ -185,6 +185,9 @@ cr.define('login', function() {
       podToSelect.passwordBlock.hidden = false;
       podToSelect.passwordElement.value = '';
       podToSelect.focusInput();
+      chrome.send('managerSelectedOnLocallyManagedUserCreationFlow',
+          [podToSelect.user.emailAddress]);
+
     },
   };
 
@@ -213,6 +216,9 @@ cr.define('login', function() {
 
     currentPage_: null,
 
+    // Contains data that can be auto-shared with handler.
+    context_: {},
+
     /** @override */
     decorate: function() {
       this.managerList_ = new ManagerPodList();
@@ -244,7 +250,7 @@ cr.define('login', function() {
         if (e.keyIdentifier == 'Enter') {
           if (passwordField.value.length > 0) {
             password2Field.focus();
-            creationScreen.updateContinueButton_();
+            creationScreen.updateNextButtonForUser_();
           }
           e.stopPropagation();
         }
@@ -256,18 +262,18 @@ cr.define('login', function() {
           if (passwordField.value.length > 0) {
             if (creationScreen.managerList_.selectedPod_)
               creationScreen.managerList_.selectedPod_.focusInput();
-            creationScreen.updateContinueButton_();
+            creationScreen.updateNextButtonForUser_();
           }
           e.stopPropagation();
         }
       });
 
       password2Field.addEventListener('keyup', function(e) {
-        creationScreen.updateContinueButton_();
+        creationScreen.updateNextButtonForUser_();
       });
 
       passwordField.addEventListener('keyup', function(e) {
-        creationScreen.updateContinueButton_();
+        creationScreen.updateNextButtonForUser_();
       });
     },
 
@@ -278,13 +284,29 @@ cr.define('login', function() {
     get buttons() {
       var buttons = [];
 
-      var proceedButton = this.ownerDocument.createElement('button');
-      proceedButton.id = 'managed-user-creation-flow-proceed-button';
+      var startButton = this.ownerDocument.createElement('button');
+      startButton.id = 'managed-user-creation-flow-start-button';
+
+      startButton.textContent = loadTimeData.
+          getString('managedUserCreationFlowStartButtonTitle');
+      startButton.hidden = true;
+      buttons.push(startButton);
+
+      var previousButton = this.ownerDocument.createElement('button');
+      previousButton.id = 'managed-user-creation-flow-prev-button';
+
+      previousButton.textContent = loadTimeData.
+          getString('managedUserCreationFlowPreviousButtonTitle');
+      previousButton.hidden = true;
+      buttons.push(previousButton);
 
-      proceedButton.textContent = loadTimeData.
-          getString('managedUserCreationFlowProceedButtonTitle');
-      proceedButton.hidden = true;
-      buttons.push(proceedButton);
+      var nextButton = this.ownerDocument.createElement('button');
+      nextButton.id = 'managed-user-creation-flow-next-button';
+
+      nextButton.textContent = loadTimeData.
+          getString('managedUserCreationFlowNextButtonTitle');
+      nextButton.hidden = true;
+      buttons.push(nextButton);
 
       var finishButton = this.ownerDocument.createElement('button');
       finishButton.id = 'managed-user-creation-flow-finish-button';
@@ -294,37 +316,24 @@ cr.define('login', function() {
       finishButton.hidden = true;
       buttons.push(finishButton);
 
-      var retryButton = this.ownerDocument.createElement('button');
-      retryButton.id = 'managed-user-creation-flow-retry-button';
-
-      retryButton.textContent = loadTimeData.
-          getString('managedUserCreationFlowRetryButtonTitle');
-      retryButton.hidden = true;
-      buttons.push(retryButton);
-
       var cancelButton = this.ownerDocument.createElement('button');
       cancelButton.id = 'managed-user-creation-flow-cancel-button';
 
-      cancelButton.textContent = loadTimeData.
-          getString('managedUserCreationFlowCancelButtonTitle');
-      cancelButton.hidden = true;
-      buttons.push(cancelButton);
-
       var creationFlowScreen = this;
       finishButton.addEventListener('click', function(e) {
-        creationFlowScreen.finishFlow_();
+        creationFlowScreen.finishButtonPressed_();
         e.stopPropagation();
       });
-      proceedButton.addEventListener('click', function(e) {
-        creationFlowScreen.proceedFlow_();
+      startButton.addEventListener('click', function(e) {
+        creationFlowScreen.startButtonPressed_();
         e.stopPropagation();
       });
-      retryButton.addEventListener('click', function(e) {
-        creationFlowScreen.retryFlow_();
+      nextButton.addEventListener('click', function(e) {
+        creationFlowScreen.nextButtonPressed_();
         e.stopPropagation();
       });
-      cancelButton.addEventListener('click', function(e) {
-        creationFlowScreen.cancel();
+      previousButton.addEventListener('click', function(e) {
+        creationFlowScreen.prevButtonPressed_();
         e.stopPropagation();
       });
 
@@ -333,10 +342,32 @@ cr.define('login', function() {
 
     /**
      * Does sanity check and calls backend with current user name/password pair
-     * to create a user. May result in showPasswordError.
+     * to authenticate manager. May result in showManagerPasswordError.
+     * @private
+     */
+    validateAndLogInAsManager_: function() {
+      var selectedPod = this.managerList_.selectedPod_;
+      if (null == selectedPod)
+        return;
+
+      var managerId = selectedPod.user.emailAddress;
+      var managerPassword = selectedPod.passwordElement.value;
+      if (managerPassword.empty)
+        return;
+
+      this.disabled = true;
+      this.context_.managerId = managerId;
+      chrome.send('authenticateManagerInLocallyManagedUserCreationFlow',
+          [managerId, managerPassword]);
+    },
+
+
+    /**
+     * Does sanity check and calls backend with user display name/password pair
+     * to create a user.
      * @private
      */
-    validateInputAndStartFlow_: function() {
+    validateAndCreateLocallyManagedUser_: function() {
       var firstPassword = $('managed-user-creation-flow-password').value;
       var secondPassword =
           $('managed-user-creation-flow-password-confirm').value;
@@ -346,17 +377,10 @@ cr.define('login', function() {
             loadTimeData.getString('createManagedUserPasswordMismatchError'));
         return;
       }
-      var selectedPod = this.managerList_.selectedPod_;
-      if (null == selectedPod)
-        return;
-
-      var managerId = selectedPod.user.emailAddress;
-      var managerPassword = selectedPod.passwordElement.value;
       this.disabled = true;
-      // TODO(antrim) : we might use some minimal password validation
-      // (e.g. non-empty etc.) here.
-      chrome.send('runLocallyManagedUserCreationFlow',
-          [userName, firstPassword, managerId, managerPassword]);
+      this.context_.managedName = userName;
+      chrome.send('specifyLocallyManagedUserCreationFlowUserData',
+          [userName, firstPassword]);
     },
 
     /**
@@ -390,7 +414,7 @@ cr.define('login', function() {
       this.lastIncorrectUserName_ = null;
       if ($('managed-user-creation-flow-name').value == name)
         this.clearUserNameError_();
-      this.updateContinueButton_();
+      this.updateNextButtonForManager_();
     },
 
     /**
@@ -407,7 +431,7 @@ cr.define('login', function() {
         this.nameErrorVisible = true;
         $('managed-user-creation-flow-name-error').textContent = errorText;
 
-        this.setButtonDisabledStatus('proceed', true);
+        this.setButtonDisabledStatus('next', true);
       }
     },
 
@@ -433,7 +457,7 @@ cr.define('login', function() {
       this.passwordErrorVisible = true;
       $('managed-user-creation-flow-password').focus();
 
-      this.setButtonDisabledStatus('proceed', true);
+      this.setButtonDisabledStatus('next', true);
     },
 
     /**
@@ -465,7 +489,21 @@ cr.define('login', function() {
      * @return {boolean} true, if form seems to be valid.
      * @private
      */
-    updateContinueButton_: function() {
+    updateNextButtonForManager_: function() {
+      var selectedPod = this.managerList_.selectedPod_;
+      canProceed = null != selectedPod &&
+                   selectedPod.passwordElement.value.length > 0;
+
+      this.setButtonDisabledStatus('next', !canProceed);
+      return canProceed;
+    },
+
+    /**
+     * Updates state of Continue button after minimal checks.
+     * @return {boolean} true, if form seems to be valid.
+     * @private
+     */
+    updateNextButtonForUser_: function() {
       var firstPassword = $('managed-user-creation-flow-password').value;
       var secondPassword =
           $('managed-user-creation-flow-password-confirm').value;
@@ -477,12 +515,7 @@ cr.define('login', function() {
            this.lastVerifiedName_ &&
            (userName == this.lastVerifiedName_);
 
-      var selectedPod = this.managerList_.selectedPod_;
-      canProceed = canProceed &&
-          null != selectedPod &&
-          selectedPod.passwordElement.value.length > 0;
-
-      this.setButtonDisabledStatus('proceed', !canProceed);
+      this.setButtonDisabledStatus('next', !canProceed);
       return canProceed;
     },
 
@@ -496,10 +529,6 @@ cr.define('login', function() {
     /**
      * Show final splash screen with success message.
      */
-    showFinishedMessage: function() {
-      this.setVisiblePage_('success');
-      this.setVisibleButtons_(['finish']);
-    },
 
     /**
      * Show error message.
@@ -510,38 +539,56 @@ cr.define('login', function() {
     showErrorMessage: function(errorText, recoverable) {
       $('managed-user-creation-flow-error-value').innerHTML = errorText;
       this.setVisiblePage_('error');
-      this.setVisibleButtons_(recoverable ? ['retry', 'cancel'] : ['cancel']);
+      this.setVisibleButtons_(['cancel']);
     },
 
     /**
      * Enables one particular subpage and hides the rest.
-     * @param {string} visiblePage - name of subpage (one of 'progress',
-     * 'error', 'success')
+     * @param {string} visiblePage - name of subpage.
      * @private
      */
     setVisiblePage_: function(visiblePage) {
-      var screenNames = ['initial', 'progress', 'error', 'success'];
+      this.disabled = false;
+      this.updateText_();
+      var screenNames = ['intro',
+                         'manager',
+                         'username',
+                         'progress',
+                         'error',
+                         'tutorial'];
       for (i in screenNames) {
         var screenName = screenNames[i];
         var screen = $('managed-user-creation-flow-' + screenName);
         screen.hidden = (screenName != visiblePage);
+        if (screenName == visiblePage) {
+          $('step-logo').hidden = screen.classList.contains('step-no-logo');
+        }
       }
       this.currentPage_ = visiblePage;
     },
 
     /**
      * Enables specific control buttons.
-     * @param {List of strings} buttonsList - list of buttons to display (values
-     * can be 'retry', 'finish', 'cancel')
+     * @param {List of strings} buttonsList - list of buttons to display.
      * @private
      */
     setVisibleButtons_: function(buttonsList) {
-      var buttonNames = ['proceed', 'retry', 'finish', 'cancel'];
+      var buttonNames = ['start',
+                         'prev',
+                         'next',
+                         'cancel',
+                         'finish'];
       for (i in buttonNames) {
         var buttonName = buttonNames[i];
-        var button = $('managed-user-creation-flow-' + buttonName + '-button');
-        if (button)
+        var button;
+        if ('cancel' == buttonName)
+          button = $('cancel-add-user-button');
+        else
+          button = $('managed-user-creation-flow-' + buttonName + '-button');
+        if (button) {
           button.hidden = buttonsList.indexOf(buttonName) < 0;
+          button.disabled = false;
+        }
       }
     },
 
@@ -550,17 +597,31 @@ cr.define('login', function() {
       button.disabled = status;
     },
 
-    finishFlow_: function() {
+    finishButtonPressed_: function() {
       chrome.send('finishLocalManagedUserCreation');
     },
 
-    proceedFlow_: function() {
-      this.validateInputAndStartFlow_();
+    startButtonPressed_: function() {
+      this.setVisiblePage_('manager');
+      this.setVisibleButtons_(['next', 'prev', 'cancel']);
+      this.setButtonDisabledStatus('next', true);
     },
 
-    retryFlow_: function() {
-      this.setVisiblePage_('progress');
-      chrome.send('retryLocalManagedUserCreation');
+    nextButtonPressed_: function() {
+      if (this.currentPage_ == 'manager') {
+        this.validateAndLogInAsManager_();
+        return;
+      }
+      if (this.currentPage_ == 'username') {
+        this.validateAndCreateLocallyManagedUser_();
+        return;
+      }
+    },
+
+    prevButtonPressed_: function() {
+      this.setVisiblePage_('intro');
+      this.setVisibleButtons_(['start', 'cancel']);
+      return;
     },
 
     /**
@@ -616,7 +677,12 @@ cr.define('login', function() {
       this.managerList_.clearPods();
       for (var i = 0; i < userList.length; ++i)
         this.managerList_.addPod(userList[i]);
-      if (userList.length > 0)
+
+      var usersInPane = Math.min(userList.length, 5);
+      $('managed-user-creation-flow-managers-pane').style.height =
+          (usersInPane * 60 + 28) + 'px';
+
+      if (userList.length == 1)
         this.managerList_.selectPod(this.managerList_.pods[0]);
     },
 
@@ -624,7 +690,7 @@ cr.define('login', function() {
      * Cancels user creation and drops to user screen (either sign).
      */
     cancel: function() {
-      var notSignedInScreens = ['initial'];
+      var notSignedInScreens = ['intro', 'manager'];
       if (notSignedInScreens.indexOf(this.currentPage_) >= 0) {
         // Make sure no manager password is kept:
         this.managerList_.clearPods();
@@ -637,16 +703,21 @@ cr.define('login', function() {
       }
       chrome.send('abortLocalManagedUserCreation');
     },
-  };
 
-  LocallyManagedUserCreationScreen.showProgressScreen = function() {
-    var screen = $('managed-user-creation-flow');
-    screen.disabled = false;
-    screen.setVisiblePage_('progress');
-    screen.setVisibleButtons_(['cancel']);
+    updateText_: function() {
+      $('managed-user-creation-flow-tutorial-created-text').textContent =
+          loadTimeData.getStringF('managedUserProfileCreatedMessageTemplate',
+              this.context_.managedName);
+
+      var boldEmail = '<b>' + this.context_.managerId + '</b>';
+      $('managed-user-creation-flow-tutorial-instructions-text').innerHTML =
+          loadTimeData.getStringF('managedUserInstructionTemplate',
+              boldEmail);
+    }
+
   };
 
-  LocallyManagedUserCreationScreen.showIntialScreen = function() {
+  LocallyManagedUserCreationScreen.showIntroPage = function() {
     var screen = $('managed-user-creation-flow');
 
     $('managed-user-creation-flow-password').value = '';
@@ -658,16 +729,32 @@ cr.define('login', function() {
     screen.passwordErrorVisible = false;
     screen.nameErrorVisible = false;
 
-    screen.setButtonDisabledStatus('proceed', true);
+    screen.setVisiblePage_('intro');
+    screen.setVisibleButtons_(['start', 'cancel']);
+  };
 
-    screen.setVisiblePage_('initial');
-    screen.setVisibleButtons_(['proceed', 'cancel']);
+  LocallyManagedUserCreationScreen.showProgressPage = function() {
+    var screen = $('managed-user-creation-flow');
+    screen.setVisiblePage_('progress');
+    screen.setVisibleButtons_(['cancel']);
   };
 
-  LocallyManagedUserCreationScreen.showFinishedMessage = function() {
+  LocallyManagedUserCreationScreen.showManagerPage = function() {
     var screen = $('managed-user-creation-flow');
-    screen.disabled = false;
-    screen.showFinishedMessage();
+    screen.setVisiblePage_('manager');
+    screen.setVisibleButtons_(['cancel']);
+  };
+
+  LocallyManagedUserCreationScreen.showUsernamePage = function() {
+    var screen = $('managed-user-creation-flow');
+    screen.setVisiblePage_('username');
+    screen.setVisibleButtons_(['next', 'cancel']);
+  };
+
+  LocallyManagedUserCreationScreen.showTutorialPage = function() {
+    var screen = $('managed-user-creation-flow');
+    screen.setVisiblePage_('tutorial');
+    screen.setVisibleButtons_(['finish']);
   };
 
   LocallyManagedUserCreationScreen.showManagerPasswordError = function() {
@@ -676,11 +763,11 @@ cr.define('login', function() {
     screen.showSelectedManagerPasswordError_();
   };
 
-  LocallyManagedUserCreationScreen.showErrorMessage = function(errorText,
-                                                               recoverable) {
+  LocallyManagedUserCreationScreen.showErrorPage = function(errorText,
+                                                            recoverable) {
     var screen = $('managed-user-creation-flow');
     screen.disabled = false;
-    screen.showErrorMessage(errorText, recoverable);
+    screen.showErrorPage(errorText, recoverable);
   };
 
   LocallyManagedUserCreationScreen.managedUserNameOk = function(name) {
@@ -704,12 +791,6 @@ cr.define('login', function() {
     screen.loadManagers(userList);
   };
 
-  LocallyManagedUserCreationScreen.showPostImageSelectionScreen =
-      function(userList) {
-    var screen = $('managed-user-creation-flow');
-    screen.setVisiblePage_('success');
-  };
-
   return {
     LocallyManagedUserCreationScreen: LocallyManagedUserCreationScreen
   };