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..de65c4b296984ac069d76bee96c737b01aadb8a1
--- /dev/null
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin.html
@@ -0,0 +1,66 @@
+<link rel="import"href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<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/iron-icons/iron-icons.html">
+
+<dom-module id="pin-keyboard">
+  <link rel="import" type="css" href="pin.css">
+
+  <template>
+    <div id="root">
+      <div id="container-constrained-width">
+        <div id="profile-picture">
+        </div>
+
+        <div class="row horizontal-center">
+          <input id="pin-input" type="number" placeholder="Enter PIN"></input>

[tommycli, 2016/05/02 16:11:27]

Typically we use i18n strings instead of string literals.

[jdufault, 2016/05/03 19:21:57]

Added TODO.

+        </div>
+
+        <div class="row keyboard">
+          <paper-button class="btn custom-appearance" id="btn1">

[tommycli, 2016/05/02 16:11:27]

custom-appearance is no longer needed right?

[jdufault, 2016/05/03 19:21:57]

Done.

When I wrote the element I initially used <button> - some global styles applied
to it (even through the shady/shadow DOM), but those global styles do not apply
to paper-button.

+            <inner-text>1</inner-text>
+          </paper-button>
+          <paper-button class="btn custom-appearance" id="btn2">
+            <inner-text>2<subhead>ABC</subhead></inner-text>

[tommycli, 2016/05/02 16:11:27]

What is the internationalization of the numeric pinpad? Is it truly 1 -> ABC, 2
-> DEF, internationally?

[jdufault, 2016/05/03 19:21:57]

Added TODO

+          </paper-button>
+          <paper-button class="btn custom-appearance" id="btn3">
+            <inner-text>3<subhead>DEF</subhead></inner-text>
+          </paper-button>
+        </div>
+        <div class="row keyboard">
+          <paper-button class="btn custom-appearance" id="btn4">
+            <inner-text>4<subhead>GHI</subhead></inner-text>
+          </paper-button>
+          <paper-button class="btn custom-appearance" id="btn5">
+            <inner-text>5<subhead>JKL</subhead></inner-text>
+          </paper-button>
+          <paper-button class="btn custom-appearance" id="btn6">
+            <inner-text>6<subhead>MNO</subhead></inner-text>
+          </paper-button>
+        </div>
+        <div class="row keyboard">
+          <paper-button class="btn custom-appearance" id="btn7">
+            <inner-text>7<subhead>PQRS</subhead></inner-text>
+          </paper-button>
+          <paper-button class="btn custom-appearance" id="btn8">
+            <inner-text>8<subhead>TUV</subhead></inner-text>
+          </paper-button>
+          <paper-button class="btn custom-appearance" id="btn9">
+            <inner-text>9<subhead>WXYZ</subhead></inner-text>
+          </paper-button>
+        </div>
+        <div class="row keyboard">
+          <div class="blank-element"></div>
+          <paper-button class="btn custom-appearance" id="btn0">
+            <inner-text>0</inner-text>
+          </paper-button>
+          <div id="submitContainer">

[xiyuan, 2016/05/02 20:03:33]

nit: We don't use camel case for element id. submitContainer -> submit-container

[jdufault, 2016/05/03 19:21:57]

Done.

+            <paper-icon-button class="btn custom-appearance" icon="icons:check"
+                               id="submitButton"></paper-icon-button>

[xiyuan, 2016/05/02 20:03:33]

nit: submitButton -> submit-button

[jdufault, 2016/05/03 19:21:57]

Done.

+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script src="pin.js"></script>
+</dom-module>