Update locally managed user creation flow according to mocks

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

 // Copyright (c) 2013 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.
 
 /**
  * @fileoverview Locally managed user creation flow screen.
  */
 
 cr.define('login', function() {
 
@@ skipping 19 matching lines @@
       // Mousedown has to be used instead of click to be able to prevent 'focus'
       // event later.
       this.addEventListener('mousedown',
                             this.handleMouseDown_.bind(this));
       var screen = $('managed-user-creation-flow');
       var managerPod = this;
       this.passwordElement.addEventListener('keydown', function(e) {
         managerPod.passwordErrorElement.hidden = true;
       });
       this.passwordElement.addEventListener('keyup', function(e) {
-        screen.updateContinueButton_();
+        screen.updateNextButtonForManager_();
       });
     },
 
     /**
      * Updates UI elements from user data.
      */
     update: function() {
       this.imageElement.src = 'chrome://userimage/' + this.user.username +
           '?id=' + ManagerPod.userImageSalt_[this.user.username];
 
@@ skipping 127 matching lines @@
         if (pod != podToSelect) {
           pod.classList.remove('focused');
           pod.passwordElement.value = '';
           pod.passwordBlock.hidden = true;
         }
       }
       podToSelect.classList.add('focused');
       podToSelect.passwordBlock.hidden = false;
       podToSelect.passwordElement.value = '';
       podToSelect.focusInput();
+      chrome.send('managerSelectedOnLocallyManagedUserCreationFlow',
+          [podToSelect.user.emailAddress]);
+
     },
   };
 
   /**
    * Creates a new screen div.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var LocallyManagedUserCreationScreen = cr.ui.define('div');
 
   /**
    * Registers with Oobe.
    */
   LocallyManagedUserCreationScreen.register = function() {
     var screen = $('managed-user-creation-flow');
     LocallyManagedUserCreationScreen.decorate(screen);
     Oobe.getInstance().registerScreen(screen);
   };
 
   LocallyManagedUserCreationScreen.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     lastVerifiedName_: null,
     lastIncorrectUserName_: null,
     managerList_: null,
 
     currentPage_: null,
 
+    // Contains data that can be auto-shared with handler.
+    context_: {},
+
     /** @override */
     decorate: function() {
       this.managerList_ = new ManagerPodList();
       $('managed-user-creation-flow-managers-pane').
           appendChild(this.managerList_);
 
       var userNameField = $('managed-user-creation-flow-name');
       var passwordField = $('managed-user-creation-flow-password');
       var password2Field = $('managed-user-creation-flow-password-confirm');
 
@@ skipping 11 matching lines @@
 
       userNameField.addEventListener('keyup', function(e) {
         creationScreen.checkUserName_();
       });
 
       passwordField.addEventListener('keydown', function(e) {
         creationScreen.passwordErrorVisible = false;
         if (e.keyIdentifier == 'Enter') {
           if (passwordField.value.length > 0) {
             password2Field.focus();
-            creationScreen.updateContinueButton_();
+            creationScreen.updateNextButtonForUser_();
           }
           e.stopPropagation();
         }
       });
 
       password2Field.addEventListener('keydown', function(e) {
         creationScreen.passwordErrorVisible = false;
         if (e.keyIdentifier == 'Enter') {
           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_();
       });
     },
 
     /**
      * Screen controls.
      * @type {!Array} Array of Buttons.
      */
     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';
 
-      proceedButton.textContent = loadTimeData.
-          getString('managedUserCreationFlowProceedButtonTitle');
-      proceedButton.hidden = true;
-      buttons.push(proceedButton);
+      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);
+
+      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';
 
       finishButton.textContent = loadTimeData.
           getString('managedUserCreationFlowFinishButtonTitle');
       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();
       });
 
       return buttons;
     },
 
+

[Nikita (slow), 2013/04/12 13:12:15]

nit: Drop empty line.

     /**
      * 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
      */
-    validateInputAndStartFlow_: function() {
+    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
+     */
+    validateAndCreateLocallyManagedUser_: function() {
       var firstPassword = $('managed-user-creation-flow-password').value;
       var secondPassword =
           $('managed-user-creation-flow-password-confirm').value;
       var userName = $('managed-user-creation-flow-name').value;
       if (firstPassword != secondPassword) {
         this.showPasswordError(
             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]);
     },
 
     /**
      * Calls backend part to check if current user name is valid/not taken.
      * Results in call to either managedUserNameOk or managedUserNameError.
      * @private
      */
     checkUserName_: function() {
       var userName = $('managed-user-creation-flow-name').value;
 
@@ skipping 13 matching lines @@
 
     /**
      * Called by backend part in case of successful name validation.
      * @param {string} name - name that was validated.
      */
     managedUserNameOk: function(name) {
       this.lastVerifiedName_ = name;
       this.lastIncorrectUserName_ = null;
       if ($('managed-user-creation-flow-name').value == name)
         this.clearUserNameError_();
-      this.updateContinueButton_();
+      this.updateNextButtonForManager_();
     },
 
     /**
      * Called by backend part in case of name validation failure.
      * @param {string} name - name that was validated.
      * @param {string} errorText - reason why this name is invalid.
      */
     managedUserNameError: function(name, errorText) {
       this.lastIncorrectUserName_ = name;
       this.lastVerifiedName_ = null;
 
       var userNameField = $('managed-user-creation-flow-name');
       if (userNameField.value == this.lastIncorrectUserName_) {
         this.nameErrorVisible = true;
         $('managed-user-creation-flow-name-error').textContent = errorText;
 
-        this.setButtonDisabledStatus('proceed', true);
+        this.setButtonDisabledStatus('next', true);
       }
     },
 
     /**
      * Clears user name error, if name is no more guaranteed to be invalid.
      * @private
      */
     clearUserNameError_: function() {
       // Avoid flickering
       if ($('managed-user-creation-flow-name').value ==
               this.lastIncorrectUserName_) {
         return;
       }
       this.nameErrorVisible = false;
     },
 
     /**
      * Called by backend part in case of password validation failure.
      * @param {string} errorText - reason why this password is invalid.
      */
     showPasswordError: function(errorText) {
       $('managed-user-creation-flow-password-error').textContent = errorText;
       this.passwordErrorVisible = true;
       $('managed-user-creation-flow-password').focus();
 
-      this.setButtonDisabledStatus('proceed', true);
+      this.setButtonDisabledStatus('next', true);
     },
 
     /**
      * True if user name error should be displayed.
      * @type {boolean}
      */
     set nameErrorVisible(value) {
       $('managed-user-creation-flow-name-error').
           classList[value ? 'add' : 'remove']('error');
       $('managed-user-creation-flow-name').
@@ skipping 11 matching lines @@
           classList[value ? 'add' : 'remove']('error');
       if (!value)
         $('managed-user-creation-flow-password-error').textContent = '';
     },
 
     /**
      * Updates state of Continue button after minimal checks.
      * @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;
       var userName = $('managed-user-creation-flow-name').value;
 
       var canProceed =
           (firstPassword.length > 0) &&
           (firstPassword.length == secondPassword.length) &&
            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;
     },
 
     showSelectedManagerPasswordError_: function() {
       var selectedPod = this.managerList_.selectedPod_;
       selectedPod.showPasswordError();
       selectedPod.passwordElement.value = '';
       selectedPod.focusInput();
     },
 
     /**
      * Show final splash screen with success message.
      */
-    showFinishedMessage: function() {
-      this.setVisiblePage_('success');
-      this.setVisibleButtons_(['finish']);
-    },
 
     /**
      * Show error message.
      * @param {string} errorText Text to be displayed.
      * @param {boolean} recoverable Indicates if error was transiend and process
      *     can be retried.
      */
     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',

[Nikita (slow), 2013/04/12 13:12:15]

nit: These should be really renamed in the upcoming 2 weeks.
They are called here screens and pages.

+                         '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;
+        }
       }
     },
 
     setButtonDisabledStatus: function(buttonName, status) {
       var button = $('managed-user-creation-flow-' + buttonName + '-button');
       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;
     },
 
     /**
      * Updates state of login header so that necessary buttons are displayed.
      **/
     onBeforeShow: function(data) {
       $('login-header-bar').signinUIState =
           SIGNIN_UI_STATE.MANAGED_USER_CREATION_FLOW;
       if (data['managers']) {
         this.loadManagers(data['managers']);
@@ skipping 35 matching lines @@
 
     /**
      * Called by backend part to propagate list of possible managers.
      * @param {Array} userList - list of users that can be managers.
      */
     loadManagers: function(userList) {
       $('managed-user-creation-flow-managers-block').hidden = false;
       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]);
     },
 
     /**
      * 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();
 
         $('pod-row').loadLastWallpaper();
 
         Oobe.showScreen({id: SCREEN_ACCOUNT_PICKER});
         Oobe.resetSigninUI(true);
         return;
       }
       chrome.send('abortLocalManagedUserCreation');
     },
+
+    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.showProgressScreen = function() {
-    var screen = $('managed-user-creation-flow');
-    screen.disabled = false;
-    screen.setVisiblePage_('progress');
-    screen.setVisibleButtons_(['cancel']);
-  };
-
-  LocallyManagedUserCreationScreen.showIntialScreen = function() {
+  LocallyManagedUserCreationScreen.showIntroPage = function() {
     var screen = $('managed-user-creation-flow');
 
     $('managed-user-creation-flow-password').value = '';
     $('managed-user-creation-flow-password-confirm').value = '';
     $('managed-user-creation-flow-name').value = '';
 
     screen.lastVerifiedName_ = null;
     screen.lastIncorrectUserName_ = null;
     screen.passwordErrorVisible = false;
     screen.nameErrorVisible = false;
 
-    screen.setButtonDisabledStatus('proceed', true);
-
-    screen.setVisiblePage_('initial');
-    screen.setVisibleButtons_(['proceed', 'cancel']);
+    screen.setVisiblePage_('intro');
+    screen.setVisibleButtons_(['start', 'cancel']);
   };
 
-  LocallyManagedUserCreationScreen.showFinishedMessage = function() {
+  LocallyManagedUserCreationScreen.showProgressPage = function() {
     var screen = $('managed-user-creation-flow');
-    screen.disabled = false;
-    screen.showFinishedMessage();
+    screen.setVisiblePage_('progress');
+    screen.setVisibleButtons_(['cancel']);
+  };
+
+  LocallyManagedUserCreationScreen.showManagerPage = function() {
+    var screen = $('managed-user-creation-flow');
+    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() {
     var screen = $('managed-user-creation-flow');
     screen.disabled = false;
     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) {
     var screen = $('managed-user-creation-flow');
     screen.managedUserNameOk(name);
   };
 
   LocallyManagedUserCreationScreen.managedUserNameError =
       function(name, error) {
     var screen = $('managed-user-creation-flow');
     screen.managedUserNameError(name, error);
   };
 
   LocallyManagedUserCreationScreen.showPasswordError = function(error) {
     var screen = $('managed-user-creation-flow');
     screen.showPasswordError(error);
   };
 
   LocallyManagedUserCreationScreen.loadManagers = function(userList) {
     var screen = $('managed-user-creation-flow');
     screen.loadManagers(userList);
   };
 
-  LocallyManagedUserCreationScreen.showPostImageSelectionScreen =
-      function(userList) {
-    var screen = $('managed-user-creation-flow');
-    screen.setVisiblePage_('success');
-  };
-
   return {
     LocallyManagedUserCreationScreen: LocallyManagedUserCreationScreen
   };
 });