Pin keyboard improvements.

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 696 matching lines @@
     /** @override */
     decorate: function() {
       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));
@@ skipping 21 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.submitButton.addEventListener('click',
           this.handleSubmitButtonClick_.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);
 
@@ skipping 382 matching lines @@
       if (visible && Oobe.getInstance().virtualKeyboardShown)
         return;
 
       var elements = this.getElementsByClassName('pin-tag');
       for (var i = 0; i < elements.length; ++i)
         this.updatePinClass_(elements[i], visible);
       this.updatePinClass_(this, visible);
 
       // Set the focus to the input element after showing/hiding pin keyboard.
       this.mainInput.focus();
+
+      // Change the password placeholder based on pin keyboard visibility.
+      this.passwordElement.placeholder = loadTimeData.getString(visible ?
+          'pinKeyboardPlaceholderPinPassword' : 'passwordHint');
     },
 
     isPinShown: function() {
       return this.classList.contains('pin-enabled');
     },
 
     setUserPodIconType: function(userTypeClass) {
       this.userTypeIconAreaElement.classList.add(userTypeClass);
       this.userTypeIconAreaElement.hidden = false;
     },
@@ skipping 668 matching lines @@
      * Handles mouse down event. It sets whether the user click auth will be
      * allowed on the next mouse click event. The auth is allowed iff the pod
      * was focused on the mouse down event starting the click.
      * @param {Event} e The mouse down event.
      */
     handlePodMouseDown_: function(e) {
       this.userClickAuthAllowed_ = this.parentNode.isFocused(this);
     },
 
     /**
-     * Handles click event on submit button on the pin keyboard.
-     * @param {Event} e Click event.
+     * Called when the input of the password element changes. Updates the submit
+     * button color and state and hides the error popup bubble.
      */
-    handlePinSubmitted_: function(e) {
-      if (this.parentNode.isFocused(this))
-        this.parentNode.setActivatedPod(this);
+    updateInput_: function() {
+      this.submitButton.disabled = this.passwordElement.value.length <= 0;
+      this.showError = false;
+      $('bubble').hide();
     },
 
+    /**
+     * Handles pin change event from the pin keyboard.
+     * @param {Event} e Pin change event.
+     */
     handlePinChanged_: function(e) {
       this.passwordElement.value = e.detail.pin;
+      this.updateInput_();
     },
 
+    /**
+     * Handles input event on the password element.
+     * @param {Event} e Input event.
+     */
     handleInputChanged_: function(e) {
       if (this.pinKeyboard)
         this.pinKeyboard.value = this.passwordElement.value;
-      this.submitButton.disabled = this.passwordElement.value.length <= 0;
-      this.showError = false;
+      this.updateInput_();
     },
 
     /**
      * Handles click event on a user pod.
      * @param {Event} e Click event.
      */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
@@ skipping 1755 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });