Add a very basic PIN UI implementation that is shared between lock and settings.

chrome/browser/resources/chromeos/quick_unlock/pin.html

Index: chrome/browser/resources/chromeos/quick_unlock/pin.html
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin.html b/chrome/browser/resources/chromeos/quick_unlock/pin.html
new file mode 100644
index 0000000000000000000000000000000000000000..bb14d986aad0f42619fd5af2dc1c871e650c66e4
--- /dev/null
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin.html
@@ -0,0 +1,69 @@
+<!-- TODO(crbug.com/603217): Use i18n instead of string literals. Figure out
+                             what i18n to use for keypad, ie, does 1 ABC make
+                             sense in every scenario? -->
+
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/paper-styles.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
+
+<dom-module id="pin-keyboard">

[tommycli, 2016/05/06 18:15:44]

Since this is actually the pin-keyboard specifically, I think it would be
helpful if the HTML/JS files were named pin-keyboard.html/js

[jdufault, 2016/05/06 23:44:17]

Done.

+  <link rel="import" type="css" href="pin.css">

[tommycli, 2016/05/06 18:15:44]

External stylesheets have been deprecated in Polymer. See
https://www.polymer-project.org/1.0/docs/devguide/styling.html

[jdufault, 2016/05/06 23:44:17]

Done.

+
+  <template>
+    <div id="root">
+      <div id="container-constrained-width">
+        <div class="row horizontal-center">
+          <input id="pin-input" type="number" placeholder="Enter PIN"
+                 on-keydown="onInputKeyDown_"></input>
+        </div>
+
+        <div class="row keyboard">
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="1">
+            <inner-text>1</inner-text>
+          </paper-button>
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="2">
+            <inner-text>2<subhead>ABC</subhead></inner-text>
+          </paper-button>
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="3">
+            <inner-text>3<subhead>DEF</subhead></inner-text>
+          </paper-button>
+        </div>
+        <div class="row keyboard">
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="4">
+            <inner-text>4<subhead>GHI</subhead></inner-text>
+          </paper-button>
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="5">
+            <inner-text>5<subhead>JKL</subhead></inner-text>
+          </paper-button>
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="6">
+            <inner-text>6<subhead>MNO</subhead></inner-text>
+          </paper-button>
+        </div>
+        <div class="row keyboard">
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="7">
+            <inner-text>7<subhead>PQRS</subhead></inner-text>
+          </paper-button>
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="8">
+            <inner-text>8<subhead>TUV</subhead></inner-text>
+          </paper-button>
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="9">
+            <inner-text>9<subhead>WXYZ</subhead></inner-text>
+          </paper-button>
+        </div>
+        <div class="row keyboard">
+          <div class="digit-button"></div>
+          <paper-button class="digit-button" on-tap="onNumberTap_" value="0">
+            <inner-text>0</inner-text>
+          </paper-button>
+          <div class="digit-button">
+            <paper-icon-button class="digit-button submit-button"
+                               icon="icons:check" on-tap="onPinSubmit_">
+            </paper-icon-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script src="pin.js"></script>
+</dom-module>