Add the authenticate screen for the quick unlock settings.

chrome/browser/resources/settings/people_page/quick_unlock_authenticate.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
+<link rel="import" href="/people_page/quick_unlock_routing_behavior.html">
+<link rel="import" href="/settings_page/settings_section.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="settings-quick-unlock-authenticate">
+  <template>
+    <style include="settings-shared"></style>
+    <style>
+      .middle {
+        flex-grow: 0 !important;

[tommycli, 2016/06/24 00:56:38]

!important is really discouraged.

If you don't need flexbox (and i think you may not), try class="settings-box
block".

https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/settin...

[jdufault, 2016/06/29 19:06:38]

Done.

+        margin-right: 16px;
+      }
+
+      #password-container {
+        flex-grow: 1;

[tommycli, 2016/06/24 00:56:38]

Does this make the password line span the whole line? Try:
      paper-input {
        width: var(--paper-input-max-width);
      }

That's used in many other parts of settings.

[jdufault, 2016/06/29 19:06:39]

I've realigned with mocks and the password line no longer takes the full line
width.

+      }
+
+      paper-input {
+        margin-bottom: 22px;

[tommycli, 2016/06/24 00:56:38]

Is this to make the settings box a bit taller? Maybe try "settings-box two-line"
class? Or if there's a good reason, add a comment to explain the number.

[jdufault, 2016/06/29 19:06:38]

I've added some comments and solved the problem differently, but essentially the
paper-input element has a hidden floating element which makes makes the
secondary-action vertical splitter be vertically unbalanced (top-heavy).

+      }
+    </style>
+
+    <div>
+      <div class="settings-box">$i18n{quickUnlockConfirmLogin}</div>
+
+      <div class="settings-box first">
+        <div class="middle">

[tommycli, 2016/06/24 00:56:38]

Is the middle class to produce the horizontal line displayed in the mocks? 

[jdufault, 2016/06/29 19:06:39]

Removed

+          <span id="profile-name">
+            [[profileName]]
+          </span>
+        </div>
+
+        <span id="password-container" class="secondary-action">
+          <paper-input id="password-input" type="password"
+                       label="$i18n{quickUnlockPasswordLabel}"
+                       value="{{password_}}"
+                       invalid$="[[passwordInvalid_]]"
+                       on-change="checkPasswordNow_"
+                       on-input="startDelayedPasswordCheck_"
+                       error-message="$i18n{quickUnlockInvalidPassword}"
+                       aria-disabled="false">
+          </paper-input>
+        </span>
+      </div>
+    </div>
+  </template>
+
+  <script src="quick_unlock_authenticate.js"></script>
+</dom-module>