Rework quick unlock settings to follow new specs.

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

Index: chrome/browser/resources/settings/people_page/password_prompt_dialog.js
diff --git a/chrome/browser/resources/settings/people_page/quick_unlock_authenticate.js b/chrome/browser/resources/settings/people_page/password_prompt_dialog.js
similarity index 61%
rename from chrome/browser/resources/settings/people_page/quick_unlock_authenticate.js
rename to chrome/browser/resources/settings/people_page/password_prompt_dialog.js
index b2bae7663f8fc8ab29797be91deedfaf344c2141..b51cff9bcaa07ff339d6865c0e11150f1c734926 100644
--- a/chrome/browser/resources/settings/people_page/quick_unlock_authenticate.js
+++ b/chrome/browser/resources/settings/people_page/password_prompt_dialog.js
@@ -5,28 +5,29 @@
 /**
  * @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.
+ * 'settings-password-prompt-dialog' shows a dialog which asks for the user to

[tommycli, 2016/08/05 17:46:19]

Nice adaptation of existing code here!

[jdufault, 2016/08/05 20:59:52]

:)

+ * enter their password. It validates the password is correct. Once the user has
+ * entered their account password, the page fires an 'authenticated' event and
+ * updates the setModes binding.
  *
- * This element provides a wrapper around chrome.quickUnlockPrivate.setModes
- * which has a prebound account password (the |set-modes| property). The account
- * password by itself is not available for other elements to access.
+ * The setModes binding is a wrapper around chrome.quickUnlockPrivate.setModes
+ * which has a prebound account password. The account password by itself is not
+ * available for other elements to access.
  *
  * Example:
  *
- * <settings-quick-unlock-authenticate
- *   set-modes="[[setModes]]"
- *   current-route="{{currentRoute}}"
- *   profile-name="[[profileName_]]">
- * </settings-quick-unlock-authenticate>
+ * <settings-password-prompt-dialog
+ *   id="passwordPrompt"
+ *   set-modes="{{setModes}}">
+ * </settings-password-prompt-dialog>
+ *
+ * this.$.passwordPrompt.open()
  */
 
 (function() {
 'use strict';
 
 /** @const */ var PASSWORD_ACTIVE_DURATION_MS = 10 * 60 * 1000; // Ten minutes.
-/** @const */ var AUTOSUBMIT_DELAY_MS = 500; // .5 seconds
 
 /**
  * Helper method that checks if |password| is valid.
@@ -44,15 +45,9 @@ function checkAccountPassword_(password, onCheck) {
 }
 
 Polymer({
-  is: 'settings-quick-unlock-authenticate',
+  is: 'settings-password-prompt-dialog',
 
   properties: {
-    /** @type {!settings.Route} */
-    currentRoute: {
-      type: Object,
-      observer: 'onRouteChanged_',
-    },
-
     /**
      * A wrapper around chrome.quickUnlockPrivate.setModes with the account
      * password already supplied. If this is null, the authentication screen
@@ -65,18 +60,16 @@ Polymer({
     },
 
     /**
-     * Name of the profile.
-     */
-    profileName: String,
-
-    /**
      * The actual value of the password field. This is cleared whenever the
      * authentication screen is not displayed so that the user's password is not
      * easily available to an attacker. The actual password is stored as an
      * captured closure variable inside of setModes.
      * @private
      */
-    password_: String,
+    password_: {
+      type: String,
+      observer: 'onPasswordChanged_'
+    },
 
     /**
      * Helper property which marks password as valid/invalid.
@@ -85,34 +78,34 @@ Polymer({
     passwordInvalid_: Boolean
   },
 
-  /** @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.currentRoute != settings.Route.QUICK_UNLOCK_AUTHENTICATE) {
-      this.password_ = '';
-      this.passwordInvalid_ = false;
+  /**
+   * Open up the dialog. This will wait until the dialog has loaded before
+   * opening it.
+   */
+  open: function() {
+    // Wait until the dialog is attached to the DOM before trying to open it.
+    var dialog = /** @type {{isConnected: boolean}} */ (this.$.dialog);
+    if (!dialog.isConnected) {
+      setTimeout(this.open.bind(this));
+      return;
     }
+
+    this.$.dialog.showModal();
   },
 
   /**
-   * Start or restart a timer to check the account password and move past the
-   * authentication screen.
-   * @private
+   * Close the dialog.
    */
-  startDelayedPasswordCheck_: function() {
-    clearTimeout(this.delayedPasswordCheckTimeout_);
-    this.delayedPasswordCheckTimeout_ =
-        setTimeout(this.checkPasswordNow_.bind(this), AUTOSUBMIT_DELAY_MS);
+  close: function() {
+    if (this.$.dialog.open)
+      this.$.dialog.close();
   },
 
   /**
-   * Run the account password check right now. This will cancel any delayed
-   * check.
+   * Run the account password check.
    * @private
    */
-  checkPasswordNow_: function() {
-    clearTimeout(this.delayedPasswordCheckTimeout_);
+  checkPassword_: function() {
     clearTimeout(this.clearAccountPasswordTimeout_);
 
     // The user might have started entering a password and then deleted it all.
@@ -146,13 +139,22 @@ Polymer({
         }
 
         this.clearAccountPasswordTimeout_ = setTimeout(
-            clearSetModes.bind(this), PASSWORD_ACTIVE_DURATION_MS);
-
-        settings.navigateTo(settings.Route.QUICK_UNLOCK_CHOOSE_METHOD);
+          clearSetModes.bind(this), PASSWORD_ACTIVE_DURATION_MS);
+        this.$.dialog.close();
       }
     }
 
     checkAccountPassword_(this.password_, onPasswordChecked.bind(this));
+  },
+
+  /** @private */
+  onPasswordChanged_: function() {
+    this.passwordInvalid_ = false;
+  },
+
+  /** @private */
+  enableConfirm_: function() {
+    return !!this.password_ && !this.passwordInvalid_;
   }
 });