Rework quick unlock settings to follow new specs.

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

Index: chrome/browser/resources/settings/people_page/setup_pin_dialog.js
diff --git a/chrome/browser/resources/settings/people_page/quick_unlock_setup_pin.js b/chrome/browser/resources/settings/people_page/setup_pin_dialog.js
similarity index 68%
rename from chrome/browser/resources/settings/people_page/quick_unlock_setup_pin.js
rename to chrome/browser/resources/settings/people_page/setup_pin_dialog.js
index 4f28913744913321a1042ba5a0dc0683db019894..8633fe4a511dbdb1c59453cdb69998e0b784a5c8 100644
--- a/chrome/browser/resources/settings/people_page/quick_unlock_setup_pin.js
+++ b/chrome/browser/resources/settings/people_page/setup_pin_dialog.js
@@ -4,41 +4,19 @@
 
 /**
  * @fileoverview
- * 'settings-quick-unlock-setup-pin' is the settings page for choosing a PIN.
+ * 'settings-setup-pin-dialog' is the settings page for choosing a PIN.
  *
  * Example:
  *
- * <settings-quick-unlock-setup-pin
+ * <settings-setup-pin-dialog
  *   set-modes="[[quickUnlockSetModes]]"

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

fold into above line and add ">" ending char

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

Done.

- *   current-route="{{currentRoute}}">
- * </settings-quick-unlock-setup-pin>
+ * </settings-setup-pin-dialog>
  */
 
 (function() {
 'use strict';
 
 /**
- * Metainformation about a problem message to pass to showProblem. |class| is
- * the css class to show the problem message with. |messageId| is the i18n
- * string id to use.
- * @const
- */
-var ProblemInfo = {
-  TOO_SHORT: {
-    messageId: 'quickUnlockConfigurePinChoosePinTooShort',
-    class: 'error'
-  },
-  WEAK: {
-    messageId: 'quickUnlockConfigurePinChoosePinWeakPinWarning',
-    class: 'warning'
-  },
-  MISMATCHED: {
-    messageId: 'quickUnlockConfigurePinMismatchedPins',
-    class: 'error'
-  }
-};
-
-/**
  * A list of the top-10 most commmonly used PINs. This list is taken from
  * www.datagenetics.com/blog/september32012/.
  * @const
@@ -49,17 +27,11 @@ var WEAK_PINS = [
 ];
 
 Polymer({
-  is: 'settings-quick-unlock-setup-pin',
+  is: 'settings-setup-pin-dialog',
 
-  behaviors: [I18nBehavior, QuickUnlockPasswordDetectBehavior],
+  behaviors: [I18nBehavior],
 
   properties: {
-    /** @type {!settings.Route} */
-    currentRoute: {
-      type: Object,
-      observer: 'onRouteChanged_',
-    },
-
     /**
      * The current PIN keyboard value.
      * @private
@@ -99,36 +71,23 @@ Polymer({
     },
   },
 
-  observers: ['onSetModesChanged_(setModes)'],
-
   /** @override */
   attached: function() {
     this.resetState_();
-
-    if (this.currentRoute == settings.Route.QUICK_UNLOCK_SETUP_PIN)
-      this.askForPasswordIfUnset();
   },
 
-  /**
-   * @param {!settings.Route} currentRoute
-   * @private
-   */
-  onRouteChanged_: function(currentRoute) {
-    if (this.currentRoute == settings.Route.QUICK_UNLOCK_SETUP_PIN) {
-      this.askForPasswordIfUnset();
-    } else {
-      // If the user hits the back button, they can leave the element
-      // half-completed; therefore, reset state if the element is not active.
-      this.resetState_();
-    }
+  open: function() {
+    this.$.dialog.showModal();
+    this.$.pinKeyboard.focus();
   },
 
-  /** @private */
-  onSetModesChanged_: function() {
-    if (this.currentRoute == settings.Route.QUICK_UNLOCK_SETUP_PIN)
-      this.askForPasswordIfUnset();
+  close: function() {
+    if (this.$.dialog.open)
+      this.$.dialog.close();
   },
 
+  // TODO(jdufault): Make sure we reset flow if half-completed.

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

?

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

Fixed the bug and removed the TODO.

+
   /**
    * Resets the element to the initial state.
    * @private
@@ -141,6 +100,12 @@ Polymer({
     this.onPinChange_();
   },
 
+  /** @private */
+  onCancelTap_: function() {
+    this.resetState_();
+    this.$.dialog.cancel();
+  },
+
   /**
    * Returns true if the given PIN is likely easy to guess.
    * @private
@@ -189,11 +154,12 @@ Polymer({
   /**
    * Notify the user about a problem.
    * @private
-   * @param {!{messageId: string, class: string}} problemInfo
+   * @param {string} messageId
+   * @param {string} problemClass
    */
-  showProblem_: function(problemInfo) {
-    this.problemMessage_ = this.i18n(problemInfo.messageId);
-    this.problemClass_ = problemInfo.class;
+  showProblem_: function(messageId, problemClass) {
+    this.problemMessage_ = this.i18n(messageId);
+    this.problemClass_ = problemClass;
     this.updateStyles();
   },
 
@@ -210,9 +176,9 @@ Polymer({
       var isWeak = isPinLongEnough && this.isPinWeak_(this.pinKeyboardValue_);
 
       if (!isPinLongEnough && this.pinKeyboardValue_)
-        this.showProblem_(ProblemInfo.TOO_SHORT);
+        this.showProblem_('configurePinTooShort', 'error');
       else if (isWeak)
-        this.showProblem_(ProblemInfo.WEAK);
+        this.showProblem_('configurePinWeakPin', 'warning');
       else
         this.hideProblem_();
 
@@ -222,7 +188,7 @@ Polymer({
       var canSubmit = this.canSubmit_();
 
       if (!canSubmit && this.pinKeyboardValue_)
-        this.showProblem_(ProblemInfo.MISMATCHED);
+        this.showProblem_('configurePinMismatched', 'error');
       else
         this.hideProblem_();
 
@@ -252,7 +218,7 @@ Polymer({
         }
 
         this.resetState_();
-        settings.navigateTo(settings.Route.QUICK_UNLOCK_CHOOSE_METHOD);
+        this.fire('done');
       }
 
       this.setModes.call(
@@ -279,8 +245,8 @@ Polymer({
    */
   getTitleMessage_: function(isConfirmStep) {
     if (!isConfirmStep)

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

Ternary expression?

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

Done.

-      return this.i18n('quickUnlockConfigurePinChoosePinTitle');
-    return this.i18n('quickUnlockConfigurePinConfirmPinTitle');
+      return this.i18n('configurePinChoosePinTitle');
+    return this.i18n('configurePinConfirmPinTitle');
   },
 
   /**
@@ -290,8 +256,8 @@ Polymer({
    */
   getContinueMessage_: function(isConfirmStep) {
     if (!isConfirmStep)

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

Ternary expression?

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

Done.

-      return this.i18n('quickUnlockConfigurePinContinueButton');
-    return this.i18n('save');
+      return this.i18n('configurePinContinueButton');
+    return this.i18n('confirm');
   },
 });