Pin keyboard moved to under the user profile.

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

 <!-- 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">
+<link rel="stylesheet" href="pin_keyboard.css">
 
 <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"
+          <input id="pin-input" type="password" placeholder="Enter PIN or Password"
                  on-keydown="onInputKeyDown_"></input>
+          <div class="digit-button">

[jdufault, 2016/05/31 19:24:51]

Let's pull the pin keyboard changes out into a separate CL.

[sammiequon, 2016/06/14 22:22:21]

Done.

+            <paper-icon-button class="digit-button submit-button"
+                               icon="icons:check" on-tap="onPinSubmit_">
+            </paper-icon-button>
+          </div>
         </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>
@@ skipping 14 matching lines @@
             <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>
+            <inner-text>0<subhead>+</subhead></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>
+          <paper-icon-button class="digit-button clear-button"
+                             icon="icons:clear" on-tap="onPinClear_">
+          </paper-icon-button>
       </div>
     </div>
   </template>
   <script src="pin_keyboard.js"></script>
 </dom-module>