Dialog message saying PIN is incorrect positioned correctly.

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 730 matching lines @@
 
     /**
      * 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]);
-    },
-
-    /**
      * 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.
       if (e.keyCode == 9) {
         e.preventDefault();
         return;
@@ skipping 342 matching lines @@
 
     setPinVisibility: function(visible) {
       var elements = [this, this.authElement, this.imagePaneElement,
                       this.imageElement, this.pinContainer];
 
       for (var idx = 0; idx < elements.length; idx++) {
         var currentElement = elements[idx];
         currentElement.classList.toggle('pin-enabled', visible);
         currentElement.classList.toggle('pin-disabled', !visible);
       }
-
       // Set the focus to the input element after showing/hiding pin keyboard.

[jdufault, 2016/07/11 22:35:08]

Revert change.

[sammiequon, 2016/07/11 23:13:24]

Done.

       if (visible)
         this.pinKeyboard.focus();
       else
         this.mainInput.focus();
     },
 
     setUserPodIconType: function(userTypeClass) {
       this.userTypeIconAreaElement.classList.add(userTypeClass);
       this.userTypeIconAreaElement.hidden = false;
     },
@@ skipping 21 matching lines @@
         (Oobe.getInstance().displayType == DISPLAY_TYPE.USER_ADDING);
       return isMultiProfilesUI && !this.user_.isMultiProfilesAllowed;
     },
 
     /**
      * Gets main input element.
      * @type {(HTMLButtonElement|HTMLInputElement)}
      */
     get mainInput() {
       if (this.isAuthTypePassword) {
+        if (this.pinContainer.classList.contains('pin-enabled')) {
+          return this.pinKeyboard.inputElement;
+        }
         return this.passwordElement;
       } else if (this.isAuthTypeOnlineSignIn) {
         return this;
       } else if (this.isAuthTypeUserClick) {
         return this.passwordLabelElement;
       }
     },
 
     /**
      * Whether action box button is in active state.
@@ skipping 146 matching lines @@
      * @return {boolean} True if activated successfully.
      */
     activate: function(e) {
       if (this.isAuthTypeOnlineSignIn) {
         this.showSigninUI();
       } else if (this.isAuthTypeUserClick) {
         Oobe.disableSigninUI();
         this.classList.toggle('signing-in', true);
         chrome.send('attemptUnlock', [this.user.username]);
       } else if (this.isAuthTypePassword) {
-        if (!this.passwordElement.value)
+        if (!this.passwordElement.value && this.pinKeyboard.inputElement &&
+            !this.pinKeyboard.inputElement.value)
           return false;
         Oobe.disableSigninUI();
-        chrome.send('authenticateUser',
-                    [this.user.username, this.passwordElement.value]);
+        if (this.passwordElement.value) {
+          chrome.send('authenticateUser',
+                      [this.user.username, this.passwordElement.value]);

[jdufault, 2016/07/11 22:35:08]

Does this work?

  var password = this.passwordElement.value || this.pinKeyboard.value
  chrome.send('authenticateUser', [this.user.username, password])

[sammiequon, 2016/07/11 23:13:24]

Done.

+        } else if (this.pinKeyboard.inputElement &&
+                   this.pinKeyboard.inputElement.value) {
+          chrome.send('authenticateUser',
+                      [this.user.username,
+                      this.pinKeyboard.inputElement.value]);
+        }
       } else {
         console.error('Activating user pod with invalid authentication type: ' +
             this.authType);
       }
 
       return true;
     },
 
     showSupervisedUserSigninWarning: function() {
       // Legacy supervised user token has been invalidated.
@@ skipping 41 matching lines @@
         this.parentNode.showSigninUI(this.user.emailAddress);
       }
     },
 
     /**
      * Resets the input field and updates the tab order of pod controls.
      * @param {boolean} takeFocus If true, input field takes focus.
      */
     reset: function(takeFocus) {
       this.passwordElement.value = '';
+      if (this.pinKeyboard.inputElement)
+        this.pinKeyboard.clear();

[jdufault, 2016/07/11 22:35:08]

this.pinKeyboard.value = '' should work. Remove clear() method.

Can this be

  if (this.pinKeyboard)

[sammiequon, 2016/07/11 23:13:24]

Done.

PinKeyboard still exists if the user is entering a normal password, it just has
nothing in it.

[jdufault, 2016/07/11 23:31:40]

Remove the if statement then?

[sammiequon, 2016/07/11 23:54:43]

Done.

       this.classList.toggle('signing-in', false);
       if (takeFocus) {
         if (!this.multiProfilesPolicyApplied)
           this.focusInput();  // This will set a custom tab order.
       }
       else
         this.resetTabOrder();
     },
 
     /**
@@ skipping 377 matching lines @@
       if (this.parentNode.disabled)
         return;
 
       if (!this.isActionBoxMenuActive) {
         if (this.isAuthTypeOnlineSignIn) {
           this.showSigninUI();
         } else if (this.isAuthTypeUserClick && this.userClickAuthAllowed_) {
           // Note that this.userClickAuthAllowed_ is set in mouse down event
           // handler.
           this.parentNode.setActivatedPod(this);
+        } else if (this.pinKeyboard.submitButton &&

[jdufault, 2016/07/11 22:35:08]

Can the if be

  if (this.pinKeyboard && e.target == this.pinKeyboard.submitButton)

Can we just check the target against the entire pin keyboard? That way, we don't
need to expose the submitButton element.

[sammiequon, 2016/07/11 23:13:24]

For this we need to check when the click is coming from the submit button. I
guess we can to some e.target.parentNode.parentNode or we can hook up the
pin-submit event.

+                   e.target == this.pinKeyboard.submitButton) {
+          // Sets the pod as activated if the submit button is clicked so that
+          // it simulates what the enter button does for the password/pin.
+          this.parentNode.setActivatedPod(this);
         }
 
         if (this.multiProfilesPolicyApplied)
           this.userTypeBubbleElement.classList.add('bubble-shown');
 
         // Prevent default so that we don't trigger 'focus' event and
         // stop propagation so that the 'click' event does not bubble
         // up and accidentally closes the bubble tooltip.
         stopEventPropagation(e);
       }
@@ skipping 1576 matching lines @@
             else
               this.focusPod(this.firstElementChild);
 
             e.stopPropagation();
           }
           break;
         case 'Enter':
           if (this.focusedPod_) {
             var targetTag = e.target.tagName;
             if (e.target == this.focusedPod_.passwordElement ||
+                e.target == this.focusedPod_.pinKeyboard.inputElement ||

[jdufault, 2016/07/11 22:35:08]

Is there a way to avoid exposing the inputElement property of the pin keyboard?

[sammiequon, 2016/07/11 23:13:24]

We need the input element to be passed to the show error message so it can point
at the correct spot, unless we plan to point the at the whole pin.

                 (targetTag != 'INPUT' &&
                  targetTag != 'BUTTON' &&
                  targetTag != 'A')) {
               this.setActivatedPod(this.focusedPod_, e);
               e.stopPropagation();
             }
           }
           break;
         case 'Escape':
           if (!this.alwaysFocusSinglePod)
@@ skipping 85 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });