Pin keyboard works with virtual keyboard.

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 700 matching lines @@
       this.tabIndex = UserPodTabOrder.POD_INPUT;
       this.actionBoxAreaElement.tabIndex = UserPodTabOrder.POD_INPUT;
 
       this.addEventListener('keydown', this.handlePodKeyDown_.bind(this));
       this.addEventListener('click', this.handleClickOnPod_.bind(this));
       this.addEventListener('mousedown', this.handlePodMouseDown_.bind(this));
 
       if (this.pinKeyboard) {
         this.pinKeyboard.addEventListener('submit',
             this.handlePinSubmitted_.bind(this));
+        this.pinKeyboard.addEventListener('pin-change',
+            this.handlePinChanged_.bind(this));
       }
 
       this.actionBoxAreaElement.addEventListener('mousedown',
                                                  stopEventPropagation);
       this.actionBoxAreaElement.addEventListener('click',
           this.handleActionAreaButtonClick_.bind(this));
       this.actionBoxAreaElement.addEventListener('keydown',
           this.handleActionAreaButtonKeyDown_.bind(this));
 
       this.actionBoxMenuTitleElement.addEventListener('keydown',
@@ skipping 17 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));
+      this.passwordElement.addEventListener('input',
+          this.handleInputChanged_.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;
     },
@@ skipping 101 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');
     },
 
+    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.
@@ skipping 207 matching lines @@
     toggleTransitions: function(enable) {
       this.classList.toggle('flying-pin-pod', enable);
     },
 
     updatePinClass_: function(element, enable) {
       element.classList.toggle('pin-enabled', enable);
       element.classList.toggle('pin-disabled', !enable);
     },
 
     setPinVisibility: function(visible) {
+      if (this.isPinShown() == visible)
+        return;
+
+      // If the header is hidden that means the virtual keyboard is displayed.
+      if (visible && Oobe.getInstance().headerHidden)

[jdufault, 2016/08/24 01:35:11]

Add a helper method hasVirtualKeyboard on the Oobe instance so that we are not
relying less on incidental behavior that may change in the future.

[sammiequon, 2016/08/25 18:12:33]

Done.

+        return;
+
       var elements = this.getElementsByClassName('pin-tag');
       for (var i = 0; i < elements.length; ++i)
-        this.updatePinClass_(elements[i], visible);
-      this.updatePinClass_(this, visible);
+        this.updatePinClass_(elements[i], this.pinKeyboard? visible : false);
+      this.updatePinClass_(this, this.pinKeyboard? visible : false);
 
       // Set the focus to the input element after showing/hiding pin keyboard.
-      if (this.pinKeyboard && visible)
-        this.pinKeyboard.focus();
+      this.mainInput.focus();
     },
 
     isPinShown: function() {
       return this.classList.contains('pin-enabled');
     },
 
     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.isPinShown() && this.pinKeyboard.inputElement)
-          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 615 matching lines @@
 
     /**
      * Handles click event on submit button on the pin keyboard.
      * @param {Event} e Click event.
      */
     handlePinSubmitted_: function(e) {
       if (this.parentNode.isFocused(this))
         this.parentNode.setActivatedPod(this);
     },
 
+    handlePinChanged_: function(e) {
+      this.passwordElement.value = e.detail.pin;
+    },
+
+    handleInputChanged_: function(e) {
+      if (this.pinKeyboard)
+        this.pinKeyboard.value = this.passwordElement.value;
+    },
+
     /**
      * Handles click event on a user pod.
      * @param {Event} e Click event.
      */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
       if (!this.isActionBoxMenuActive) {
         if (this.isAuthTypeOnlineSignIn) {
@@ skipping 780 matching lines @@
       if (app) {
         var activationEvent = cr.doc.createEvent('MouseEvents');
         var ctrlKey = opt_diagnosticMode;
         activationEvent.initMouseEvent('click', true, true, null,
             0, 0, 0, 0, 0, ctrlKey, false, false, false, 0, null);
         app.dispatchEvent(activationEvent);
       }
     },
 
     /**
+     * Function that hides the pin keyboard. Meant to be called when the virtual
+     * keyboard is enabled and being toggled.
+     * @param {boolean} hidden
+     */
+    setPinHidden: function(hidden) {
+      this.setFocusedPodPinVisibility(!hidden);
+    },
+
+    /**
      * Toggles pod PIN keyboard visiblity.
      * @param {!user} username
      * @param {boolean} visible
      */
     setPinVisibility: function(username, visible) {
       var pod = this.getPodWithUsername_(username);
       if (!pod) {
         console.warn('Attempt to change pin visibility to ' + visible +
             ' for missing pod');
         return;
       }
-
-      pod.setPinVisibility(visible);
+      // Remove the child, so that the virtual keyboard cannot bring it up
+      // again after three tries.

[jdufault, 2016/08/24 01:35:11]

setPinVisiblity is named and read such that the PIN keyboard can be
enabled/disabled at will, even it is has already been enabled.

Removing the DOM should be done inside of disablePinKeyboardForUser or in a
method where it is clear the PIN keyboard is erased and cannot be shown anymore.

[sammiequon, 2016/08/25 18:12:34]

Done.

+      if (pod.pinContainer)
+        pod.removeChild(pod.pinContainer);
+      pod.setPinVisibility(false);

[jdufault, 2016/08/24 01:35:11]

What if |visible| is true?

If this function is only used for destroying the PIN keyboard, it should be
called removePinKeyboard or similar and the |visible| param should be removed.

[sammiequon, 2016/08/25 18:12:34]

Done.

     },
 
     /**
      * Removes user pod from pod row.
      * @param {!user} username
      */
     removeUserPod: function(username) {
       var podToRemove = this.getPodWithUsername_(username);
       if (podToRemove == null) {
         console.warn('Attempt to remove pod that does not exist');
@@ skipping 521 matching lines @@
         }
       }
 
       // Clear any error messages for previous pod.
       if (!this.isFocused(podToFocus))
         Oobe.clearErrors();
 
       var hadFocus = !!this.focusedPod_;
       this.focusedPod_ = podToFocus;
       if (podToFocus) {
-        this.setFocusedPodPinVisibility(true);
+        if (!hadFocus)
+          this.setFocusedPodPinVisibility(true);
         podToFocus.classList.remove('faded');
         podToFocus.classList.add('focused');
         if (!podToFocus.multiProfilesPolicyApplied) {
           podToFocus.classList.toggle('signing-in', false);
           if (!opt_skipInputFocus)
             podToFocus.focusInput();
         } else {
           podToFocus.userTypeBubbleElement.classList.add('bubble-shown');
           // Note it is not necessary to skip this focus request when
           // |opt_skipInputFocus| is true. When |multiProfilesPolicyApplied|
@@ skipping 386 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });