Settings UI: security key dialog pages code cleanup

Extract enums for the |dialogPage| properties of the various security
key related dialogs. No functional changes.

Bug: 974046
Change-Id: I3a1634a37a2e24c2a2d2a7fb9c7c17ddc8a36237
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1912632
Commit-Queue: Martin Kreichgauer <martinkr@google.com>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#715922}

chrome/browser/resources/settings/privacy_page/security_keys_bio_enroll_dialog.js

@@ -2,14 +2,33 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-(function() {
-'use strict';
-
 /**
  * @fileoverview 'settings-security-keys-bio-enroll-dialog' is a dialog for
  * listing, adding, renaming, and deleting biometric enrollments stored on a
  * security key.
  */
+
+cr.define('settings', function() {
+  /** @enum {string} */
+  const BioEnrollDialogPage = {
+    INITIAL: 'initial',
+    PIN_PROMPT: 'pinPrompt',
+    ENROLLMENTS: 'enrollments',
+    ENROLL: 'enroll',
+    CHOOSE_NAME: 'chooseName',
+    ERROR: 'error',
+  };
+
+  return {
+    BioEnrollDialogPage: BioEnrollDialogPage,
+  };
+});
+
+(function() {
+'use strict';
+
+const BioEnrollDialogPage = settings.BioEnrollDialogPage;
+
 Polymer({
   is: 'settings-security-keys-bio-enroll-dialog',
 
@@ -36,11 +55,11 @@ Polymer({
 
     /**
      * The ID of the element currently shown in the dialog.
-     * @private
+     * @private {!settings.BioEnrollDialogPage}
      */
     dialogPage_: {
       type: String,
-      value: 'initial',
+      value: BioEnrollDialogPage.INITIAL,
       observer: 'dialogPageChanged_',
     },
 
@@ -88,7 +107,7 @@ Polymer({
 
   /** @private */
   collectPIN_: function() {
-    this.dialogPage_ = 'pinPrompt';
+    this.dialogPage_ = BioEnrollDialogPage.PIN_PROMPT;
     this.$.pin.focus();
   },
 
@@ -98,7 +117,7 @@ Polymer({
    */
   onError_: function(error) {
     this.errorMsg_ = error;
-    this.dialogPage_ = 'error';
+    this.dialogPage_ = BioEnrollDialogPage.ERROR;
   },
 
   /** @private */
@@ -124,44 +143,44 @@ Polymer({
   onEnrollments_: function(enrollments) {
     this.enrollments_ = enrollments;
     this.$.enrollmentList.fire('iron-resize');
-    this.dialogPage_ = 'enrollments';
+    this.dialogPage_ = BioEnrollDialogPage.ENROLLMENTS;
   },
 
   /** @private */
   dialogPageChanged_: function() {
     switch (this.dialogPage_) {
-      case 'initial':
+      case BioEnrollDialogPage.INITIAL:
         this.cancelButtonVisible_ = true;
         this.cancelButtonDisabled_ = false;
         this.confirmButtonVisible_ = false;
         this.doneButtonVisible_ = false;
         break;
-      case 'pinPrompt':
+      case BioEnrollDialogPage.PIN_PROMPT:
         this.cancelButtonVisible_ = true;
         this.cancelButtonDisabled_ = false;
         this.confirmButtonVisible_ = true;
         this.confirmButtonDisabled_ = false;
         this.doneButtonVisible_ = false;
         break;
-      case 'enrollments':
+      case BioEnrollDialogPage.ENROLLMENTS:
         this.cancelButtonVisible_ = false;
         this.confirmButtonVisible_ = false;
         this.doneButtonVisible_ = true;
         break;
-      case 'enroll':
+      case BioEnrollDialogPage.ENROLL:
         this.cancelButtonVisible_ = true;
         this.cancelButtonDisabled_ = false;
         this.confirmButtonVisible_ = false;
         this.doneButtonVisible_ = false;
         break;
-      case 'chooseName':
+      case BioEnrollDialogPage.CHOOSE_NAME:
         this.cancelButtonVisible_ = false;
         this.confirmButtonVisible_ = true;
         this.confirmButtonDisabled_ = !this.recentEnrollmentName_.length;
         this.doneButtonVisible_ = false;
         this.$.enrollmentName.focus();
         break;
-      case 'error':
+      case BioEnrollDialogPage.ERROR:
         this.cancelButtonVisible_ = false;
         this.confirmButtonVisible_ = false;
         this.doneButtonVisible_ = true;
@@ -174,7 +193,7 @@ Polymer({
 
   /** @private */
   addButtonClick_: function() {
-    assert(this.dialogPage_ == 'enrollments');
+    assert(this.dialogPage_ == BioEnrollDialogPage.ENROLLMENTS);
 
     this.maxSamples_ = -1;  // Reset maxSamples_ before enrolling starts.
     this.$.arc.reset();
@@ -184,7 +203,7 @@ Polymer({
     this.recentEnrollmentId_ = '';
     this.recentEnrollmentName_ = '';
 
-    this.dialogPage_ = 'enroll';
+    this.dialogPage_ = BioEnrollDialogPage.ENROLL;
 
     this.browserProxy_.startEnrolling().then(response => {
       this.onEnrolling_(response);
@@ -240,14 +259,14 @@ Polymer({
     // pending. Resetting |dialogPage_| will re-enable it.
     this.confirmButtonDisabled_ = true;
     switch (this.dialogPage_) {
-      case 'pinPrompt':
+      case BioEnrollDialogPage.PIN_PROMPT:
         this.submitPIN_();
         break;
-      case 'enroll':
+      case BioEnrollDialogPage.ENROLL:
         assert(!!this.recentEnrollmentId_.length);
-        this.dialogPage_ = 'chooseName';
+        this.dialogPage_ = BioEnrollDialogPage.CHOOSE_NAME;
         break;
-      case 'chooseName':
+      case BioEnrollDialogPage.CHOOSE_NAME:
         this.browserProxy_
             .renameEnrollment(
                 this.recentEnrollmentId_, this.recentEnrollmentName_)
@@ -269,7 +288,7 @@ Polymer({
 
   /** @private */
   cancel_: function() {
-    if (this.dialogPage_ == 'enroll') {
+    if (this.dialogPage_ == BioEnrollDialogPage.ENROLL) {
       // Cancel an ongoing enrollment.  Will cause the pending
       // enumerateEnrollments() promise to be resolved and proceed to the
       // enrollments page.
@@ -324,11 +343,12 @@ Polymer({
 
   /**
    * @private
-   * @param {string} dialogPage
+   * @param {!settings.BioEnrollDialogPage} dialogPage
    * @return {string} The title string for the current dialog page.
    */
   dialogTitle_: function(dialogPage) {
-    if (dialogPage == 'enroll' || dialogPage == 'chooseName') {
+    if (dialogPage == BioEnrollDialogPage.ENROLL ||
+        dialogPage == BioEnrollDialogPage.CHOOSE_NAME) {
       return this.i18n('securityKeysBioEnrollmentAddTitle');
     }
     return this.i18n('securityKeysBioEnrollmentDialogTitle');

chrome/browser/resources/settings/privacy_page/security_keys_browser_proxy.js

@@ -7,7 +7,7 @@ cr.exportPath('settings');
 /**
  * Ctap2Status contains a subset of CTAP2 status codes. See
  * device::CtapDeviceResponseCode for the full list.
- * @enum{number}
+ * @enum {number}
  */
 const Ctap2Status = {
   OK: 0x0,

chrome/browser/resources/settings/privacy_page/security_keys_credential_management_dialog.js

@@ -2,13 +2,30 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-(function() {
-'use strict';
-
 /**
  * @fileoverview 'settings-security-keys-credential-management-dialog' is a
  * dialog for viewing and erasing credentials stored on a security key.
  */
+
+cr.define('settings', function() {
+  /** @enum {string} */
+  const CredentialManagementDialogPage = {
+    INITIAL: 'initial',
+    PIN_PROMPT: 'pinPrompt',
+    CREDENTIALS: 'credentials',
+    ERROR: 'error',
+  };
+
+  return {
+    CredentialManagementDialogPage: CredentialManagementDialogPage,
+  };
+});
+
+(function() {
+'use strict';
+
+const CredentialManagementDialogPage = settings.CredentialManagementDialogPage;
+
 Polymer({
   is: 'settings-security-keys-credential-management-dialog',
 
@@ -20,11 +37,11 @@ Polymer({
   properties: {
     /**
      * The ID of the element currently shown in the dialog.
-     * @private
+     * @private {!settings.CredentialManagementDialogPage}
      */
     dialogPage_: {
       type: String,
-      value: 'initial',
+      value: CredentialManagementDialogPage.INITIAL,
       observer: 'dialogPageChanged_',
     },
 
@@ -80,7 +97,7 @@ Polymer({
 
   /** @private */
   collectPin_: function() {
-    this.dialogPage_ = 'pinPrompt';
+    this.dialogPage_ = CredentialManagementDialogPage.PIN_PROMPT;
     this.$.pin.focus();
   },
 
@@ -90,7 +107,7 @@ Polymer({
    */
   onError_: function(error) {
     this.errorMsg_ = error;
-    this.dialogPage_ = 'error';
+    this.dialogPage_ = CredentialManagementDialogPage.ERROR;
   },
 
   /** @private */
@@ -137,25 +154,25 @@ Polymer({
     }
     this.credentials_ = credentials;
     this.$.credentialList.fire('iron-resize');
-    this.dialogPage_ = 'credentials';
+    this.dialogPage_ = CredentialManagementDialogPage.CREDENTIALS;
   },
 
   /** @private */
   dialogPageChanged_: function() {
     switch (this.dialogPage_) {
-      case 'initial':
+      case CredentialManagementDialogPage.INITIAL:
         this.cancelButtonVisible_ = true;
         this.confirmButtonVisible_ = false;
         this.closeButtonVisible_ = false;
         break;
-      case 'pinPrompt':
+      case CredentialManagementDialogPage.PIN_PROMPT:
         this.cancelButtonVisible_ = true;
         this.confirmButtonLabel_ = this.i18n('continue');
         this.confirmButtonDisabled_ = false;
         this.confirmButtonVisible_ = true;
         this.closeButtonVisible_ = false;
         break;
-      case 'credentials':
+      case CredentialManagementDialogPage.CREDENTIALS:
         this.cancelButtonVisible_ = true;
         this.confirmButtonLabel_ =
             this.i18n('securityKeysCredentialManagementErase');
@@ -163,7 +180,7 @@ Polymer({
         this.confirmButtonVisible_ = true;
         this.closeButtonVisible_ = false;
         break;
-      case 'error':
+      case CredentialManagementDialogPage.ERROR:
         this.cancelButtonVisible_ = false;
         this.confirmButtonVisible_ = false;
         this.closeButtonVisible_ = true;
@@ -177,10 +194,10 @@ Polymer({
   /** @private */
   confirmButtonClick_: function() {
     switch (this.dialogPage_) {
-      case 'pinPrompt':
+      case CredentialManagementDialogPage.PIN_PROMPT:
         this.submitPIN_();
         break;
-      case 'credentials':
+      case CredentialManagementDialogPage.CREDENTIALS:
         this.deleteSelectedCredentials_();
         break;
       default:
@@ -256,7 +273,7 @@ Polymer({
 
   /** @private */
   deleteSelectedCredentials_: function() {
-    assert(this.dialogPage_ == 'credentials');
+    assert(this.dialogPage_ == CredentialManagementDialogPage.CREDENTIALS);
     assert(this.credentials_ && this.credentials_.length > 0);
     assert(this.checkedCredentialIds_.size > 0);
 
@@ -269,6 +286,5 @@ Polymer({
           this.onError_(err);
         });
   },
-
 });
 })();

chrome/browser/resources/settings/privacy_page/security_keys_reset_dialog.html

@@ -35,7 +35,7 @@
             <p>[[resetFailed_(errorCode_)]]</p>
           </div>
 
-          <div id="reset2">
+          <div id="resetConfirm">
             <p>$i18n{securityKeysResetStep2}</p>
           </div>
 

chrome/browser/resources/settings/privacy_page/security_keys_reset_dialog.js

@@ -6,6 +6,29 @@
  * @fileoverview 'settings-security-keys-reset-dialog' is a dialog for
  * triggering factory resets of security keys.
  */
+
+cr.define('settings', function() {
+  /** @enum {string} */
+  const ResetDialogPage = {
+    INITIAL: 'initial',
+    NO_RESET: 'noReset',
+    RESET_FAILED: 'resetFailed',
+    RESET_CONFIRM: 'resetConfirm',
+    RESET_SUCCESS: 'resetSuccess',
+    RESET_NOT_ALLOWED: 'resetNotAllowed',
+  };
+
+
+  return {
+    ResetDialogPage: ResetDialogPage,
+  };
+});
+
+(function() {
+'use strict';
+
+const ResetDialogPage = settings.ResetDialogPage;
+
 Polymer({
   is: 'settings-security-keys-reset-dialog',
 
@@ -29,11 +52,11 @@ Polymer({
 
     /**
      * The id of an element on the page that is currently shown.
-     * @private
+     * @private {!settings.ResetDialogPage}
      */
     shown_: {
       type: String,
-      value: 'initial',
+      value: ResetDialogPage.INITIAL,
     },
 
     /**
@@ -56,24 +79,24 @@ Polymer({
       // code is a CTAP error code. See
       // https://fidoalliance.org/specs/fido-v2.0-rd-20180702/fido-client-to-authenticator-protocol-v2.0-rd-20180702.html#error-responses
       if (code == 1 /* INVALID_COMMAND */) {
-        this.shown_ = 'noReset';
+        this.shown_ = ResetDialogPage.NO_RESET;
         this.finish_();
       } else if (code != 0 /* unknown error */) {
         this.errorCode_ = code;
-        this.shown_ = 'resetFailed';
+        this.shown_ = ResetDialogPage.RESET_FAILED;
         this.finish_();
       } else {
         this.title_ = this.i18n('securityKeysResetConfirmTitle');
-        this.shown_ = 'reset2';
+        this.shown_ = ResetDialogPage.RESET_CONFIRM;
         this.browserProxy_.completeReset().then(code => {
           this.title_ = this.i18n('securityKeysResetTitle');
           if (code == 0 /* SUCCESS */) {
-            this.shown_ = 'resetSuccess';
+            this.shown_ = ResetDialogPage.RESET_SUCCESS;
           } else if (code == 48 /* NOT_ALLOWED */) {
-            this.shown_ = 'resetNotAllowed';
+            this.shown_ = ResetDialogPage.RESET_NOT_ALLOWED;
           } else /* unknown error */ {
             this.errorCode_ = code;
-            this.shown_ = 'resetFailed';
+            this.shown_ = ResetDialogPage.RESET_FAILED;
           }
           this.finish_();
         });
@@ -139,3 +162,4 @@ Polymer({
     return complete ? 'action-button' : 'cancel-button';
   },
 });
+})();

chrome/browser/resources/settings/privacy_page/security_keys_set_pin_dialog.js

@@ -2,13 +2,33 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-(function() {
-'use strict';
-
 /**
  * @fileoverview 'settings-security-keys-set-pin-dialog' is a dialog for
  * setting and changing security key PINs.
  */
+
+cr.define('settings', function() {
+  /** @enum {string} */
+  const SetPINDialogPage = {
+    INITIAL: 'initial',
+    NO_PIN_SUPPORT: 'noPINSupport',
+    REINSERT: 'reinsert',
+    LOCKED: 'locked',
+    ERROR: 'error',
+    PIN_PROMPT: 'pinPrompt',
+    SUCCESS: 'success',
+  };
+
+  return {
+    SetPINDialogPage: SetPINDialogPage,
+  };
+});
+
+(function() {
+'use strict';
+
+const SetPINDialogPage = settings.SetPINDialogPage;
+
 Polymer({
   is: 'settings-security-keys-set-pin-dialog',
 
@@ -119,11 +139,11 @@ Polymer({
 
     /**
      * The id of an element on the page that is currently shown.
-     * @private
+     * @private {!settings.SetPINDialogPage}
      */
     shown_: {
       type: String,
-      value: 'initial',
+      value: SetPINDialogPage.INITIAL,
     },
 
     /**
@@ -158,22 +178,22 @@ Polymer({
         // Operation is complete. errorCode is a CTAP error code. See
         // https://fidoalliance.org/specs/fido-v2.0-rd-20180702/fido-client-to-authenticator-protocol-v2.0-rd-20180702.html#error-responses
         if (errorCode == 1 /* INVALID_COMMAND */) {
-          this.shown_ = 'noPINSupport';
+          this.shown_ = SetPINDialogPage.NO_PIN_SUPPORT;
           this.finish_();
         } else if (errorCode == 52 /* temporarily locked */) {
-          this.shown_ = 'reinsert';
+          this.shown_ = SetPINDialogPage.REINSERT;
           this.finish_();
         } else if (errorCode == 50 /* locked */) {
-          this.shown_ = 'locked';
+          this.shown_ = SetPINDialogPage.LOCKED;
           this.finish_();
         } else {
           this.errorCode_ = errorCode;
-          this.shown_ = 'error';
+          this.shown_ = SetPINDialogPage.ERROR;
           this.finish_();
         }
       } else if (errorCode == 0) {
         // A device can also signal that it is locked by returning zero retries.
-        this.shown_ = 'locked';
+        this.shown_ = SetPINDialogPage.LOCKED;
         this.finish_();
       } else {
         // Need to prompt for a pin. Initially set the text boxes to valid so
@@ -196,7 +216,7 @@ Polymer({
           this.title_ = this.i18n('securityKeysSetPINChangeTitle');
         }
 
-        this.shown_ = 'pinPrompt';
+        this.shown_ = SetPINDialogPage.PIN_PROMPT;
         // Focus cannot be set directly from within a backend callback.
         window.setTimeout(function() {
           focusTarget.focus();
@@ -367,13 +387,13 @@ Polymer({
       // result[1] is a CTAP2 error code. See
       // https://fidoalliance.org/specs/fido-v2.0-rd-20180702/fido-client-to-authenticator-protocol-v2.0-rd-20180702.html#error-responses
       if (result[1] == 0 /* SUCCESS */) {
-        this.shown_ = 'success';
+        this.shown_ = SetPINDialogPage.SUCCESS;
         this.finish_();
       } else if (result[1] == 52 /* temporarily locked */) {
-        this.shown_ = 'reinsert';
+        this.shown_ = SetPINDialogPage.REINSERT;
         this.finish_();
       } else if (result[1] == 50 /* locked */) {
-        this.shown_ = 'locked';
+        this.shown_ = SetPINDialogPage.LOCKED;
         this.finish_();
       } else if (result[1] == 49 /* PIN_INVALID */) {
         this.currentPINValid_ = false;
@@ -386,7 +406,7 @@ Polymer({
       } else {
         // Unknown error.
         this.errorCode_ = result[1];
-        this.shown_ = 'error';
+        this.shown_ = SetPINDialogPage.ERROR;
         this.finish_();
       }
     });

chrome/test/data/webui/settings/security_keys_subpage_test.js

@@ -205,17 +205,15 @@ function assertShown(allDivs, dialog, expectedID) {
 
 
 suite('SecurityKeysResetDialog', function() {
-  const allDivs = [
-    'initial', 'noReset', 'resetFailed', 'reset2', 'resetSuccess',
-    'resetNotAllowed'
-  ];
   let dialog = null;
+  let allDivs = null;
 
   setup(function() {
     browserProxy = new TestSecurityKeysResetBrowserProxy();
     settings.SecurityKeysResetBrowserProxyImpl.instance_ = browserProxy;
     PolymerTest.clearBody();
     dialog = document.createElement('settings-security-keys-reset-dialog');
+    allDivs = Object.values(settings.ResetDialogPage);
   });
 
   function assertComplete() {
@@ -278,7 +276,7 @@ suite('SecurityKeysResetDialog', function() {
     await browserProxy.whenCalled('reset');
     await browserProxy.whenCalled('completeReset');
     assertNotComplete();
-    assertShown(allDivs, dialog, 'reset2');
+    assertShown(allDivs, dialog, 'resetConfirm');
     promiseResolver.resolve(0 /* success */);
     await browserProxy.whenCalled('close');
     assertComplete();
@@ -315,17 +313,15 @@ suite('SecurityKeysResetDialog', function() {
 });
 
 suite('SecurityKeysSetPINDialog', function() {
-  const allDivs = [
-    'initial', 'noPINSupport', 'pinPrompt', 'success', 'error', 'locked',
-    'reinsert'
-  ];
   let dialog = null;
+  let allDivs = null;
 
   setup(function() {
     browserProxy = new TestSecurityKeysPINBrowserProxy();
     settings.SecurityKeysPINBrowserProxyImpl.instance_ = browserProxy;
     PolymerTest.clearBody();
     dialog = document.createElement('settings-security-keys-set-pin-dialog');
+    allDivs = Object.values(settings.SetPINDialogPage);
   });
 
   function assertComplete() {
@@ -556,8 +552,8 @@ suite('SecurityKeysSetPINDialog', function() {
 });
 
 suite('SecurityKeysCredentialManagement', function() {
-  const allDivs = ['initial', 'pinPrompt', 'credentials', 'error'];
   let dialog = null;
+  let allDivs = null;
 
   setup(function() {
     browserProxy = new TestSecurityKeysCredentialBrowserProxy();
@@ -565,6 +561,7 @@ suite('SecurityKeysCredentialManagement', function() {
     PolymerTest.clearBody();
     dialog = document.createElement(
         'settings-security-keys-credential-management-dialog');
+    allDivs = Object.values(settings.CredentialManagementDialogPage);
   });
 
   test('Initialization', async function() {
@@ -680,15 +677,15 @@ suite('SecurityKeysCredentialManagement', function() {
 });
 
 suite('SecurityKeysBioEnrollment', function() {
-  const allDivs =
-      ['initial', 'pinPrompt', 'enrollments', 'enroll', 'chooseName', 'error'];
   let dialog = null;
+  let allDivs = null;
 
   setup(function() {
     browserProxy = new TestSecurityKeysBioEnrollProxy();
     settings.SecurityKeysBioEnrollProxyImpl.instance_ = browserProxy;
     PolymerTest.clearBody();
     dialog = document.createElement('settings-security-keys-bio-enroll-dialog');
+    allDivs = Object.values(settings.BioEnrollDialogPage);
   });
 
   test('Initialization', async function() {