Pin keyboard moved to under the user profile.

ui/login/account_picker/user_pod_row.js

 // Copyright 2014 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 User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 717 matching lines @@
           this.handleRemoveCommandClick_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('keydown',
           this.handleRemoveCommandKeyDown_.bind(this));
       this.actionBoxMenuRemoveElement.addEventListener('blur',
           this.handleRemoveCommandBlur_.bind(this));
       this.actionBoxRemoveUserWarningButtonElement.addEventListener('click',
           this.handleRemoveUserConfirmationClick_.bind(this));
       this.actionBoxRemoveUserWarningButtonElement.addEventListener('keydown',
           this.handleRemoveUserConfirmationKeyDown_.bind(this));
 
-      var pinKeyboard = $('pin-keyboard');
-      // The pin keyboard is not present on the md user manager.
-      if (pinKeyboard) {
-        pinKeyboard.addEventListener('submit',
-            this.handlePinSubmitted_.bind(this));
-      }
-
       var customIcon = this.customIconElement;
       customIcon.parentNode.replaceChild(new UserPodCustomIcon(), customIcon);
     },
 
     /**
      * Initializes the pod after its properties set and added to a pod row.
      */
     initialize: function() {
       this.passwordElement.addEventListener('keydown',
           this.parentNode.handleKeyDown.bind(this.parentNode));
       this.passwordElement.addEventListener('keypress',
           this.handlePasswordKeyPress_.bind(this));
 
+      if (this.pinKeyboard) {
+        this.pinKeyboard.addEventListener('submit',
+            this.handlePinSubmitted_.bind(this));
+      }
+
       this.imageElement.addEventListener('load',
           this.parentNode.handlePodImageLoad.bind(this.parentNode, this));
 
       var initialAuthType = this.user.initialAuthType ||
           AUTH_TYPE.OFFLINE_PASSWORD;
       this.setAuthType(initialAuthType, null);
 
       this.userClickAuthAllowed_ = false;
     },
 
     /**
      * Resets tab order for pod elements to its initial state.
      */
     resetTabOrder: function() {
       // Note: the |mainInput| can be the pod itself.
       this.mainInput.tabIndex = -1;
       this.tabIndex = UserPodTabOrder.POD_INPUT;
     },
 
     /**
      * Handles the user hitting 'submit' on the PIN keyboard.
      * @param {Event} e Submit event object.
      * @private
      */
     handlePinSubmitted_: function(e) {
       var pin = e.detail.pin;
-      chrome.send('authenticateUser', [this.user.username, pin]);
+      chrome.send('authenticateUserWithPin', [this.user.username, pin]);

[jdufault, 2016/06/17 18:54:23]

Undo this change

[sammiequon, 2016/06/22 23:26:17]

Done.

     },
 
     /**
      * Handles keypress event (i.e. any textual input) on password input.
      * @param {Event} e Keypress Event object.
      * @private
      */
     handlePasswordKeyPress_: function(e) {
       // When tabbing from the system tray a tab key press is received. Suppress
       // this so as not to type a tab character into the password field.
@@ skipping 35 matching lines @@
     },
 
     /**
      * Height number of pixels.
      */
     get height() {
       return this.offsetHeight;
     },
 
     /**
+     * Gets the authorization element of the pod.
+     * @type {!HTMLDivElement}

[jdufault, 2016/06/17 18:54:23]

I think it makes sense to define the setPinVisible method inside of this type
(then all of these new accessors can be removed and conceptually the keyboard
belongs to the UserPod). We should keep the PIN resource loading logic inside of
lock.js, though.

[sammiequon, 2016/06/22 23:26:17]

Done.

+     */
+    get authElement() {
+      return this.querySelector('.auth-container');
+    },
+
+    /**
      * Gets image element.
      * @type {!HTMLImageElement}
      */
     get imageElement() {
       return this.querySelector('.user-image');
     },
 
     /**
      * Gets name element.
      * @type {!HTMLDivElement}
@@ skipping 29 matching lines @@
     /**
      * Gets the password label, which is used to show a message where the
      * password field is normally.
      * @type {!HTMLInputElement}
      */
     get passwordLabelElement() {
       return this.querySelector('.password-label');
     },
 
     /**
+     * Gets the pin-container of the pod.
+     * @type {!HTMLDivElement}
+     */
+    get pinContainer() {
+      return this.querySelector('#pin-container');
+    },
+
+    /**
+     * Gets the pin-keyboard of the pod.
+     * @type {!HTMLElement}
+     */
+    get pinKeyboard() {
+      return this.querySelector('#pin-keyboard');
+    },
+
+    /**
      * Gets user online sign in hint element.
      * @type {!HTMLDivElement}
      */
     get reauthWarningElement() {
       return this.querySelector('.reauth-hint-container');
     },
 
     /**
+     * Gets the signed in indicator of the pod.
+     * @type {!HTMLDivElement}
+     */
+    get signInElement() {
+      return this.querySelector('.signed-in-indicator');
+    },
+
+    /**
      * Gets the container holding the launch app button.
      * @type {!HTMLButtonElement}
      */
     get launchAppButtonContainerElement() {
       return this.querySelector('.launch-app-button-container');
     },
 
     /**
      * Gets launch app button.
      * @type {!HTMLButtonElement}
@@ skipping 1543 matching lines @@
       }
       return null;
     },
 
     /**
      * Returns pod with the given username (null if there is no such pod).
      * @param {string} username Username to be matched.
      * @return {Object} Pod with the given username. null if pod hasn't been
      *     found.
      */
-    getPodWithUsername_: function(username) {
+    getPodWithUsername: function(username) {
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
         if (pod.user.username == username)
           return pod;
       }
       return null;
     },
 
     /**
      * True if the the pod row is disabled (handles no user interaction).
      * @type {boolean}
@@ skipping 54 matching lines @@
             0, 0, 0, 0, 0, ctrlKey, false, false, false, 0, null);
         app.dispatchEvent(activationEvent);
       }
     },
 
     /**
      * Removes user pod from pod row.
      * @param {string} email User's email.
      */
     removeUserPod: function(username) {
-      var podToRemove = this.getPodWithUsername_(username);
+      var podToRemove = this.getPodWithUsername(username);
       if (podToRemove == null) {
         console.warn('Attempt to remove not existing pod for ' + username +
             '.');
         return;
       }
       this.removeChild(podToRemove);
       if (this.pods.length > 0)
         this.placePods_();
     },
 
@@ skipping 139 matching lines @@
      * Shows a custom icon on a user pod besides the input field.
      * @param {string} username Username of pod to add button
      * @param {!{id: !string,
      *           hardlockOnClick: boolean,
      *           isTrialRun: boolean,
      *           ariaLabel: string | undefined,
      *           tooltip: ({text: string, autoshow: boolean} | undefined)}} icon
      *     The icon parameters.
      */
     showUserPodCustomIcon: function(username, icon) {
-      var pod = this.getPodWithUsername_(username);
+      var pod = this.getPodWithUsername(username);
       if (pod == null) {
         console.error('Unable to show user pod button: user pod not found.');
         return;
       }
 
       if (!icon.id && !icon.tooltip)
         return;
 
       if (icon.id)
         pod.customIconElement.setIcon(icon.id);
@@ skipping 41 matching lines @@
      */
     onDidClickLockIconDuringTrialRun_: function(username) {
       chrome.send('recordClickOnLockIcon', [username]);
     },
 
     /**
      * Hides the custom icon in the user pod added by showUserPodCustomIcon().
      * @param {string} username Username of pod to remove button
      */
     hideUserPodCustomIcon: function(username) {
-      var pod = this.getPodWithUsername_(username);
+      var pod = this.getPodWithUsername(username);
       if (pod == null) {
         console.error('Unable to hide user pod button: user pod not found.');
         return;
       }
 
       // TODO(tengs): Allow option for a fading transition.
       pod.customIconElement.hide();
     },
 
     /**
      * Sets the authentication type used to authenticate the user.
      * @param {string} username Username of selected user
      * @param {number} authType Authentication type, must be one of the
      *                          values listed in AUTH_TYPE enum.
      * @param {string} value The initial value to use for authentication.
      */
     setAuthType: function(username, authType, value) {
-      var pod = this.getPodWithUsername_(username);
+      var pod = this.getPodWithUsername(username);
       if (pod == null) {
         console.error('Unable to set auth type: user pod not found.');
         return;
       }
       pod.setAuthType(authType, value);
     },
 
     /**
      * Sets the state of touch view mode.
      * @param {boolean} isTouchViewEnabled true if the mode is on.
      */
     setTouchViewState: function(isTouchViewEnabled) {
       this.touchViewEnabled_ = isTouchViewEnabled;
       this.pods.forEach(function(pod, index) {
         pod.actionBoxAreaElement.classList.toggle('forced', isTouchViewEnabled);
       });
     },
 
     /**
      * Updates the display name shown on a public session pod.
      * @param {string} userID The user ID of the public session
      * @param {string} displayName The new display name
      */
     setPublicSessionDisplayName: function(userID, displayName) {
-      var pod = this.getPodWithUsername_(userID);
+      var pod = this.getPodWithUsername(userID);
       if (pod != null)
         pod.setDisplayName(displayName);
     },
 
     /**
      * Updates the list of locales available for a public session.
      * @param {string} userID The user ID of the public session
      * @param {!Object} locales The list of available locales
      * @param {string} defaultLocale The locale to select by default
      * @param {boolean} multipleRecommendedLocales Whether |locales| contains
      *     two or more recommended locales
      */
     setPublicSessionLocales: function(userID,
                                       locales,
                                       defaultLocale,
                                       multipleRecommendedLocales) {
-      var pod = this.getPodWithUsername_(userID);
+      var pod = this.getPodWithUsername(userID);
       if (pod != null) {
         pod.populateLanguageSelect(locales,
                                    defaultLocale,
                                    multipleRecommendedLocales);
       }
     },
 
     /**
      * Updates the list of available keyboard layouts for a public session pod.
      * @param {string} userID The user ID of the public session
      * @param {string} locale The locale to which this list of keyboard layouts
      *     applies
      * @param {!Object} list List of available keyboard layouts
      */
     setPublicSessionKeyboardLayouts: function(userID, locale, list) {
-      var pod = this.getPodWithUsername_(userID);
+      var pod = this.getPodWithUsername(userID);
       if (pod != null)
         pod.populateKeyboardSelect(locale, list);
     },
 
     /**
      * Called when window was resized.
      */
     onWindowResize: function() {
       var layout = this.calculateLayout_();
       if (layout.columns != this.columns || layout.rows != this.rows)
@@ skipping 310 matching lines @@
     },
 
     /**
      * Shows signin UI.
      * @param {string} email Email for signin UI.
      */
     showSigninUI: function(email) {
       // Clear any error messages that might still be around.
       Oobe.clearErrors();
       this.disabled = true;
-      this.lastFocusedPod_ = this.getPodWithUsername_(email);
+      this.lastFocusedPod_ = this.getPodWithUsername(email);
       Oobe.showSigninUI(email);
     },
 
     /**
      * Updates current image of a user.
      * @param {string} username User for which to update the image.
      */
     updateUserImage: function(username) {
-      var pod = this.getPodWithUsername_(username);
+      var pod = this.getPodWithUsername(username);
       if (pod)
         pod.updateUserImage();
     },
 
     /**
      * Handler of click event.
      * @param {Event} e Click Event object.
      * @private
      */
     handleClick_: function(e) {
@@ skipping 243 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });