Added strings of i18n and made the pin-keyboard work for rtl lang.

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

Index: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
index dfc111d4c5fcd7c32df8aa1e7a95762d0894bfbb..ac52fce9fd011a18dd7c7c0bdcb247f104938a70 100644
--- a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
@@ -25,7 +25,39 @@
 Polymer({
   is: 'pin-keyboard',
 
+  behaviors: [
+    I18nBehavior,
+  ],
+
   properties: {
+    /**
+     * Whether or not the keyboard's input element should be numerical
+     * or passowrd.

[jdufault, 2016/06/29 21:06:29]

nit: password

[sammiequon, 2016/06/29 23:35:48]

Done.

+     */
+    enablePassword: {
+      type: Boolean,
+      value: false,
+      observer: 'onEnablePasswordChange_'
+    },
+
+    /**
+     * @private
+     * Stores the input type of the keyboard's input element.
+     */
+    inputType_: {
+      type: String,
+      value: 'password'
+    },
+
+    /**
+     * @private
+     * Stores the placeholder of the keyboard's input element.
+     */
+    placeholder_: {
+      type: String,
+      value: 'Enter PIN'
+    },
+
     /** The value stored in the keyboard's input element. */
     value: {
       type: String,
@@ -51,6 +83,16 @@ Polymer({
     this.fire('submit', { pin: this.value });
   },
 
+  /** Changes the pin or password input based on the contents of the
+   *  password. */

[jdufault, 2016/06/29 21:06:29]

Maybe move this function definition to the bottom of the file so that the pin
value logic stays together?

[sammiequon, 2016/06/29 23:35:48]

Done.

+  computeRtlState_: function(password) {
+    // Converts a password to number, then verifies there are no periods/etc.

[jdufault, 2016/06/29 21:06:29]

Can you make the comment be a bit more specific? Maybe something like this:

// +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'.

I wonder if the regex is a better solution, since this heuristic does have a few
failure cases. Up to you which approach you want to go with. Sorry about the
churn if you end up reverting to a regex.

[sammiequon, 2016/06/29 23:35:48]

Done.

+    var isNumeric = Number.isInteger(+password);
+    var enableRtl = !isNumeric && (document.dir == 'rtl');

[jdufault, 2016/06/29 21:06:29]

I'd put the document.dir == 'rtl' condition first since it is more general.

[sammiequon, 2016/06/29 23:35:48]

Done.

+    var newClass = enableRtl ? 'pin-keyboard-input-non-pin' : '';
+    return newClass;

[jdufault, 2016/06/29 21:06:29]

Eliminate the newClass var and directly return the expression.

[sammiequon, 2016/06/29 23:35:48]

Done.

+  },
+
   /**
    * Fires an update event with the current PIN value. The event will only be
    * fired if the PIN value has actually changed.
@@ -84,5 +126,16 @@ Polymer({
       event.preventDefault();
       return;
     }
+  },
+
+  /**
+   * Changes the input type for the pin-keyboard input element, based on the
+   * input specified for the pin-keyboard.
+   * @param {boolean} value describes when passwords are accepted
+   */
+  onEnablePasswordChange_: function(value) {
+    this.inputType_ = value ? 'password' : 'number';
+    this.placeholder_ = value ? this.i18n('pinKeyboardPlaceholderPinPassword') :

[jdufault, 2016/06/29 21:06:29]

The placeholder_ and inputType_ can be removed if they become computed values
instead.

So follow the same pattern as the class; ie,

  <input type="[[computeInputType_(enablePassword)]]"
         placeholder="[[computeInputPlaceholder_(enablePassword)]]">

[sammiequon, 2016/06/29 23:35:48]

Done.

+                                this.i18n('pinKeyboardPlaceholderPin');
   }
 });