Lock screen pin keyboard ui upgrades.

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js

 // Copyright 2016 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
  * 'pin-keyboard' is a keyboard that can be used to enter PINs or more generally
  * numeric values.
  *
  * Properties:
@@ skipping 29 matching lines @@
     },
 
     /**
      * Whether or not the keyboard's submit button should be shown.
      */
     enableSubmitButton: {
       type: Boolean,
       value: false
     },
 
+    /**
+     * The problem to display on the pin keyboard.
+     */
+    problemMessage: {

[jdufault, 2016/08/24 01:20:18]

This should be private (problemMessage_)

[sammiequon, 2016/08/25 23:50:02]

No more problem message.

+      type: String,
+      value: ''
+    },
+
+    /**
+     * Whether the problem is an error or a warning.
+     */
+    problemClass: {

[jdufault, 2016/08/24 01:20:18]

This should be private (problemClass_)

[sammiequon, 2016/08/25 23:50:02]

No more problem message.

+      type: String,
+      value: 'warning'
+    },
+
     /** The value stored in the keyboard's input element. */
     value: {
       type: String,
       notify: true,
       value: '',
       observer: 'onPinValueChange_'
     }
   },
 
   /**
    * Gets the container holding the password field.
    * @type {!HTMLInputElement}
    */
   get inputElement() {
     return this.$$('#pin-input');
   },
 
   /** Transfers focus to the input element. */
   focus: function() {
     this.$$('#pin-input').focus();
   },
 
   /**
+   * Called when a different problem message wants to be displayed.
+   * @param {string} problemMessage the message to be displayed
+   * @param {boolean} isError
+   */
+  setProblem: function(problemMessage, isError) {
+    this.problemClass = isError ? 'error' : 'warning';
+    this.problemMessage = problemMessage;
+  },
+
+  /**
    * Called when a keypad number has been tapped.
    * @param {!{target: !PaperButtonElement}} event
    * @private
    */
   onNumberTap_: function(event, detail) {
     var numberValue = event.target.getAttribute('value');
     this.value += numberValue;
 
     // If a number button is clicked, we do not want to switch focus to the
     // button, therefore we transfer focus back to the input, but if a number
@@ skipping 37 matching lines @@
 
     // Enter pressed.
     if (event.keyCode == 13) {
       this.firePinSubmitEvent_();
       event.preventDefault();
       return;
     }
   },
 
   /**
-   * Changes the color of the submit button if PIN is ready.
+   * Changes the color of the input text if it is not empty.
    * @param {string} value
    * @private
    */
-  getSubmitClass_: function(value) {
-    return value.length > 0 ? 'ready-background' : '';
+  getContentClass_: function(value) {
+    return value.length > 0 ? 'has-content' : '';
   },
 
   /**
+   * Disables the submit and backspace button if nothing is entered.
+   * @param {string} value
+   * @private
+   */
+  hasInput_: function(value) {
+    return value.length > 0;
+  },
+
+  /**
    * Computes whether the input type for the pin input should be password or
    * numerical.
    * @param {boolean} enablePassword
    * @private
    */
   getInputType_: function(enablePassword) {
     return enablePassword ? 'password' : 'number';
   },
 
   /**
    * Computes the value of the pin input placeholder.
    * @param {boolean} enablePassword
    * @private
    */
   getInputPlaceholder_: function(enablePassword) {
     return enablePassword ? this.i18n('pinKeyboardPlaceholderPinPassword') :
                             this.i18n('pinKeyboardPlaceholderPin');
   },
 
   /**
+   * Hides the problem message div if no error is to be shown.
+   * @param {string} problemMessage
+   * @private
+   */
+  hasProblemMessage_: function(problemMessage) {
+    return problemMessage.length > 0;
+  },
+
+  /**
+   * Computes the whether the error message should be shown.
+   * @param {boolean} problemMessage
+   * @private
+   */
+  getProblemClass_: function(problemMessage) {

[jdufault, 2016/08/24 01:20:18]

Showing the problem should be controlled by the embedder, since the logic to do
that varies.

[sammiequon, 2016/08/25 23:50:02]

No more problem message.

+    return problemMessage.length > 0 ? 'problem-show' : '';
+  },
+
+  /**
+   * Computes the direction of the problem message.
+   * @private
+   */
+  getProblemDirection_: function() {
+    return document.dir == 'rtl' ? 'problem-rtl' : '';
+  },
+
+  /**
    * Computes the direction of the pin input.
    * @param {string} password
    * @private
    */
   getInputClass_: function(password) {
     // +password will convert a string to a number or to NaN if that's not
     // possible. Number.isInteger will verify the value is not a NaN and that it
     // does not contain decimals.
     // This heuristic will fail for inputs like '1.0'.
     //
     // Since we still support users entering their passwords through the PIN
     // keyboard, we swap the input box to rtl when we think it is a password
     // (just numbers), if the document direction is rtl.
     var enableRtl = (document.dir == 'rtl') && !Number.isInteger(+password);
     return enableRtl ? 'input-non-pin' : '';
   },
 
   /**
    * Computes if the submit button is visible.
    * @param {boolean} submitEnabled
    * @private
    */
-  getSubmitHiddenClass_: function(submitEnabled) {
+  getSubmitClass_: function(submitEnabled) {
     return submitEnabled ? '' : 'submit-button-hidden';
   }
 });