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

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

Index: chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
diff --git a/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
new file mode 100644
index 0000000000000000000000000000000000000000..578269313f4b33d49fe26c54d4c91200c503e443
--- /dev/null
+++ b/chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html
@@ -0,0 +1,152 @@
+<!-- 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">
+  <template>
+    <style>
+      #root {
+        display: flex;
+      }
+
+      /* TODO(jdufault): Remove this CSS once we inline the PIN element with the
+       * user-pod. */
+      #container-constrained-width {
+        -webkit-tap-highlight-color: transparent;
+        background: white;
+        border-radius: 2px;
+        box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),
+                    0 2px 6px rgba(0, 0, 0, 0.15),
+                    0 3px 0 rgba(0, 0, 0, 0.08);
+        cursor: pointer;
+        flex-direction: column;
+        outline: none;
+      }
+
+      .row {
+        display: flex;
+      }
+
+      .row.horizontal-center {
+        justify-content: center;
+      }
+
+      .digit-button {
+        align-items: center;
+        background: none;
+        border-radius: 50px;
+        display: flex;
+        font-size: 30px;
+        justify-content: center;
+        margin: 5px;
+        min-width: 94px;
+        width: 94px;
+      }
+
+      .digit-button inner-text {
+        display: flex;
+        flex-direction: column;
+        height: 52px;
+      }
+
+      .digit-button inner-text subhead {
+        color: var(--paper-grey-500);
+        font-size: 16px;
+      }
+
+      .digit-button .submit-button {
+        background: var(--paper-blue-a400);
+        color: white;
+        font-size: 20px;
+        height: 60px;
+        min-width: 0;
+        width: 60px;
+      }
+
+      #pin-input {
+        -webkit-text-security: disc;
+        border-bottom-color: lightgray;
+        border-left: none;
+        border-right: none;
+        border-top: none;
+        font-size: 20px;
+        height: 30px;
+        margin-top: 10px;
+        text-align: center;
+        width: 95%;
+      }
+
+      #pin-input[type=number]::-webkit-inner-spin-button,
+      #pin-input[type=number]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      /* Ensure that all children of paper-button do not consume events. This
+       * simplifies the event handler code. */
+      paper-button * {
+        pointer-events: none;
+      }
+    </style>
+
+    <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_keyboard.js"></script>
+</dom-module>