[MD Settings][People] Visual updates to the sync setup page.

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

 // Copyright 2015 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.
 
 (function() {
 
 /**
  * Names of the radio buttons which allow the user to choose his encryption
  * mechanism.
  * @enum {string}
@@ skipping 81 matching lines @@
      * Whether the "create passphrase" inputs should be shown. These inputs
      * give the user the opportunity to use a custom passphrase instead of
      * authenticating with his Google credentials.
      * @private
      */
     creatingNewPassphrase_: {
       type: Boolean,
       value: false,
     },
 
+    /**
+     * The passphrase input field value.
+     * @private
+     */
+    passphrase_: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * The passphrase confirmation input field value.
+     * @private
+     */
+    confirmation_: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * The existing passphrase input field value.
+     * @private
+     */
+    existingPassphrase_: {
+      type: String,
+      value: '',
+    },
+
     /** @private {!settings.SyncBrowserProxy} */
     browserProxy_: {
       type: Object,
       value: function() {
         return settings.SyncBrowserProxyImpl.getInstance();
       },
     },
 
     /**
      * The unload callback is needed because the sign-in flow needs to know
@@ skipping 141 matching lines @@
    * @private
    */
   onAutofillDataTypeChanged_: function() {
     this.set('syncPrefs.paymentsIntegrationEnabled',
              this.syncPrefs.autofillSynced);
 
     this.onSingleSyncDataTypeChanged_();
   },
 
   /**
+   * @param {string} passphrase The passphrase input field value
+   * @param {string} confirmation The passphrase confirmation input field value.
+   * @return {boolean} Whether the passphrase save button should be enabled.
+   * @private
+   */
+  isSaveNewPassphraseEnabled_: function(passphrase, confirmation) {
+    return passphrase !== '' && confirmation !== '';
+  },
+
+  /**
    * Sends the newly created custom sync passphrase to the browser.
    * @private
    */
   onSaveNewPassphraseTap_: function() {
     assert(this.creatingNewPassphrase_);
 
     // If a new password has been entered but it is invalid, do not send the
     // sync state to the API.
     if (!this.validateCreatedPassphrases_())
       return;
 
     this.syncPrefs.encryptAllData = true;
     this.syncPrefs.setNewPassphrase = true;
-    this.syncPrefs.passphrase = this.$$('#passphraseInput').value;
+    this.syncPrefs.passphrase = this.passphrase_;
 
     this.browserProxy_.setSyncEncryption(this.syncPrefs).then(
         this.handlePageStatusChanged_.bind(this));
   },
 
   /**
    * Sends the user-entered existing password to re-enable sync.
    * @private
    */
   onSubmitExistingPassphraseTap_: function() {
     assert(!this.creatingNewPassphrase_);
 
     this.syncPrefs.setNewPassphrase = false;
 
-    var existingPassphraseInput = this.$$('#existingPassphraseInput');
-    this.syncPrefs.passphrase = existingPassphraseInput.value;
-    existingPassphraseInput.value = '';
+    this.syncPrefs.passphrase = this.existingPassphrase_;
+    this.existingPassphrase_ = '';
 
     this.browserProxy_.setSyncEncryption(this.syncPrefs).then(
         this.handlePageStatusChanged_.bind(this));
   },
 
   /**
    * Called when the page status updates.
    * @param {!settings.PageStatus} pageStatus
    * @private
    */
@@ skipping 32 matching lines @@
    * Computed binding returning the selected encryption radio button.
    * @private
    */
   selectedEncryptionRadio_: function() {
     return this.syncPrefs.encryptAllData || this.creatingNewPassphrase_ ?
         RadioButtonNames.ENCRYPT_WITH_PASSPHRASE :
         RadioButtonNames.ENCRYPT_WITH_GOOGLE;
   },
 
   /**
-   * Computed binding returning the encryption text body.
+   * Computed binding returning text of the prompt for entering the passphrase.
    * @private
    */
-  encryptWithPassphraseBody_: function() {
-    if (this.syncPrefs && this.syncPrefs.fullEncryptionBody)
-      return this.syncPrefs.fullEncryptionBody;
+  enterPassphrasePrompt_: function() {
+    if (this.syncPrefs && this.syncPrefs.passphraseTypeIsCustom)
+      return this.syncPrefs.enterPassphraseBody;
 
-    return this.i18n('encryptWithSyncPassphraseLabel');
+    return this.syncPrefs.enterGooglePassphraseBody;
   },
 
   /**
    * @param {boolean} syncAllDataTypes
    * @param {boolean} enforced
    * @return {boolean} Whether the sync checkbox should be disabled.
    */
   shouldSyncCheckboxBeDisabled_: function(syncAllDataTypes, enforced) {
     return syncAllDataTypes || enforced;
   },
 
   /**
    * @param {boolean} syncAllDataTypes
    * @param {boolean} autofillSynced
    * @return {boolean} Whether the sync checkbox should be disabled.
    */
   shouldPaymentsCheckboxBeDisabled_: function(
       syncAllDataTypes, autofillSynced) {
     return syncAllDataTypes || !autofillSynced;
   },
 
   /**
    * Checks the supplied passphrases to ensure that they are not empty and that
-   * they match each other. Additionally, displays error UI if they are
-   * invalid.
+   * they match each other. Additionally, displays error UI if they are invalid.
    * @return {boolean} Whether the check was successful (i.e., that the
    *     passphrases were valid).
    * @private
    */
   validateCreatedPassphrases_: function() {
-    var passphraseInput = this.$$('#passphraseInput');
-    var passphraseConfirmationInput = this.$$('#passphraseConfirmationInput');
+    var emptyPassphrase = !this.passphrase_;
+    var mismatchedPassphrase = this.passphrase_ != this.confirmation_;
 
-    var passphrase = passphraseInput.value;
-    var confirmation = passphraseConfirmationInput.value;
-
-    var emptyPassphrase = !passphrase;
-    var mismatchedPassphrase = passphrase != confirmation;
-
-    passphraseInput.invalid = emptyPassphrase;
-    passphraseConfirmationInput.invalid =
+    this.$$('#passphraseInput').invalid = emptyPassphrase;
+    this.$$('#passphraseConfirmationInput').invalid =
         !emptyPassphrase && mismatchedPassphrase;
 
     return !emptyPassphrase && !mismatchedPassphrase;
   },
 });
 
 })();