Rework quick unlock settings to follow new specs.

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

 // 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-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
  */
 var WEAK_PINS = [
   '1234', '1111', '0000', '1212', '7777', '1004', '2000', '4444', '2222',
   '6969'
 ];
 
 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
      */
     pinKeyboardValue_: String,
 
     /**
      * Stores the initial PIN value so it can be confirmed.
      * @private
      */
@@ skipping 19 matching lines @@
     /**
      * The current step/subpage we are on.
      * @private
      */
     isConfirmStep_: {
       type: Boolean,
       value: false
     },
   },
 
-  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
    */
   resetState_: function() {
     this.initialPin_ = '';
     this.pinKeyboardValue_ = '';
     this.enableSubmit_ = false;
     this.isConfirmStep_ = false;
     this.onPinChange_();
   },
 
+  /** @private */
+  onCancelTap_: function() {
+    this.resetState_();
+    this.$.dialog.cancel();
+  },
+
   /**
    * Returns true if the given PIN is likely easy to guess.
    * @private
    * @param {string} pin
    * @return {boolean}
    */
   isPinWeak_: function(pin) {
     // Warn if it's a top-10 pin.
     if (WEAK_PINS.includes(pin))
       return true;
@@ skipping 28 matching lines @@
    * @return {boolean}
    */
   canSubmit_: function() {
     return this.isPinLongEnough_(this.pinKeyboardValue_) &&
            this.initialPin_ == this.pinKeyboardValue_;
   },
 
   /**
    * 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();
   },
 
   /** @private */
   hideProblem_: function() {
     this.problemMessage_ = '';
     this.problemClass_ = '';
   },
 
   /** @private */
   onPinChange_: function() {
     if (!this.isConfirmStep_) {
       var isPinLongEnough = this.isPinLongEnough_(this.pinKeyboardValue_);
       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_();
 
       this.enableSubmit_ = isPinLongEnough;
 
     } else {
       var canSubmit = this.canSubmit_();
 
       if (!canSubmit && this.pinKeyboardValue_)
-        this.showProblem_(ProblemInfo.MISMATCHED);
+        this.showProblem_('configurePinMismatched', 'error');
       else
         this.hideProblem_();
 
       this.enableSubmit_ = canSubmit;
     }
   },
 
   /** @private */
   onPinSubmit_: function() {
     if (!this.isConfirmStep_) {
       if (this.isPinLongEnough_(this.pinKeyboardValue_)) {
         this.initialPin_ = this.pinKeyboardValue_;
         this.pinKeyboardValue_ = '';
         this.isConfirmStep_ = true;
         this.onPinChange_();
       }
     } else {
       // onPinSubmit_ gets called if the user hits enter on the PIN keyboard.
       // The PIN is not guaranteed to be valid in that case.
       if (!this.canSubmit_())
         return;
 
       function onSetModesCompleted(didSet) {
         if (!didSet) {
           console.error('Failed to update pin');
           return;
         }
 
         this.resetState_();
-        settings.navigateTo(settings.Route.QUICK_UNLOCK_CHOOSE_METHOD);
+        this.fire('done');
       }
 
       this.setModes.call(
         null,
         [chrome.quickUnlockPrivate.QuickUnlockMode.PIN],
         [this.pinKeyboardValue_],
         onSetModesCompleted.bind(this));
     }
   },
 
   /**
    * @private
    * @param {string} problemMessage
    * @return {boolean}
    */
   hasProblem_: function(problemMessage) {
     return !!problemMessage;
   },
 
   /**
    * @private
    * @param {boolean} isConfirmStep
    * @return {string}
    */
   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');
   },
 
   /**
    * @private
    * @param {boolean} isConfirmStep
    * @return {string}
    */
   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');
   },
 });
 
 })();