Dialog message saying PIN is incorrect positioned correctly.

ui/login/account_picker/user_pod_row.js

Index: ui/login/account_picker/user_pod_row.js
diff --git a/ui/login/account_picker/user_pod_row.js b/ui/login/account_picker/user_pod_row.js
index 48a7073ad110d478bd66bc14505e630c93751e20..70d2d22c9903d5abc87eec0eecde28f37a0730b4 100644
--- a/ui/login/account_picker/user_pod_row.js
+++ b/ui/login/account_picker/user_pod_row.js
@@ -748,11 +748,6 @@ cr.define('login', function() {
       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));
 
@@ -773,16 +768,6 @@ cr.define('login', function() {
     },
 
     /**
-     * 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
@@ -1145,7 +1130,6 @@ cr.define('login', function() {
         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();
@@ -1188,6 +1172,9 @@ cr.define('login', function() {
      */
     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;
@@ -1354,11 +1341,19 @@ cr.define('login', function() {
         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);
@@ -1420,6 +1415,8 @@ cr.define('login', function() {
      */
     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)
@@ -1817,6 +1814,11 @@ cr.define('login', function() {
           // 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)
@@ -3413,6 +3415,7 @@ cr.define('login', function() {
           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')) {