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..79ac227acabe53fa88b2b925049e924a01e010a6 100644
--- a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.js
@@ -26,6 +26,18 @@ Polymer({
   is: 'pin-keyboard',
 
   properties: {
+    enablePassword: {

[jdufault, 2016/06/28 23:06:09]

Document this

[sammiequon, 2016/06/29 19:44:07]

Done.

+      type: Boolean,
+      value: false,
+      observer: 'onInputTypeChange_'

[jdufault, 2016/06/28 23:06:09]

nit: rename to onEnablePasswordChange_

[sammiequon, 2016/06/29 19:44:07]

Done.

+    },
+
+    placeholder: {

[jdufault, 2016/06/28 23:06:09]

This should be private; the value for this should be driven by enablePassword.
Make sure to add /** @private */ once those changes are made.

[sammiequon, 2016/06/29 19:44:07]

Done.

+      type: String,
+      value: '',

[jdufault, 2016/06/28 23:06:09]

Since enablePassword defaults to false this should probably default to
'$i18n{pinKeyboardPlaceholderPin}'

[sammiequon, 2016/06/29 19:44:07]

I do not think this works, my current default is Enter PIN, which should always
be overrided by onEnablePasswordChange_.

+      observer: 'onPlaceHolderChange_'

[jdufault, 2016/06/28 23:06:09]

Instead of using an observer to update the element just use a binding. 

1. Add this to the HTML:

  placeholder="[[placeholder_]]"

2. Remove onPlaceHolderChange_

[sammiequon, 2016/06/29 19:44:08]

Done.

+    },
+
     /** The value stored in the keyboard's input element. */
     value: {
       type: String,
@@ -51,6 +63,15 @@ Polymer({
     this.fire('submit', { pin: this.value });
   },
 
+  /** Changes the pin or password input based on the contents of the
+   *  password. */
+  updateRtlState_: function(password) {
+    // Converts a password to number, then verifies there are no periods/etc.

[jdufault, 2016/06/28 23:06:09]

Instead of hooking into the pin-change event, we can bind the class so the class
is reevaluated whenever the `input` property changes.

  <input class="[[computeRtlClass_(value)]]"></input>

Then computeRtlClass_ will return 'ltr' if the text should be ltr or just '' if
it is rtl.

(assuming pin-keyboard-input-non-pin is moved into pin_keyboard.html and renamed
to ltr)

[sammiequon, 2016/06/29 19:44:08]

Done.

+    var isNumeric = Number.isInteger(+password);
+    this.$$('#pin-input').classList.toggle(
+        'pin-keyboard-input-non-pin', !isNumeric);
+  },
+
   /**
    * Fires an update event with the current PIN value. The event will only be
    * fired if the PIN value has actually changed.
@@ -58,8 +79,10 @@ Polymer({
    * @param {string} previous
    */
   onPinValueChange_: function(value, previous) {
-    if (value != previous)
+    if (value != previous) {
       this.fire('pin-change', { pin: value });
+      this.updateRtlState_(value);
+    }
   },
 
   /** Called when the user wants to erase the last character of the entered
@@ -84,5 +107,26 @@ Polymer({
       event.preventDefault();
       return;
     }
+  },
+
+  /**
+   * Changes the input type for the pin-keyboard input element, based on the
+   * input specified for the pin-keyboard.
+   * @param {string} value
+   */
+  onInputTypeChange_: function(value) {
+      if (value)
+        this.$$('#pin-input').type = 'password';

[jdufault, 2016/06/28 23:06:09]

Let's bind the input type to a property. The property will look like

  inputType_: {
    type: String,
    value: 'password'
  }

Then this can be simplified to

  this.inputType_ = value ? 'password' : 'number';

The HTML will be updated to look like

  <input id="pin-input" type="[[inputType_]]"></input>

[sammiequon, 2016/06/29 19:44:07]

Done.

+      else
+        this.$$('#pin-input').type = 'number';
+  },
+
+  /**
+   * Changes the placeholder text for the pin-keyboard input element,
+   * based on the i18n placeholder specified for the pin-keyboard.
+   * @param {string} value
+   */
+  onPlaceHolderChange_: function(value) {
+    this.$$('#pin-input').placeholder = value;
   }
 });