Add the authenticate screen for the quick unlock settings.

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

Index: chrome/browser/resources/settings/people_page/quick_unlock_authenticate.js
diff --git a/chrome/browser/resources/settings/people_page/quick_unlock_authenticate.js b/chrome/browser/resources/settings/people_page/quick_unlock_authenticate.js
new file mode 100644
index 0000000000000000000000000000000000000000..e855ed7b9b991b41da4f99a3e0a5c3cba078bae3
--- /dev/null
+++ b/chrome/browser/resources/settings/people_page/quick_unlock_authenticate.js
@@ -0,0 +1,135 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview
+ *
+ * 'settings-quick-unlock-authenticate' shows a password input prompt to the
+ * user. It validates the password is correct. Once the user has entered their
+ * account password, the page navigates to the quick unlock setup methods page.
+ *
+ * Example:
+ *
+ * <settings-quick-unlock-authenticate
+ *   account-password="{{quickUnlockAccountPassword}}"
+ *   current-route="{{currentRoute}}"
+ *   profile-name="[[profileName_]]">
+ * </settings-quick-unlock-authenticate>
+ */
+
+/** @const */ var PASSWORD_ACTIVE_DURATION_MS = 10 * 60 * 1000; // Ten minutes.
+
+Polymer({
+  is: 'settings-quick-unlock-authenticate',
+
+  behaviors: [
+    QuickUnlockRoutingBehavior
+  ],
+
+  properties: {
+    /**
+     * The user's account/gaia password. This value will self-reset after a
+     * preset duration (see PASSWORD_ACTIVE_DURATION_MS).
+     */
+    accountPassword: {
+      type: String,
+      notify: true,
+      value: ''
+    },
+
+    /**
+     * Name of the profile.
+     */
+    profileName: String,
+
+    /**
+     * The actual value of the password field. Stored separately from
+     * accountPassword to split up the different lifetimes.
+     * @private
+     */
+    password_: String,
+
+    /**
+     * Helper property which marks password as valid/invalid.
+     * @private
+     */
+    passwordInvalid_: Boolean
+  },
+
+  observers: [
+    'onRouteChanged_(currentRoute)'
+  ],
+
+  /** @override */
+  screenType: function() {
+    return QuickUnlockScreen.AUTHENTICATE;
+  },
+
+  /** @private */
+  onRouteChanged_: function(currentRoute) {
+    // Clear local state if this screen is not active so if this screen shows
+    // up again the user will get a fresh UI.
+    if (!this.isScreenActive(QuickUnlockScreen.AUTHENTICATE)) {
+      this.password_ = '';
+      this.passwordInvalid_ = false;
+    }
+  },
+
+  /**
+   * Start or restart a timer to check the account password and move past the
+   * authentication screen.
+   * @private
+   */
+  startDelayedPasswordCheck_: function() {

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

There's no Submit button? Can the user still press Enter to submit the password?

Is there any precedent for auto-checking the entered password after 500ms? This
seems highly unusual.

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

Right, there is no submit button. Pressing enter will call checkPasswordNow_.

I'm not sure if there is precedent for auto-submit, but since there is no submit
button in the mocks I think it makes a lot of sense.

+    clearTimeout(this.delayedPasswordCheckoutTimeout_);
+    this.delayedPasswordCheckoutTimeout_ =
+        setTimeout(this.checkPasswordNow_.bind(this), 500);
+  },
+
+  /**
+   * Run the account password check right now. This will cancel any delayed
+   * check.
+   * @private
+   */
+  checkPasswordNow_: function() {
+    clearTimeout(this.delayedPasswordCheckoutTimeout_);
+
+    // The user might have started entering a password and then deleted it all.
+    // Do not submit/show an error in this case.
+    if (!this.password_) {
+      this.passwordInvalid_ = false;
+      return;
+    }
+
+    // We check the account password by trying to update the active set of quick
+    // unlock modes without changing any credentials.
+    chrome.quickUnlockPrivate.getActiveModes(function(modes) {
+      var credentials = Array(modes.length).fill('');
+      chrome.quickUnlockPrivate.setModes(this.password_, modes, credentials,
+                                         onPasswordChecked.bind(this));
+    }.bind(this));
+
+    function onPasswordChecked(valid) {
+      // Note that the password might have been cleared during the duration of
+      // the getActiveModes call.
+      this.passwordInvalid_ = !valid && !!this.password_;
+
+      if (valid) {
+        // Set the account password, clear it after
+        // |PASSWORD_ACTIVE_DURATION_MS|, and navigate to the choose method
+        // screen.
+        this.accountPassword = this.password_;
+        setTimeout(this.clearAccountPassword_.bind(this),

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

We would want to cancel this timeout if we re-entered the password right?

But more importantly, can we not store the password in a JS variable? Someone
could just grab it with inspector.

Can the C++ side just 'remember' that the user is authenticated for 10 minutes?

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

Done
It's non-trivial at this point to make the C++ side remember; based on offline
discussion, going with a closure.

+                   PASSWORD_ACTIVE_DURATION_MS);
+
+        this.navigateToScreen(QuickUnlockScreen.CHOOSE_METHOD);
+      }
+    }
+  },
+
+  /** @private */
+  clearAccountPassword_: function() {
+    this.accountPassword = '';
+  }
+});